@esri/solutions-components 0.8.2 → 0.8.3

package/dist/cjs/calcite-input-date-picker.cjs.entry.js

@@ -0,0 +1,744 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b53bfd7c.js');
+const date = require('./date-3d094f58.js');
+const dom = require('./dom-cf1e2e9f.js');
+const floatingUi = require('./floating-ui-90bd00af.js');
+const form = require('./form-da52e819.js');
+const interactive = require('./interactive-08e5bc95.js');
+const key = require('./key-86f4a0b0.js');
+const label = require('./label-24b05042.js');
+const loadable = require('./loadable-41446b78.js');
+const locale = require('./locale-a615b02f.js');
+const openCloseComponent = require('./openCloseComponent-8d9cb545.js');
+const utils = require('./utils-3a633152.js');
+const t9n = require('./t9n-463dcbff.js');
+const focusTrapComponent = require('./focusTrapComponent-946b0666.js');
+const guid = require('./guid-ae73cd27.js');
+const component = require('./component-ac7c3bd8.js');
+const Validation = require('./Validation-20182093.js');
+require('./resources-a2b1b149.js');
+require('./lodash-7587da9f.js');
+require('./browser-fe25aefa.js');
+require('./observers-5923a7cc.js');
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+const CSS = {
+    assistiveText: "assistive-text",
+    calendarWrapper: "calendar-wrapper",
+    calendarWrapperEnd: "calendar-wrapper--end",
+    horizontalArrowContainer: "horizontal-arrow-container",
+    inputBorderTopColorOne: "border-top-color-one",
+    inputContainer: "input-container",
+    inputNoBottomBorder: "no-bottom-border",
+    inputWrapper: "input-wrapper",
+    input: "input",
+    menu: "menu-container",
+    menuActive: "menu-container--active",
+    toggleIcon: "toggle-icon",
+    verticalArrowContainer: "vertical-arrow-container",
+};
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+/**
+ * Specifies if an ISO string date (YYYY-MM-DD) has two digit year.
+ *
+ * @param {string} value
+ * @returns {boolean}
+ */
+function isTwoDigitYear(value) {
+    if (!value) {
+        return false;
+    }
+    const { year } = date.datePartsFromISO(value);
+    return Number(year) < 100;
+}
+/**
+ * Returns a normalized year to current century from a given two digit year number.
+ *
+ * @param {number} twoDigitYear
+ * @returns {string}
+ */
+function normalizeToCurrentCentury(twoDigitYear) {
+    const currentYear = new Date().getFullYear();
+    const normalizedYear = Math.floor(currentYear / 100) * 100 + twoDigitYear;
+    return normalizedYear;
+}
+
+const inputDatePickerCss = ":host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:inline-block;inline-size:100%;overflow:visible;vertical-align:top;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host .menu-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}:host .menu-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}:host .menu-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}:host .menu-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}:host .menu-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([scale=s]){--calcite-toggle-spacing:0.5rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1rem)}:host([scale=m]){--calcite-toggle-spacing:0.75rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1.5rem)}:host([scale=l]){--calcite-toggle-spacing:1rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 2rem)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calendar-wrapper{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transform:translate3d(0, 0, 0)}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}:host([range]) .input-container{display:flex}:host([range]) .input-wrapper{flex:1 1 auto}:host([range]) .horizontal-arrow-container{display:flex;align-items:center;border-width:1px;border-inline-start-width:0px;border-inline-end-width:0px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-background);padding-block:0px;padding-inline:0.25rem}:host([range][layout=vertical]) .input-wrapper{inline-size:100%}:host([range][layout=vertical]) .input-container{flex-direction:column;align-items:flex-start}:host([range][layout=vertical]) .calendar-wrapper--end{transform:translate3d(0, 0, 0)}:host([range][layout=vertical]) .vertical-arrow-container{inset-block-start:1.5rem;position:absolute;z-index:var(--calcite-z-index);margin-inline:1px;background-color:var(--calcite-color-foreground-1);padding-inline:0.625rem;inset-inline-start:0}.menu-container{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.menu-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}.menu-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.menu-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.menu-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.menu-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([open]) .menu-container{visibility:visible}.menu-container--active{visibility:visible}.input .calcite-input__wrapper{margin-block-start:0px}:host([range][layout=vertical][scale=m]) .vertical-arrow-container{inset-block-start:1.5rem;padding-inline-start:0.75rem}:host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon{block-size:0.75rem;inline-size:0.75rem;min-inline-size:0px}:host([range][layout=vertical][scale=l]) .vertical-arrow-container{inset-block-start:2.25rem;padding-inline:0.875rem}:host([range][layout=vertical][open]) .vertical-arrow-container{display:none}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
+
+const InputDatePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.calciteInputDatePickerChange = index.createEvent(this, "calciteInputDatePickerChange", 6);
+        this.calciteInputDatePickerBeforeClose = index.createEvent(this, "calciteInputDatePickerBeforeClose", 6);
+        this.calciteInputDatePickerClose = index.createEvent(this, "calciteInputDatePickerClose", 6);
+        this.calciteInputDatePickerBeforeOpen = index.createEvent(this, "calciteInputDatePickerBeforeOpen", 6);
+        this.calciteInputDatePickerOpen = index.createEvent(this, "calciteInputDatePickerOpen", 6);
+        this.calciteInternalInputInputHandler = (event) => {
+            const target = event.target;
+            const value = target.value;
+            const parsedValue = this.parseNumerals(value);
+            const formattedValue = this.formatNumerals(parsedValue);
+            target.value = formattedValue;
+            const { year } = date.datePartsFromLocalizedString(value, this.localeData);
+            if (year && year.length < 4) {
+                return;
+            }
+            const date$1 = date.dateFromLocalizedString(value, this.localeData);
+            if (date.inRange(date$1, this.min, this.max)) {
+                this.datePickerActiveDate = date$1;
+            }
+        };
+        this.calciteInternalInputBlurHandler = () => {
+            this.commitValue();
+        };
+        this.dialogId = `date-picker-dialog--${guid.guid()}`;
+        this.focusOnOpen = false;
+        this.userChangedValue = false;
+        this.openTransitionProp = "opacity";
+        this.valueAsDateChangedExternally = false;
+        this.placeholderTextId = `calcite-input-date-picker-placeholder-${guid.guid()}`;
+        //--------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        //--------------------------------------------------------------------------
+        this.onInputWrapperPointerDown = () => {
+            this.currentOpenInput = this.focusedInput;
+        };
+        this.onInputWrapperClick = (event) => {
+            const { range, endInput, startInput, currentOpenInput } = this;
+            const currentTarget = event.currentTarget;
+            const position = currentTarget.getAttribute("data-position");
+            const path = event.composedPath();
+            const wasToggleClicked = path.find((el) => { var _a; return (_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains(CSS.toggleIcon); });
+            if (wasToggleClicked) {
+                const targetInput = position === "start" ? startInput : endInput;
+                targetInput.setFocus();
+            }
+            if (!range || !this.open || currentOpenInput === position) {
+                this.open = !this.open;
+            }
+        };
+        this.setFilteredPlacements = () => {
+            const { el, flipPlacements } = this;
+            this.filteredFlipPlacements = flipPlacements
+                ? floatingUi.filterComputedPlacements(flipPlacements, el)
+                : null;
+        };
+        this.setTransitionEl = (el) => {
+            this.transitionEl = el;
+        };
+        this.setStartInput = (el) => {
+            this.startInput = el;
+        };
+        this.setEndInput = (el) => {
+            this.endInput = el;
+        };
+        this.blurHandler = () => {
+            this.open = false;
+        };
+        this.keyDownHandler = (event) => {
+            var _a, _b;
+            const { defaultPrevented, key } = event;
+            if (defaultPrevented) {
+                return;
+            }
+            if (key === "Enter") {
+                this.commitValue();
+                if (this.shouldFocusRangeEnd()) {
+                    (_a = this.endInput) === null || _a === void 0 ? void 0 : _a.setFocus();
+                }
+                else if (this.shouldFocusRangeStart()) {
+                    (_b = this.startInput) === null || _b === void 0 ? void 0 : _b.setFocus();
+                }
+                if (form.submitForm(this)) {
+                    event.preventDefault();
+                    this.restoreInputFocus();
+                }
+            }
+            else if (key === "ArrowDown") {
+                this.open = true;
+                this.focusOnOpen = true;
+                event.preventDefault();
+            }
+            else if (key === "Escape") {
+                this.open = false;
+                event.preventDefault();
+                this.restoreInputFocus();
+            }
+        };
+        this.startInputFocus = () => {
+            this.focusedInput = "start";
+        };
+        this.endInputFocus = () => {
+            this.focusedInput = "end";
+        };
+        this.setFloatingEl = (el) => {
+            this.floatingEl = el;
+            floatingUi.connectFloatingUI(this, this.referenceEl, this.floatingEl);
+        };
+        this.setStartWrapper = (el) => {
+            this.startWrapper = el;
+            this.setReferenceEl();
+        };
+        this.setEndWrapper = (el) => {
+            this.endWrapper = el;
+            this.setReferenceEl();
+        };
+        this.setDatePickerRef = (el) => {
+            this.datePickerEl = el;
+            focusTrapComponent.connectFocusTrap(this, {
+                focusTrapEl: el,
+                focusTrapOptions: {
+                    initialFocus: false,
+                    setReturnFocus: false,
+                },
+            });
+        };
+        /**
+         * Event handler for when the selected date changes
+         *
+         * @param event CalciteDatePicker custom change event
+         */
+        this.handleDateChange = (event) => {
+            if (this.range) {
+                return;
+            }
+            event.stopPropagation();
+            this.setValue(event.target.valueAsDate);
+            this.localizeInputValues();
+            this.restoreInputFocus();
+        };
+        this.handleDateRangeChange = (event) => {
+            if (!this.range) {
+                return;
+            }
+            event.stopPropagation();
+            const value = event.target.valueAsDate;
+            this.setRangeValue(value);
+            this.localizeInputValues();
+            this.restoreInputFocus();
+        };
+        this.setInputValue = (newValue, input = "start") => {
+            const inputEl = this[`${input}Input`];
+            if (!inputEl) {
+                return;
+            }
+            inputEl.value = newValue;
+        };
+        this.setRangeValue = (valueAsDate) => {
+            if (!this.range) {
+                return;
+            }
+            const { value: oldValue } = this;
+            const oldValueIsArray = Array.isArray(oldValue);
+            const valueIsArray = Array.isArray(valueAsDate);
+            const newStartDate = valueIsArray ? valueAsDate[0] : null;
+            let newStartDateISO = valueIsArray ? date.dateToISO(newStartDate) : "";
+            if (newStartDateISO) {
+                newStartDateISO = this.getNormalizedDate(newStartDateISO);
+            }
+            const newEndDate = valueIsArray ? valueAsDate[1] : null;
+            let newEndDateISO = valueIsArray ? date.dateToISO(newEndDate) : "";
+            if (newEndDateISO) {
+                newEndDateISO = this.getNormalizedDate(newEndDateISO);
+            }
+            const newValue = newStartDateISO || newEndDateISO ? [newStartDateISO, newEndDateISO] : "";
+            if (newValue === oldValue) {
+                return;
+            }
+            this.userChangedValue = true;
+            this.value = newValue;
+            this.valueAsDate = newValue ? utils.getValueAsDateRange(newValue) : undefined;
+            const changeEvent = this.calciteInputDatePickerChange.emit();
+            if (changeEvent && changeEvent.defaultPrevented) {
+                this.value = oldValue;
+                if (oldValueIsArray) {
+                    this.setInputValue(oldValue[0], "start");
+                    this.setInputValue(oldValue[1], "end");
+                }
+                else {
+                    this.value = oldValue;
+                    this.setInputValue(oldValue);
+                }
+            }
+        };
+        this.setValue = (value) => {
+            if (this.range) {
+                return;
+            }
+            const oldValue = this.value;
+            let newValue = date.dateToISO(value);
+            newValue = this.getNormalizedDate(newValue);
+            if (newValue === oldValue) {
+                return;
+            }
+            this.userChangedValue = true;
+            this.valueAsDate = newValue ? date.dateFromISO(newValue) : undefined;
+            this.value = newValue || "";
+            const changeEvent = this.calciteInputDatePickerChange.emit();
+            if (changeEvent.defaultPrevented) {
+                this.value = oldValue;
+                this.setInputValue(oldValue);
+            }
+        };
+        this.commonDateSeparators = [".", "-", "/"];
+        this.formatNumerals = (value) => value
+            ? value
+                .split("")
+                .map((char) => {
+                var _a, _b, _c;
+                return ((_a = this.commonDateSeparators) === null || _a === void 0 ? void 0 : _a.includes(char))
+                    ? (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.separator
+                    : (key.numberKeys === null || key.numberKeys === void 0 ? void 0 : key.numberKeys.includes(char))
+                        ? (_c = locale.numberStringFormatter === null || locale.numberStringFormatter === void 0 ? void 0 : locale.numberStringFormatter.numberFormatter) === null || _c === void 0 ? void 0 : _c.format(Number(char))
+                        : char;
+            })
+                .join("")
+            : "";
+        this.parseNumerals = (value) => value
+            ? value
+                .split("")
+                .map((char) => key.numberKeys.includes(char) ? locale.numberStringFormatter.delocalize(char) : char)
+                .join("")
+            : "";
+        this.disabled = false;
+        this.focusTrapDisabled = false;
+        this.form = undefined;
+        this.readOnly = false;
+        this.value = "";
+        this.flipPlacements = undefined;
+        this.headingLevel = undefined;
+        this.valueAsDate = undefined;
+        this.messageOverrides = undefined;
+        this.messages = undefined;
+        this.minAsDate = undefined;
+        this.maxAsDate = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.open = false;
+        this.validationMessage = undefined;
+        this.validationIcon = undefined;
+        this.name = undefined;
+        this.numberingSystem = undefined;
+        this.scale = "m";
+        this.status = "idle";
+        this.placement = floatingUi.defaultMenuPlacement;
+        this.range = false;
+        this.required = false;
+        this.overlayPositioning = "absolute";
+        this.proximitySelectionDisabled = false;
+        this.layout = "horizontal";
+        this.datePickerActiveDate = undefined;
+        this.defaultMessages = undefined;
+        this.effectiveLocale = "";
+        this.focusedInput = "start";
+        this.localeData = undefined;
+    }
+    handleFocusTrapDisabled(focusTrapDisabled) {
+        if (!this.open) {
+            return;
+        }
+        focusTrapDisabled ? focusTrapComponent.deactivateFocusTrap(this) : focusTrapComponent.activateFocusTrap(this);
+    }
+    handleDisabledAndReadOnlyChange(value) {
+        if (!value) {
+            this.open = false;
+        }
+    }
+    valueWatcher(newValue) {
+        if (!this.userChangedValue) {
+            let newValueAsDate;
+            if (Array.isArray(newValue)) {
+                newValueAsDate = utils.getValueAsDateRange(newValue);
+            }
+            else if (newValue) {
+                newValueAsDate = date.dateFromISO(newValue);
+            }
+            else {
+                newValueAsDate = undefined;
+            }
+            if (!this.valueAsDateChangedExternally && newValueAsDate !== this.valueAsDate) {
+                this.valueAsDate = newValueAsDate;
+            }
+            this.localizeInputValues();
+        }
+        this.userChangedValue = false;
+    }
+    valueAsDateWatcher(valueAsDate) {
+        this.datePickerActiveDate = valueAsDate;
+        const newValue = this.range && Array.isArray(valueAsDate)
+            ? [date.dateToISO(valueAsDate[0]), date.dateToISO(valueAsDate[1])]
+            : date.dateToISO(valueAsDate);
+        if (this.value !== newValue) {
+            this.valueAsDateChangedExternally = true;
+            this.value = newValue;
+            this.valueAsDateChangedExternally = false;
+        }
+    }
+    flipPlacementsHandler() {
+        this.setFilteredPlacements();
+        this.reposition(true);
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    onMinChanged(min) {
+        if (min) {
+            this.minAsDate = date.dateFromISO(min);
+        }
+    }
+    onMaxChanged(max) {
+        if (max) {
+            this.maxAsDate = date.dateFromISO(max);
+        }
+    }
+    openHandler() {
+        openCloseComponent.onToggleOpenCloseComponent(this);
+        if (this.disabled || this.readOnly) {
+            this.open = false;
+            return;
+        }
+        this.reposition(true);
+    }
+    overlayPositioningHandler() {
+        this.reposition(true);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    calciteDaySelectHandler() {
+        if (this.shouldFocusRangeStart() || this.shouldFocusRangeEnd()) {
+            return;
+        }
+        this.open = false;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    // --------------------------------------------------------------------------
+    /** Sets focus on the component. */
+    async setFocus() {
+        await loadable.componentFocusable(this);
+        this.el.focus();
+    }
+    /**
+     * Updates the position of the component.
+     *
+     * @param delayed
+     */
+    async reposition(delayed = false) {
+        const { floatingEl, referenceEl, placement, overlayPositioning, filteredFlipPlacements } = this;
+        return floatingUi.reposition(this, {
+            floatingEl,
+            referenceEl,
+            overlayPositioning,
+            placement,
+            flipPlacements: filteredFlipPlacements,
+            type: "menu",
+        }, delayed);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    // --------------------------------------------------------------------------
+    connectedCallback() {
+        interactive.connectInteractive(this);
+        locale.connectLocalized(this);
+        const { open } = this;
+        open && this.openHandler();
+        if (Array.isArray(this.value)) {
+            this.valueAsDate = utils.getValueAsDateRange(this.value);
+        }
+        else if (this.value) {
+            try {
+                this.valueAsDate = date.dateFromISO(this.value);
+            }
+            catch (error) {
+                this.warnAboutInvalidValue(this.value);
+                this.value = "";
+            }
+        }
+        else if (this.valueAsDate) {
+            if (this.range) {
+                this.setRangeValue(this.valueAsDate);
+            }
+            else if (!Array.isArray(this.valueAsDate)) {
+                this.value = date.dateToISO(this.valueAsDate);
+            }
+        }
+        if (this.min) {
+            this.minAsDate = date.dateFromISO(this.min);
+        }
+        if (this.max) {
+            this.maxAsDate = date.dateFromISO(this.max);
+        }
+        label.connectLabel(this);
+        form.connectForm(this);
+        t9n.connectMessages(this);
+        this.setFilteredPlacements();
+        this.reposition(true);
+        locale.numberStringFormatter.numberFormatOptions = {
+            numberingSystem: this.numberingSystem,
+            locale: this.effectiveLocale,
+            useGrouping: false,
+        };
+        if (this.open) {
+            openCloseComponent.onToggleOpenCloseComponent(this);
+        }
+        floatingUi.connectFloatingUI(this, this.referenceEl, this.floatingEl);
+    }
+    async componentWillLoad() {
+        loadable.setUpLoadableComponent(this);
+        await Promise.all([this.loadLocaleData(), t9n.setUpMessages(this)]);
+        this.onMinChanged(this.min);
+        this.onMaxChanged(this.max);
+    }
+    componentDidLoad() {
+        loadable.setComponentLoaded(this);
+        this.localizeInputValues();
+        this.reposition(true);
+    }
+    disconnectedCallback() {
+        focusTrapComponent.deactivateFocusTrap(this);
+        interactive.disconnectInteractive(this);
+        label.disconnectLabel(this);
+        form.disconnectForm(this);
+        floatingUi.disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
+        locale.disconnectLocalized(this);
+        t9n.disconnectMessages(this);
+    }
+    componentDidRender() {
+        interactive.updateHostInteraction(this);
+    }
+    render() {
+        var _a, _b, _c;
+        const { disabled, effectiveLocale, messages, numberingSystem, readOnly } = this;
+        locale.numberStringFormatter.numberFormatOptions = {
+            numberingSystem,
+            locale: effectiveLocale,
+            useGrouping: false,
+        };
+        return (index.h(index.Host, { onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { disabled: this.disabled }, this.localeData && (index.h("div", { class: CSS.inputContainer }, index.h("div", { class: CSS.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setStartWrapper }, index.h("calcite-input-text", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": dom.toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
+                [CSS.input]: true,
+                [CSS.inputNoBottomBorder]: this.layout === "vertical" && this.range,
+            }, disabled: disabled, icon: "calendar", onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputTextFocus: this.startInputFocus, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, status: this.status,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setStartInput }), !this.readOnly &&
+            this.renderToggleIcon(this.open && this.focusedInput === "start"), index.h("span", { "aria-hidden": "true", class: CSS.assistiveText, id: this.placeholderTextId }, "Date Format: ", (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder)), index.h("div", { "aria-hidden": dom.toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
+                [CSS.menu]: true,
+                [CSS.menuActive]: this.open,
+            }, id: this.dialogId, role: "dialog",
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setFloatingEl }, index.h("div", { class: {
+                [CSS.calendarWrapper]: true,
+                [CSS.calendarWrapperEnd]: this.focusedInput === "end",
+                [floatingUi.FloatingCSS.animation]: true,
+                [floatingUi.FloatingCSS.animationActive]: this.open,
+            },
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setTransitionEl }, index.h("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setDatePickerRef }))), this.range && this.layout === "horizontal" && (index.h("div", { class: CSS.horizontalArrowContainer }, index.h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: component.getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (index.h("div", { class: CSS.verticalArrowContainer }, index.h("calcite-icon", { icon: "arrow-down", scale: component.getIconScale(this.scale) }))), this.range && (index.h("div", { class: CSS.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setEndWrapper }, index.h("calcite-input-text", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": dom.toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
+                [CSS.input]: true,
+                [CSS.inputBorderTopColorOne]: this.layout === "vertical" && this.range,
+            }, disabled: disabled, icon: "calendar", onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputTextFocus: this.endInputFocus, placeholder: (_c = this.localeData) === null || _c === void 0 ? void 0 : _c.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, status: this.status,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setEndInput }), !this.readOnly &&
+            this.renderToggleIcon(this.open && this.focusedInput === "end"))))), index.h(form.HiddenFormInputSlot, { component: this }), this.validationMessage ? (index.h(Validation.Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+    }
+    renderToggleIcon(open) {
+        return (
+        // we set tab index to -1 to prevent delegatesFocus from stealing focus before we can set it
+        index.h("span", { class: CSS.toggleIcon, tabIndex: -1 }, index.h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: component.getIconScale(this.scale) })));
+    }
+    setReferenceEl() {
+        const { focusedInput, layout, endWrapper, startWrapper } = this;
+        this.referenceEl =
+            focusedInput === "end" || layout === "vertical"
+                ? endWrapper || startWrapper
+                : startWrapper || endWrapper;
+        requestAnimationFrame(() => floatingUi.connectFloatingUI(this, this.referenceEl, this.floatingEl));
+    }
+    onLabelClick() {
+        this.setFocus();
+    }
+    onBeforeOpen() {
+        this.calciteInputDatePickerBeforeOpen.emit();
+    }
+    onOpen() {
+        focusTrapComponent.activateFocusTrap(this, {
+            onActivate: () => {
+                if (this.focusOnOpen) {
+                    this.datePickerEl.setFocus();
+                    this.focusOnOpen = false;
+                }
+            },
+        });
+        this.calciteInputDatePickerOpen.emit();
+    }
+    onBeforeClose() {
+        this.calciteInputDatePickerBeforeClose.emit();
+    }
+    onClose() {
+        this.calciteInputDatePickerClose.emit();
+        focusTrapComponent.deactivateFocusTrap(this);
+        this.restoreInputFocus();
+        this.focusOnOpen = false;
+        this.datePickerEl.reset();
+    }
+    commitValue() {
+        const { focusedInput, value } = this;
+        const focusedInputName = `${focusedInput}Input`;
+        const focusedInputValue = this[focusedInputName].value;
+        const date$1 = date.dateFromLocalizedString(focusedInputValue, this.localeData);
+        const dateAsISO = date.dateToISO(date$1);
+        const valueIsArray = Array.isArray(value);
+        if (this.range) {
+            const focusedInputValueIndex = focusedInput === "start" ? 0 : 1;
+            if (valueIsArray) {
+                if (dateAsISO === value[focusedInputValueIndex]) {
+                    return;
+                }
+                if (date$1) {
+                    this.setRangeValue([
+                        focusedInput === "start" ? date$1 : date.dateFromISO(value[0]),
+                        focusedInput === "end" ? date$1 : date.dateFromISO(value[1]),
+                    ]);
+                    this.localizeInputValues();
+                }
+                else {
+                    this.setRangeValue([
+                        focusedInput === "end" && date.dateFromISO(value[0]),
+                        focusedInput === "start" && date.dateFromISO(value[1]),
+                    ]);
+                }
+            }
+            else {
+                if (date$1) {
+                    this.setRangeValue([
+                        focusedInput === "start" ? date$1 : date.dateFromISO(value[0]),
+                        focusedInput === "end" ? date$1 : date.dateFromISO(value[1]),
+                    ]);
+                    this.localizeInputValues();
+                }
+            }
+        }
+        else {
+            if (dateAsISO === value) {
+                return;
+            }
+            this.setValue(date$1);
+            this.localizeInputValues();
+        }
+    }
+    async loadLocaleData() {
+        if (!index.Build.isBrowser) {
+            return;
+        }
+        locale.numberStringFormatter.numberFormatOptions = {
+            numberingSystem: this.numberingSystem,
+            locale: this.effectiveLocale,
+            useGrouping: false,
+        };
+        this.localeData = await utils.getLocaleData(this.effectiveLocale);
+        this.localizeInputValues();
+    }
+    shouldFocusRangeStart() {
+        const startValue = this.value[0];
+        const endValue = this.value[1];
+        return !!(endValue && !startValue && this.focusedInput === "end" && this.startInput);
+    }
+    shouldFocusRangeEnd() {
+        const startValue = this.value[0];
+        const endValue = this.value[1];
+        return !!(startValue && !endValue && this.focusedInput === "start" && this.endInput);
+    }
+    restoreInputFocus() {
+        if (!this.range) {
+            this.startInput.setFocus();
+            return;
+        }
+        const focusedInput = this.focusedInput === "start" ? this.startInput : this.endInput;
+        focusedInput.setFocus();
+    }
+    localizeInputValues() {
+        var _a;
+        const date$1 = date.dateFromRange((this.range
+            ? (Array.isArray(this.valueAsDate) && this.valueAsDate[0]) || undefined
+            : this.valueAsDate), this.minAsDate, this.maxAsDate);
+        const endDate = this.range
+            ? date.dateFromRange((Array.isArray(this.valueAsDate) && this.valueAsDate[1]) || undefined, this.minAsDate, this.maxAsDate)
+            : null;
+        const formattingOptions = {
+            // we explicitly set numberingSystem to prevent the browser-inferred value
+            // see https://github.com/Esri/calcite-design-system/issues/3079#issuecomment-1168964195 for more info
+            numberingSystem: locale.getSupportedNumberingSystem(this.numberingSystem),
+        };
+        const localizedDate = date$1 && date$1.toLocaleDateString(this.effectiveLocale, formattingOptions);
+        const localizedEndDate = endDate && endDate.toLocaleDateString(this.effectiveLocale, formattingOptions);
+        this.setInputValue(localizedDate !== null && localizedDate !== void 0 ? localizedDate : "", "start");
+        this.setInputValue((_a = (this.range && localizedEndDate)) !== null && _a !== void 0 ? _a : "", "end");
+    }
+    warnAboutInvalidValue(value) {
+        console.warn(`The specified value "${value}" does not conform to the required format, "YYYY-MM-DD".`);
+    }
+    getNormalizedDate(value) {
+        if (!value) {
+            return "";
+        }
+        if (!isTwoDigitYear(value)) {
+            return value;
+        }
+        const { day, month, year } = date.datePartsFromISO(value);
+        const normalizedYear = normalizeToCurrentCentury(Number(year));
+        return `${normalizedYear}-${month}-${day}`;
+    }
+    static get delegatesFocus() { return true; }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "focusTrapDisabled": ["handleFocusTrapDisabled"],
+        "disabled": ["handleDisabledAndReadOnlyChange"],
+        "readOnly": ["handleDisabledAndReadOnlyChange"],
+        "value": ["valueWatcher"],
+        "valueAsDate": ["valueAsDateWatcher"],
+        "flipPlacements": ["flipPlacementsHandler"],
+        "messageOverrides": ["onMessagesChange"],
+        "min": ["onMinChanged"],
+        "max": ["onMaxChanged"],
+        "open": ["openHandler"],
+        "overlayPositioning": ["overlayPositioningHandler"],
+        "layout": ["setReferenceEl"],
+        "focusedInput": ["setReferenceEl"],
+        "effectiveLocale": ["loadLocaleData"]
+    }; }
+};
+InputDatePicker.style = inputDatePickerCss;
+
+exports.calcite_input_date_picker = InputDatePicker;