@siemens/ix 4.4.0 → 5.1.0

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

@@ -1,17 +1,16 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var index$2 = require('./index-DIYO-Liy.js');
-var a11y = require('./a11y-DldCLr8D.js');
-var index$1 = require('./index-BxmN3RtX.js');
-var service = require('./service-DuiJmf7R.js');
-var context = require('./context-CmNuiaNz.js');
+var index = require('./index-DnclGKUw.js');
+var index$2 = require('./index-CwJ-mkQd.js');
+var a11y = require('./a11y-_XjpTo2w.js');
+var index$1 = require('./index-SVeYVn-h.js');
+var context = require('./context-DqdXbKw_.js');
 var breakpoints = require('./breakpoints-C5ZrUCbZ.js');
-var menuService = require('./menu-service-CW0vT80Q.js');
-var shadowDom = require('./shadow-dom-DT01VwcB.js');
-require('./animation-D5wGQwTg.js');
-require('./modal-BPMUkqrW.js');
-require('./typed-event-DxWATHPL.js');
+var menuService = require('./menu-service-DBg-0e5W.js');
+var shadowDom = require('./shadow-dom-BL5F7RFW.js');
+var service = require('./service-CRjXhKel.js');
+require('./modal-_AhJoT78.js');
+require('./typed-event-Bw4IfJC0.js');
 
 const applicationHeaderCss = () => `:host{display:flex;flex-wrap:nowrap;align-items:end;justify-content:space-between;position:relative;width:100%;min-height:3rem;padding-top:var(--ix-safe-area-inset-top, 0rem);padding-right:calc(0.625rem + var(--ix-safe-area-inset-right, 0rem));padding-left:calc(0.625rem + var(--ix-safe-area-inset-left, 0rem));color:var(--theme-app-header--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color);z-index:var(--theme-z-index-fixed)}: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 .left-side,:host .right-side{display:flex;flex-direction:row;flex-wrap:nowrap;position:relative;align-items:center;min-width:0;min-height:3rem;height:100%}:host .left-side{flex:0 1 auto}:host .left-side .app-icon{display:block;position:relative;width:2rem;min-width:2rem;max-width:2rem;height:2rem;min-height:2rem;max-height:2rem}:host .left-side .app-icon.app-icon-outline{outline:1px solid var(--theme-app-header-app-icon--outline-color);border-radius:0.125rem}:host .left-side .app-icon img{position:relative;display:block;width:100%;height:100%;border-radius:0.125rem}:host .left-side .app-switch{margin:0 0.625rem}:host .left-side .app-switch.without-app-icon{margin-left:0px}:host .left-side .name{display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;margin-left:0.75rem;margin-right:0.75rem;color:var(--theme-app-header--color);min-width:0;gap:0.75rem;overflow:hidden}:host .left-side .application-name,:host .left-side .application-name-suffix{overflow:hidden;overflow-wrap:anywhere;text-overflow:ellipsis;text-wrap:nowrap}:host .left-side .application-name{flex:0 1 auto;min-width:0;flex-shrink:0;max-width:100%}:host .left-side .application-name-suffix{flex:1 1 auto;margin-top:0.4rem;min-width:0;flex-shrink:1;color:var(--theme-app-header-name-suffix--color)}:host .left-side .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem;color:var(--theme-app-header-logo--color);margin-right:1rem;margin-left:1rem;min-width:-moz-fit-content;min-width:fit-content}:host .left-side .logo.hide-logo{display:none}:host .right-side{flex:1 1 auto;overflow:hidden;justify-content:space-between}:host .right-side .content,:host .right-side .secondary{display:flex;position:relative;align-items:center;justify-content:space-between;flex-direction:row;flex-wrap:nowrap;height:100%}:host .right-side .content{min-width:-moz-max-content;min-width:max-content}:host .right-side .secondary{overflow:hidden}:host .right-side .dropdown{overflow:visible}:host .right-side .dropdown-content>.slot-content-active{padding:0.5rem 1.5rem 0.5rem 1.5rem;border-top:none}:host .right-side .dropdown-content .slot-content-active~.slot-content-active{border-top:1px solid var(--theme-color-x-weak-bdr)}:host .right-side .context-menu{display:none}:host .right-side .context-menu.context-menu-visible{display:block;margin-left:0.5rem}:host .right-side ::slotted(ix-avatar){margin-left:0.5rem}:host .right-side .primary-navigation{align-self:end}:host .right-side.sm{justify-content:end}@media only screen and (max-width: 48em){:host .logo{margin-left:0.5rem;display:none !important}:host .content,:host .secondary,:host .app-icon{display:none}}:host(.hide-bottom-border){border-bottom:none}`;
 
@@ -20,41 +19,104 @@ const ApplicationHeader = class {
         index.registerInstance(this, hostRef);
         this.menuToggle = index.createEvent(this, "menuToggle", 7);
         this.openAppSwitch = index.createEvent(this, "openAppSwitch", 7);
-        /**
-         * Render subtle outline around app icon to ensure proper contrast.
-         *
-         * @since 4.0.0
-         */
-        this.appIconOutline = false;
-        /**
-         * Hides the bottom border of the header
-         *
-         * @since 4.0.0
-         */
-        this.hideBottomBorder = false;
-        /**
-         * Controls the visibility of the menu toggle button based on the context of the application header.
-         *
-         * When the application header is utilized outside the application frame, the menu toggle button is displayed.
-         * Conversely, if the header is within the application frame, this property is ineffective.
-         */
-        this.showMenu = false;
-        /**
-         * Enable Popover API rendering for dropdown.
-         *
-         * @default false
-         * @since 4.3.0
-         */
-        this.enableTopLayer = false;
-        this.breakpoint = 'lg';
-        this.menuExpanded = false;
-        this.suppressResponsive = false;
-        this.hasSlottedLogo = false;
-        this.hasOverflowContextMenu = false;
-        this.hasSecondarySlotElements = false;
-        this.hasDefaultSlotElements = false;
-        this.hasOverflowSlotElements = false;
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Application name
+     */
+    name;
+    /**
+     * Define a suffix which will be displayed next to the application name
+     *
+     * @since 4.0.0
+     */
+    nameSuffix;
+    /**
+     * Company logo will be show on the left side of the application name.
+     * It will be hidden on smaller screens.
+     *
+     * @since 4.0.0
+     */
+    companyLogo;
+    /**
+     * Alt text for the company logo
+     *
+     * @since 4.0.0
+     */
+    companyLogoAlt;
+    /**
+     * The app icon will be shown as the first element inside the header.
+     * It will be hidden on smaller screens.
+     *
+     * @since 4.0.0
+     */
+    appIcon;
+    /**
+     * Alt text for the app icon
+     *
+     * @since 4.0.0
+     */
+    appIconAlt;
+    /**
+     * Render subtle outline around app icon to ensure proper contrast.
+     *
+     * @since 4.0.0
+     */
+    appIconOutline = false;
+    /**
+     * Hides the bottom border of the header
+     *
+     * @since 4.0.0
+     */
+    hideBottomBorder = false;
+    /**
+     * Controls the visibility of the menu toggle button based on the context of the application header.
+     *
+     * When the application header is utilized outside the application frame, the menu toggle button is displayed.
+     * Conversely, if the header is within the application frame, this property is ineffective.
+     */
+    showMenu = false;
+    /**
+     * ARIA label for the app switch icon button
+     *
+     * @since 3.2.0
+     */
+    ariaLabelAppSwitchIconButton;
+    /**
+     * ARIA label for the more menu icon button
+     *
+     * @since 3.2.0
+     */
+    ariaLabelMoreMenuIconButton;
+    /**
+     * Enable Popover API rendering for dropdown.
+     *
+     * @default false
+     * @since 4.3.0
+     */
+    enableTopLayer = false;
+    /**
+     * Event emitted when the menu toggle button is clicked
+     */
+    menuToggle;
+    /**
+     * Event emitted when the app switch button is clicked
+     *
+     * @since 3.0.0
+     */
+    openAppSwitch;
+    breakpoint = 'lg';
+    menuExpanded = false;
+    suppressResponsive = false;
+    hasSlottedLogo = false;
+    hasOverflowContextMenu = false;
+    hasSecondarySlotElements = false;
+    hasDefaultSlotElements = false;
+    hasOverflowSlotElements = false;
+    applicationLayoutContext;
+    menuDisposable;
+    modeDisposable;
+    callbackUpdateAppSwitchModal;
     get contentBackground() {
         return this.hostElement.shadowRoot.querySelector('.dropdown-content');
     }
@@ -80,9 +142,8 @@ const ApplicationHeader = class {
         this.attachSiemensLogoIfLoaded();
     }
     disconnectedCallback() {
-        var _a, _b;
-        (_a = this.menuDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-        (_b = this.modeDisposable) === null || _b === void 0 ? void 0 : _b.dispose();
+        this.menuDisposable?.dispose();
+        this.modeDisposable?.dispose();
     }
     watchApplicationLayoutContext() {
         if (this.applicationLayoutContext) {
@@ -101,9 +162,9 @@ const ApplicationHeader = class {
         if (isSiemensLogoDefined) {
             return shadowDom.hasSlottedElements(slotElement);
         }
-        let assignedElements = slotElement === null || slotElement === void 0 ? void 0 : slotElement.assignedElements({ flatten: true });
-        assignedElements = assignedElements === null || assignedElements === void 0 ? void 0 : assignedElements.filter((element) => element.tagName !== 'IX-SIEMENS-LOGO');
-        return (assignedElements === null || assignedElements === void 0 ? void 0 : assignedElements.length) !== 0;
+        let assignedElements = slotElement?.assignedElements({ flatten: true });
+        assignedElements = assignedElements?.filter((element) => element.tagName !== 'IX-SIEMENS-LOGO');
+        return assignedElements?.length !== 0;
     }
     attachSiemensLogoIfLoaded() {
         if (this.companyLogo) {
@@ -128,23 +189,21 @@ const ApplicationHeader = class {
         return new Promise((resolve) => index.readTask(() => resolve(this.hostElement.shadowRoot.querySelector('[data-context-menu]'))));
     }
     tryUpdateAppSwitch() {
-        var _a, _b;
         if (!this.callbackUpdateAppSwitchModal ||
-            !((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig)) {
+            !this.applicationLayoutContext?.appSwitchConfig) {
             return;
         }
-        this.callbackUpdateAppSwitchModal((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.appSwitchConfig);
+        this.callbackUpdateAppSwitchModal(this.applicationLayoutContext?.appSwitchConfig);
     }
     async showAppSwitch() {
-        var _a, _b;
         const { defaultPrevented } = this.openAppSwitch.emit();
         if (defaultPrevented) {
             return;
         }
-        if (!((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig)) {
+        if (!this.applicationLayoutContext?.appSwitchConfig) {
             return;
         }
-        this.callbackUpdateAppSwitchModal = await index$1.showAppSwitch((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.appSwitchConfig);
+        this.callbackUpdateAppSwitchModal = await index$1.showAppSwitch(this.applicationLayoutContext?.appSwitchConfig);
     }
     updateHasSlotAssignedElementsStates() {
         const defaultSlot = this.hostElement.shadowRoot.querySelector('.content slot:not([name])');
@@ -164,42 +223,40 @@ const ApplicationHeader = class {
         }
     }
     render() {
-        var _a;
         const hasApplicationContextAvailable = !!this.applicationLayoutContext;
         const showMenuByApplicationFrame = this.breakpoint === 'sm' &&
             this.suppressResponsive === false &&
             hasApplicationContextAvailable;
-        const showApplicationSwitch = ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
+        const showApplicationSwitch = this.applicationLayoutContext?.appSwitchConfig &&
             this.breakpoint !== 'sm' &&
             this.suppressResponsive === false;
         const showCompanyLogoByProperty = this.breakpoint !== 'sm' && !!this.companyLogo;
-        return (index.h(index.Host, { key: '2eab44957d686a9eab20ec6d03e227ec9b8bbad9', class: {
+        return (index.h(index.Host, { key: '65415a8abe50d9b368d9c71001a0968cf2264fb8', class: {
                 [`breakpoint-${this.breakpoint}`]: true,
                 'hide-bottom-border': this.hideBottomBorder,
-            }, slot: "application-header" }, index.h("div", { key: '6fb0bbe9b969637a020d93ce2f3b644328a3b587', class: "left-side" }, this.appIcon && this.breakpoint !== 'sm' && (index.h("div", { key: '0044aec3cb9c26aba09eaeef9cc80bca8a221e4c', class: {
+            }, slot: "application-header", role: "banner" }, index.h("div", { key: '79849e061e06d01eba6f4d802f48d226480857b2', class: "left-side" }, this.appIcon && this.breakpoint !== 'sm' && (index.h("div", { key: 'b5c6140d263e7ff6ffe3937a4341bcd2b9935104', class: {
                 'app-icon': true,
                 'app-icon-outline': this.appIconOutline,
-            } }, index.h("img", { key: 'e6a04bd01422045910b4eca206119546d361075d', src: this.appIcon, alt: this.appIconAlt }))), (this.showMenu || showMenuByApplicationFrame) && (index.h("ix-menu-expand-icon", { key: 'e7a21a031f67841fe6d4b77291c6f9d5e3e555be', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (index.h("ix-icon-button", { key: 'c045ba1f2ff0f96cf8cbcd0c646d56f9539d923d', onClick: () => this.showAppSwitch(), icon: index$2.iconApps, variant: "subtle-tertiary", class: {
+            } }, index.h("img", { key: '00fb44e36f25856a0e2ad2c333d2a5a5014415d3', src: this.appIcon, alt: this.appIconAlt }))), (this.showMenu || showMenuByApplicationFrame) && (index.h("ix-menu-expand-icon", { key: '2d123f6cfbc21a61680328b3a81638ba49413c8f', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (index.h("ix-icon-button", { key: '5b887225419c66e36ef5dfd369647d41c4f3ca41', onClick: () => this.showAppSwitch(), icon: index$2.iconApps, variant: "subtle-tertiary", class: {
                 'app-switch': true,
                 'without-app-icon': !this.appIcon,
-            }, "aria-label": this.ariaLabelAppSwitchIconButton })), showCompanyLogoByProperty && (index.h("div", { key: '5a016cb75ee7aaa147762c83c0978cb48a26c9d4', class: "logo" }, index.h("img", { key: '642d45a60fa095f6f57c6790b58c2002105a7eae', src: this.companyLogo, alt: this.companyLogoAlt }))), index.h("div", { key: '2380f7df6018e182176f94dd5a767541a0f8b290', class: {
+            }, "aria-label": this.ariaLabelAppSwitchIconButton })), showCompanyLogoByProperty && (index.h("div", { key: '8c2dc3e31111a04c5e7aecabd11b458dc1c6b199', class: "logo" }, index.h("img", { key: '0594b3e00eb190ac2beef24df3c6987668c1fd69', src: this.companyLogo, alt: this.companyLogoAlt }))), index.h("div", { key: 'b51ceb91b1079d363999026e560874b0c2a1e390', class: {
                 logo: true,
                 'hide-logo': !this.hasSlottedLogo,
-            } }, index.h("slot", { key: '98c518263a717ae711f2d0b3990dfeedecce9ece', name: "logo", onSlotchange: () => (this.hasSlottedLogo = this.checkLogoSlot()) })), index.h("div", { key: '985826c96dad09c5c2f2b2142bbdf97ab08cd359', class: "name" }, index.h("ix-typography", { key: '25e7be365fa6d51f5045535f5f142184389acf3b', format: "body-lg", class: "application-name" }, this.name), this.nameSuffix && this.breakpoint !== 'sm' && (index.h("ix-typography", { key: '0e5c646d9a0915d9e9ef3513f6de8d8b8f97d031', format: "body-xs", class: "application-name-suffix" }, this.nameSuffix)))), index.h("div", { key: '38fc7b07e54b22e62c31db3bb452fab0700b142a', class: { 'right-side': true, sm: this.breakpoint === 'sm' } }, this.breakpoint !== 'sm' && (index.h("div", { key: 'a9a26d0dc561867d657b70bd873b6d5576cc76e8', class: "secondary" }, index.h("slot", { key: '4c6f6e36e501c0472414e609394830734ccb4e33', name: "secondary" }))), index.h("div", { key: 'ace5d49c20490fbfc053f16087f8aabe7c73574f', class: "content" }, this.breakpoint !== 'sm' && index.h("slot", { key: '312c3be1999677bcf8390cc8a6b98de9d4332b9e' }), index.h("ix-icon-button", { key: '5639068ecea1e24d37957c90ad484b1e95eb4ba0', class: {
+            } }, index.h("slot", { key: '2659560a89277665227c8169cd1f40493ca50957', name: "logo", onSlotchange: () => (this.hasSlottedLogo = this.checkLogoSlot()) })), index.h("div", { key: '80f65852355d615792c0a923d174095aac094fea', class: "name" }, index.h("ix-typography", { key: 'ab984e7163d972ada42958f53a0ce58e9236cf34', format: "body-lg", class: "application-name" }, this.name), this.nameSuffix && this.breakpoint !== 'sm' && (index.h("ix-typography", { key: '9cd307c5ec49d7988084918d2f7e741669e501c9', format: "body-xs", class: "application-name-suffix" }, this.nameSuffix)))), index.h("div", { key: '9336ed1416b6e532a92d266809296f8509f35490', class: { 'right-side': true, sm: this.breakpoint === 'sm' } }, this.breakpoint !== 'sm' && (index.h("div", { key: 'daad8a4304d6276f4b4ac9c5e00ec939f3121a8c', class: "secondary" }, index.h("slot", { key: '2c6948ba05eb8fad24ef6a7fdddef62edd7b6f3b', name: "secondary" }))), index.h("div", { key: '49d1396f97cb218001107b8b189a66f9b6e1cc4a', class: "content" }, this.breakpoint !== 'sm' && index.h("slot", { key: 'a261e8552476f9d8b90101a4e471575a1787b076' }), index.h("ix-icon-button", { key: '0cd13b5d1bcc3d9aeb2a16465529833595af57d6', class: {
                 'context-menu': true,
                 'context-menu-visible': this.hasOverflowContextMenu,
-            }, "data-context-menu": true, "data-testid": "show-more", icon: index$2.iconMoreMenu, variant: "subtle-tertiary", "aria-label": this.ariaLabelMoreMenuIconButton, "aria-hidden": a11y.a11yBoolean(!this.hasOverflowContextMenu) }), index.h("ix-dropdown", { key: '09709d9e96f02ae68fb7bd0f26f607e6630093df', "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton(), "aria-hidden": a11y.a11yBoolean(!this.hasOverflowContextMenu), enableTopLayer: this.enableTopLayer }, index.h("div", { key: '213dce0eb4003be8187342ba01477e0d4d6addb7', class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, this.breakpoint === 'sm' && (index.h("div", { key: '54657f69566a77eb752680249906b6bee9d03ee4', class: {
+            }, "data-context-menu": true, "data-testid": "show-more", icon: index$2.iconMoreMenu, variant: "subtle-tertiary", "aria-label": this.ariaLabelMoreMenuIconButton, "aria-hidden": a11y.a11yBoolean(!this.hasOverflowContextMenu) }), index.h("ix-dropdown", { key: '2340aec42fc9d4a23d3fc257dabd24b44789c60f', "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton(), "aria-hidden": a11y.a11yBoolean(!this.hasOverflowContextMenu), enableTopLayer: this.enableTopLayer }, index.h("div", { key: 'ba14593b7d8365c205f61792a71f1f83190a3683', class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, this.breakpoint === 'sm' && (index.h("div", { key: '612c535b854e7254ebcad06edf9f41ad745babcb', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasSecondarySlotElements,
-            } }, index.h("slot", { key: 'a58dffdd6cc64da6f7ac6f5a7545baa14d094c01', name: "secondary", onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), this.breakpoint === 'sm' && (index.h("div", { key: 'd3abff81d272b487d5367c5f04788aa10c381c9f', class: {
+            } }, index.h("slot", { key: '6a8c8df87ce24ca24cee6738e16cae3150370573', name: "secondary", onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), this.breakpoint === 'sm' && (index.h("div", { key: 'ffb74288c8b2f71941c9f9c4d710c4fe44c9996a', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasDefaultSlotElements,
-            } }, index.h("slot", { key: '1da7b1a160223b77abb22295d4efa214ba5fd5cf', onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), index.h("div", { key: 'f0f1f86e16c18cf153a08735ddd074822c494e43', class: {
+            } }, index.h("slot", { key: '4d7d25254108d0297137f624a4ed248a4b8e8a7f', onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), index.h("div", { key: '188ccce5cc9eddf0bdadc92716a98f82491c3fcf', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasOverflowSlotElements,
-            } }, index.h("slot", { key: 'c4354e3021d968f6f1e80a8ff61bc2356224bfa2', name: "overflow", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })))), index.h("slot", { key: 'b58021c1e3ec91455f626ffb4dd2b5db0724a1a2', name: "ix-application-header-avatar" })))));
+            } }, index.h("slot", { key: 'f5c7c0c2efec69700a7f44c90a89f56aec34ac85', name: "overflow", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })))), index.h("slot", { key: '002c29f2656a44471f7990d50354bf2767ca2021', name: "ix-application-header-avatar" })))));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "applicationLayoutContext": [{
                 "watchApplicationLayoutContext": 0

package/dist/cjs/ix-application-switch-modal.cjs.entry.js

@@ -1,12 +1,11 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-require('./animation-D5wGQwTg.js');
-var modal = require('./modal-BPMUkqrW.js');
-var index$1 = require('./index-DIYO-Liy.js');
-require('./typed-event-DxWATHPL.js');
+var index = require('./index-DnclGKUw.js');
+var index$1 = require('./index-CwJ-mkQd.js');
+var modal = require('./modal-_AhJoT78.js');
+require('./typed-event-Bw4IfJC0.js');
 
-const applicationSwitchModalCss = () => `:host{display:block}: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 .content{padding:2rem;padding-right:0}:host .content-apps{display:flex;position:relative;flex-wrap:wrap;justify-content:space-evenly;max-height:50vh;margin-right:0.25rem;gap:1.5rem}:host .loading{display:flex;flex-direction:row;align-items:center}:host .loading ix-spinner{margin-right:1rem}:host .AppEntry{all:unset;display:flex;flex-direction:row;align-items:center;gap:1rem;padding:0.5rem;flex:1 1 45%;cursor:pointer;border:0.0625rem solid transparent}:host .AppEntry.Selected{background-color:var(--theme-color-ghost--selected);border:var(--theme-dynamic-bdr-1)}:host .AppEntry:not(.disabled):not(:disabled).hover,:host .AppEntry:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .AppEntry:not(.disabled):not(:disabled).active,:host .AppEntry:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .AppEntry:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host .AppName{display:flex;flex-direction:column}:host .AppName ix-icon{margin-left:1rem}:host .AppIcon{width:3rem;height:3rem;border-radius:0.25rem}`;
+const applicationSwitchModalCss = () => `:host{display:block}: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 .content{padding:2rem;padding-right:0}:host .content-apps{display:flex;position:relative;flex-wrap:wrap;justify-content:space-evenly;max-height:50vh;margin-right:0.25rem;gap:1.5rem}:host .loading{display:flex;flex-direction:row;align-items:center}:host .loading ix-spinner{margin-right:1rem}:host .AppEntry{all:unset;display:flex;flex-direction:row;align-items:center;gap:1rem;padding:0.4375rem;padding-inline-end:0.9375rem;flex:1 1 45%;cursor:pointer;border:0.0625rem solid transparent}:host .AppEntry.Selected{background-color:var(--theme-color-ghost--selected)}:host .AppEntry:not(.disabled):not(:disabled).hover,:host .AppEntry:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .AppEntry:not(.disabled):not(:disabled).active,:host .AppEntry:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .AppEntry:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host .AppName{display:flex;flex-direction:column}:host .AppName ix-icon{margin-left:1rem}:host .AppIcon{width:3rem;height:3rem;border-radius:0.25rem}`;
 
 function ApplicationItem(props) {
     function isExternal(target) {
@@ -29,27 +28,24 @@ function ApplicationItem(props) {
         }, onClick: () => {
             modal.dismissModal(props.host);
             window.open(props.url, props.target);
-        } }, index.h("div", null, index.h("img", { class: "AppIcon", src: props.iconSrc })), index.h("div", { class: "AppName" }, index.h("ix-typography", { format: "h4" }, props.name, isExternal(props.target) && (index.h("ix-icon", { size: "12", name: index$1.iconOpenExternal, color: "color-soft-text" }))), index.h("ix-typography", { format: "label-sm", textColor: "soft" }, props.description))));
+        } }, index.h("img", { class: "AppIcon", src: props.iconSrc, alt: "" }), index.h("div", { class: "AppName" }, index.h("ix-typography", { format: "h4" }, props.name, isExternal(props.target) && (index.h("ix-icon", { size: "12", name: index$1.iconOpenExternal, color: "color-soft-text" }))), index.h("ix-typography", { format: "label-sm", textColor: "soft" }, props.description))));
 }
 const ApplicationSwitchModal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    get hostElement() { return index.getElement(this); }
+    /** @internal */
+    config;
     componentWillLoad() {
         if (!this.config) {
             throw Error('ApplicationConfig not provided');
         }
     }
     render() {
-        var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: 'ad91bb8276f431a5eaf9efc39520c3d679fa1c35' }, index.h("ix-modal-header", { key: '8818474a3ac6e57a7758af5f9ed2707c1d741f36', icon: index$1.iconApps }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), index.h("ix-modal-content", { key: '2499c10197c91b9f167f38ab864083453b497325', class: "content" }, index.h("div", { key: '1f6f1fe8f3cf57506aa28a9f758dcfa7a0114163', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (index.h("div", { key: '096832c472ffa6665e1d1a3e61234dbf867c43c8', class: "loading" }, index.h("ix-spinner", { key: '89524c61771cea96b31e89b59d722e22a418ca98', size: "medium", variant: "primary" }), index.h("span", { key: 'a9bb64f0ba5ae12e77cb86dd38a1e4da0abd7ab4' }, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) ||
-            'Loading available applications...'))), (_d = this.config) === null || _d === void 0 ? void 0 :
-            _d.apps.map((appEntry) => {
-                var _a;
-                return (index.h(ApplicationItem, { host: this.hostElement, name: appEntry.name, description: appEntry.description, iconSrc: appEntry.iconSrc, target: appEntry.target, url: appEntry.url, selected: appEntry.id === ((_a = this.config) === null || _a === void 0 ? void 0 : _a.currentAppId) }));
-            })))));
+        return (index.h(index.Host, { key: 'd5f90b59051a81a5c9157cf76f181d0dbf3db288' }, index.h("ix-modal-header", { key: 'a56ca3229b08765f10b792b0aaa850e15ab6a233', icon: index$1.iconApps }, this.config?.i18nAppSwitch || 'Switch to application'), index.h("ix-modal-content", { key: '4ed63c67ea9a17355d010cd74eb80f9e3d15d26a', class: "content" }, index.h("div", { key: '1a9cadf4e12af46758b21d3074a97b10e9a00e6c', class: "content-apps" }, (!this.config || this.config?.apps.length === 0) && (index.h("div", { key: 'c0dbbd963ecc7afa860b2dc18cd93c8f93ce228a', class: "loading" }, index.h("ix-spinner", { key: '9da41df87f43a42f2c62019ba48f2eda65c25205', size: "medium", variant: "primary" }), index.h("span", { key: '1865e305014310653486c4115dca075f8ffc4a92' }, this.config?.i18nLoadingApps ||
+            'Loading available applications...'))), this.config?.apps.map((appEntry) => (index.h(ApplicationItem, { host: this.hostElement, name: appEntry.name, description: appEntry.description, iconSrc: appEntry.iconSrc, target: appEntry.target, url: appEntry.url, selected: appEntry.id === this.config?.currentAppId })))))));
     }
-    get hostElement() { return index.getElement(this); }
 };
 ApplicationSwitchModal.style = applicationSwitchModalCss();
 

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

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var context = require('./context-CmNuiaNz.js');
-var service = require('./service-DuiJmf7R.js');
-var menuService = require('./menu-service-CW0vT80Q.js');
-var shadowDom = require('./shadow-dom-DT01VwcB.js');
-var themeSwitcher = require('./theme-switcher-BfjZ3MX8.js');
-require('./typed-event-DxWATHPL.js');
+var index = require('./index-DnclGKUw.js');
+var context = require('./context-DqdXbKw_.js');
+var service = require('./service-CRjXhKel.js');
+var menuService = require('./menu-service-DBg-0e5W.js');
+var shadowDom = require('./shadow-dom-BL5F7RFW.js');
+var themeSwitcher = require('./theme-switcher-sbkXOvhB.js');
+require('./typed-event-Bw4IfJC0.js');
 require('./breakpoints-C5ZrUCbZ.js');
 
 const applicationCss = () => `:host{display:flex;position:relative;width:100vw;height:100vh;flex-direction:column}: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 ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .application{display:flex;position:relative;flex-direction:row;height:100%;width:100%;overflow:hidden}:host .content-area{display:flex;position:relative;flex-direction:column;flex-wrap:nowrap;height:calc(100% - var(--ix-safe-area-inset-bottom, 0px));width:100%;margin-left:var(--ix-application-menu-margin-left);min-width:0}:host main{display:block;position:relative;flex-grow:1;width:100%;padding-bottom:var(--ix-safe-area-inset-bottom);overflow:auto}:host footer{display:block;position:relative;width:100%}:host(.breakpoint-md){--ix-application-menu-margin-left:calc(     3.25rem + var(--ix-application-menu-safe-area-left, 0rem)   )}:host(.breakpoint-md) aside.slotted{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-md) aside.slotted+.content-area{margin-left:0}:host(.breakpoint-md) aside:not(.slotted)+.content-area{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-lg){--ix-application-menu-margin-left:0}:host(.breakpoint-sm){--ix-application-menu-margin-left:var(     --ix-application-menu-safe-area-left,     0rem   )}`;
@@ -14,73 +14,98 @@ const applicationCss = () => `:host{display:flex;position:relative;width:100vw;h
 const Application = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /**
-         * Use the system appearance dark or light
-         */
-        this.themeSystemAppearance = false;
-        /**
-         * Supported layouts
-         */
-        this.breakpoints = ['sm', 'md', 'lg'];
-        this.breakpoint = 'lg';
-        this.applicationSidebarSlotted = false;
+    }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Application theme
+     */
+    theme;
+    /**
+     * Color schema of the theme
+     *
+     * @since 5.0.0
+     */
+    colorSchema = 'system';
+    /**
+     * Change the responsive layout of the menu structure
+     */
+    forceBreakpoint;
+    onForceBreakpointChange(forceBreakpoint) {
+        this.setBreakpoints(this.breakpoints);
+        this.forceLayoutChange(forceBreakpoint);
     }
     forceLayoutChange(newMode) {
         if (!newMode) {
             service.applicationLayoutService.enableBreakpointDetection();
+            service.applicationLayoutService.debouncedOnResize();
             return;
         }
         service.applicationLayoutService.disableBreakpointDetection();
         service.applicationLayoutService.setBreakpoint(newMode);
     }
+    /**
+     * Supported layouts
+     */
+    breakpoints = ['sm', 'md', 'lg'];
     onBreakpointsChange(breakpoints) {
-        service.applicationLayoutService.setBreakpoints(breakpoints);
+        this.setBreakpoints(breakpoints);
     }
+    /**
+     * Define application switch configuration
+     */
+    appSwitchConfig;
+    breakpoint = 'lg';
+    applicationSidebarSlotted = false;
+    contextProvider;
     get menu() {
         return this.hostElement.querySelector('ix-menu');
     }
     get applicationSidebarSlot() {
         return this.hostElement.shadowRoot.querySelector('.application-sidebar slot');
     }
+    modeDisposable;
     onContentClick() {
-        var _a;
         if (menuService.menuController.isPinned) {
             return;
         }
-        (_a = this.menu) === null || _a === void 0 ? void 0 : _a.toggleMenu(false);
+        this.menu?.toggleMenu(false);
+    }
+    setBreakpoints(breakpoints) {
+        if (this.forceBreakpoint) {
+            service.applicationLayoutService.setBreakpoints([this.forceBreakpoint]);
+        }
+        else {
+            service.applicationLayoutService.setBreakpoints(breakpoints);
+        }
     }
     componentWillLoad() {
-        service.applicationLayoutService.setBreakpoints(this.breakpoints);
+        this.setBreakpoints(this.breakpoints);
         this.contextProvider = context.useContextProvider(this.hostElement, context.ApplicationLayoutContext, {
             hideHeader: false,
             sidebar: this.applicationSidebarSlotted,
             appSwitchConfig: this.appSwitchConfig,
         });
         this.modeDisposable = service.applicationLayoutService.onChange.on((mode) => {
-            this.breakpoint = mode;
+            this.breakpoint = this.forceBreakpoint || mode;
         });
-        this.breakpoint = service.applicationLayoutService.breakpoint;
-        if (this.forceBreakpoint) {
-            this.forceLayoutChange(this.forceBreakpoint);
-        }
-        this.changeTheme();
+        this.breakpoint =
+            this.forceBreakpoint || service.applicationLayoutService.breakpoint;
+        this.forceLayoutChange(this.forceBreakpoint);
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+        this.modeDisposable?.dispose();
     }
     changeTheme() {
         if (!this.theme) {
-            if (this.themeSystemAppearance) {
-                themeSwitcher.themeSwitcher.setVariant();
-            }
             return;
         }
-        if (themeSwitcher.themeSwitcher.hasVariantSuffix(this.theme)) {
-            themeSwitcher.themeSwitcher.setTheme(`theme-${this.theme}`);
+        themeSwitcher.themeSwitcher.setTheme(this.theme);
+    }
+    changeColorSchema() {
+        if (!this.colorSchema) {
             return;
         }
-        themeSwitcher.themeSwitcher.setTheme(`theme-${this.theme}-dark`, this.themeSystemAppearance);
+        themeSwitcher.themeSwitcher.setColorSchema(this.colorSchema);
     }
     onApplicationSidebarChange() {
         if (!this.contextProvider) {
@@ -94,23 +119,25 @@ const Application = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '80437ae705c381c0167b8d7c5ce429e611b03f91', "data-role": "", class: {
+        return (index.h(index.Host, { key: 'b580ca5dbbd164b45beb5b6863fc3f6ffd830f08', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, index.h("slot", { key: '865d2e5a9252459f62ff8ab5dce1413d11c04379', name: "application-header" }), index.h("div", { key: 'ae1960437e8721fbc4afab659d149265660e4164', class: "application" }, index.h("slot", { key: 'a2a9a835af35e30d2ebe52347903f1838e75ac8d', name: "menu" }), index.h("aside", { key: '6141152471ac7dc7310247b23278dc594e025fa3', class: {
+            } }, index.h("slot", { key: '6055d2a286d3b90e4aca43bee094e509ab4780fd', name: "application-header" }), index.h("div", { key: '6418c3369dc0525d99c29015d5717a791a2ddd4c', class: "application" }, index.h("slot", { key: 'a6adda421cf6294d34da129a5dd3bc366f6384ca', name: "menu" }), index.h("aside", { key: '3f359f1ef65e8fa1f35f4001b23ec10d32a7d5be', class: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, onClick: () => this.onContentClick() }, index.h("slot", { key: '3285cc16452a7a6936a542dd26758beebb515972', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = shadowDom.hasSlottedElements(this.applicationSidebarSlot)) })), index.h("div", { key: 'c6d022a1a5c220ed088adeba49ab5daa27ff8c77', class: "content-area" }, index.h("main", { key: '8ab781e17318078290a6ce4e1e64dfea43d5ae00', class: "content", onClick: () => this.onContentClick() }, index.h("slot", { key: '24e83882ab5746f4e00a0c16c797ddf4111aa1e8' })), index.h("footer", { key: '3ce838daa8f8f4b4e56cb2626476223d9575177c', class: "footer" }, index.h("slot", { key: 'e49d1cd476554dfddca3b538194040ca29394967', name: "bottom" }))))));
+            }, onClick: () => this.onContentClick() }, index.h("slot", { key: 'f335892f90b7d9f9020bbeb5b9a732404bfcde00', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = shadowDom.hasSlottedElements(this.applicationSidebarSlot)) })), index.h("div", { key: '93333ea8c99802b366971d1c9717418262fc649d', class: "content-area" }, index.h("main", { key: '79fe70895b7725377b679b98c04784f6fd7ff789', class: "content", onClick: () => this.onContentClick() }, index.h("slot", { key: '22d8f248280108d31903f67e7678804cf78dc658' })), index.h("footer", { key: '9e541aa388f2aaf44d8f41987ded1bcd863a22f6', class: "footer" }, index.h("slot", { key: '9b87eb43ced974fca634e1f4c1282669be3135b4', name: "bottom" }))))));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
+        "forceBreakpoint": [{
+                "onForceBreakpointChange": 0
+            }],
         "breakpoints": [{
                 "onBreakpointsChange": 0
             }],
         "theme": [{
                 "changeTheme": 0
             }],
-        "themeSystemAppearance": [{
-                "changeTheme": 0
+        "colorSchema": [{
+                "changeColorSchema": 0
             }],
         "appSwitchConfig": [{
                 "onApplicationSidebarChange": 0