@siemens/ix 0.0.0-pr-1974-20250624072317 → 0.0.0-pr-1974-20250627114851

package/components/ix-custom-field.js

@@ -1,112 +0,0 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-DzKDFBWC.js';
-import { H as HookValidationLifecycle } from './p-t-aQDKhy.js';
-import { d as defineCustomElement$5 } from './p-COgaNG0r.js';
-import { d as defineCustomElement$4 } from './p-CdH-wF59.js';
-import { d as defineCustomElement$3 } from './p-mLgD4b4D.js';
-import { d as defineCustomElement$2 } from './p-C9zujPO0.js';
-
-const customFieldCss = ":host{display:block;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}";
-
-/*
- * 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.
- */
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const CustomField = /*@__PURE__*/ proxyCustomElement(class CustomField extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * 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;
-    }
-    updateValidationState({ isInvalid, isValid, isInfo, isWarning, }) {
-        this.isInvalid = isInvalid;
-        this.isValid = isValid;
-        this.isInfo = isInfo;
-        this.isWarning = isWarning;
-    }
-    render() {
-        return (h(Host, { key: '169feb69a90e647f7e3d6c989bdf55fbd899e91b' }, h("ix-field-wrapper", { key: 'ff3596456a62d3bf0c3a1481d60b3294ca727a7a', 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: '4c6d8db5227627a16a08342e51ff3670e5e41f4e' }))));
-    }
-    get hostElement() { return this; }
-    static get style() { return customFieldCss; }
-}, [1, "ix-custom-field", {
-        "required": [4],
-        "label": [1],
-        "helperText": [1, "helper-text"],
-        "infoText": [1, "info-text"],
-        "warningText": [1, "warning-text"],
-        "invalidText": [1, "invalid-text"],
-        "validText": [1, "valid-text"],
-        "showTextAsTooltip": [4, "show-text-as-tooltip"],
-        "isInvalid": [32],
-        "isValid": [32],
-        "isInfo": [32],
-        "isWarning": [32]
-    }]);
-__decorate([
-    HookValidationLifecycle({
-        includeChildren: true,
-    })
-], CustomField.prototype, "updateValidationState", null);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ix-custom-field", "ix-field-label", "ix-field-wrapper", "ix-tooltip", "ix-typography"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ix-custom-field":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, CustomField);
-            }
-            break;
-        case "ix-field-label":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "ix-field-wrapper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "ix-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "ix-typography":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const IxCustomField = CustomField;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxCustomField, defineCustomElement };
-//# sourceMappingURL=ix-custom-field.js.map
-
-//# sourceMappingURL=ix-custom-field.js.map

package/components/ix-custom-field.js.map

