@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1373-20240705054533

package/dist/esm/ix-col_4.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, f as forceUpdate, h, H as Host, c as createEvent, F as Fragment, g as getElement } from './index-9103b14c.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host, c as createEvent, F as Fragment, g as getElement } from './index-5429f20b.js';
 import { m as matchBreakpoint } from './breakpoints-d5c2f627.js';
 import { D as DateTime_1, I as Info_1 } from './luxon-aa110584.js';
-import { O as OnListener } from './listener-98571ba8.js';
+import { O as OnListener } from './listener-4f3baab5.js';
 
 const colCss = ":host{position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px;padding:calc(var(--ix-layout-grid-gutter) * 0.5)}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";
 const IxColStyle0 = colCss;
@@ -505,7 +505,7 @@ const DatePicker = class {
         return rows;
     }
     render() {
-        return (h(Host, { key: 'c1c73273107f212831840ddb94235c9d3282c675' }, h("ix-date-time-card", { key: '5710238de0deaca8ecdc8eaeb83597ae8ad3699f', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, h("div", { key: '4db778442b74920ba9f80d24d178ea56e8cf82e1', class: "header", slot: "header" }, h("ix-icon-button", { key: 'b142148db83890499f7d34e6d354925959d461ae', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: "chevron-left", variant: "primary", class: "arrows" }), h("div", { key: 'c91debc3326cecfca594d9a716d4c9bc234dd4a6', class: "selector" }, h("ix-button", { key: '94511292c5c14747310415a0e16bda25e8aeb939', ghost: true, ref: (ref) => (this.dropdownButtonRef = ref), "data-testid": "year-month-button" }, h("span", { key: '0507d315a40f8c33495e27cf8962a176fcf99ddd', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: 'dde02196313adc619f8dc5073d168ad041a20e48', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef, ignoreRelatedSubmenu: true, placement: "bottom-start" }, h("div", { key: '957ebddc08f671f0d51e6cc22c45544b323d03f0', class: "wrapper" }, h("div", { key: '94a9246c658279736356b065791c1c14c0876d47', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.renderYears()), h("div", { key: '8af75c66d9a0c1d8c67ad21d70f99a0e76ebbc4e', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (h("div", { key: month, ref: (ref) => {
+        return (h(Host, { key: '559881c8673da97e842398f4bcfe67ef5ff27794' }, h("ix-date-time-card", { key: '4550d5f5a242be0ff07110cc400ef12795475c5c', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, h("div", { key: 'f10ccab02142ae7461ac4b4ba4e8a8eb57123438', class: "header", slot: "header" }, h("ix-icon-button", { key: '52b171c5e04a5bbcb0832f0e6033947735521601', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: "chevron-left", variant: "primary", class: "arrows" }), h("div", { key: 'c48d51b3f22c9862c8006520530559ed44d16372', class: "selector" }, h("ix-button", { key: '8c155fcbafb7c3f32dab3c9ebc912153813ce207', ghost: true, ref: (ref) => (this.dropdownButtonRef = ref), "data-testid": "year-month-button" }, h("span", { key: '74c9634e13886d26238b4ee2262314914b1e8cf8', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: 'ba249019d78a59e65f3a479a3ea8315b5990bcac', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef, ignoreRelatedSubmenu: true, placement: "bottom-start" }, h("div", { key: '39365087bbb4c4dd4e0329828f61a90a1247b744', class: "wrapper" }, h("div", { key: '017d16a032a473b0e791c8dc342b5e62481212e3', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.renderYears()), h("div", { key: '1bef58292da8545924f53fdbeddbc864936a56ef', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (h("div", { key: month, ref: (ref) => {
                 if (month === this.monthNames[0]) {
                     this.firstMonthRef = ref;
                 }
@@ -519,12 +519,12 @@ const DatePicker = class {
                 hidden: this.tempYear !== this.selectedYear ||
                     this.tempMonth !== index,
                 checkPosition: true,
-            }, name: "single-check", size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { key: '8dc9183422555c9891aceb3318e1507ffa2f1fbe', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: "chevron-right", variant: "primary", class: "arrows" })), h("div", { key: '3999bfcc5b2477ddca4b0488dce80eb9261ffc42', class: "grid" }, h("div", { key: '244bc39cad1ed81f0820c4907c773cbfaab8726d', class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
+            }, name: "single-check", size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { key: 'f414faea937a05dd2690e82d01daf1f444fbce25', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: "chevron-right", variant: "primary", class: "arrows" })), h("div", { key: 'b79a961fbfc8c8dd821a83ab172dd7146acc5ade', class: "grid" }, h("div", { key: '7651643c6320b8598b52ffaa45dc70498854d1ad', class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
             return (h(Fragment, null, h("div", { class: "calendar-item week-number" }, week.weekNumber), week.dayNumbers.map((day) => (h("div", { key: day, id: `day-cell-${day}`, "date-calender-day": true, class: this.getDayClasses(day), onClick: () => this.selectDay(day), onKeyUp: (e) => e.key === 'Enter' && this.selectDay(day), tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur() }, day)))));
-        })), h("div", { key: '26d3b5e759582cbd10860fe9acdb675e9d97f1eb', class: {
+        })), h("div", { key: '0e6b9845bfdb760777cbd0f2f8419aeb5b667799', class: {
                 button: true,
                 hidden: !this.range || !this.standaloneAppearance,
-            } }, h("ix-button", { key: 'b3109bb9dfd3dcf518b58f6bc3a888632ca9469b', onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone)))));
+            } }, h("ix-button", { key: 'bb02236b3e41f3168aa2d5aad2c8e4aa9af90a49', onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone)))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -549,12 +549,12 @@ const LayoutGrid = class {
         this.columns = 12;
     }
     render() {
-        return (h(Host, { key: '93fd37b24ae81e5ac1cb1dd1c2ddb8a65875d41f', class: {
+        return (h(Host, { key: 'd77291cf3cca2fd4a61c8998a095923f195b3d8f', class: {
                 'no-margin': this.noMargin,
             }, style: {
                 '--ix-layout-grid-columns': `${this.columns}`,
                 '--ix-layout-grid-gutter': `${this.gap}px`,
-            } }, h("slot", { key: '88e68a69f86b2a0998d1ac87a42614759349296a' })));
+            } }, h("slot", { key: 'c149d8a794c75e48d748cccbc3cb9aada30c30ef' })));
     }
 };
 LayoutGrid.style = IxLayoutGridStyle0;
@@ -567,7 +567,7 @@ const Row = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '1cdde89ce2ab014d88b527ccbb2e6595e22b0e97' }, h("slot", { key: '2a8a95a0a76548282485977964fa06b07a63c9e1' })));
+        return (h(Host, { key: 'b8813e92c151d3f0a6d063a4f03b50f384ef1127' }, h("slot", { key: '5246811d7fb18593758b07a32e58fee15ba34d51' })));
     }
 };
 Row.style = IxRowStyle0;

package/dist/esm/ix-content-header.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-9103b14c.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-5429f20b.js';
 
 const contentHeaderCss = ":host{display:flex;flex-direction:row;align-items:flex-start;padding:0px}:host .titleGroup{display:flex;flex-direction:column;flex:1 1 0%}:host .subtitle{margin-top:0.5rem}:host .backButton{margin-right:0.5rem}:host .buttons{flex:0 0 auto}";
 const IxContentHeaderStyle0 = contentHeaderCss;

package/dist/esm/ix-content.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-9103b14c.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5429f20b.js';
 import { h as hasSlottedElements } from './shadow-dom-60e9243d.js';
 
 const contentCss = ":host{display:flex;flex-direction:column;position:relative;padding:1.5rem 0rem 0.25rem 2rem;width:100%;height:100%;overflow:hidden}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .content{flex-grow:1;overflow:auto;padding-right:1.5rem}:host .content-header.slotted{margin-bottom:1rem;padding-right:1.5rem}";
@@ -13,12 +13,12 @@ const Content = class {
         return this.hostElement.shadowRoot.querySelector('.content-header slot');
     }
     render() {
-        return (h(Host, { key: '4dab1c37e7e25e92aae59819e21cdca4f303b917' }, h("div", { key: 'e1d4436222fbede16fe740f1f8b712c4227b9f26', class: {
+        return (h(Host, { key: '61f9325ce908e838c83a286da21471c8f081cf7e' }, h("div", { key: '66adfdde8a6f7e4cec46bc8ac3111f9fd344462c', class: {
                 'content-header': true,
                 slotted: this.isContentHeaderSlotted,
-            } }, h("slot", { key: '0df5783d73aac22f87b644942b02ac2c1c9a4a66', name: "header", onSlotchange: () => {
+            } }, h("slot", { key: '00a1dffb70b39ae24c7ffc7a02649f5c870e95e9', name: "header", onSlotchange: () => {
                 this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
-            } })), h("div", { key: '94713592851aa18c3b0b030c4a80e278cabbec35', class: "content" }, h("slot", { key: 'f78d233860cf1a36132a5b725791292524385a84' }))));
+            } })), h("div", { key: 'd27dfeb1305abb6cacdf16a5476e5d7b32d6f3ba', class: "content" }, h("slot", { key: '054a581bc21257f46c3377c53c0e8dbacc4321b5' }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-css-grid-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-9103b14c.js';
+import { r as registerInstance, h, H as Host } from './index-5429f20b.js';
 
 const cssGridItemCss = ":host{display:block;position:relative}:host ::slotted(*){height:100%;width:100%}";
 const IxCssGridItemStyle0 = cssGridItemCss;
@@ -11,7 +11,7 @@ const CssGridItem = class {
     render() {
         const style = {};
         style['grid-area'] = this.itemName;
-        return (h(Host, { key: '27bd6e8926336757d4cb993ab8ff978a1a85479e', style: style }, h("slot", { key: '3be8052533266ea875e2f0009720f07a4dbdd16b' })));
+        return (h(Host, { key: '5e5e54a887244e85620d34eb2759fadf20883dbd', style: style }, h("slot", { key: '14c51da716e0715e205f28181a3d51813ad88027' })));
     }
 };
 CssGridItem.style = IxCssGridItemStyle0;

package/dist/esm/ix-css-grid.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-9103b14c.js';
+import { r as registerInstance, h, H as Host } from './index-5429f20b.js';
 
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG

package/dist/esm/ix-date-dropdown.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-9103b14c.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-5429f20b.js';
 import { D as DateTime_1 } from './luxon-aa110584.js';
 
 const dateDropdownCss = ":host{display:inline-block;position:relative}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}@media (max-width: 48em){:host .min-width{width:-moz-min-content;width:min-content}}@media (min-width: 48em){:host .border-right{border-right:var(--theme-x-weak-bdr-2)}}:host ix-button{width:100%}:host .max-height{max-height:-moz-max-content;max-height:max-content}:host .no-margin{margin:0;padding:0}:host .pull-right{float:right;padding:0.25rem 1rem}";

package/dist/esm/ix-date-time-card.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-9103b14c.js';
+import { r as registerInstance, h, H as Host } from './index-5429f20b.js';
 
 const dateTimeCardCss = ":host{}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .card{background-color:var(--theme-menu--background);width:100%;box-shadow:none;border:none;border-radius:unset;display:flex;flex-direction:column}:host .card.standaloneAppearance{box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 12px 18px 0 rgba(0, 0, 0, 0.1);border-radius:4px}:host .card.rounded{border-radius:4px}:host .card.left{border-radius:4px 0 0 4px;height:100%}:host .card.right{border-radius:0 4px 4px 0;height:100%}:host .card .header{padding:1rem;flex:0 1 auto}:host .card .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;flex:0 1 auto}:host .card .content{padding:0 0.75rem 0.75rem 0.75rem;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}";
 const IxDateTimeCardStyle0 = dateTimeCardCss;
@@ -22,7 +22,7 @@ const DateTimeCard = class {
         };
     }
     render() {
-        return (h(Host, { key: 'fa0c2f27c199b297d27b9731d63fdfb2aa7e61c9' }, h("div", { key: '4332722d538fc8d791a97d2803cfda2c1bf4c1cd', class: this.cardClasses() }, h("div", { key: 'e611c5e65a9074a12569be57b1f867885e38782d', class: "header" }, h("slot", { key: 'fd04904836f2130af3e6e3f28b8a83374b4b529f', name: "header" })), h("div", { key: 'a25f03d3c152c3e537ea694a665f7d7c2a900e0a', class: "separator" }), h("div", { key: '2b927b2f93d741d8e79adef986887f30507bcc27', class: "content" }, h("slot", { key: '7edd1e2f07fa885302f9a3859830a5dab9ccb7e1' })))));
+        return (h(Host, { key: 'b699133fd52ef092307f90f515aa7046a99cd21f' }, h("div", { key: '938a7c031dae445fee084ea8c1390627b1743bfb', class: this.cardClasses() }, h("div", { key: '1d20df2d528d8219a7fcea504f63da8a07a4fe74', class: "header" }, h("slot", { key: '0dadc7cb6813210aa9de4299f86a2e1b8ed01764', name: "header" })), h("div", { key: '79a1560d676b4d7583edf9c2fc14be75d4a35514', class: "separator" }), h("div", { key: 'e0f633c51c1167383fc9f75d153cfb20ee77bc39', class: "content" }, h("slot", { key: 'eb8a5596284dd1a461d7f83abe3ec94ac0ebe76c' })))));
     }
 };
 DateTimeCard.style = IxDateTimeCardStyle0;

package/dist/esm/ix-date-time-card.entry.js.map

@@ -1 +1 @@
-{"file":"ix-date-time-card.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,y+CAAy+C,CAAC;AAClgD,6BAAe,eAAe;;MCoBjB,YAAY;;;;0BAOO,IAAI;uBAKK,SAAS;;IAExC,WAAW;QACjB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,oBAAoB,EAClB,IAAI,CAAC,oBAAoB,KAAK,SAAS;kBACnC,IAAI,CAAC,oBAAoB;kBACzB,IAAI,CAAC,UAAU;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAChC,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAC5B,4DAAK,KAAK,EAAC,QAAQ,IACjB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EAEN,4DAAK,KAAK,EAAC,WAAW,GAAO,EAE7B,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAa,CACT,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","src/components/date-time-card/date-time-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .card {\n    background-color: var(--theme-menu--background);\n    width: 100%;\n    box-shadow: none;\n    border: none;\n    border-radius: unset;\n    display: flex;\n    flex-direction: column;\n\n    &.standaloneAppearance {\n      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),\n        0 12px 18px 0 rgba(0, 0, 0, 0.1);\n      border-radius: 4px;\n    }\n\n    &.rounded {\n      border-radius: 4px;\n    }\n\n    &.left {\n      border-radius: 4px 0 0 4px;\n      height: 100%;\n    }\n\n    &.right {\n      border-radius: 0 4px 4px 0;\n      height: 100%;\n    }\n\n    .header {\n      padding: $default-space;\n      flex: 0 1 auto;\n    }\n\n    .separator {\n      border: 1px solid var(--theme-datepicker-separator--background);\n      width: 100%;\n      flex: 0 1 auto;\n    }\n\n    .content {\n      padding: 0 $medium-space $medium-space $medium-space;\n      flex: 1 1 auto;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /** @internal */\n  @Prop() standaloneAppearance?: boolean;\n\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      standaloneAppearance:\n        this.standaloneAppearance !== undefined\n          ? this.standaloneAppearance\n          : this.individual,\n      rounded: this.corners === 'rounded',\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          <div class=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n\n          <div class=\"separator\"></div>\n\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-date-time-card.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,y+CAAy+C,CAAC;AAClgD,6BAAe,eAAe;;MCoBjB,YAAY;;;oCAEQ,SAAS;0BAKV,IAAI;uBAKK,SAAS;;IAExC,WAAW;QACjB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,oBAAoB,EAClB,IAAI,CAAC,oBAAoB,KAAK,SAAS;kBACnC,IAAI,CAAC,oBAAoB;kBACzB,IAAI,CAAC,UAAU;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAChC,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAC5B,4DAAK,KAAK,EAAC,QAAQ,IACjB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EAEN,4DAAK,KAAK,EAAC,WAAW,GAAO,EAE7B,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAa,CACT,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","src/components/date-time-card/date-time-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .card {\n    background-color: var(--theme-menu--background);\n    width: 100%;\n    box-shadow: none;\n    border: none;\n    border-radius: unset;\n    display: flex;\n    flex-direction: column;\n\n    &.standaloneAppearance {\n      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),\n        0 12px 18px 0 rgba(0, 0, 0, 0.1);\n      border-radius: 4px;\n    }\n\n    &.rounded {\n      border-radius: 4px;\n    }\n\n    &.left {\n      border-radius: 4px 0 0 4px;\n      height: 100%;\n    }\n\n    &.right {\n      border-radius: 0 4px 4px 0;\n      height: 100%;\n    }\n\n    .header {\n      padding: $default-space;\n      flex: 0 1 auto;\n    }\n\n    .separator {\n      border: 1px solid var(--theme-datepicker-separator--background);\n      width: 100%;\n      flex: 0 1 auto;\n    }\n\n    .content {\n      padding: 0 $medium-space $medium-space $medium-space;\n      flex: 1 1 auto;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /** @internal */\n  @Prop() standaloneAppearance = undefined;\n\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      standaloneAppearance:\n        this.standaloneAppearance !== undefined\n          ? this.standaloneAppearance\n          : this.individual,\n      rounded: this.corners === 'rounded',\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          <div class=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n\n          <div class=\"separator\"></div>\n\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-datetime-picker.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-9103b14c.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-5429f20b.js';
 
 const datetimePickerCss = ":host{display:block;background-color:var(--theme-menu--background);border-radius:4px;position:relative;width:-moz-min-content;width:min-content}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .min-width{width:-moz-min-content;width:min-content}:host .no-padding{padding:0}:host .flex{display:flex;justify-content:center;flex-direction:column}@media (min-width: 576px){:host{min-width:-moz-max-content;min-width:max-content}:host .btn-select-date{left:unset !important}}:host .individual{box-shadow:none;border:none}:host .btn-select-date{position:absolute;bottom:1rem;right:1rem;left:1rem}";
 const IxDatetimePickerStyle0 = datetimePickerCss;
@@ -53,7 +53,7 @@ const DatetimePicker = class {
         this.timeChange.emit(time);
     }
     render() {
-        return (h(Host, { key: '94d1ca87f91601415fe5a21075f84cd7da6acb28' }, h("ix-layout-grid", { key: '62717105d6b7d0891e5639c3077aa8a863b792ac', class: "no-padding" }, h("ix-row", { key: 'f689afd3bca916309313a5a84871279855af089d' }, h("ix-col", { key: '0f460e11dd5a31d6792b10375e3920030a84618a', class: "no-padding" }, h("ix-date-picker", { key: 'fa18dbf1eba23b4866b7546dfce20a8cb36a9bbb', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale })), h("ix-col", { key: '5abb9b2b267a76af3f12f64b45023f9ac2425544', class: "no-padding" }, h("ix-time-picker", { key: '7dfd2a2dbcf5cc8a5d579cacdc72b8ff8a4e4b80', class: "min-width", ref: (ref) => (this.timePickerElement = ref), corners: "right", standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), h("ix-row", { key: '8431567e445a1971c6199a7acd82407ac4ac744d' }, h("ix-col", { key: 'f23276218e9e2b8f81b9b552cd415a3723c13f50' }, h("ix-button", { key: '879c7d43ab47c4345dc5fe11dabb9eb7fb6ebe4b', class: "btn-select-date btn-md-width", onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone))))));
+        return (h(Host, { key: '245fa3202c8983bc8eff53d4078c2a6a8daa0810' }, h("ix-layout-grid", { key: '1bc34611a653f3dea08ee0be6a336766da38b914', class: "no-padding" }, h("ix-row", { key: '26eef283266f46fb5a19fcaf1d78f985119cec3a' }, h("ix-col", { key: 'd4ac83db8977067d5c178fb48eac1acc1adca898', class: "no-padding" }, h("ix-date-picker", { key: '967af43189787bc677ff273de023b43d9e3b0019', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale })), h("ix-col", { key: '53bbc9d021687f71f211b6d4091e421b7374ae56', class: "no-padding" }, h("ix-time-picker", { key: 'da5a855b94d37b1424de7f10804e707e9d082139', class: "min-width", ref: (ref) => (this.timePickerElement = ref), corners: "right", standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), h("ix-row", { key: 'aa564cb9741fda50e046a508cb9e2ad985ed11d7' }, h("ix-col", { key: 'a13d931565a1165e262070e6e3d637fce6da38c6' }, h("ix-button", { key: '6769327a6e405d2b2705c3a64b4b2031e8f80de4', class: "btn-select-date btn-md-width", onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone))))));
     }
 };
 DatetimePicker.style = IxDatetimePickerStyle0;

package/dist/esm/ix-divider.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-9103b14c.js';
+import { r as registerInstance, h, H as Host } from './index-5429f20b.js';
 
 const dividerCss = ":host{display:block;position:relative;width:100%;border-bottom:0.0625rem solid var(--theme-color-x-weak-bdr);margin:0.25rem 0px}";
 const IxDividerStyle0 = dividerCss;
@@ -8,7 +8,7 @@ const Divider = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h(Host, { key: '6e1de6d2dee4f1184fa5e7791dd3032a1ed93fa5' });
+        return h(Host, { key: 'b940598630bbccaae3d37bfb9fef71c35e777a14' });
     }
 };
 Divider.style = IxDividerStyle0;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-9103b14c.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-5429f20b.js';
 import { a as anime } from './anime.es-a5520566.js';
 
 const drawerCss = ":host{top:0;right:0;box-shadow:var(--theme-box-shadow-level-3);visibility:hidden;display:flex;position:absolute;flex-flow:column nowrap;justify-content:flex-start;align-items:center;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;transition:all var(--theme-medium-time) ease-out}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .toggle{z-index:100;visibility:visible}:host .drawer-container.full-height{min-height: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;flex-grow:1;order:2;height:100%;width:100%;overflow-y:auto}:host(.toggle){visibility:visible}";
@@ -85,7 +85,7 @@ const Drawer = class {
         this.onShowChanged(this.show);
     }
     render() {
-        return (h(Host, { key: 'be37a222f4696bcd58f5e82bca62d885192c2678', class: {
+        return (h(Host, { key: '4cb0a06786c80cd977ebfbbfef6c23d6e7926d86', class: {
                 'drawer-container': true,
                 toggle: this.show,
                 'full-height': this.fullHeight,
@@ -94,7 +94,7 @@ const Drawer = class {
                 width: this.width === 'auto' ? this.width : `${this.width}rem`,
                 'min-width': `${this.minWidth}rem`,
                 'max-width': `${this.maxWidth}rem`,
-            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, h("div", { key: '6d390a6aac80cc0685cea9d168e73a7bf89e00f0', class: "header" }, h("div", { key: 'd2f34f7ba0e6f180bbdd025d667552f6d88cc2fa', class: "header-content" }, h("slot", { key: '492ed29a5a68c05576eba61a379462353c9bfcdb', name: "header" })), h("ix-icon-button", { key: '21d7593f713e459e29ad60ffcf23c9d6b8189a21', class: "close-button", icon: 'close', size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), h("div", { key: '388aed555e98aafa96710e3e66e736ebb5e571e3', class: "content" }, h("slot", { key: '4d5a255950b41d2943f1978379fea38637807bc8' }))));
+            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, h("div", { key: '63c8952c342a1d412237ab82f96ac063c0a30158', class: "header" }, h("div", { key: '4a8525053f3954b3b83dac4f8b012f005e9725b7', class: "header-content" }, h("slot", { key: '55b887208a3bdc445950c2e5f153cfaa1ba89068', name: "header" })), h("ix-icon-button", { key: '84b5b11f21d4d768c0118450147bf74d6e0a1400', class: "close-button", icon: 'close', size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), h("div", { key: '00079cfb6504ed6fa44c23209787add116e72591', class: "content" }, h("slot", { key: '3de3610ac265b9eda7d69eedf28494b47861c7e3' }))));
     }
     static get watchers() { return {
         "show": ["onShowChanged"]

package/dist/esm/ix-dropdown-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-9103b14c.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5429f20b.js';
 
 const dropdownButtonCss = ":host{display:inline-block;position:relative;height:2rem;width:auto}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .hide{display:none}:host .dropdown-button{display:block;position:relative;width:100%;height:100%}:host .dropdown-button>ix-button{width:100%;height:100%}:host .dropdown-button .button-label{margin-right:auto;min-width:0px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .dropdown-button .dropdown-icon{margin-right:0.25rem}:host .triangle{position:absolute;margin-inline-start:1.5625rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary.ghost{color:var(--theme-btn-invisible-primary--color)}:host .triangle.primary.outline{color:var(--theme-btn-outline-primary--color)}:host .triangle.primary.ghost.disabled{color:var(--theme-btn-invisible-primary--color--disabled)}:host .triangle.primary.outline.disabled{color:var(--theme-btn-outline-primary--color--disabled)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.ghost{color:var(--theme-btn-invisible-secondary--color)}:host .triangle.secondary.outline{color:var(--theme-btn-outline-secondary--color)}:host .triangle.secondary.ghost.disabled{color:var(--theme-btn-invisible-secondary--color--disabled)}:host .triangle.secondary.outline.disabled{color:var(--theme-btn-outline-secondary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .content{display:flex;align-items:center}:host(.disabled){pointer-events:none}";
 const IxDropdownButtonStyle0 = dropdownButtonCss;
@@ -28,11 +28,11 @@ const DropdownButton = class {
             } }));
     }
     render() {
-        return (h(Host, { key: '57997375c95a39fbd19f2bdedad501a7002b4d54', class: {
+        return (h(Host, { key: '8669f7d302b6009aa9ab9cadb3c86e4bbcc6330f', class: {
                 disabled: this.disabled,
             }, ref: (ref) => {
                 this.dropdownAnchor = ref;
-            } }, h("div", { key: 'c9bcef0b1ad78e3aca7990082d96d6f1bab7c8da', class: "dropdown-button" }, this.label ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, alignment: "start" }, h("div", { class: 'content' }, this.icon ? (h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: 'chevron-down-small', size: "24" })))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { key: 'fb120a4022f208d754e7948c31e19cf6e75f4fd3', class: "dropdown", trigger: this.dropdownAnchor, placement: this.placement, closeBehavior: this.closeBehavior }, h("slot", { key: '47b3cfc1217bf63676e9149e5138a358a118903a' }))));
+            } }, h("div", { key: '5561196cfa6584097b0395ca1d4bf61db522b5a8', class: "dropdown-button" }, this.label ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, alignment: "start" }, h("div", { class: 'content' }, this.icon ? (h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: 'chevron-down-small', size: "24" })))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { key: '4b738dfff8c84360e1d561560c3b29ba21684de6', class: "dropdown", trigger: this.dropdownAnchor, placement: this.placement, closeBehavior: this.closeBehavior }, h("slot", { key: 'ad15df81aad664b12a3183b45e443b110d2b4393' }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-dropdown-header.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-9103b14c.js';
+import { r as registerInstance, h, H as Host } from './index-5429f20b.js';
 
 const dropdownHeaderCss = ":host{display:flex;align-items:center;position:relative;height:2.5rem;width:auto;padding:0.25rem 1rem;overflow:hidden;cursor:default;color:var(--theme-color-soft-text)}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";
 const IxDropdownHeaderStyle0 = dropdownHeaderCss;
@@ -9,7 +9,7 @@ const DropdownHeader = class {
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: 'fec58d9a47500e154e0327e8e69e196856ffc6fe' }, h("ix-typography", { key: '54e5ac8aa1c906b3f78db52afdfddd89f1273499', class: 'category-text', variant: 'default-title' }, this.label)));
+        return (h(Host, { key: '987d6e23477350b4ea2c129802bcf1887970ef08' }, h("ix-typography", { key: '98aa123660b40148119a914d5edd0eb12b161823', class: 'category-text', variant: 'default-title' }, this.label)));
     }
 };
 DropdownHeader.style = IxDropdownHeaderStyle0;

package/dist/esm/ix-dropdown-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9103b14c.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5429f20b.js';
 
 const dropdownItemCss = ":host{--ix-dropdown-item-checked-color:var(--theme-color-primary);display:flex;flex-direction:row;position:relative;height:2.5rem;width:auto;overflow:hidden;cursor:pointer}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .dropdown-item{all:unset;display:flex;flex-direction:row;align-items:center;position:relative;height:calc(100% - 2px);width:calc(100% - 0.5rem - 1.5rem);padding:0 0.5rem;padding-right:1.5rem;border:0.0625rem solid transparent;white-space:nowrap}:host .dropdown-item.no-checked-field{width:calc(100% - 1rem - 1.5rem);padding:0 1rem;padding-right:1.5rem}:host .dropdown-item:focus-visible{border-color:var(--theme-color-focus-bdr)}:host .dropdown-item-checked{display:flex;align-items:center;justify-content:center;position:relative;height:100%;width:1rem;min-width:1rem;margin-right:0.25rem;color:var(--ix-dropdown-item-checked-color)}:host .dropdown-item-icon{margin-right:0.25rem;color:var(--theme-color-soft-text)}:host .dropdown-item-text{display:block;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .dropdown-item:focus-visible{outline:1px solid yellow}:host .submenu-icon{margin-left:auto}:host(.icon-only) .dropdown-item-icon{margin-right:0px}:host(.icon-only) .dropdown-item-checked{display:none}:host(.icon-only) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(.submenu) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(:not(.disabled):not(:disabled).hover),:host(:not(.disabled):not(:disabled):hover){background-color:var(--theme-ghost--background--hover)}:host(:not(.disabled):not(:disabled).active),:host(:not(.disabled):not(:disabled):active){background-color:var(--theme-ghost--background--active)}:host(.disabled){pointer-events:none;color:var(--theme-color-weak-text) !important}:host(.disabled) .dropdown-item-icon{color:var(--theme-color-weak-text) !important}";
 const IxDropdownItemStyle0 = dropdownItemCss;
@@ -31,15 +31,15 @@ const DropdownItem = class {
             this.icon !== undefined);
     }
     render() {
-        return (h(Host, { key: '790a3152ceedafea257e25206c9b1562408c451d', class: {
+        return (h(Host, { key: '89da1b5ab639ecb4fe9caa06f16fc7f8cff8cd49', class: {
                 hover: this.hover,
                 'icon-only': this.isIconOnly(),
                 disabled: this.disabled,
                 submenu: this.isSubMenu,
-            }, role: "listitem" }, h("button", { key: 'f752c60f44e8e08d66d043cd21f637965a9ba192', type: "button", tabIndex: 0, class: {
+            }, role: "listitem" }, h("button", { key: '386ba89dfedf42919298d1d4d189310c364c0acb', type: "button", tabIndex: 0, class: {
                 'dropdown-item': true,
                 'no-checked-field': this.suppressChecked,
-            }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { class: "checkmark", name: 'single-check', size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, h("div", { key: '1d6f83b7b1eaf7011d0534aa8524b100c2de2f20', class: "dropdown-item-text" }, this.label, h("slot", { key: '466b12dc7018429b77a82ba988816f3fd00dd317' })), this.isSubMenu ? (h("ix-icon", { name: 'chevron-right-small', class: 'submenu-icon' })) : null)));
+            }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { class: "checkmark", name: 'single-check', size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, h("div", { key: '385eaf4c6c074d1e21eeb55ef1c7956f8f8c4126', class: "dropdown-item-text" }, this.label, h("slot", { key: 'b9e7252f90c080074da87786cf5fce912f8bdb25' })), this.isSubMenu ? (h("ix-icon", { name: 'chevron-right-small', class: 'submenu-icon' })) : null)));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-dropdown-quick-actions.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-9103b14c.js';
+import { r as registerInstance, h, H as Host } from './index-5429f20b.js';
 
 const dropdownQuickActionsCss = ":host{display:flex;justify-content:center;align-items:center;margin-inline-start:1.5rem;margin-inline-end:1.5rem;margin-block-end:0.25rem}:host slot::slotted(*){display:flex;margin-inline-end:0.625rem}";
 const IxDropdownQuickActionsStyle0 = dropdownQuickActionsCss;
@@ -8,7 +8,7 @@ const DropdownQuickActions = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '340641a72961969a0718bd26bda9b4d2cfd269fb' }, h("slot", { key: '66489fa79ac1ce69e3aa59ce89bc08208aad20d9' })));
+        return (h(Host, { key: 'cf0b790f201df5ca5cd904de492140d79f49d29a' }, h("slot", { key: 'f2003c2b93ba50b6acb966ab05b036ce6516d829' })));
     }
 };
 DropdownQuickActions.style = IxDropdownQuickActionsStyle0;

package/dist/esm/ix-dropdown.entry.js

@@ -1,7 +1,143 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9103b14c.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5429f20b.js';
 import { f as flip, i as inline, s as shift, o as offset, a as autoUpdate, c as computePosition } from './floating-ui.dom.esm-6e7c098f.js';
 import { A as ArrowFocusController } from './focus-d4d3abaf.js';
-import { d as dropdownController, a as addDisposableEventListener, h as hasDropdownItemWrapperImplemented } from './dropdown-controller-d6d8b14a.js';
+
+/*
+ * 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 &&
+        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) {
+        this.dropdowns.delete(dropdown.getId());
+    }
+    discoverSubmenus() {
+        this.dropdowns.forEach((dropdown) => {
+            dropdown.discoverSubmenu();
+        });
+    }
+    present(dropdown) {
+        if (!dropdown.isPresent() && dropdown.willPresent()) {
+            this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();
+            dropdown.present();
+        }
+    }
+    dismissChildren(uid) {
+        const childIds = this.submenuIds[uid] || [];
+        for (const id of childIds) {
+            this.dismiss(this.dropdowns.get(id));
+        }
+    }
+    dismiss(dropdown) {
+        if (dropdown.isPresent() && dropdown.willDismiss()) {
+            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 addDisposableEventListener = (element, eventType, callback) => {
+    element.addEventListener(eventType, callback);
+    return () => {
+        element.removeEventListener(eventType, callback);
+    };
+};
+const dropdownController = new DropdownController();
 
 const dropdownCss = ":host{background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);min-width:0px;z-index:var(--theme-z-index-dropdown);box-shadow:var(--theme-shadow-4);padding:0.25rem 0px}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}:host(.overflow){max-height:50vh;overflow-y:auto}:host(:not(.show)){display:none}";
 const IxDropdownStyle0 = dropdownCss;
@@ -188,7 +324,7 @@ const Dropdown = class {
         });
     }
     async changedShow(newShow) {
-        var _a, _b, _c;
+        var _a, _b;
         if (newShow) {
             this.anchorElement = await (this.anchor
                 ? this.resolveElement(this.anchor)
@@ -205,8 +341,8 @@ const Dropdown = class {
         }
         else {
             (_a = this.arrowFocusController) === null || _a === void 0 ? void 0 : _a.disconnect();
-            (_b = this.itemObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-            (_c = this.disposeKeyListener) === null || _c === void 0 ? void 0 : _c.call(this);
+            this.itemObserver.disconnect();
+            (_b = this.disposeKeyListener) === null || _b === void 0 ? void 0 : _b.call(this);
         }
     }
     changedTrigger(newTriggerValue) {
@@ -298,6 +434,9 @@ const Dropdown = class {
                 event.preventDefault();
             }
             if (this.isTriggerElement(target)) {
+                if (this.closeBehavior === 'outside') {
+                    event.preventDefault();
+                }
                 return;
             }
         }
@@ -315,7 +454,7 @@ const Dropdown = class {
         this.applyDropdownPosition();
     }
     render() {
-        return (h(Host, { key: 'c5fa949b336dfa2d85453647ec285661866b4c05', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
+        return (h(Host, { key: '4f50f3c00bce087ae0c36c463f49c29adfe20f78', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
                 'dropdown-menu': true,
                 show: this.show,
                 overflow: true,
@@ -323,7 +462,7 @@ const Dropdown = class {
                 margin: '0',
                 minWidth: '0px',
                 position: this.positioningStrategy,
-            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: 'bd0b94a0f4f12fe426ea040eba252e2b571f10a2', style: { display: 'contents' } }, this.header && h("div", { key: '353ea10f7608c8a822058eb869345ca0178f4c91', class: "dropdown-header" }, this.header), h("slot", { key: 'b573d70610827470688dc4369d152fcdf55bdd3d' }))));
+            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: 'be529e836ffcf39ed344416cb41d1cc45a0d9abb', style: { display: 'contents' } }, this.header && h("div", { key: 'af768a37fd188144b84836abc87b3fd06f0b4808', class: "dropdown-header" }, this.header), this.show && h("slot", { key: 'faa1cadf506b823d624557f8b2bef5b283d8fc04' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {