@siemens/ix 4.4.0 → 5.1.0

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BEPo7U1W.js';
-import { m as iconArrowLeft } from './index-BBzEV-f4.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-EBgS4zhE.js';
+import { o as iconArrowLeft } from './index-DgUGsIlh.js';
 
 const contentHeaderCss = () => `:host{display:flex;flex-direction:row;align-items:flex-start;padding:0}:host .titleGroup{display:flex;flex-direction:column;flex:1 1 0;min-width:0;white-space:nowrap;margin-right:0.5rem}:host .titleGroup .titleOverflow{overflow:hidden;text-overflow:ellipsis}:host .titleGroup .headerTitleRow{display:flex}:host .titleGroup .headerTitleRow .headerSlot{display:inline-flex;margin-left:0.5rem}:host .titleGroup .secondary{padding:0.25rem 0}:host .subtitle{margin-top:-0.125rem}:host .backButton{margin-right:0.5rem}:host .buttons{flex:0 0 auto}`;
 
@@ -7,27 +7,35 @@ const ContentHeader = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.backButtonClick = createEvent(this, "backButtonClick", 7);
-        /**
-         * Variant of content header
-         */
-        this.variant = 'primary';
-        /**
-         * Subtitle of Header
-         */
-        this.headerSubtitle = undefined;
-        /**
-         * Display a back button
-         */
-        this.hasBackButton = false;
     }
+    /**
+     * Variant of content header
+     */
+    variant = 'primary';
+    /**
+     * Title of Header
+     */
+    headerTitle;
+    /**
+     * Subtitle of Header
+     */
+    headerSubtitle = undefined;
+    /**
+     * Display a back button
+     */
+    hasBackButton = false;
+    /**
+     * Triggered when back button is clicked
+     */
+    backButtonClick;
     render() {
-        return (h(Host, { key: 'b422be3706aac399ed76b4c491d61e2da8561b24' }, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "tertiary", icon: iconArrowLeft, onClick: () => this.backButtonClick.emit() })) : null, h("div", { key: '7606ba97f834f591a78fc2cca74bdaf3b3a09feb', class: "titleGroup" }, h("div", { key: 'df174e297a1b2075bcab0182a80f626162d1c319', class: "headerTitleRow" }, h("ix-typography", { key: 'd8ab10dc801306dafe0f3e6e39ed93e0fa162ca1', format: this.variant === 'secondary' ? 'h4' : 'h3', class: {
+        return (h(Host, { key: 'a81bf466bf10e9e7a0794253b246c340a9b92999' }, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "tertiary", icon: iconArrowLeft, onClick: () => this.backButtonClick.emit() })) : null, h("div", { key: '7b81cb2b7c5d48fdd75b631e9ef2b5da9224f455', class: "titleGroup" }, h("div", { key: '59d28222f4bbfd83a94490f10bb67b944e44c79f', class: "headerTitleRow" }, h("ix-typography", { key: 'f6b3985a6b8e2420e4d63a7032b1ff1f12f93679', format: this.variant === 'secondary' ? 'h4' : 'h3', class: {
                 secondary: this.variant === 'secondary',
                 titleOverflow: true,
-            } }, this.headerTitle), h("div", { key: 'e24d6b450426931aaead3732fa20161bc5aab4e2', class: "headerSlot" }, h("slot", { key: 'e9a471492f2693fc6abe546d1febbc06834fef1c', name: "header" }))), !!this.headerSubtitle && (h("ix-typography", { key: '5fdb5ebce68a3aae09df3299093bca156468933c', format: 'h6', "text-color": 'soft', class: {
+            } }, this.headerTitle), h("div", { key: '9b1a9f865955f4b02a23a528d61e54959a8992d1', class: "headerSlot" }, h("slot", { key: '8d7d21906e9042de89123de9489b2cd8d8db25b5', name: "header" }))), !!this.headerSubtitle && (h("ix-typography", { key: '2b29f3ebde503fa328c10bad48ba5b98455d8a31', format: 'h6', "text-color": 'soft', class: {
                 subtitle: this.variant === 'secondary',
                 titleOverflow: true,
-            }, title: this.headerSubtitle }, this.headerSubtitle))), h("div", { key: '6648f93246d2e8d79cc2d3e7eae65009d578632c', class: "buttons" }, h("slot", { key: '1c3ee8084521a9a799e3b2444b1edc0c1cee5066' }))));
+            }, title: this.headerSubtitle }, this.headerSubtitle))), h("div", { key: '0a558d5e3c40ab3e5ebd77c1ff8e0e316e263658', class: "buttons" }, h("slot", { key: 'f54687cd38db7f152f3495beec362f0dc82e2bef' }))));
     }
 };
 ContentHeader.style = contentHeaderCss();

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