@@ -1 +0,0 @@
-{"file":"ix-custom-field.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,0GAA0G;;ACAjI;;;;;;;AAOG;;;;;;;;;;;MAgBU,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,GAAA;;;;AASE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAqCxB,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AACjB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AACf,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AACd,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAuC3B;IAlCC,qBAAqB,CAAC,EACpB,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,GACS,EAAA;AAClB,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;AACpB,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS;;IAG5B,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACd;;;;;;;;;;;;;;;;;;AA/BX,UAAA,CAAA;AAHC,IAAA,uBAAuB,CAAC;AACvB,QAAA,eAAe,EAAE,IAAI;KACtB;CAWA,EAAA,WAAA,CAAA,SAAA,EAAA,uBAAA,EAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/custom-field/custom-field.scss?tag=ix-custom-field&encapsulation=shadow","src/components/custom-field/custom-field.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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:host {\n  display: block;\n  width: fit-content;\n  height: fit-content;\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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, Host, Prop, State, h, Element } from '@stencil/core';\nimport {\n  FieldWrapperInterface,\n  HookValidationLifecycle,\n  IxFormValidationState,\n  ValidationResults,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\n\n@Component({\n  tag: 'ix-custom-field',\n  styleUrl: 'custom-field.scss',\n  shadow: true,\n})\nexport class CustomField\n  implements FieldWrapperInterface, IxFormValidationState, IxComponent\n{\n  @Element() hostElement!: HTMLIxCustomFieldElement;\n  /**\n   * A value is required or must be checked for the form to be submittable\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Show text below the field component which show additional information\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n\n  @HookValidationLifecycle({\n    includeChildren: true,\n  })\n  updateValidationState({\n    isInvalid,\n    isValid,\n    isInfo,\n    isWarning,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid;\n    this.isValid = isValid;\n    this.isInfo = isInfo;\n    this.isWarning = isWarning;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-field-wrapper\n          label={this.label}\n          helperText={this.helperText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          invalidText={this.invalidText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          required={this.required}\n        >\n          <slot></slot>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-date-dropdown.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface IxDateDropdown extends Components.IxDateDropdown, HTMLElement {}
-export const IxDateDropdown: {
-    prototype: IxDateDropdown;
-    new (): IxDateDropdown;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/ix-date-dropdown.js

@@ -1,368 +0,0 @@
-import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment, d as Host } from './p-DzKDFBWC.js';
-import { D as DateTime } from './p-bDicGJUN.js';
-import { m as makeRef } from './p-bcj7UEIC.js';
-import { j as iconHistory } from './p-CGwHQeMX.js';
-import { d as defineCustomElement$b } from './p-DqBfPYF2.js';
-import { d as defineCustomElement$a } from './p-18F-YfbC.js';
-import { d as defineCustomElement$9 } from './p-2HalBYF6.js';
-import { d as defineCustomElement$8 } from './p-C99qjEPE.js';
-import { d as defineCustomElement$7 } from './p-CLe5n0eR.js';
-import { d as defineCustomElement$6 } from './p-CI771zjd.js';
-import { d as defineCustomElement$5 } from './p-BXGAr1UD.js';
-import { d as defineCustomElement$4 } from './p-D-lOakIP.js';
-import { d as defineCustomElement$3 } from './p-D-uSMBXb.js';
-import { d as defineCustomElement$2 } from './p-BOARJXlu.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 1rem 0.75rem 1rem}";
-
-const DateDropdown = /*@__PURE__*/ proxyCustomElement(class DateDropdown extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        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 a range of dates can be selected.
-         */
-        this.range = true;
-        /**
-         * 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';
-        /**
-         * Outline button
-         */
-        this.outline = false;
-        /**
-         * Button with no background or outline
-         */
-        this.ghost = false;
-        /**
-         * 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 the user is allowed to pick custom date ranges in the component.
-         * When set to 'true', the user can select a custom date range using the date picker.
-         * When set to 'false', only predefined time date ranges are available for selection.
-         */
-        this.customRangeAllowed = true;
-        /**
-         * 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();
-        this.selectedDateRangeId = '';
-        this.triggerRef = makeRef();
-        this.datePickerTouched = false;
-    }
-    onDateRangeIdChange() {
-        this.onRangeListSelect(this.dateRangeId);
-        this.updateCurrentDate();
-        this.setDateRangeSelection(this.dateRangeId);
-        if (!this.currentRangeValue) {
-            return;
-        }
-        this.onDateSelect({
-            from: this.currentRangeValue.from,
-            to: this.currentRangeValue.to,
-            id: this.currentRangeValue.id,
-        });
-    }
-    onDateRangeOptionsChange() {
-        this.initialize();
-        this.onDateRangeIdChange();
-    }
-    onDisabledChange() {
-        if (this.disabled) {
-            this.closeDropdown();
-        }
-    }
-    componentWillLoad() {
-        this.initialize();
-        this.setDateRangeSelection(this.dateRangeId);
-    }
-    /**
-     * Retrieves the currently selected date range from the component.
-     * This method returns the selected date range as a `DateChangeEvent` object.
-     */
-    async getDateRange() {
-        return this.currentRangeValue || { id: '', from: '', to: '' };
-    }
-    initialize() {
-        const isCustomRange = this.dateRangeId === 'custom' ||
-            (!this.dateRangeId && !!this.from && !!this.to);
-        if (isCustomRange && this.customRangeAllowed) {
-            this.selectedDateRangeId = 'custom';
-            this.updateCurrentDate();
-            return;
-        }
-        const isValidConfiguration = !isCustomRange && !this.from;
-        if (!isValidConfiguration) {
-            console.warn('"from" and "range-date-id" is provided this is an invalid combination. Using "custom".');
-            this.selectedDateRangeId = 'custom';
-            this.updateCurrentDate();
-            return;
-        }
-    }
-    updateCurrentDate() {
-        this.currentRangeValue = {
-            id: this.selectedDateRangeId,
-            from: this.from,
-            to: this.to,
-        };
-    }
-    onDateSelect(rangeValue, preserveDropdown = true) {
-        this.dateRangeChange.emit(rangeValue);
-        if (preserveDropdown) {
-            this.closeDropdown();
-        }
-        this.datePickerTouched = false;
-    }
-    onRangeListSelect(id) {
-        if (this.setDateRangeSelection(id) && this.currentRangeValue) {
-            this.onDateSelect(this.currentRangeValue);
-        }
-    }
-    setDateRangeSelection(id) {
-        this.selectedDateRangeId = id;
-        const option = this.dateRangeOptions.find((range) => range.id === id);
-        if (option) {
-            this.currentRangeValue = option;
-        }
-        return option;
-    }
-    closeDropdown() {
-        const dropdown = this.hostElement.shadowRoot.querySelector('ix-dropdown');
-        if (dropdown) {
-            dropdown.show = false;
-        }
-    }
-    getButtonLabel() {
-        var _a, _b;
-        if (this.selectedDateRangeId === 'custom' && ((_a = this.currentRangeValue) === null || _a === void 0 ? void 0 : _a.from)) {
-            let range = this.currentRangeValue.from;
-            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;
-    }
-    render() {
-        var _a, _b, _c;
-        return (h(Host, { key: '66740d1169f13c0ed85e36272cb59a05724f42c1' }, h("ix-button", { key: '891287bd399698808d137ae2fac156ca01a21373', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, ghost: this.ghost, outline: this.outline, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled }, this.getButtonLabel()), h("ix-dropdown", { key: 'fb077d08ac2fe7bbd01b946922303f40536640e0', "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", onShowChanged: ({ detail: show }) => {
-                if (!show &&
-                    this.selectedDateRangeId === 'custom' &&
-                    this.datePickerTouched &&
-                    this.currentRangeValue) {
-                    this.onDateSelect(this.currentRangeValue);
-                }
-            } }, h("ix-layout-grid", { key: '7c3a5c70e8c8d7e22ae8621ba3eca16cff1d757c', noMargin: true }, h("ix-row", { key: 'ca6c60a1d4dddcc15a36f465f7fe79de8ff28045' }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && (h("ix-col", { key: '7acb95c80ee7bf5b85dacb89c1c3a2812f6e9529', class: {
-                'no-margin': 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: '5090d6491dcb3c6eba91582ebf6cc0b78452eaf6', hidden: !this.customRangeAllowed }, h("ix-dropdown-item", { key: '1285567b0623bcf7ed7cd4915a3013cadbd1e2ac', label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') })))), h("ix-col", { key: '5afab982bec7e18e16b64c36c103c8f7a740e29e', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (h(Fragment, { key: '4e4a4149530a08d42bc5cb141e1a5e0e22117a02' }, h("ix-date-picker", { key: '312c1f27d8f91633bec874413c1f0c6dea078d2c', standaloneAppearance: false, 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, range: this.range, 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: 'f6fca1d1dc986a38d80535253d0bba90b4f48898', class: "pull-right" }, h("ix-button", { key: '8f88fa27152f95519be94fa96fcb97f6fbf66aef', onClick: () => {
-                if (this.currentRangeValue) {
-                    this.onDateSelect(this.currentRangeValue);
-                }
-            } }, this.i18nDone))))))))));
-    }
-    get hostElement() { return this; }
-    static get watchers() { return {
-        "dateRangeId": ["onDateRangeIdChange"],
-        "to": ["onDateRangeIdChange"],
-        "from": ["onDateRangeIdChange"],
-        "dateRangeOptions": ["onDateRangeOptionsChange"],
-        "disabled": ["onDisabledChange"]
-    }; }
-    static get style() { return dateDropdownCss; }
-}, [1, "ix-date-dropdown", {
-        "disabled": [4],
-        "format": [1],
-        "range": [4],
-        "from": [1],
-        "to": [1],
-        "minDate": [1, "min-date"],
-        "maxDate": [1, "max-date"],
-        "dateRangeId": [1, "date-range-id"],
-        "variant": [1],
-        "outline": [4],
-        "ghost": [4],
-        "loading": [4],
-        "showWeekNumbers": [4, "show-week-numbers"],
-        "customRangeAllowed": [4, "custom-range-allowed"],
-        "dateRangeOptions": [16, "date-range-options"],
-        "locale": [1],
-        "weekStartIndex": [2, "week-start-index"],
-        "i18nCustomItem": [1, "i18n-custom-item"],
-        "i18nDone": [1, "i18n-done"],
-        "i18nNoRange": [1, "i18n-no-range"],
-        "today": [1],
-        "selectedDateRangeId": [32],
-        "currentRangeValue": [32],
-        "getDateRange": [64]
-    }, undefined, {
-        "dateRangeId": ["onDateRangeIdChange"],
-        "to": ["onDateRangeIdChange"],
-        "from": ["onDateRangeIdChange"],
-        "dateRangeOptions": ["onDateRangeOptionsChange"],
-        "disabled": ["onDisabledChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ix-date-dropdown", "ix-button", "ix-col", "ix-date-picker", "ix-date-time-card", "ix-dropdown", "ix-dropdown-item", "ix-icon-button", "ix-layout-grid", "ix-row", "ix-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ix-date-dropdown":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DateDropdown);
-            }
-            break;
-        case "ix-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "ix-col":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "ix-date-picker":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "ix-date-time-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "ix-dropdown":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "ix-dropdown-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "ix-icon-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "ix-layout-grid":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "ix-row":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "ix-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const IxDateDropdown = DateDropdown;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxDateDropdown, defineCustomElement };
-//# sourceMappingURL=ix-date-dropdown.js.map
-
-//# sourceMappingURL=ix-date-dropdown.js.map

package/components/ix-date-dropdown.js.map

@@ -1 +0,0 @@
-{"file":"ix-date-dropdown.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/date-dropdown/date-dropdown.scss?tag=ix-date-dropdown&encapsulation=shadow","src/components/date-dropdown/date-dropdown.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  display: inline-block;\n  position: relative;\n\n  @media (max-width: 48em) {\n    .min-width {\n      width: min-content;\n    }\n  }\n\n  @media (min-width: 48em) {\n    .border-right {\n      border-right: var(--theme-x-weak-bdr-2);\n    }\n  }\n\n  ix-button {\n    width: 100%;\n  }\n\n  .max-height {\n    max-height: max-content;\n  }\n\n  .no-margin {\n    margin: 0;\n    padding: 0;\n  }\n\n  .pull-right {\n    float: right;\n    padding: 0 $default-space $medium-space $default-space;  }\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { type LiteralStringUnion } from '../utils/type-helper';\nimport { IxDatePickerComponent } from '../date-picker/date-picker-component';\nimport { makeRef } from '../utils/make-ref';\nimport { ButtonVariant } from '../button/button';\nimport { IxButtonComponent } from '../button/button-component';\nimport { iconHistory } from '@siemens/ix-icons/icons';\n\nexport type DateDropdownOption = {\n  id: string;\n  label: string;\n  from?: string;\n  to?: string;\n};\n\nexport type DateRangeChangeEvent = {\n  id: string;\n  from?: string;\n  to?: string;\n};\n\n@Component({\n  tag: 'ix-date-dropdown',\n  styleUrl: 'date-dropdown.scss',\n  shadow: true,\n})\nexport class DateDropdown\n  implements\n    Omit<IxDatePickerComponent, 'corners'>,\n    Omit<IxButtonComponent, 'type' | 'icon'>\n{\n  @Element() hostElement!: HTMLIxDateDropdownElement;\n\n  /**\n   * Disable the button that opens the dropdown containing the date picker.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   */\n  @Prop() format = 'yyyy/LL/dd';\n\n  /**\n   * If true a range of dates can be selected.\n   */\n  @Prop() range = true;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   * If set to `null` no default start date will be pre-selected.\n   *\n   * Format is based on `format`\n   */\n  @Prop() from = '';\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   */\n  @Prop() to = '';\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate = '';\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate = '';\n\n  /**\n   * Used to set the initial select date range as well as the button name,\n   * if not set or no according date range label is found, nothing will be selected\n   */\n  @Prop() dateRangeId = 'custom';\n\n  /**\n   * Button variant\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Shows week numbers displayed on the left side of the date picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() showWeekNumbers = false;\n\n  @Watch('dateRangeId')\n  @Watch('to')\n  @Watch('from')\n  onDateRangeIdChange() {\n    this.onRangeListSelect(this.dateRangeId);\n    this.updateCurrentDate();\n    this.setDateRangeSelection(this.dateRangeId);\n\n    if (!this.currentRangeValue) {\n      return;\n    }\n\n    this.onDateSelect({\n      from: this.currentRangeValue.from,\n      to: this.currentRangeValue.to,\n      id: this.currentRangeValue.id,\n    });\n  }\n\n  /**\n   * Controls whether the user is allowed to pick custom date ranges in the component.\n   * When set to 'true', the user can select a custom date range using the date picker.\n   * When set to 'false', only predefined time date ranges are available for selection.\n   */\n  @Prop() customRangeAllowed = true;\n\n  /**\n   * An array of predefined date range options for the date picker.\n   * Each option is an object with a label describing the range and a function\n   * that returns the start and end dates of the range as a DateRangeOption object.\n   *\n   * Example format:\n   *   {\n   *     id: 'some unique id',\n   *     label: 'Name of the range',\n   *     from: undefined, to: '2023/03/29'\n   *   },\n   *   // ... other predefined date range options ...\n   */\n  @Prop() dateRangeOptions: DateDropdownOption[] = [];\n\n  @Watch('dateRangeOptions')\n  onDateRangeOptionsChange() {\n    this.initialize();\n    this.onDateRangeIdChange();\n  }\n\n  /**\n   * Locale identifier (e.g. 'en' or 'de').\n   */\n  @Prop() locale?: string;\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * Text for custom dropdown item. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-custom-item' }) i18nCustomItem = 'Custom...';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-no-range' }) i18nNoRange = 'No range set';\n\n  /** @internal */\n  @Prop() today = DateTime.now().toISO();\n\n  /**\n   * EventEmitter for date range change events.\n   *\n   * This event is emitted when the date range changes within the component.\n   * The event payload contains information about the selected date range.\n   */\n  @Event()\n  private readonly dateRangeChange!: EventEmitter<DateRangeChangeEvent>;\n\n  @State() private selectedDateRangeId: LiteralStringUnion<'custom'> = '';\n  @State() private currentRangeValue?: {\n    from?: string;\n    to?: string;\n    id: string;\n  };\n  private readonly triggerRef = makeRef<HTMLElement>();\n\n  @Watch('disabled')\n  onDisabledChange() {\n    if (this.disabled) {\n      this.closeDropdown();\n    }\n  }\n\n  private datePickerTouched = false;\n\n  componentWillLoad() {\n    this.initialize();\n    this.setDateRangeSelection(this.dateRangeId);\n  }\n\n  /**\n   * Retrieves the currently selected date range from the component.\n   * This method returns the selected date range as a `DateChangeEvent` object.\n   */\n  @Method()\n  public async getDateRange(): Promise<DateRangeChangeEvent> {\n    return this.currentRangeValue || { id: '', from: '', to: '' };\n  }\n\n  private initialize() {\n    const isCustomRange =\n      this.dateRangeId === 'custom' ||\n      (!this.dateRangeId && !!this.from && !!this.to);\n\n    if (isCustomRange && this.customRangeAllowed) {\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n    const isValidConfiguration = !isCustomRange && !this.from;\n    if (!isValidConfiguration) {\n      console.warn(\n        '\"from\" and \"range-date-id\" is provided this is an invalid combination. Using \"custom\".'\n      );\n\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n  }\n\n  private updateCurrentDate() {\n    this.currentRangeValue = {\n      id: this.selectedDateRangeId,\n      from: this.from,\n      to: this.to,\n    };\n  }\n\n  private onDateSelect(\n    rangeValue: { from?: string; to?: string; id: string },\n    preserveDropdown = true\n  ) {\n    this.dateRangeChange.emit(rangeValue);\n\n    if (preserveDropdown) {\n      this.closeDropdown();\n    }\n\n    this.datePickerTouched = false;\n  }\n\n  private onRangeListSelect(id: string) {\n    if (this.setDateRangeSelection(id) && this.currentRangeValue) {\n      this.onDateSelect(this.currentRangeValue);\n    }\n  }\n\n  private setDateRangeSelection(id: string) {\n    this.selectedDateRangeId = id;\n    const option = this.dateRangeOptions.find((range) => range.id === id);\n\n    if (option) {\n      this.currentRangeValue = option;\n    }\n\n    return option;\n  }\n\n  private closeDropdown() {\n    const dropdown = this.hostElement.shadowRoot!.querySelector('ix-dropdown');\n\n    if (dropdown) {\n      dropdown.show = false;\n    }\n  }\n\n  private getButtonLabel() {\n    if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {\n      let range = this.currentRangeValue.from;\n\n      if (this.currentRangeValue.to) {\n        range += ` - ${this.currentRangeValue.to}`;\n      }\n\n      return range;\n    }\n\n    if (!this.selectedDateRangeId) {\n      return this.i18nNoRange;\n    }\n\n    if (!this.dateRangeOptions || this.dateRangeOptions?.length === 0) {\n      return this.i18nNoRange;\n    }\n\n    const option = this.dateRangeOptions.find(\n      (option) => option.id === this.selectedDateRangeId\n    );\n\n    if (!option) {\n      console.error(\n        `Cannot find range option with id ${this.selectedDateRangeId}`\n      );\n      return this.i18nNoRange;\n    }\n\n    return option.label;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-button\n          data-testid=\"date-dropdown-trigger\"\n          data-date-dropdown-trigger\n          variant={this.variant}\n          ghost={this.ghost}\n          outline={this.outline}\n          loading={this.loading}\n          icon={iconHistory}\n          ref={this.triggerRef}\n          disabled={this.disabled}\n        >\n          {this.getButtonLabel()}\n        </ix-button>\n        <ix-dropdown\n          data-testid=\"date-dropdown\"\n          data-date-dropdown\n          class=\"min-width max-height\"\n          trigger={this.triggerRef.waitForCurrent()}\n          closeBehavior=\"outside\"\n          placement=\"bottom-start\"\n          onShowChanged={({ detail: show }) => {\n            if (\n              !show &&\n              this.selectedDateRangeId === 'custom' &&\n              this.datePickerTouched &&\n              this.currentRangeValue\n            ) {\n              this.onDateSelect(this.currentRangeValue);\n            }\n          }}\n        >\n          <ix-layout-grid noMargin>\n            <ix-row>\n              {this.dateRangeOptions?.length > 1 && (\n                <ix-col\n                  class={{\n                    'no-margin': true,\n                    'border-right': this.selectedDateRangeId === 'custom',\n                  }}\n                >\n                  {this.dateRangeOptions.map((dateRangeOption) => (\n                    <ix-dropdown-item\n                      label={dateRangeOption.label}\n                      onClick={() => this.onRangeListSelect(dateRangeOption.id)}\n                      checked={this.selectedDateRangeId === dateRangeOption.id}\n                    ></ix-dropdown-item>\n                  ))}\n                  <div hidden={!this.customRangeAllowed}>\n                    <ix-dropdown-item\n                      label={this.i18nCustomItem}\n                      checked={this.selectedDateRangeId === 'custom'}\n                      onClick={() => this.onRangeListSelect('custom')}\n                    ></ix-dropdown-item>\n                  </div>\n                </ix-col>\n              )}\n              <ix-col class=\"no-margin\">\n                {this.selectedDateRangeId === 'custom' && (\n                  <Fragment>\n                    <ix-date-picker\n                      standaloneAppearance={false}\n                      locale={this.locale}\n                      onDateChange={(e) => {\n                        e.stopPropagation();\n                        this.currentRangeValue = {\n                          ...e.detail,\n                          id: 'custom',\n                        };\n                        this.datePickerTouched = true;\n                      }}\n                      onDateRangeChange={(e) => e.stopPropagation()}\n                      format={this.format}\n                      range={this.range}\n                      from={this.from || this.currentRangeValue?.from}\n                      to={this.to || this.currentRangeValue?.to}\n                      minDate={this.minDate}\n                      maxDate={this.maxDate}\n                      today={this.today}\n                      weekStartIndex={this.weekStartIndex}\n                      showWeekNumbers={this.showWeekNumbers}\n                    ></ix-date-picker>\n                    <div class=\"pull-right\">\n                      <ix-button\n                        onClick={() => {\n                          if (this.currentRangeValue) {\n                            this.onDateSelect(this.currentRangeValue);\n                          }\n                        }}\n                      >\n                        {this.i18nDone}\n                      </ix-button>\n                    </div>\n                  </Fragment>\n                )}\n              </ix-col>\n            </ix-row>\n          </ix-layout-grid>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-date-input.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface IxDateInput extends Components.IxDateInput, HTMLElement {}
-export const IxDateInput: {
-    prototype: IxDateInput;
-    new (): IxDateInput;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;