@scania/tegel
Version:
Tegel Design System
201 lines (200 loc) • 7.76 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() {
this.defaultOpen = false;
this.buttonLabel = undefined;
this.selected = false;
this.open = false;
this.hoverState = undefined;
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() {
this.sideMenuEl = this.host.closest('tds-side-menu');
this.collapsed = this.sideMenuEl.collapsed;
this.open = this.defaultOpen;
}
render() {
return (h(Host, { key: '78a5c58e58b38e84cae96a9afd8166bfe3125a02' }, h("div", { key: '70e8e68e6db938cb2177169ca1836e84eb48cce6', class: {
'wrapper': true,
'state-open': this.getIsOpenState(),
'state-collapsed': this.collapsed,
} }, h("tds-side-menu-item", { key: '5834d5e804ad422937f2971637b3a70fb1fb676e', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
this.open = !this.open;
}, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'd454e6148a12c0bd1864b6c148f169ac342e9da2' }, h("slot", { key: '8a2579b751421d9df8e3dd5a84b04a5f844d383c', name: "icon" }), !this.collapsed && (h(Fragment, { key: 'f3419cc2993191186dccc9a208ff8150bf592eeb' }, this.buttonLabel, h("slot", { key: 'ff616384d76d6f3df82ac6abb12d65e4f6a5906d', name: "label" }), h("tds-icon", { key: 'a4acd9c0de3f437766673c57b4d73ac13cc8917b', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: 'db1ec059f4f1910d1fef432baff29810883ec2ef', class: "menu", tabindex: this.collapsed ? '0' : null }, this.collapsed && (h("h3", { key: 'a9f35f976da7ceaf38eb1c1641b43617e4e583c6', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: 'ef8b02b77b93b54f0a9aa4c5fb367356c12e9b82', name: "label" }))), h("slot", { key: '15c7c9e5a6a0615f478c5f93de8753211d17b3c3' })))));
}
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."
},
"attribute": "default-open",
"reflect": false,
"defaultValue": "false"
},
"buttonLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The label of the button that opens the dropdown.\nThis is an alternative to the label slot."
},
"attribute": "button-label",
"reflect": false
},
"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."
},
"attribute": "selected",
"reflect": false,
"defaultValue": "false"
},
"open": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Toggle open state programmatically"
},
"attribute": "open",
"reflect": false,
"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
}];
}
}