@siemens/ix 4.4.0 → 5.1.0

package/dist/cjs/animation-D5wGQwTg.js

@@ -1,100 +0,0 @@
-'use strict';
-
-var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f)
-        throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-        throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m")
-        throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f)
-        throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-        throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _a, _Animation_FALLBACKS, _Animation_cache;
-class Animation {
-    static parseTime(raw, fallback) {
-        const value = raw.trim();
-        if (value.length === 0)
-            return fallback;
-        const match = value.match(/^(-?\d*\.?\d+)(ms|s)?$/);
-        if (!match)
-            return fallback;
-        const [, amount, unit = 'ms'] = match;
-        const parsed = Number(amount);
-        if (!Number.isFinite(parsed))
-            return fallback;
-        return unit === 's' ? parsed * 1000 : parsed;
-    }
-    static ensureCache() {
-        if (__classPrivateFieldGet(this, _a, "f", _Animation_cache) !== null)
-            return;
-        if (typeof window === 'undefined') {
-            // SSR only
-            __classPrivateFieldSet(this, _a, Object.assign({}, __classPrivateFieldGet(this, _a, "f", _Animation_FALLBACKS)), "f", _Animation_cache);
-            return;
-        }
-        const root = document.documentElement || document.body;
-        const styles = window.getComputedStyle(root);
-        const read = (varName, fallback) => {
-            var _b;
-            const raw = (_b = styles.getPropertyValue(varName)) === null || _b === void 0 ? void 0 : _b.trim();
-            if (!raw)
-                return fallback;
-            return this.parseTime(raw, fallback);
-        };
-        __classPrivateFieldSet(this, _a, {
-            short: read('--theme-short-time', __classPrivateFieldGet(this, _a, "f", _Animation_FALLBACKS).short),
-            default: read('--theme-default-time', __classPrivateFieldGet(this, _a, "f", _Animation_FALLBACKS).default),
-            medium: read('--theme-medium-time', __classPrivateFieldGet(this, _a, "f", _Animation_FALLBACKS).medium),
-            slow: read('--theme-slow-time', __classPrivateFieldGet(this, _a, "f", _Animation_FALLBACKS).slow),
-            xslow: read('--theme-x-slow-time', __classPrivateFieldGet(this, _a, "f", _Animation_FALLBACKS).xslow),
-        }, "f", _Animation_cache);
-    }
-    static prefersReducedMotion() {
-        if (typeof window === 'undefined' || !window.matchMedia)
-            return false;
-        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    }
-    static get shortTime() {
-        this.ensureCache();
-        const t = __classPrivateFieldGet(this, _a, "f", _Animation_cache).short;
-        return this.prefersReducedMotion() ? 0 : t;
-    }
-    static get defaultTime() {
-        this.ensureCache();
-        const t = __classPrivateFieldGet(this, _a, "f", _Animation_cache).default;
-        return this.prefersReducedMotion() ? 0 : t;
-    }
-    static get mediumTime() {
-        this.ensureCache();
-        const t = __classPrivateFieldGet(this, _a, "f", _Animation_cache).medium;
-        return this.prefersReducedMotion() ? 0 : t;
-    }
-    static get slowTime() {
-        this.ensureCache();
-        const t = __classPrivateFieldGet(this, _a, "f", _Animation_cache).slow;
-        return this.prefersReducedMotion() ? 0 : t;
-    }
-    static get xSlowTime() {
-        this.ensureCache();
-        const t = __classPrivateFieldGet(this, _a, "f", _Animation_cache).xslow;
-        return this.prefersReducedMotion() ? 0 : t;
-    }
-}
-_a = Animation;
-_Animation_FALLBACKS = { value: {
-        short: 0,
-        default: 150,
-        medium: 300,
-        slow: 500,
-        xslow: 1000,
-    } };
-_Animation_cache = { value: null };
-
-exports.Animation = Animation;

package/dist/cjs/app-globals-Cu3bQGoC.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var setup = require('./setup-icNDj1cf.js');
-
-const appGlobalScript = setup.setup || (() => {});
-const globalScripts = appGlobalScript;
-
-exports.globalScripts = globalScripts;

package/dist/cjs/dropdown-controller-BLOjtc6w.js