@@ -1,25 +1,25 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-BEPo7U1W.js';
-import { h as hasSlottedElements } from './shadow-dom-i60z1FJC.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-EBgS4zhE.js';
+import { h as hasSlottedElements } from './shadow-dom-BClJdFQP.js';
 
-const contentCss = () => `:host{display:flex;flex-direction:column;position:relative;padding:1.5rem 2rem 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{}: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{flex-grow:1;overflow:auto;position:relative}:host .content-header.slotted{margin-bottom:1rem}`;
+const contentCss = () => `:host{display:flex;flex-direction:column;position:relative;padding:0.75rem 2rem 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{}: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{flex-grow:1;overflow:auto;position:relative}:host .content-header.slotted{margin-bottom:1.5rem}`;
 
 const Content = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.isContentHeaderSlotted = false;
     }
+    get hostElement() { return getElement(this); }
+    isContentHeaderSlotted = false;
     get contentHeaderSlot() {
         return this.hostElement.shadowRoot.querySelector('.content-header slot');
     }
     render() {
-        return (h(Host, { key: '2ca4af3b088beab36b86cb3431f1d1b59fcf8756' }, h("div", { key: '04f73ba733dc7fbf57ecf6fdc0afc1fec8249b8e', class: {
+        return (h(Host, { key: '2cb8428708f3a1e815704254035676f742cd6f30' }, h("div", { key: '4e275d8af38da243e29b46bb8e5dcc9e9d23b1da', class: {
                 'content-header': true,
                 slotted: this.isContentHeaderSlotted,
-            } }, h("slot", { key: '962e83643e1ebcd86384cae1e7a3632b6f47554e', name: "header", onSlotchange: () => {
+            } }, h("slot", { key: '3e4a6609305c444deaacbf29a60514f300f65301', name: "header", onSlotchange: () => {
                 this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
-            } })), h("div", { key: '4315ac1e71743ba30c7b8f592997c662eed392b4', class: "content" }, h("slot", { key: 'c1f31f8e283bcc55011b9f2d5746d9b7c10988da' }))));
+            } })), h("div", { key: '893989653b3beaf7bc406e7870db8d8f7d0deba4', class: "content" }, h("slot", { key: '25b54aafbde16ab4d87a0cdbc4a8222dabacb226' }))));
     }
-    get hostElement() { return getElement(this); }
 };
 Content.style = contentCss();
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BEPo7U1W.js';
+import { r as registerInstance, h, H as Host } from './index-EBgS4zhE.js';
 
 const cssGridItemCss = () => `:host{display:block;position:relative}:host ::slotted(*){height:100%;width:100%}`;
 
@@ -6,10 +6,14 @@ const CssGridItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
+    /**
+     * Grid item name
+     */
+    itemName;
     render() {
         const style = {};
         style['grid-area'] = this.itemName;
-        return (h(Host, { key: '0f7a1001629ec09b7e6f44470b733f3d1d691bcb', style: style }, h("slot", { key: '1fce4a329cea68181bc52e60d155d6c6b7bb41bc' })));
+        return (h(Host, { key: 'af7e2134d1e6a448e96a0a414c3766f51088fb54', style: style }, h("slot", { key: 'a20d56f4601d818ff1d2e7cad497a0facd09c44e' })));
     }
 };
 CssGridItem.style = cssGridItemCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BEPo7U1W.js';
