@scania/tegel/dist/esm/tds-side-menu-collapse-button.entry.js

Tegel Design System

import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-9xxNGlso.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 TdsSideMenuCollapseButton = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.tdsCollapse = createEvent(this, "tdsCollapse", 3);
        this.internalTdsCollapse = createEvent(this, "internalTdsCollapse", 6);
        this.collapsed = false;
        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,
                });
            }
        };
    }
    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);
    }
    render() {
        return (h(Host, { key: 'af4793f3c8b8c5cc028ebcc26ddbfcc33ae1471e' }, h("div", { key: '2f1b46a087dce36ca41171f93643c1f6216aeac7', class: {
                'wrapper': true,
                'state-collapsed': this.collapsed,
            } }, h("tds-side-menu-item", { key: '17de6280d2f2e695592d4e44b5918c3860d3fe80', class: { button: true } }, h("button", { key: '6d9fdaa1c0006305e1ff1388311e94b5868bbc3f', type: "button", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
                this.handleClick();
            } }, h("svg", { key: 'ad898232c2d2965b08eb2a44d19d65c0039ff298', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '5f6e67ff24fa04d193efebadec616feb6c0d6683', "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: '3793bcbed80fac4010820fbfd6752083e74a93d7' }))))));
    }
    get host() { return getElement(this); }
};
TdsSideMenuCollapseButton.style = sideMenuCollapseButtonCss();

export { TdsSideMenuCollapseButton as tds_side_menu_collapse_button };