@@ -1,157 +0,0 @@
-'use strict';
-
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-function hasDropdownItemWrapperImplemented(item) {
-    return (item !== null &&
-        item.getDropdownItemElement !== undefined &&
-        typeof item.getDropdownItemElement === 'function');
-}
-class DropdownController {
-    constructor() {
-        this.dropdowns = new Map();
-        this.submenuIds = {};
-        this.isWindowListenerActive = false;
-    }
-    connected(dropdown) {
-        if (!this.isWindowListenerActive) {
-            this.addOverlayListeners();
-        }
-        this.dropdowns.set(dropdown.getId(), dropdown);
-        if (dropdown.discoverAllSubmenus) {
-            this.discoverSubmenus();
-        }
-    }
-    disconnected(dropdown) {
-        const id = dropdown.getId();
-        this.removeFromSubmenuIds(id);
-        this.dropdowns.delete(id);
-    }
-    removeFromSubmenuIds(id) {
-        this.dropdowns.forEach((dropdown) => {
-            const submenuIds = this.submenuIds[dropdown.getId()];
-            if (submenuIds) {
-                const index = submenuIds.indexOf(id);
-                if (index > -1) {
-                    submenuIds.splice(index, 1);
-                }
-            }
-        });
-        delete this.submenuIds[id];
-    }
-    getDropdownById(id) {
-        return this.dropdowns.get(id);
-    }
-    discoverSubmenus() {
-        this.dropdowns.forEach((dropdown) => {
-            dropdown.discoverSubmenu();
-        });
-    }
-    present(dropdown) {
-        var _a;
-        if (!dropdown.isPresent() && ((_a = dropdown.willPresent) === null || _a === void 0 ? void 0 : _a.call(dropdown))) {
-            this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();
-            dropdown.present();
-        }
-    }
-    dismissChildren(uid) {
-        const childIds = this.submenuIds[uid] || [];
-        for (const id of childIds) {
-            const dropdown = this.dropdowns.get(id);
-            if (dropdown) {
-                this.dismiss(dropdown);
-            }
-        }
-    }
-    dismiss(dropdown) {
-        var _a;
-        if (dropdown.isPresent() && ((_a = dropdown.willDismiss) === null || _a === void 0 ? void 0 : _a.call(dropdown))) {
-            this.dismissChildren(dropdown.getId());
-            dropdown.dismiss();
-            delete this.submenuIds[dropdown.getId()];
-        }
-    }
-    dismissAll(ignoreBehaviorForIds = [], ignoreRelatedDropdowns = false) {
-        this.dropdowns.forEach((dropdown) => {
-            const preventClosing = dropdown.closeBehavior === 'inside' || dropdown.closeBehavior === false;
-            const shouldIgnore = ignoreBehaviorForIds.includes(dropdown.getId());
-            const path = this.buildComposedPath(dropdown.getId(), new Set());
-            if (ignoreBehaviorForIds.length > 0 && ignoreRelatedDropdowns) {
-                let skipRelatedDropdown = false;
-                ignoreBehaviorForIds.forEach((id) => {
-                    if (path.has(id)) {
-                        skipRelatedDropdown = true;
-                        return;
-                    }
-                });
-                if (!skipRelatedDropdown) {
-                    return;
-                }
-            }
-            if (!shouldIgnore && preventClosing) {
-                return;
-            }
-            this.dismiss(dropdown);
-        });
-    }
-    dismissOthers(uid) {
-        let path = this.buildComposedPath(uid, new Set());
-        path.add(uid);
-        this.dropdowns.forEach((dropdown) => {
-            if (dropdown.closeBehavior !== 'inside' &&
-                dropdown.closeBehavior !== false &&
-                !path.has(dropdown.getId())) {
-                this.dismiss(dropdown);
-            }
-        });
-    }
-    pathIncludesTrigger(eventTargets) {
-        for (let eventTarget of eventTargets) {
-            if (eventTarget instanceof HTMLElement) {
-                if (eventTarget.hasAttribute('data-ix-dropdown-trigger')) {
-                    return eventTarget;
-                }
-            }
-        }
-        return;
-    }
-    pathIncludesDropdown(eventTargets) {
-        return !!eventTargets.find((element) => element.tagName === 'IX-DROPDOWN');
-    }
-    buildComposedPath(id, path) {
-        if (this.submenuIds[id]) {
-            path.add(id);
-        }
-        for (const ruleKey of Object.keys(this.submenuIds)) {
-            if (this.submenuIds[ruleKey].includes(id)) {
-                this.buildComposedPath(ruleKey, path).forEach((key) => path.add(key));
-            }
-        }
-        return path;
-    }
-    addOverlayListeners() {
-        this.isWindowListenerActive = true;
-        window.addEventListener('click', (event) => {
-            const hasTrigger = this.pathIncludesTrigger(event.composedPath());
-            const hasDropdown = this.pathIncludesDropdown(event.composedPath());
-            if (!hasTrigger && !hasDropdown) {
-                this.dismissAll();
-            }
-        });
-        window.addEventListener('keydown', (event) => {
-            if (event.key === 'Escape') {
-                this.dismissAll([...this.dropdowns.keys()]);
-            }
-        });
-    }
-}
-const dropdownController = new DropdownController();
-
-exports.dropdownController = dropdownController;
-exports.hasDropdownItemWrapperImplemented = hasDropdownItemWrapperImplemented;

