@scania/tegel
Version:
Tegel Design System
116 lines (115 loc) • 5.11 kB
JavaScript
import { h, Host } from "@stencil/core";
/**
* @slot <default> - <b>Unnamed slot.</b> For the text label of the button.
* */
export class TdsSideMenuCollapseButton {
constructor() {
this.handleClick = () => {
/** Emit a public event that the user can prevent. */
const tdsCollapseEvent = this.tdsCollapse.emit({
collapsed: !this.collapsed,
});
/** If the public event was not prevented. */
if (!tdsCollapseEvent.defaultPrevented) {
/** Emit internal event that is listened to by other side-menu components */
this.collapsed = !this.collapsed;
this.internalTdsCollapse.emit({
collapsed: this.collapsed,
});
}
};
this.collapsed = false;
}
collapseSideMenuEventHandler(event) {
this.collapsed = event.detail.collapsed;
}
connectedCallback() {
this.sideMenuEl = this.host.closest('tds-side-menu');
this.collapsed = this.sideMenuEl.collapsed;
}
render() {
return (h(Host, { key: 'fecd00dc0ef2ce899b82ce304034b5b6f75704ed', role: "button", tabindex: "0", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
this.handleClick();
} }, h("div", { key: '6d7ae7bd95d8c4c37895d06ce8d4eaebe08e91dd', class: {
'wrapper': true,
'state-collapsed': this.collapsed,
} }, h("tds-side-menu-item", { key: '2cc8087248c6f9eee7943039092c5a45f9c2376d', class: {
button: true,
} }, h("a", { key: 'e2510c1f475b5f6ff3d1de367360fc2e34e0c0c0' }, h("svg", { key: '7ea54a6bcfb144cab3045fb34316eac400c59e43', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '3db930370416d9906ccdf821e6d43d0e6633534a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: '7fba28f202ca8089ffce93c051c8d6afc23afef7' }))))));
}
static get is() { return "tds-side-menu-collapse-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["side-menu-collapse-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["side-menu-collapse-button.css"]
};
}
static get states() {
return {
"collapsed": {}
};
}
static get events() {
return [{
"method": "tdsCollapse",
"name": "tdsCollapse",
"bubbles": false,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event that is broadcast when the collapse button is clicked.\nPrevent it from disabling automatic collapsing, and set the collapsed prop on the Side Menu yourself."
},
"complexType": {
"original": "CollapseEvent",
"resolved": "{ collapsed: boolean; }",
"references": {
"CollapseEvent": {
"location": "import",
"path": "../side-menu",
"id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
}
}
}
}, {
"method": "internalTdsCollapse",
"name": "internalTdsCollapse",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": "Event that is broadcast when the internal collapse state changes. Contains the future of the collapse state."
}],
"text": ""
},
"complexType": {
"original": "CollapseEvent",
"resolved": "{ collapsed: boolean; }",
"references": {
"CollapseEvent": {
"location": "import",
"path": "../side-menu",
"id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
}
}
}
}];
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "internalTdsSideMenuPropChange",
"method": "collapseSideMenuEventHandler",
"target": "body",
"capture": false,
"passive": false
}];
}
}