@siemens/ix 4.4.0 → 5.0.0

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var index$1 = require('./index-DIYO-Liy.js');
+var index = require('./index-BKQkUbyE.js');
+var index$1 = require('./index-Dw-NwUuT.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}`;
 
@@ -9,27 +9,35 @@ const ContentHeader = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.backButtonClick = index.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 (index.h(index.Host, { key: 'b422be3706aac399ed76b4c491d61e2da8561b24' }, this.hasBackButton ? (index.h("ix-icon-button", { class: 'backButton', variant: "tertiary", icon: index$1.iconArrowLeft, onClick: () => this.backButtonClick.emit() })) : null, index.h("div", { key: '7606ba97f834f591a78fc2cca74bdaf3b3a09feb', class: "titleGroup" }, index.h("div", { key: 'df174e297a1b2075bcab0182a80f626162d1c319', class: "headerTitleRow" }, index.h("ix-typography", { key: 'd8ab10dc801306dafe0f3e6e39ed93e0fa162ca1', format: this.variant === 'secondary' ? 'h4' : 'h3', class: {
+        return (index.h(index.Host, { key: '08d49655e0c6990b14505b590d2ba0e94a295db6' }, this.hasBackButton ? (index.h("ix-icon-button", { class: 'backButton', variant: "tertiary", icon: index$1.iconArrowLeft, onClick: () => this.backButtonClick.emit() })) : null, index.h("div", { key: '8afb44c00a90916824175200dd536e56eb949624', class: "titleGroup" }, index.h("div", { key: '2a27fa1f4b31d9114dfebc9a8aff5729f906b1c8', class: "headerTitleRow" }, index.h("ix-typography", { key: 'd901bfeee7f8abc8e5007e53c21105f5c79b0a56', format: this.variant === 'secondary' ? 'h4' : 'h3', class: {
                 secondary: this.variant === 'secondary',
                 titleOverflow: true,
-            } }, this.headerTitle), index.h("div", { key: 'e24d6b450426931aaead3732fa20161bc5aab4e2', class: "headerSlot" }, index.h("slot", { key: 'e9a471492f2693fc6abe546d1febbc06834fef1c', name: "header" }))), !!this.headerSubtitle && (index.h("ix-typography", { key: '5fdb5ebce68a3aae09df3299093bca156468933c', format: 'h6', "text-color": 'soft', class: {
+            } }, this.headerTitle), index.h("div", { key: '1a846985aeb4a94d9524d1666a271c9c145095a6', class: "headerSlot" }, index.h("slot", { key: '25543ed73b45c08a9b50912362376fb9fc1906cd', name: "header" }))), !!this.headerSubtitle && (index.h("ix-typography", { key: '288fe9e598a20b6dac48f0a2024c094b6680dbb3', format: 'h6', "text-color": 'soft', class: {
                 subtitle: this.variant === 'secondary',
                 titleOverflow: true,
-            }, title: this.headerSubtitle }, this.headerSubtitle))), index.h("div", { key: '6648f93246d2e8d79cc2d3e7eae65009d578632c', class: "buttons" }, index.h("slot", { key: '1c3ee8084521a9a799e3b2444b1edc0c1cee5066' }))));
+            }, title: this.headerSubtitle }, this.headerSubtitle))), index.h("div", { key: '8e393c872c9332878140746709d4ec57cd3f2a8d', class: "buttons" }, index.h("slot", { key: 'be658a281dd351bb609ef0f347da991288672fb7' }))));
     }
 };
 ContentHeader.style = contentHeaderCss();

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

@@ -1,27 +1,27 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var shadowDom = require('./shadow-dom-DT01VwcB.js');
+var index = require('./index-BKQkUbyE.js');
+var shadowDom = require('./shadow-dom-BG8VqeIu.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 Content = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.isContentHeaderSlotted = false;
     }
+    get hostElement() { return index.getElement(this); }
+    isContentHeaderSlotted = false;
     get contentHeaderSlot() {
         return this.hostElement.shadowRoot.querySelector('.content-header slot');
     }
     render() {
-        return (index.h(index.Host, { key: '2ca4af3b088beab36b86cb3431f1d1b59fcf8756' }, index.h("div", { key: '04f73ba733dc7fbf57ecf6fdc0afc1fec8249b8e', class: {
+        return (index.h(index.Host, { key: 'c55017944f9bae7571742eace9f6e7c741e736e3' }, index.h("div", { key: '42bb2691481a6e55ec4ad1f1e1e075e96cedd0df', class: {
                 'content-header': true,
                 slotted: this.isContentHeaderSlotted,
-            } }, index.h("slot", { key: '962e83643e1ebcd86384cae1e7a3632b6f47554e', name: "header", onSlotchange: () => {
+            } }, index.h("slot", { key: 'ea93135ea0b4a1e7a20a159446280ceb24aa4b01', name: "header", onSlotchange: () => {
                 this.isContentHeaderSlotted = shadowDom.hasSlottedElements(this.contentHeaderSlot);
-            } })), index.h("div", { key: '4315ac1e71743ba30c7b8f592997c662eed392b4', class: "content" }, index.h("slot", { key: 'c1f31f8e283bcc55011b9f2d5746d9b7c10988da' }))));
+            } })), index.h("div", { key: '90c0076e390d2a7b9a5c7be22ba05fba1e2302bf', class: "content" }, index.h("slot", { key: 'aff4024b33c30f527a951df5656d105847c87fe6' }))));
     }
