@paraboly/pwc-sliding-panel
Version:
A panel that slides open from the sides of the page when you click a handle.
79 lines (78 loc) • 2.29 kB
JavaScript
import { h } from "@stencil/core";
export class PwcSlidingPanel {
constructor() {
this.active = false;
this.anchor = "left";
}
activeWatchHandler(newValue) {
if (newValue) {
this.root.classList.add("pwc-sliding-panel___active");
}
else {
this.root.classList.remove("pwc-sliding-panel___active");
}
}
toggledListener() {
this.active = !this.active;
}
render() {
return h("slot", null);
}
static get is() { return "pwc-sliding-panel"; }
static get originalStyleUrls() { return {
"$": ["pwc-sliding-panel.scss"]
}; }
static get styleUrls() { return {
"$": ["pwc-sliding-panel.css"]
}; }
static get properties() { return {
"active": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "active",
"reflect": true,
"defaultValue": "false"
},
"anchor": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"left\" | \"right\"",
"resolved": "\"left\" | \"right\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "anchor",
"reflect": true,
"defaultValue": "\"left\""
}
}; }
static get elementRef() { return "root"; }
static get watchers() { return [{
"propName": "active",
"methodName": "activeWatchHandler"
}]; }
static get listeners() { return [{
"name": "toggled",
"method": "toggledListener",
"target": undefined,
"capture": false,
"passive": false
}]; }
}