package/dist/cjs/find-element-D7yD1Ukn.js

@@ -1,103 +0,0 @@
-'use strict';
-
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * Will try to resolve the selector in the light dom, shadow dom or slot
- * @param selector The selector to resolve
- * @param hostElement The element to start the search from
- * @returns Promise with the resolved elements or undefined if not found
- */
-async function resolveSelector(selector, hostElement) {
-    const elements = Array.from(document.querySelectorAll(selector));
-    if (elements.length > 0) {
-        return Promise.resolve(elements);
-    }
-    if (hostElement === undefined) {
-        return Promise.resolve(undefined);
-    }
-    const shadowRoot = getRootFor(hostElement);
-    if (shadowRoot === undefined || !(shadowRoot instanceof ShadowRoot)) {
-        return Promise.resolve(undefined);
-    }
-    const elementsInShadowRoot = Array.from(shadowRoot.querySelectorAll(selector));
-    const elementsInHost = Array.from(shadowRoot.host.querySelectorAll(selector));
-    const elementsInComponent = [
-        ...elementsInHost,
-        ...elementsInShadowRoot,
-    ];
-    if (elementsInComponent.length > 0) {
-        return Promise.resolve(elementsInComponent);
-    }
-    return Promise.resolve(undefined);
-}
-/**
- * Walk up the DOM to find the nearest shadow root
- * @param element The element to get the root for
- * @param parent This will determine how far up the DOM to travel to find the root
- * @returns The root element
- */
-function getRootFor(element, parent = document.body) {
-    if (!element.parentElement && !element.parentNode) {
-        return undefined;
-    }
-    if (element.parentNode instanceof ShadowRoot) {
-        return element.parentNode;
-    }
-    let currentNode = element.parentElement;
-    while (currentNode) {
-        if (currentNode.shadowRoot) {
-            return currentNode.shadowRoot;
-        }
-        else if (currentNode.parentNode instanceof ShadowRoot) {
-            return currentNode.parentNode;
-        }
-        currentNode = currentNode.parentElement;
-    }
-    return parent;
-}
-function waitForSelector(selector, node = document, hostElement) {
-    return new Promise((resolve) => {
-        const waitForElements = () => {
-            resolveSelector(selector, hostElement).then((elements) => {
-                if (elements && elements.length > 0) {
-                    resolve(elements[0]);
-                    observer === null || observer === void 0 ? void 0 : observer.disconnect();
-                }
-            });
-        };
-        waitForElements();
-        const observer = new MutationObserver(() => {
-            waitForElements();
-        });
-        observer.observe(node.body, {
-            childList: true,
-            subtree: true,
-        });
-    });
-}
-/**
- * Find an element by ID or reference
- * @param element The element to find
- * @param hostElement The element to start the search from
- * @returns A promise that will resolve to the element
- */
-function findElement(element, hostElement) {
-    if (element instanceof Promise) {
-        return element;
-    }
-    if (typeof element === 'object') {
-        return Promise.resolve(element);
-    }
-    const selector = `#${element}`;
-    return waitForSelector(selector, document, hostElement);
-}
-
-exports.findElement = findElement;
-exports.resolveSelector = resolveSelector;

package/dist/cjs/focus-Cl8_98b5.js

