refactor(components): update to use shadow DOM and work with css variables

- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates

Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
Brandy Carney
2018-07-09 12:57:21 -04:00
parent a4659f03b4
commit a7f1f4daa7
710 changed files with 20999 additions and 20853 deletions

View File

@ -1,5 +1,4 @@
import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, State, Watch } from '@stencil/core';
import { QueueController } from '../../interface';
import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
@Component({
tag: 'ion-infinite-scroll',
@ -9,14 +8,14 @@ export class InfiniteScroll {
private thrPx = 0;
private thrPc = 0;
private scrollEl?: HTMLIonScrollElement | null;
private scrollEl?: HTMLIonScrollElement;
private didFire = false;
private isBusy = false;
@Element() el!: HTMLElement;
@State() isLoading = false;
@Prop({ context: 'queue' }) queue!: QueueController;
@Prop({ context: 'queue' }) queue!: QueueApi;
@Prop({ context: 'enableListener' }) enableListener!: EventListenerEnable;
/**
@ -75,14 +74,13 @@ export class InfiniteScroll {
*/
@Event() ionInfinite!: EventEmitter<void>;
async componentWillLoad() {
const scrollEl = this.el.closest('ion-scroll');
if (scrollEl) {
this.scrollEl = await scrollEl.componentOnReady();
}
}
componentDidLoad() {
async componentDidLoad() {
const contentEl = this.el.closest('ion-content');
if (contentEl) {
await contentEl.componentOnReady();
this.scrollEl = contentEl.getScrollElement();
}
this.thresholdChanged(this.threshold);
this.enableScrollEvents(!this.disabled);
if (this.position === 'top') {