@scania/tegel
Version:
Tegel Design System
46 lines (41 loc) • 2.9 kB
JavaScript
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
const headerDropdownListUserCss = ":host{background-color:var(--tds-header-avatar-item-background);display:flex;height:84px}:host .user-box{gap:16px;width:100%;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host img,:host slot[name=thumbnail]::slotted(*){width:34px;border-radius:100%}:host .user-content{display:flex;flex-direction:column;gap:4px}:host .user-content .header{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host .user-content .subheader{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-header-avatar-item-color)}";
const TdsHeaderDropdownListUserStyle0 = headerDropdownListUserCss;
const TdsHeaderDropdownListLgUser = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDropdownListLgUser extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.imgUrl = undefined;
this.imgAlt = undefined;
this.header = undefined;
this.subheader = undefined;
}
render() {
return (h(Host, { key: 'ce178361998f3e7e64972a5a2971b3c39d9cd1eb', role: "listitem" }, h("div", { key: 'cd52038858fe6fb243f013d741343abd0bc529f1', class: "user-box" }, this.imgUrl && h("img", { key: '2f269c20c2e54695630b559002464f92a4f332bc', src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: '567bcc9d198d5e9e1a9ffd4c213dd2cf80ffbbb6', name: "thumbanil" }), h("div", { key: '06a2def2886269e2399a1b95850b077e8235fdfb', class: "user-content" }, h("div", { key: 'bb189ed4a6a22a884837d876255dcff7495c5200', class: "header" }, this.header, h("slot", { key: 'b88637de2dbff8fdc5f2280f123abd8b44d8f20e', name: "header" })), h("div", { key: '34b503dd4ec0ac5c450947e4019783af7074b777', class: "subheader" }, this.subheader, h("slot", { key: '8ffcd878217abd7036b304ed70ae12a4bd992350', name: "subheader" }))))));
}
get host() { return this; }
static get style() { return TdsHeaderDropdownListUserStyle0; }
}, [1, "tds-header-dropdown-list-user", {
"imgUrl": [1, "img-url"],
"imgAlt": [1, "img-alt"],
"header": [1],
"subheader": [1]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-header-dropdown-list-user"];
components.forEach(tagName => { switch (tagName) {
case "tds-header-dropdown-list-user":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsHeaderDropdownListLgUser);
}
break;
} });
}
defineCustomElement$1();
const TdsHeaderDropdownListUser = TdsHeaderDropdownListLgUser;
const defineCustomElement = defineCustomElement$1;
export { TdsHeaderDropdownListUser, defineCustomElement };