@@ -1,67 +0,0 @@
-'use strict';
-
-var disposableEventListener = require('./disposable-event-listener-BALEIeXq.js');
-
-/*
- * SPDX-FileCopyrightText: 2023 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-class ArrowFocusController {
-    constructor(items, container, callback) {
-        this.wrap = false;
-        this.items = items;
-        this.container = container;
-        this.callback = callback;
-        this.keyListener = disposableEventListener.addDisposableEventListener(container, 'keydown', (e) => this.onKeyDown(e));
-    }
-    getActiveIndex() {
-        if (!document.activeElement) {
-            return -1;
-        }
-        return this.items.indexOf(document.activeElement);
-    }
-    onKeyDown(e) {
-        var _a, _b, _c, _d;
-        const activeIndex = this.getActiveIndex();
-        if (activeIndex < 0) {
-            return;
-        }
-        switch (e.key) {
-            case 'ArrowDown':
-                if (activeIndex < this.items.length - 1) {
-                    e.preventDefault();
-                    (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, activeIndex + 1);
-                }
-                else if (this.wrap) {
-                    e.preventDefault();
-                    (_b = this.callback) === null || _b === void 0 ? void 0 : _b.call(this, 0);
-                }
-                break;
-            case 'ArrowUp':
-                {
-                    if (activeIndex > 0) {
-                        e.preventDefault();
-                        (_c = this.callback) === null || _c === void 0 ? void 0 : _c.call(this, activeIndex - 1);
-                    }
-                    else if (this.wrap && activeIndex === 0) {
-                        e.preventDefault();
-                        (_d = this.callback) === null || _d === void 0 ? void 0 : _d.call(this, this.items.length - 1);
-                    }
-                }
-                break;
-        }
-    }
-    disconnect() {
-        if (this.keyListener) {
-            this.keyListener();
-        }
-        this.container = undefined;
-        this.callback = undefined;
-    }
-}
-
-exports.ArrowFocusController = ArrowFocusController;

package/dist/cjs/ix-application-sidebar.cjs.entry.js

@@ -1,42 +0,0 @@
-'use strict';
-
-var index = require('./index-Dxeom0qd.js');
-var anime_esm = require('./anime.esm-AXTM6yn_.js');
-var animation = require('./animation-D5wGQwTg.js');
-
-const applicationSidebarCss = () => `:host{display:block;position:relative;width:22rem;height:100%;padding:0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host(.visible){border-right:2px solid var(--theme-color-soft-bdr);padding:1.5rem 0.5rem 0}`;
-
-const ApplicationSidebar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.visible = true;
-    }
-    listenToggleEvent() {
-        const visibility = !this.visible;
-        const animation$1 = {
-            width: visibility ? ['0', '22rem'] : ['22rem', '0'],
-            opacity: visibility ? [0, 1] : [1, 0],
-            easing: 'easeInSine',
-            duration: animation.Animation.defaultTime,
-        };
-        const changeVisibility = () => {
-            this.visible = visibility;
-        };
-        if (visibility) {
-            animation$1.begin = changeVisibility.bind(this);
-        }
-        else {
-            animation$1.complete = changeVisibility.bind(this);
-        }
-        anime_esm.animate(this.hostElement, animation$1);
-    }
-    render() {
-        return (index.h(index.Host, { key: '9930b3444817c8ad6c3da375484018d294897472', slot: "application-sidebar", class: {
-                visible: this.visible,
-            } }, this.visible ? index.h("slot", null) : null));
-    }
-    get hostElement() { return index.getElement(this); }
-};
-ApplicationSidebar.style = applicationSidebarCss();
-
-exports.ix_application_sidebar = ApplicationSidebar;

package/dist/cjs/ix-drawer.cjs.entry.js

@@ -1,166 +0,0 @@
-'use strict';
-
-var index = require('./index-Dxeom0qd.js');
-var index$1 = require('./index-DIYO-Liy.js');
-var anime_esm = require('./anime.esm-AXTM6yn_.js');
-var animation = require('./animation-D5wGQwTg.js');
-
-const drawerCss = () => `:host{top:0;right:0;display:block;position:absolute;justify-content:flex-start;align-items:center;opacity:0;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;box-shadow:var(--theme-box-shadow-level-3)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .drawer-container{z-index:100}:host .header{display:flex;position:relative;align-items:center;justify-content:flex-end;padding:0.5rem;width:100%;order:1}:host .header .header-content{flex-grow:1;margin-right:1rem}:host .content{position:relative;flex:1;order:2;height:100%;width:100%;overflow-y:auto}:host(.display-none){display:none}`;
-
-const Drawer = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.open = index.createEvent(this, "open", 7);
-        this.drawerClose = index.createEvent(this, "drawerClose", 7);
-        /**
-         * Show or hide the drawer
-         */
-        this.show = false;
-        /**
-         * Fired in case of an outside click during drawer showed state
-         */
-        // eslint-disable-next-line @stencil-community/ban-default-true
-        this.closeOnClickOutside = true;
-        /**
-         * Render the drawer with maximum height
-         */
-        this.fullHeight = false;
-        /**
-         * Min width interpreted as REM
-         */
-        this.minWidth = 16;
-        /**
-         * Max width interpreted as REM
-         */
-        this.maxWidth = 28;
-        /**
-         * Width interpreted as REM if not set to 'auto'
-         */
-        this.width = this.minWidth;
-        /**
-         * ARIA label for the close icon button
-         * Will be set as aria-label on the nested HTML button element
-         *
-         * @since 3.2.0
-         */
-        this.ariaLabelCloseButton = 'Close drawer';
-        this.toggle = false;
-        this.callback = this.clickedOutside.bind(this);
-        this.showContent = true;
-    }
-    onShowChanged(newValue, oldValue) {
-        if (newValue === oldValue) {
-            return;
-        }
-        this.toggleDrawer(newValue);
-    }
-    /**
-     * Toggle or define show state of drawer
-     * @param show Overwrite toggle state with boolean
-     */
-    async toggleDrawer(show) {
-        show = show !== null && show !== void 0 ? show : !this.show;
-        if (show) {
-            const { defaultPrevented } = this.open.emit();
-            if (defaultPrevented) {
-                return;
-            }
-            this.show = true;
-            if (!this.toggle && this.divElement) {
-                this.slideInRight(this.divElement);
-                setTimeout(() => {
-                    window.addEventListener('mousedown', this.callback);
-                }, animation.Animation.mediumTime);
-            }
-        }
-        else {
-            const { defaultPrevented } = this.drawerClose.emit();
-            if (defaultPrevented) {
-                return;
-            }
-            this.show = false;
-            if (this.toggle && this.divElement) {
-                this.slideOutRight(this.divElement);
-            }
-            window.removeEventListener('mousedown', this.callback);
-        }
-        this.toggle = this.show;
-        return Promise.resolve();
-    }
-    onCloseClicked() {
-        this.show = false;
-    }
-    clickedOutside(evt) {
-        if (!this.closeOnClickOutside) {
-            return;
-        }
-        const target = evt.target;
-        const closestElement = target.closest('#div-container');
-        const btn = target.closest('#drawer-btn');
-        if (evt.target.type !== 'button' &&
-            closestElement !== this.divElement &&
-            target !== btn) {
-            this.show = false;
-        }
-    }
-    getConstrainedWidth(width) {
-        return Math.min(Math.max(width, this.minWidth), this.maxWidth);
-    }
-    slideOutRight(el) {
-        const initialWidth = `${this.getConstrainedWidth(this.width === 'auto' ? this.minWidth : this.width)}rem`;
-        anime_esm.animate(el, {
-            duration: animation.Animation.mediumTime,
-            width: [initialWidth, 0],
-            opacity: [1, 0],
-            easing: 'easeInSine',
-            onComplete: () => {
-                el.classList.add('display-none');
-            },
-        });
-    }
-    slideInRight(el) {
-        const targetWidth = `${this.getConstrainedWidth(this.width === 'auto' ? this.minWidth : this.width)}rem`;
-        anime_esm.animate(el, {
-            duration: animation.Animation.mediumTime,
-            width: [0, targetWidth],
-            opacity: [0, 1],
-            easing: 'easeOutSine',
-            onBegin: () => {
-                el.classList.remove('display-none');
-            },
-            onComplete: () => {
-                this.showContent = true;
-            },
-        });
-    }
-    componentDidLoad() {
-        this.toggleDrawer(this.show);
-    }
-    render() {
-        return (index.h(index.Host, { key: 'a02782f51fdf141ff257988beec49cdaff3f0050', class: {
-                'drawer-container': true,
-                'display-none': true,
-            }, style: {
-                width: '0',
-                'max-width': `${this.maxWidth}rem`,
-                height: this.fullHeight ? '100%' : 'auto',
-                overflow: 'hidden',
-            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, index.h("div", { key: '6b7464b407c72c9b7afe3b1b9fa61b1603bb40d8', style: {
-                width: this.width === 'auto'
-                    ? 'auto'
-                    : `${this.getConstrainedWidth(this.width)}rem`,
-            } }, index.h("div", { key: 'c25f79cde5e320e7e5f8aab9b87aca34fff4bdae', class: "header" }, index.h("div", { key: '413490aaef2405978027796a7bb49a410640bd53', class: "header-content" }, index.h("slot", { key: '89fe41129f30752f5057b6f73d8232599c1aae9b', name: "header" })), index.h("ix-icon-button", { key: 'eef54b3d59ebf9db5d96f0f3241f14d16a0c6064', class: "close-button", style: {
-                display: this.showContent ? 'block' : 'none',
-            }, icon: index$1.iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.onCloseClicked(), "data-testid": "close-button", "aria-label": this.ariaLabelCloseButton })), index.h("div", { key: '3f77f8e65f38c19cf06b1cae288f9cf257a094c1', class: "content", style: {
-                display: this.showContent ? 'block' : 'none',
-            } }, index.h("slot", { key: 'a12cc29a8ad94ae58295361bf781df4068d01403' })))));
-    }
-    static get watchers() { return {
-        "show": [{
-                "onShowChanged": 0
-            }]
-    }; }
-};
-Drawer.style = drawerCss();
-
-exports.ix_drawer = Drawer;