+import { r as registerInstance, h, H as Host } from './index-EBgS4zhE.js';
 
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
@@ -33,9 +33,14 @@ const mediaQueryCollection = [
 const CssGrid = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.disposeMediaQueryListener = [];
-        this.mediaQueries = [];
     }
+    /**
+     * Define css grid template
+     */
+    templates;
+    currentTemplate;
+    disposeMediaQueryListener = [];
+    mediaQueries = [];
     componentWillRender() {
         this.mediaQueries = mediaQueryCollection.map((query) => {
             const mediaQuery = window.matchMedia(query.query);
@@ -44,7 +49,10 @@ const CssGrid = class {
             };
             this.disposeMediaQueryListener.push(callback);
             mediaQuery.addEventListener('change', callback);
-            return Object.assign(Object.assign({}, query), { mediaQuery });
+            return {
+                ...query,
+                mediaQuery,
+            };
         });
         this.applyTemplate();
     }
@@ -85,7 +93,7 @@ const CssGrid = class {
         if (this.currentTemplate && this.currentTemplate.length !== 0) {
             style['grid-template-areas'] = templateBuilder(this.currentTemplate);
         }
-        return (h(Host, { key: '470c3da8301e7d99e603b78cfd9c2883e4801c76', style: style }, h("slot", { key: '64f7e86981ba37aeb20223bd672bc1190dba4619' })));
+        return (h(Host, { key: '491581fede3e8163cdf43cca11f597b98c5bfe32', style: style }, h("slot", { key: 'ddd975c6bfea2c4abfc3b69d8d0d895a69823756' })));
     }
 };
 CssGrid.style = cssGridCss();

package/dist/esm/ix-custom-field.entry.js

@@ -1,5 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-BEPo7U1W.js';
-import { H as HookValidationLifecycle } from './validation-CTBekLDe.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-EBgS4zhE.js';
+import { H as HookValidationLifecycle } from './validation-VVt5EFy0.js';
+import './index-XBTykBKS.js';
 
 const customFieldCss = () => `:host{display:block;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}`;
 
@@ -24,15 +25,44 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 const CustomField = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * A value is required or must be checked for the form to be submittable
-         */
-        this.required = false;
-        this.isInvalid = false;
-        this.isValid = false;
-        this.isInfo = false;
-        this.isWarning = false;
     }