-    get hostElement() { return index.getElement(this); }
 };
 Content.style = contentCss();
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
+var index = require('./index-BKQkUbyE.js');
 
 const cssGridItemCss = () => `:host{display:block;position:relative}:host ::slotted(*){height:100%;width:100%}`;
 
@@ -8,10 +8,14 @@ const CssGridItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    /**
+     * Grid item name
+     */
+    itemName;
     render() {
         const style = {};
         style['grid-area'] = this.itemName;
-        return (index.h(index.Host, { key: '0f7a1001629ec09b7e6f44470b733f3d1d691bcb', style: style }, index.h("slot", { key: '1fce4a329cea68181bc52e60d155d6c6b7bb41bc' })));
+        return (index.h(index.Host, { key: '5b0d3b6ab2e0f7fc79378a854c60e3635e8ab692', style: style }, index.h("slot", { key: 'fc224d72d60566ddb1ba52ae6457e7458a56cccf' })));
     }
 };
 CssGridItem.style = cssGridItemCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
+var index = require('./index-BKQkUbyE.js');
 
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
@@ -35,9 +35,14 @@ const mediaQueryCollection = [
 const CssGrid = class {
     constructor(hostRef) {
         index.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);
@@ -46,7 +51,10 @@ const CssGrid = class {
             };
             this.disposeMediaQueryListener.push(callback);
             mediaQuery.addEventListener('change', callback);
-            return Object.assign(Object.assign({}, query), { mediaQuery });
+            return {
+                ...query,
+                mediaQuery,
+            };
         });
         this.applyTemplate();
     }
@@ -87,7 +95,7 @@ const CssGrid = class {
         if (this.currentTemplate && this.currentTemplate.length !== 0) {
             style['grid-template-areas'] = templateBuilder(this.currentTemplate);
         }
-        return (index.h(index.Host, { key: '470c3da8301e7d99e603b78cfd9c2883e4801c76', style: style }, index.h("slot", { key: '64f7e86981ba37aeb20223bd672bc1190dba4619' })));
+        return (index.h(index.Host, { key: '90eb8b6d89365b75ca151c8f8aa06e8c0ca8d8e9', style: style }, index.h("slot", { key: 'bbaf70a779b756872793a86ae24e247909ef0b96' })));
     }
 };
 CssGrid.style = cssGridCss();

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

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var validation = require('./validation-DF9UXqHB.js');
+var index = require('./index-BKQkUbyE.js');
+var validation = require('./validation-Dier-uPA.js');
+require('./index-B4J4JK0P.js');
 
 const customFieldCss = () => `:host{display:block;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}`;
 
@@ -26,15 +27,44 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 const CustomField = class {
     constructor(hostRef) {
         index.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 index.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;
@@ -42,9 +72,8 @@ const CustomField = class {
         this.isWarning = isWarning;
     }
     render() {
-        return (index.h(index.Host, { key: '732dae3e5ba3f37b5eac745ce48338cae5397d9e' }, index.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 }, index.h("slot", { key: '81d169fce11d76b04876eb3483909bf163c44370' }))));
+        return (index.h(index.Host, { key: '58b6b1c90f21d49345286996f1089fb9f0f383f9' }, index.h("ix-field-wrapper", { key: '13f416719110d2ed029164837d67c01cf81e782e', 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 }, index.h("slot", { key: '94fa34d216ef723f2d8c5d685c359233eb10fb93' }))));
     }
