@scania/tegel
Version:
Tegel Design System
103 lines (102 loc) • 4.05 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() {
/** If the item should appear selected. */
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, _b;
const dropdownEl = this.host.closest('tds-side-menu-dropdown');
let hasUserMenu = null;
let dropdownBtnIconSlotEl = null;
if (dropdownEl) {
hasUserMenu = dropdownEl.querySelector('tds-side-menu-user');
dropdownBtnIconSlotEl = (_a = dropdownEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="icon"]');
}
const btnIconSlottedEls = dropdownBtnIconSlotEl === null || dropdownBtnIconSlotEl === void 0 ? void 0 : dropdownBtnIconSlotEl.assignedElements();
const hasBtnIcon = btnIconSlottedEls ? (btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls.length) > 0 : false;
const btnIconIsUserImage = ((_b = btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls[0]) === null || _b === void 0 ? void 0 : _b.tagName.toLowerCase()) === 'tds-side-menu-user-image';
if (hasBtnIcon && !btnIconIsUserImage) {
this.dropdownHasIcon = true;
}
if (hasUserMenu) {
this.dropdownHasUser = true;
}
}
render() {
return (h(Host, { key: '10ccf22f0df6b2087d787cfc9afb95058da1f6a5', role: "listitem" }, h("div", { key: 'c99acea35abc14f96fc9bf8b084f6667a466bdcc', 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: 'e3dda9165b5fa9d7583032bd9b71d2cf6cbd74f1' }))));
}
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."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "selected",
"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
}];
}
}