+    get hostElement() { return getElement(this); }
+    /**
+     * A value is required or must be checked for the form to be submittable
+     */
+    required = false;
+    /**
+     * Label for the field component
+     */
+    label;
+    /**
+     * Show text below the field component which show additional information
+     */
+    helperText;
+    /**
+     * Info text for the field component
+     */
+    infoText;
+    /**
+     * Warning text for the field component
+     */
+    warningText;
+    /**
+     * Error text for the field component
+     */
+    invalidText;
+    /**
+     * Valid text for the field component
+     */
+    validText;
+    /**
+     * Show helper, info, warning, error and valid text as tooltip
+     */
+    showTextAsTooltip;
+    isInvalid = false;
+    isValid = false;
+    isInfo = false;
+    isWarning = false;
     updateValidationState({ isInvalid, isValid, isInfo, isWarning, }) {
         this.isInvalid = isInvalid;
         this.isValid = isValid;
@@ -40,9 +70,8 @@ const CustomField = class {
         this.isWarning = isWarning;
     }
     render() {
-        return (h(Host, { key: '732dae3e5ba3f37b5eac745ce48338cae5397d9e' }, h("ix-field-wrapper", { key: '5df555252c2de619f3dd5daa082632695a88e3f6', label: this.label, helperText: this.helperText, infoText: this.infoText, warningText: this.warningText, invalidText: this.invalidText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, required: this.required }, h("slot", { key: '81d169fce11d76b04876eb3483909bf163c44370' }))));
+        return (h(Host, { key: '4194f7081c66e42f9376cf0c8004a705bc053f0b' }, h("ix-field-wrapper", { key: '55a70e2a6500a6945f819004c9b910d7d7decd2b', label: this.label, helperText: this.helperText, infoText: this.infoText, warningText: this.warningText, invalidText: this.invalidText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, required: this.required }, h("slot", { key: '8a54f90dc2db37f9a21f2c52f7b4721dbb7acc67' }))));
     }
-    get hostElement() { return getElement(this); }
 };
 __decorate([
     HookValidationLifecycle({

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

@@ -1,120 +1,80 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-BEPo7U1W.js';
-import { n as iconHistory } from './index-BBzEV-f4.js';
+import { M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-EBgS4zhE.js';
+import { p as iconHistory } from './index-DgUGsIlh.js';
 import { D as DateTime } from './datetime-D1WplX1z.js';
-import { m as makeRef } from './make-ref-bcj7UEIC.js';
+import { D as DefaultMixins, h as hasKeyboardMode } from './component-DqJSHc3A.js';
+import { m as makeRef } from './make-ref-Djkc69iv.js';
+import { r as requestAnimationFrameNoNgZone } from './requestAnimationFrame-BEuV0Xpe.js';
+import { B as BaseButton } from './base-button-DZdtpLxn.js';
+import { b as a11yHostAttributes, a as a11yBoolean } from './a11y-C21npbUc.js';
+import { T as TRAP_FOCUS_EXCLUDE_ATTRIBUTE } from './focus-trap-IK9ialav.js';
+import './focus-utilities-6ZxKp7Jn.js';
+import './shadow-dom-BClJdFQP.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{}: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}@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 1rem 0.75rem 1rem}`;
+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{}: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 .pull-right{position:relative;float:right;padding:1rem}:host .quick-selection{display:inline-flex;flex-direction:column;gap:0.25rem;border-right:var(--theme-x-weak-bdr-1);overflow:auto;padding:0.5rem}:host .quick-selection ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host .quick-selection *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host .quick-selection{}:host .quick-selection ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host .quick-selection{}:host .quick-selection ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host .quick-selection ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host .quick-selection{}:host .quick-selection ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host .quick-selection{}:host .quick-selection ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host .quick-selection ::-webkit-scrollbar-corner{display:none}:host .quick-selection .btn{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--ix-button-padding, 0 0.5rem);min-width:8rem;min-height:2rem;max-height:2rem;justify-content:flex-start}:host .quick-selection .btn:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .quick-selection .btn-subtle-tertiary{text-align:start;border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .quick-selection .btn-subtle-tertiary{background-color:var(--theme-btn-subtle-tertiary--background);color:var(--theme-btn-subtle-tertiary--color);--ix-button-color:var(--theme-btn-subtle-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-tertiary--border-color);border-style:solid}:host .quick-selection .btn-subtle-tertiary.selected{background-color:var(--theme-btn-subtle-tertiary--background--pressed);color:var(--theme-btn-subtle-tertiary--color--pressed)}:host .quick-selection .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .quick-selection .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):hover,:host .quick-selection .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-hover)}:host .quick-selection .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .quick-selection .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):active,:host .quick-selection .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-active)}:host .quick-selection .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .quick-selection .btn-subtle-tertiary:not(.disabled):not(:disabled):hover,:host .quick-selection .btn-subtle-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-tertiary--border-color--hover);background-color:var(--theme-btn-subtle-tertiary--background--hover);color:var(--theme-btn-subtle-tertiary--color--hover)}:host .quick-selection .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .quick-selection .btn-subtle-tertiary:not(.disabled):not(:disabled):active,:host .quick-selection .btn-subtle-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-tertiary--border-color--active);background-color:var(--theme-btn-subtle-tertiary--background--active);color:var(--theme-btn-subtle-tertiary--color--active)}:host .container{display:flex;flex-direction:row;height:25rem;max-height:25rem;flex-wrap:nowrap}:host .picker-wrapper{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}:host .picker-wrapper ix-date-picker{height:21rem}:host ix-dropdown{padding:0px}@media only screen and (max-width: 48em){:host .container{flex-direction:column;max-height:unset;height:unset}:host .quick-selection{max-height:12rem}}`;
 
-const DateDropdown = class {
+const DateDropdown = class extends Mixin(...DefaultMixins) {
     constructor(hostRef) {
+        super();
         registerInstance(this, hostRef);
         this.dateRangeChange = createEvent(this, "dateRangeChange", 7);
-        /**
-         * Disable the button that opens the dropdown containing the date picker.
-         */
-        this.disabled = false;
-        /**
-         * Date format string.
-         * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
-         */
-        this.format = 'yyyy/LL/dd';
-        /**
-         * If true disables date range selection (from/to).
-         */
-        this.singleSelection = false;
-        /**
-         * Picker date. If the picker is in range mode this property is the start date.
-         * If set to `null` no default start date will be pre-selected.
-         *
-         * Format is based on `format`
-         */
-        this.from = '';
-        /**
-         * Picker date. If the picker is in range mode this property is the end date.
-         * If the picker is not in range mode leave this value `null`
-         *
-         * Format is based on `format`
-         */
-        this.to = '';
-        /**
-         * The earliest date that can be selected by the date picker.
-         * If not set there will be no restriction.
-         */
-        this.minDate = '';
-        /**
-         * The latest date that can be selected by the date picker.
-         * If not set there will be no restriction.
-         */
-        this.maxDate = '';
-        /**
-         * Used to set the initial select date range as well as the button name,
-         * if not set or no according date range label is found, nothing will be selected
-         */
-        this.dateRangeId = 'custom';
-        /**
-         * Button variant
-         */
-        this.variant = 'primary';
-        /**
-         * Loading button
-         */
-        this.loading = false;
-        /**
-         * Shows week numbers displayed on the left side of the date picker
-         *
-         * @since 3.0.0
-         */
-        this.showWeekNumbers = false;
-        /**
-         * Controls whether custom date range selection is disabled in the component.
-         * When set to 'false', the user can select a custom date range using the date picker.
-         * When set to 'true', only predefined time date ranges are available for selection.
-         */
-        this.customRangeDisabled = false;
-        /**
-         * An array of predefined date range options for the date picker.
-         * Each option is an object with a label describing the range and a function
-         * that returns the start and end dates of the range as a DateRangeOption object.
-         *
-         * Example format:
-         *   {
-         *     id: 'some unique id',
-         *     label: 'Name of the range',
-         *     from: undefined, to: '2023/03/29'
-         *   },
-         *   // ... other predefined date range options ...
-         */
-        this.dateRangeOptions = [];
-        /**
-         * The index of which day to start the week on, based on the Locale#weekdays array.
-         * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.
-         */
-        this.weekStartIndex = 0;
-        /**
-         * Text for custom dropdown item. Will be used for translation.
-         */
-        this.i18nCustomItem = 'Custom...';
-        /**
-         * Text for the done button. Will be used for translation.
-         */
-        this.i18nDone = 'Done';
-        /**
-         * Text for the done button. Will be used for translation.
-         */
-        this.i18nNoRange = 'No range set';
-        /** @internal */
-        this.today = DateTime.now().toISO();
-        /**
-         * Enable Popover API rendering for dropdown.
-         *
-         * @default false
-         * @since 4.3.0
-         */
-        this.enableTopLayer = false;
-        this.selectedDateRangeId = '';
-        this.triggerRef = makeRef();
-        this.datePickerTouched = false;
     }
+    get hostElement() { return getElement(this); }
+    /**
+     * Disable the button that opens the dropdown containing the date picker.
+     */
+    disabled = false;
+    /**
+     * Date format string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     */
+    format = 'yyyy/LL/dd';
+    /**
+     * If true disables date range selection (from/to).
+     */
+    singleSelection = false;
+    /**
+     * Picker date. If the picker is in range mode this property is the start date.
+     * If set to `null` no default start date will be pre-selected.
+     *
+     * Format is based on `format`
+     */
+    from = '';
+    /**
+     * Picker date. If the picker is in range mode this property is the end date.
+     * If the picker is not in range mode leave this value `null`
+     *
+     * Format is based on `format`
+     */
+    to = '';
+    /**
+     * The earliest date that can be selected by the date picker.
+     * If not set there will be no restriction.
+     */
+    minDate = '';
+    /**
+     * The latest date that can be selected by the date picker.
+     * If not set there will be no restriction.
+     */
+    maxDate = '';
+    /**
+     * Used to set the initial select date range as well as the button name,
+     * if not set or no according date range label is found, nothing will be selected
+     */
+    dateRangeId = 'custom';
+    /**
+     * Button variant
+     */
+    variant = 'primary';
+    /**
+     * Loading button
+     */
+    loading = false;
+    /**
+     * Shows week numbers displayed on the left side of the date picker
+     *
+     * @since 3.0.0
+     */
+    showWeekNumbers = false;
     onDateRangeIdChange() {
         this.onRangeListSelect(this.dateRangeId);
         this.updateCurrentDate();
@@ -128,18 +88,72 @@ const DateDropdown = class {
             id: this.currentRangeValue.id,
         });
     }
+    /**
+     * An array of predefined date range options for the date picker.
+     * Each option is an object with a label describing the range and a function
+     * that returns the start and end dates of the range as a DateRangeOption object.
+     *
+     * Example format:
+     *   {
+     *     id: 'some unique id',
+     *     label: 'Name of the range',
+     *     from: undefined, to: '2023/03/29'
+     *   },
+     *   // ... other predefined date range options ...
+     */
+    dateRangeOptions = [];
     onDateRangeOptionsChange() {
         this.initialize();
         this.onDateRangeIdChange();
     }
+    /**
+     * Locale identifier (e.g. 'en' or 'de').
+     */
+    locale;
+    /**
+     * The index of which day to start the week on, based on the Locale#weekdays array.
+     * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.
+     */
+    weekStartIndex = 0;
+    /**
+     * Text for the done button. Will be used for translation.
+     */
+    i18nDone = 'Done';
+    /**
+     * Text for the done button. Will be used for translation.
+     */
+    i18nNoRange = 'No range set';
+    /** @internal */
+    today = DateTime.now().toISO();
+    /**
+     * Enable Popover API rendering for dropdown.
+     *
+     * @default false
+     * @since 4.3.0
+     */
+    enableTopLayer = false;
+    /**
+     * EventEmitter for date range change events.
+     *
+     * This event is emitted when the date range changes within the component.
+     * The event payload contains information about the selected date range.
+     */
+    dateRangeChange;
+    selectedDateRangeId = '';
+    currentRangeValue;
+    show = false;
+    triggerRef = makeRef();
     onDisabledChange() {
         if (this.disabled) {
             this.closeDropdown();
         }
     }
+    datePickerRef = makeRef();
+    inheritAriaAttributes = {};
     componentWillLoad() {
         this.initialize();
         this.setDateRangeSelection(this.dateRangeId);
+        this.inheritAriaAttributes = a11yHostAttributes(this.hostElement);
     }
     /**
      * Retrieves the currently selected date range from the component.
@@ -151,7 +165,7 @@ const DateDropdown = class {
     initialize() {
         const isCustomRange = this.dateRangeId === 'custom' ||
             (!this.dateRangeId && !!this.from && !!this.to);
-        if (isCustomRange && !this.customRangeDisabled) {
+        if (isCustomRange) {
             this.selectedDateRangeId = 'custom';
             this.updateCurrentDate();
             return;
@@ -171,12 +185,8 @@ const DateDropdown = class {
             to: this.to,
         };
     }
-    onDateSelect(rangeValue, preserveDropdown = true) {
+    onDateSelect(rangeValue) {
         this.dateRangeChange.emit(rangeValue);
-        if (preserveDropdown) {
-            this.closeDropdown();
-        }
-        this.datePickerTouched = false;
     }
     onRangeListSelect(id) {
         if (this.setDateRangeSelection(id) && this.currentRangeValue) {
@@ -187,7 +197,14 @@ const DateDropdown = class {
         this.selectedDateRangeId = id;
         const option = this.dateRangeOptions.find((range) => range.id === id);
         if (option) {
-            this.currentRangeValue = option;
+            if (option.from && option?.from === this.currentRangeValue?.from) {
+                // Show the correct month in the date picker if the same range is selected again
+                const formattedDate = DateTime.fromFormat(option.from, this.format);
+                this.datePickerRef.current?.updateSelectedYearMonth(formattedDate);
+            }
+            else {
+                this.currentRangeValue = option;
+            }
         }
         return option;
     }
@@ -198,50 +215,58 @@ const DateDropdown = class {
         }
     }
     getButtonLabel() {
-        var _a, _b;
-        if (this.selectedDateRangeId === 'custom' && ((_a = this.currentRangeValue) === null || _a === void 0 ? void 0 : _a.from)) {
+        if (this.currentRangeValue?.from) {
             let range = this.currentRangeValue.from;
+            if (this.currentRangeValue.to === this.currentRangeValue.from) {
+                return range;
+            }
             if (this.currentRangeValue.to) {
                 range += ` - ${this.currentRangeValue.to}`;
             }
             return range;
         }
-        if (!this.selectedDateRangeId) {
-            return this.i18nNoRange;
-        }
-        if (!this.dateRangeOptions || ((_b = this.dateRangeOptions) === null || _b === void 0 ? void 0 : _b.length) === 0) {
-            return this.i18nNoRange;
-        }
-        const option = this.dateRangeOptions.find((option) => option.id === this.selectedDateRangeId);
-        if (!option) {
-            console.error(`Cannot find range option with id ${this.selectedDateRangeId}`);
-            return this.i18nNoRange;
-        }
-        return option.label;
+        return this.i18nNoRange;
     }
     render() {
-        var _a, _b, _c;
-        return (h(Host, { key: '34b878eb8221b6c13f235d1b42ec63d3b6dce25c' }, h("ix-button", { key: '6f442e0178a7aabdf35321780d95414ab80af0cb', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ariaLabelButton: this.ariaLabelDropdownButton }, this.getButtonLabel()), h("ix-dropdown", { key: '13e442c5143981a0436675ce43541a6a48f6e597', "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", enableTopLayer: this.enableTopLayer, onShowChanged: ({ detail: show }) => {
-                if (!show &&
-                    this.selectedDateRangeId === 'custom' &&
-                    this.datePickerTouched &&
-                    this.currentRangeValue) {
+        const ariaLabel = this.inheritAriaAttributes['aria-label'] || this.getButtonLabel();
+        return (h(Host, { key: '22f023b7eebe6aeb1d1fb43e6fd9fca761fbb654', onFocusout: (event) => {
+                const relatedTarget = event.relatedTarget;
+                if (!relatedTarget) {
+                    return;
+                }
+                this.closeDropdown();
+            }, role: "presentation" }, h("ix-button", { key: '79990d758b39d7f8438d7333f1c148f94665f157', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ...this.inheritAriaAttributes, "aria-haspopup": "true", "aria-expanded": a11yBoolean(this.show), "aria-controls": "date-dropdown", "aria-label": ariaLabel, [TRAP_FOCUS_EXCLUDE_ATTRIBUTE]: true }, this.getButtonLabel()), h("ix-dropdown", { key: '04df9639b41dc3084e0a035e39441a64fb5398aa', focusTrapOptions: {
+                excludeElements: true,
+                trapFocusInShadowDom: true,
+            }, focusHost: this.hostElement, id: "date-dropdown", "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, onShowChanged: async ({ detail: show }) => {
+                this.show = show;
+                if (!show && this.currentRangeValue) {
                     this.onDateSelect(this.currentRangeValue);
                 }
-            } }, h("ix-layout-grid", { key: '49291819c2c01fce81097c562651fddbd0e97c79', noMargin: true }, h("ix-row", { key: '94e2c60aef9145b53d522359712ba589cbfa927f' }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && (h("ix-col", { key: '1c1b7ad6422fb90575d4296f47cabfdc68d0e8cc', class: {
-                'no-margin': true,
+                if (show && hasKeyboardMode()) {
+                    requestAnimationFrameNoNgZone(() => {
+                        const datePicker = this.datePickerRef.current;
+                        datePicker?.focus();
+                    });
+                }
+            } }, h("div", { key: '23f80678526a96c98c84130b820932ac449bfdb6', class: "container" }, this.dateRangeOptions?.length > 1 && (h("div", { key: 'e0ca957c06b3bf7ab910687958d9744e1bccba5e', class: {
+                'quick-selection': true,
                 'border-right': this.selectedDateRangeId === 'custom',
-            } }, this.dateRangeOptions.map((dateRangeOption) => (h("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), h("div", { key: 'fb98566476232ec358a720a96eb0df980d7ee415', hidden: this.customRangeDisabled }, h("ix-dropdown-item", { key: '366f32a5f783616fc89b33e813d9641822c493a0', label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') })))), h("ix-col", { key: 'd4fa12da77f51f05146fbebc123881df059f4d45', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (h(Fragment, { key: '89266fc7d1998258fe343694402b95a6a1242f50' }, h("ix-date-picker", { key: '8a98c0ad64816ec791215762874c0f3b36ddf41c', embedded: true, locale: this.locale, onDateChange: (e) => {
+            } }, this.dateRangeOptions.map((dateRangeOption) => (h(BaseButton, { disabled: false, iconOnly: false, iconOval: false, selected: false, loading: false, type: "button", variant: "subtle-tertiary", onClick: () => this.onRangeListSelect(dateRangeOption.id), ariaAttributes: {
+                'aria-label': `${dateRangeOption.label}: ${dateRangeOption.from} to ${dateRangeOption.to}`,
+            } }, dateRangeOption.label))))), h("div", { key: '47498278df33744c548709315f7e4f88b946c1cb', class: "picker-wrapper" }, h("ix-date-picker", { key: '7d2f12fcc2cd5018edfec3aa387f5ede6704bd04', ref: this.datePickerRef, embedded: true, locale: this.locale, onDateChange: (e) => {
                 e.stopPropagation();
-                this.currentRangeValue = Object.assign(Object.assign({}, e.detail), { id: 'custom' });
-                this.datePickerTouched = true;
-            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, singleSelection: this.singleSelection, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), h("div", { key: 'bc7248eefd41cec82a1b5098ddb02e15b4c56898', class: "pull-right" }, h("ix-button", { key: 'd9a0d55379527f733c80627d3f16c5f22704688f', onClick: () => {
+                this.currentRangeValue = {
+                    ...e.detail,
+                    id: 'custom',
+                };
+            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, singleSelection: this.singleSelection, from: this.from || this.currentRangeValue?.from, to: this.to || this.currentRangeValue?.to, minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), h("div", { key: 'b1b223d1116fdd455887e985aa8906c24de5b990', class: "pull-right" }, h("ix-button", { key: 'f788cee56c6aefaa3de91cabad89c01499d1b036', onClick: () => {
                 if (this.currentRangeValue) {
                     this.onDateSelect(this.currentRangeValue);
+                    this.closeDropdown();
                 }
-            } }, this.i18nDone))))))))));
+            } }, this.i18nDone)))))));
     }
-    get hostElement() { return getElement(this); }
     static get watchers() { return {
         "dateRangeId": [{
                 "onDateRangeIdChange": 0