@scania/tegel
Version:
Tegel Design System
96 lines (95 loc) • 3.73 kB
JavaScript
import { h, Host } from "@stencil/core";
/**
* @slot <default> - <b>Unnamed slot.</b> For injecting a native <code><button></code> or <code><a></code> element.
* */
export class TdsSideMenuDropdownListItem {
constructor() {
this.selected = false;
this.dropdownHasIcon = false;
this.dropdownHasUser = false;
this.collapsed = false;
}
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;
}
componentDidLoad() {
var _a;
const dropdownEl = this.host.closest('tds-side-menu-dropdown');
const hasUserMenu = dropdownEl === null || dropdownEl === void 0 ? void 0 : dropdownEl.querySelector('tds-side-menu-user');
const dropdownBtnIconSlotEl = dropdownEl.shadowRoot.querySelector('slot[name="icon"]');
const btnIconSlottedEls = dropdownBtnIconSlotEl.assignedElements();
const hasBtnIcon = (btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls.length) > 0;
const btnIconIsUserImage = ((_a = btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls[0]) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'tds-side-menu-user-image';
if (hasBtnIcon && !btnIconIsUserImage) {
this.dropdownHasIcon = true;
}
if (hasUserMenu) {
this.dropdownHasUser = true;
}
}
render() {
return (h(Host, { key: '7aedc4c01840378247f5b6f06f55f8763cd6533d', role: "listitem" }, h("div", { key: '60dd4aa980084396fb930f28a95d811fb394375a', class: {
'component': true,
'component-selected': this.selected,
'component-dropdown-has-icon': this.dropdownHasIcon,
'component-dropdown-has-user': this.dropdownHasUser,
'component-collapsed': this.collapsed,
} }, h("slot", { key: '75a256ed4d6674cb5d3bd7bc29026ea1e13b6489' }))));
}
static get is() { return "tds-side-menu-dropdown-list-item"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["side-menu-dropdown-list-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["side-menu-dropdown-list-item.css"]
};
}
static get properties() {
return {
"selected": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If the item should appear selected."
},
"attribute": "selected",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"dropdownHasIcon": {},
"dropdownHasUser": {},
"collapsed": {}
};
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "internalTdsSideMenuPropChange",
"method": "collapseSideMenuEventHandler",
"target": "body",
"capture": false,
"passive": false
}];
}
}