@scania/tegel
Version:
Tegel Design System
215 lines (214 loc) • 8.32 kB
JavaScript
import { Fragment, h, Host } from "@stencil/core";
/**
* @slot icon - Used for injecting the icon that compliments the dropdown title
* @slot label - Used for injecting the text, aka dropdown title
* @slot <default> - <b>Unnamed slot.</b> For injection of the <code>tds-side-menu-dropdown-list</code> subcomponent.
* */
export class TdsSideMenuDropdown {
constructor() {
/** If the dropdown should be open from the start. */
this.defaultOpen = false;
/** If the button that opens the dropdown should appear selected. */
this.selected = false;
/** Toggle open state programmatically */
this.open = false;
this.hoverState = {
isHovered: false,
updatedAt: 0,
};
this.collapsed = false;
}
collapsedSideMenuEventHandler(event) {
this.collapsed = event.detail.collapsed;
}
onEventPointerEnter() {
this.setHoverStateOpen();
}
onEventFocus() {
this.setHoverStateOpen();
}
onEventPointerLeave() {
this.setHoverStateClosed();
}
onEventBlur() {
this.setHoverStateClosed();
}
handleKeyDown(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
this.open = !this.open;
}
}
setHoverStateOpen() {
this.hoverState = { isHovered: true, updatedAt: Date.now() };
}
setHoverStateClosed() {
const leftAt = Date.now();
const toleranceInMilliseconds = 150;
setTimeout(() => {
if (this.hoverState.isHovered && this.hoverState.updatedAt < leftAt) {
this.hoverState = { isHovered: false, updatedAt: Date.now() };
}
}, toleranceInMilliseconds);
}
getIsOpenState() {
var _a;
return this.collapsed ? (_a = this.hoverState) === null || _a === void 0 ? void 0 : _a.isHovered : this.open;
}
connectedCallback() {
var _a;
this.sideMenuEl = this.host.closest('tds-side-menu');
this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
this.open = this.defaultOpen;
}
render() {
return (h(Host, { key: '61c0e4c1df178d14422de845086864c8de3cf231' }, h("div", { key: '775032857d13a5d9f01f5bbe22de87480bceddfe', class: {
'wrapper': true,
'state-open': this.getIsOpenState(),
'state-collapsed': this.collapsed,
} }, h("tds-side-menu-item", { key: 'dd599c6234d4f9d6c11aa680371e69ab64ea7a2e', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
this.open = !this.open;
}, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'da26f06483ad9348e9442c5aec70ee2f3af184e5' }, h("slot", { key: 'ce95165a9e75cf9f150364f40c5dd49bbc795ca5', name: "icon" }), !this.collapsed && (h(Fragment, { key: '524ef1b9a67c9a4c950691da6e16ba7100fae6b6' }, this.buttonLabel, h("slot", { key: '812088f502894d42dc5c658a8035f6212c7f1876', name: "label" }), h("tds-icon", { key: 'c68ec5d4c5ea3541bff95e4d7baf07098b953f07', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: 'bc99efa3ca9b83b0d6e599db85e193a91258bad1', class: "menu", tabindex: this.collapsed ? '0' : undefined }, this.collapsed && (h("h3", { key: 'c9a5f0aba4df7d2e22b9e84f75db46be8892c07c', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: 'd45b96b5941b1ad4f19e96ea023d6b513d54f9e0', name: "label" }))), h("slot", { key: '67f16383ec5ce1c10d3a1be8488932972891ef4c' })))));
}
static get is() { return "tds-side-menu-dropdown"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["side-menu-dropdown.scss"]
};
}
static get styleUrls() {
return {
"$": ["side-menu-dropdown.css"]
};
}
static get properties() {
return {
"defaultOpen": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If the dropdown should be open from the start."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "default-open",
"defaultValue": "false"
},
"buttonLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The label of the button that opens the dropdown.\nThis is an alternative to the label slot."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "button-label"
},
"selected": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If the button that opens the dropdown should appear selected."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "selected",
"defaultValue": "false"
},
"open": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Toggle open state programmatically"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "open",
"defaultValue": "false"
}
};
}
static get states() {
return {
"hoverState": {},
"collapsed": {}
};
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "internalTdsSideMenuPropChange",
"method": "collapsedSideMenuEventHandler",
"target": "body",
"capture": false,
"passive": false
}, {
"name": "pointerenter",
"method": "onEventPointerEnter",
"target": undefined,
"capture": false,
"passive": true
}, {
"name": "focusin",
"method": "onEventFocus",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "pointerleave",
"method": "onEventPointerLeave",
"target": undefined,
"capture": false,
"passive": true
}, {
"name": "focusout",
"method": "onEventBlur",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "keydown",
"method": "handleKeyDown",
"target": undefined,
"capture": false,
"passive": false
}];
}
}