-    get hostElement() { return index.getElement(this); }
 };
 __decorate([
     validation.HookValidationLifecycle({

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

@@ -1,122 +1,82 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var index$1 = require('./index-DIYO-Liy.js');
+var index = require('./index-BKQkUbyE.js');
+var index$1 = require('./index-Dw-NwUuT.js');
 var datetime = require('./datetime-CfABwu7I.js');
-var makeRef = require('./make-ref-BaH6_YJk.js');
+var component = require('./component-CYtonfpw.js');
+var makeRef = require('./make-ref-CHsa3FY7.js');
+var requestAnimationFrame = require('./requestAnimationFrame-B0rWQ3G-.js');
+var baseButton = require('./base-button-C-1izOSS.js');
+var a11y = require('./a11y-C_6YiIMa.js');
+var focusTrap = require('./focus-trap-_cyPFvFq.js');
+require('./focus-utilities-yx7wWjEO.js');
+require('./shadow-dom-BG8VqeIu.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: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 index.Mixin(...component.DefaultMixins) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
         this.dateRangeChange = index.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.DateTime.now().toISO();
-        /**
-         * Enable Popover API rendering for dropdown.
-         *
-         * @default false
-         * @since 4.3.0
-         */
-        this.enableTopLayer = false;
-        this.selectedDateRangeId = '';
-        this.triggerRef = makeRef.makeRef();
-        this.datePickerTouched = false;
     }
+    get hostElement() { return index.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();
@@ -130,18 +90,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.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.makeRef();
     onDisabledChange() {
         if (this.disabled) {
             this.closeDropdown();
         }
     }
+    datePickerRef = makeRef.makeRef();
+    inheritAriaAttributes = {};
     componentWillLoad() {
         this.initialize();
         this.setDateRangeSelection(this.dateRangeId);
+        this.inheritAriaAttributes = a11y.a11yHostAttributes(this.hostElement);
     }
     /**
      * Retrieves the currently selected date range from the component.
@@ -153,7 +167,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;
@@ -173,12 +187,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) {
@@ -189,7 +199,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.DateTime.fromFormat(option.from, this.format);
+                this.datePickerRef.current?.updateSelectedYearMonth(formattedDate);
+            }
+            else {
+                this.currentRangeValue = option;
+            }
         }
         return option;
     }
@@ -200,50 +217,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 (index.h(index.Host, { key: '34b878eb8221b6c13f235d1b42ec63d3b6dce25c' }, index.h("ix-button", { key: '6f442e0178a7aabdf35321780d95414ab80af0cb', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: index$1.iconHistory, ref: this.triggerRef, disabled: this.disabled, ariaLabelButton: this.ariaLabelDropdownButton }, this.getButtonLabel()), index.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 (index.h(index.Host, { key: '04bd340613c20abbe3b836dab11637d7991fd295', onFocusout: (event) => {
+                const relatedTarget = event.relatedTarget;
+                if (!relatedTarget) {
+                    return;
+                }
+                this.closeDropdown();
+            }, role: "presentation" }, index.h("ix-button", { key: 'a95f89b7d276e96aebd318e2d8ca100d113d599a', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: index$1.iconHistory, ref: this.triggerRef, disabled: this.disabled, ...this.inheritAriaAttributes, "aria-haspopup": "true", "aria-expanded": a11y.a11yBoolean(this.show), "aria-controls": "date-dropdown", "aria-label": ariaLabel, [focusTrap.TRAP_FOCUS_EXCLUDE_ATTRIBUTE]: true }, this.getButtonLabel()), index.h("ix-dropdown", { key: '45614c12ee610cda3ddf8cbc740a0df76ed33cc0', 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);
                 }
-            } }, index.h("ix-layout-grid", { key: '49291819c2c01fce81097c562651fddbd0e97c79', noMargin: true }, index.h("ix-row", { key: '94e2c60aef9145b53d522359712ba589cbfa927f' }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && (index.h("ix-col", { key: '1c1b7ad6422fb90575d4296f47cabfdc68d0e8cc', class: {
-                'no-margin': true,
+                if (show && component.hasKeyboardMode()) {
+                    requestAnimationFrame.requestAnimationFrameNoNgZone(() => {
+                        const datePicker = this.datePickerRef.current;
+                        datePicker?.focus();
+                    });
+                }
+            } }, index.h("div", { key: '074b28feb93dea7482763f380870b0755a752419', class: "container" }, this.dateRangeOptions?.length > 1 && (index.h("div", { key: '25983a11b1ac61f12b4bbd140871bae70b3a813f', class: {
+                'quick-selection': true,
                 'border-right': this.selectedDateRangeId === 'custom',
-            } }, this.dateRangeOptions.map((dateRangeOption) => (index.h("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), index.h("div", { key: 'fb98566476232ec358a720a96eb0df980d7ee415', hidden: this.customRangeDisabled }, index.h("ix-dropdown-item", { key: '366f32a5f783616fc89b33e813d9641822c493a0', label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') })))), index.h("ix-col", { key: 'd4fa12da77f51f05146fbebc123881df059f4d45', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (index.h(index.Fragment, { key: '89266fc7d1998258fe343694402b95a6a1242f50' }, index.h("ix-date-picker", { key: '8a98c0ad64816ec791215762874c0f3b36ddf41c', embedded: true, locale: this.locale, onDateChange: (e) => {
+            } }, this.dateRangeOptions.map((dateRangeOption) => (index.h(baseButton.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))))), index.h("div", { key: '1090e03e941d7a3914e3d4e3f3850bebe195f2ec', class: "picker-wrapper" }, index.h("ix-date-picker", { key: 'fd864d0454c857db7016e3d2ed9322617fbc79eb', 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 }), index.h("div", { key: 'bc7248eefd41cec82a1b5098ddb02e15b4c56898', class: "pull-right" }, index.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 }), index.h("div", { key: 'bdd9ca166ed48d1e0599e5e9b0da38ac6f3c1b18', class: "pull-right" }, index.h("ix-button", { key: '3fd556de5401f53c83804665669c0c9f42ce6821', onClick: () => {
                 if (this.currentRangeValue) {
                     this.onDateSelect(this.currentRangeValue);
+                    this.closeDropdown();
                 }
-            } }, this.i18nDone))))))))));
+            } }, this.i18nDone)))))));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "dateRangeId": [{
                 "onDateRangeIdChange": 0