bottom-sheet
Version:
Bottom Sheet implemented as a Vanilla Web Component
63 lines (62 loc) • 1.76 kB
JavaScript
export class BottomSheetScreen {
constructor() {
this.enabled = false;
this.progress = 0;
}
connectedBottomSheetChanged() {
const { connectedBottomSheet } = this;
console.log('connectedBottomSheet changed to ', connectedBottomSheet);
}
componentDidLoad() {
this.connectedBottomSheetChanged();
}
progressChanged() {
this.enabled = this.progress > 0;
console.log(this.enabled, this.progress);
}
enable() {
this.enabled = true;
}
disable() {
this.enabled = false;
}
clickHandler() {
this.connectedBottomSheet.close();
}
hostData() {
return {
style: {
pointerEvents: this.enabled ? `all` : `none`,
opacity: `${this.progress}`
}
};
}
static get is() { return "bottom-sheet-screen"; }
static get encapsulation() { return "shadow"; }
static get properties() { return {
"connectedBottomSheet": {
"type": "Any",
"attr": "connected-bottom-sheet",
"watchCallbacks": ["connectedBottomSheetChanged"]
},
"disable": {
"method": true
},
"enable": {
"method": true
},
"enabled": {
"state": true
},
"progress": {
"type": Number,
"attr": "progress",
"watchCallbacks": ["progressChanged"]
}
}; }
static get listeners() { return [{
"name": "click",
"method": "clickHandler"
}]; }
static get style() { return "/**style-placeholder:bottom-sheet-screen:**/"; }
}