@scania/tegel
Version:
Tegel Design System
76 lines (71 loc) • 4.25 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
import { d as defineCustomElement$2 } from './p-ea381f94.js';
const sideMenuCollapseButtonCss = ":host{position:sticky;bottom:0;display:none;height:68px;border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .icon{transform:rotateZ(90deg);transition:all 0.2s ease-in-out;width:20px;height:20px}:host .state-collapsed .icon{transform:translateX(-50%) rotateZ(90deg) rotateX(180deg);color:var(--tds-sidebar-side-menu-single-item-color);margin-left:0;position:absolute;left:50%}@media (min-width: 992px){:host{display:block}}";
const TdsSideMenuCollapseButtonStyle0 = sideMenuCollapseButtonCss;
const TdsSideMenuCollapseButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuCollapseButton extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.tdsCollapse = createEvent(this, "tdsCollapse", 3);
this.internalTdsCollapse = createEvent(this, "internalTdsCollapse", 6);
this.handleClick = () => {
/** Emit a public event that the user can prevent. */
const tdsCollapseEvent = this.tdsCollapse.emit({
collapsed: !this.collapsed,
});
/** If the public event was not prevented. */
if (!tdsCollapseEvent.defaultPrevented) {
/** Emit internal event that is listened to by other side-menu components */
this.collapsed = !this.collapsed;
this.internalTdsCollapse.emit({
collapsed: this.collapsed,
});
}
};
this.collapsed = false;
}
collapseSideMenuEventHandler(event) {
this.collapsed = event.detail.collapsed;
}
connectedCallback() {
this.sideMenuEl = this.host.closest('tds-side-menu');
this.collapsed = this.sideMenuEl.collapsed;
}
render() {
return (h(Host, { key: 'fecd00dc0ef2ce899b82ce304034b5b6f75704ed', role: "button", tabindex: "0", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
this.handleClick();
} }, h("div", { key: '6d7ae7bd95d8c4c37895d06ce8d4eaebe08e91dd', class: {
'wrapper': true,
'state-collapsed': this.collapsed,
} }, h("tds-side-menu-item", { key: '2cc8087248c6f9eee7943039092c5a45f9c2376d', class: {
button: true,
} }, h("a", { key: 'e2510c1f475b5f6ff3d1de367360fc2e34e0c0c0' }, h("svg", { key: '7ea54a6bcfb144cab3045fb34316eac400c59e43', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '3db930370416d9906ccdf821e6d43d0e6633534a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: '7fba28f202ca8089ffce93c051c8d6afc23afef7' }))))));
}
get host() { return this; }
static get style() { return TdsSideMenuCollapseButtonStyle0; }
}, [1, "tds-side-menu-collapse-button", {
"collapsed": [32]
}, [[16, "internalTdsSideMenuPropChange", "collapseSideMenuEventHandler"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-side-menu-collapse-button", "tds-side-menu-item"];
components.forEach(tagName => { switch (tagName) {
case "tds-side-menu-collapse-button":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsSideMenuCollapseButton$1);
}
break;
case "tds-side-menu-item":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const TdsSideMenuCollapseButton = TdsSideMenuCollapseButton$1;
const defineCustomElement = defineCustomElement$1;
export { TdsSideMenuCollapseButton, defineCustomElement };