@scania/tegel
Version:
Tegel Design System
117 lines (116 loc) • 5.27 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.collapsed = false;
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,
});
}
};
}
collapseSideMenuEventHandler(event) {
this.collapsed = event.detail.collapsed;
}
connectedCallback() {
var _a;
this.sideMenuEl = this.host.closest('tds-side-menu');
this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
}
render() {
return (h(Host, { key: 'af4793f3c8b8c5cc028ebcc26ddbfcc33ae1471e' }, h("div", { key: '2f1b46a087dce36ca41171f93643c1f6216aeac7', class: {
'wrapper': true,
'state-collapsed': this.collapsed,
} }, h("tds-side-menu-item", { key: '17de6280d2f2e695592d4e44b5918c3860d3fe80', class: { button: true } }, h("button", { key: '6d9fdaa1c0006305e1ff1388311e94b5868bbc3f', type: "button", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
this.handleClick();
} }, h("svg", { key: 'ad898232c2d2965b08eb2a44d19d65c0039ff298', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '5f6e67ff24fa04d193efebadec616feb6c0d6683', "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: '3793bcbed80fac4010820fbfd6752083e74a93d7' }))))));
}
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",
"referenceLocation": "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",
"referenceLocation": "CollapseEvent"
}
}
}
}];
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "internalTdsSideMenuPropChange",
"method": "collapseSideMenuEventHandler",
"target": "body",
"capture": false,
"passive": false
}];
}
}