@ukic/canary-web-components 3.0.0-canary.31 → 3.0.0-canary.33

package/dist/components/ic-time-selector.js

@@ -0,0 +1,898 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { z as parseTimeHelper } from './helpers2.js';
+import { d as defineCustomElement$5 } from './ic-button2.js';
+import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
+import { d as defineCustomElement$3 } from './ic-tooltip2.js';
+import { d as defineCustomElement$2 } from './ic-typography2.js';
+
+const Check = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.79502 15.875L4.62502 11.705L3.20502 13.115L8.79502 18.705L20.795 6.70501L19.385 5.29501L8.79502 15.875Z" fill="currentColor"/>
+</svg>
+`;
+
+const Clear = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+    <title>close icon</title>
+</svg>
+`;
+
+const icTimeSelectorCss = ":host(.ic-time-selector-small){--time-selector-padded-item-height:var(--ic-space-lg)}:host(.ic-time-selector-medium){--time-selector-padded-item-height:calc(\n    var(--ic-space-lg) + var(--ic-space-xxs)\n  )}:host(.ic-time-selector-large){--time-selector-padded-item-height:var(--ic-space-xl)}.ic-time-selector-dialog-container{background-color:var(--ic-time-picker-time-selector-bg);border:var(--ic-space-1px) solid var(--ic-time-picker-time-selector-border);border-radius:var(--ic-space-xxs);padding:var(--ic-space-xs);max-width:calc(\n    3 * var(--ic-space-xxl) + var(--ic-space-xl) + var(--ic-space-xxs)\n  );width:-moz-fit-content;width:fit-content}:host(.ic-time-selector-small) .ic-time-selector-dialog-container{padding:var(--ic-space-xxs);max-width:calc(\n    3 * var(--ic-space-xxl) + var(--ic-space-lg) + var(--ic-space-xxs)\n  )}:host(.ic-time-selector-large) .ic-time-selector-dialog-container{padding:var(--ic-space-md);max-width:calc(\n    3 * var(--ic-space-xxl) + var(--ic-space-xl) + var(--ic-space-xs) +\n      var(--ic-space-xxs)\n  )}.ic-time-selector-item{height:var(--ic-space-lg);padding:var(--ic-space-xxxs);text-align:center;cursor:pointer;scroll-snap-align:start;transition:background 0.2s, color 0.2s}:host(.ic-time-selector-small) .ic-time-selector-item{padding:0}:host(.ic-time-selector-large) .ic-time-selector-item{padding:var(--ic-space-xxs)}.ic-time-selector-item:hover:not(.disabled):not(.selected){background-color:var(--ic-time-picker-time-bg-hover)}.ic-time-selector-item:active:not(.disabled):not(.selected){background-color:var(--ic-time-picker-time-bg-pressed)}.ic-time-selector-item.selected{background-color:var(--ic-time-picker-time-bg-selected);--ic-typography-color:var(--ic-time-picker-time-text-selected);position:relative}.ic-time-selector-item.selected:hover{background-color:var(--ic-time-picker-time-active-bg-hover)}.ic-time-selector-item.selected:active{background-color:var(--ic-time-picker-time-active-bg-pressed)}.ic-time-selector-colon-selected{background-color:var(--ic-time-picker-colon-bg-selected);color:var(--ic-time-picker-colon-selected) !important}.ic-time-selector-item.selected::before,.ic-time-selector-item.selected::after,.ic-time-selector-colon-selected::before,.ic-time-selector-colon-selected::after{content:\"\";position:absolute;left:0;right:0;height:var(--ic-space-1px);background:var(--ic-time-picker-time-selector-bg)}.ic-time-selector-item.selected::before,.ic-time-selector-colon-selected::before{top:0}.ic-time-selector-item.selected::after,.ic-time-selector-colon-selected::after{bottom:0}.ic-time-selector-item.disabled{--ic-typography-color:var(--ic-time-picker-time-text-disabled);cursor:not-allowed}.ic-time-selector-column-wrapper{display:flex;flex-direction:column}.ic-time-selector-scroll-row{height:var(--time-selector-padded-item-height) !important;background:transparent !important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default !important;box-sizing:border-box}:host(.ic-time-selector-small) .ic-time-selector-scroll-row-last{height:calc(var(--ic-space-1px) + var(--ic-space-xxxs)) !important}:host(.ic-time-selector-medium) .ic-time-selector-scroll-row-last,:host(.ic-time-selector-large) .ic-time-selector-scroll-row-last{height:calc(\n    var(--ic-space-1px) + var(--ic-space-xxxs) + var(--ic-space-md)\n  ) !important}.ic-time-selector-scroll-row:hover,.ic-time-selector-scroll-row:active{background:transparent !important}.ic-time-selector-header-row{color:var(--ic-time-picker-hh-label);--ic-typography-color:var(--ic-time-picker-hh-label) !important;background:transparent !important;text-align:center;height:var(--time-selector-padded-item-height);display:flex;align-items:center;justify-content:center}.ic-time-selector-header-border{position:absolute;left:0;right:0;top:var(--time-selector-padded-item-height);height:var(--ic-space-1px);background:var(--ic-time-picker-header-border);pointer-events:none}.ic-time-selector-colon{display:flex;align-items:center;justify-content:center;color:var(--ic-time-picker-colon-default);height:var(--time-selector-padded-item-height);margin-top:calc(3 * var(--time-selector-padded-item-height))}.ic-time-selector-columns{display:flex;flex-direction:row;border-bottom:var(--ic-space-1px) solid var(--ic-time-picker-lower-border);margin:0 var(--ic-space-xxs);position:relative;z-index:1}.ic-time-selector-highlight-lines{position:relative;width:100%}.ic-time-selector-highlight{position:absolute;left:0;right:0;width:100%;height:var(--ic-space-1px);background:var(--ic-time-picker-selection-border);pointer-events:none;z-index:1}.ic-time-selector-highlight-top{top:calc(3 * var(--time-selector-padded-item-height) - var(--ic-space-1px))}.ic-time-selector-highlight-bottom{top:calc(4 * var(--time-selector-padded-item-height))}.ic-time-selector-column{height:calc((5 * var(--ic-space-xxl)) + (3 * var(--ic-space-1px)));overflow-y:auto;width:calc(var(--ic-space-xl) + var(--ic-space-xs));position:relative;scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none}:host(.ic-time-selector-small) .ic-time-selector-column{width:calc(var(--ic-space-xl) + var(--ic-space-xxs) + var(--ic-space-xxxs))}:host(.ic-time-selector-large) .ic-time-selector-column{width:calc(var(--ic-space-xl) + var(--ic-space-xs) + var(--ic-space-xxxs))}.ic-time-selector-column-period{margin-left:var(--ic-space-xxs)}.ic-time-selector-column::-webkit-scrollbar{display:none}.ic-time-selector-column:focus-visible,.ic-time-selector-item:focus-visible{outline:none;background-color:transparent}.ic-time-selector-column:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:3}.ic-time-selector-list{list-style:none;margin:0;padding:0}.ic-time-selector-actions{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;width:100%;margin-top:var(--ic-space-xs);margin-left:auto}.ic-time-selector-check-btn{margin-left:calc(var(--ic-space-xs) + var(--ic-space-xxxs))}.sr-only{position:absolute;left:-9999px}@media (forced-colors: active){.ic-time-selector-item.selected{background-color:highlight !important}.ic-time-selector-item.disabled{--ic-typography-color:GrayText !important}.ic-time-selector-column:focus{border:var(--ic-border-hc)}.ic-time-selector-highlight{background:Highlight !important}}";
+const IcTimeSelectorStyle0 = icTimeSelectorCss;
+
+const COLUMN_TYPES = ["hour", "minute", "second", "period"];
+const COLUMN_CLASS = ".ic-time-selector-column";
+const ITEM_CLASS = ".ic-time-selector-item";
+const TimeSelector = /*@__PURE__*/ proxyCustomElement(class TimeSelector extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.icChange = createEvent(this, "icChange", 7);
+        this.DEFAULT_TIME_FORMAT = "HH:MM:SS";
+        this.minutes = Array.from({ length: 60 }, (_, i) => i);
+        this.seconds = Array.from({ length: 60 }, (_, i) => i);
+        this.periods = ["AM", "PM"];
+        this.minTime = null;
+        this.maxTime = null;
+        this.ariaLiveMessage = "";
+        /**
+         * An array of times that will be disabled in the time selector. The times can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.
+         */
+        this.disableTimes = [];
+        /**
+         * The earliest time that will be allowed. The value can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.
+         */
+        this.min = "";
+        /**
+         * The latest time that will be allowed. The value can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.
+         */
+        this.max = "";
+        /**
+         * The size of the time selector to be displayed.
+         */
+        this.size = "medium";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * The format in which the time will be displayed.
+         */
+        this.timeFormat = this.DEFAULT_TIME_FORMAT;
+        /**
+         * The time period format: "12" for 12-hour, "24" for 24-hour. Defaults to "24".
+         */
+        this.timePeriod = "24";
+        /**
+         * The value of the time selector. The value can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.
+         */
+        this.value = "";
+        this.setTimeParts = (hour, minute, second) => {
+            let period = "AM";
+            if (this.timePeriod === "12") {
+                if (hour === 0) {
+                    hour = 12;
+                    period = "AM";
+                }
+                else if (hour === 12) {
+                    period = "PM";
+                }
+                else if (hour > 12) {
+                    hour = hour - 12;
+                    period = "PM";
+                }
+                else {
+                    period = "AM";
+                }
+                this.selectedHour = hour;
+                this.selectedPeriod = period;
+            }
+            else {
+                this.selectedHour = hour;
+            }
+            this.selectedMinute = minute;
+            this.selectedSecond = second;
+        };
+        this.checkIfScrollIsFinished = (column, scrollTop) => {
+            const isScrollFinished = setInterval(() => {
+                if (column.scrollTop === scrollTop + 56) {
+                    column === null || column === void 0 ? void 0 : column.focus();
+                    clearInterval(isScrollFinished);
+                }
+            }, 25);
+        };
+        this.handleSelect = (type, value) => {
+            var _a;
+            const prevValue = this.getSelectedValue(type);
+            switch (type) {
+                case "hour":
+                    this.selectedHour = Number(value);
+                    break;
+                case "minute":
+                    this.selectedMinute = Number(value);
+                    break;
+                case "second":
+                    this.selectedSecond = Number(value);
+                    break;
+                case "period":
+                    this.selectedPeriod = value;
+                    break;
+            }
+            const columns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(COLUMN_CLASS);
+            const idx = COLUMN_TYPES.indexOf(type);
+            if (columns && columns[idx]) {
+                columns[idx].focus();
+                window.requestAnimationFrame(() => {
+                    this.scrollSelectedItem(type);
+                });
+            }
+            if (prevValue === undefined || prevValue === null) {
+                this.announceSelectedColumn(type);
+            }
+            else {
+                this.lastAnnouncedType = type;
+                this.lastAnnouncedValue = this.getSelectedValue(type);
+            }
+        };
+        this.isTimeDisabled = (hour, minute, second, type) => {
+            var _a, _b, _c, _d;
+            for (const t of this.disableTimes) {
+                if (typeof t === "string" || t instanceof Date) {
+                    const parts = parseTimeHelper(t).parts;
+                    if (parts &&
+                        parts.hour === hour &&
+                        parts.minute === minute &&
+                        parts.second === second) {
+                        return true;
+                    }
+                }
+                else if (t && typeof t === "object" && "start" in t && "end" in t) {
+                    const startParts = parseTimeHelper(t.start).parts;
+                    const endParts = parseTimeHelper(t.end).parts;
+                    if (startParts && endParts) {
+                        const timeVal = hour * 3600 + minute * 60 + second;
+                        const startVal = startParts.hour * 3600 + startParts.minute * 60 + startParts.second;
+                        const endVal = endParts.hour * 3600 + endParts.minute * 60 + endParts.second;
+                        if (timeVal >= startVal && timeVal <= endVal) {
+                            return true;
+                        }
+                    }
+                }
+            }
+            if (this.min) {
+                this.minTime = parseTimeHelper(this.min).date;
+                if (this.minTime) {
+                    const minHour = this.minTime.getHours();
+                    const minMinute = this.minTime.getMinutes();
+                    const minSecond = this.minTime.getSeconds();
+                    if (type === "hour") {
+                        const highlightedMinute = (_a = this.selectedMinute) !== null && _a !== void 0 ? _a : minMinute;
+                        const highlightedSecond = (_b = this.selectedSecond) !== null && _b !== void 0 ? _b : minSecond;
+                        if (hour < minHour ||
+                            (hour === minHour && highlightedMinute < minMinute) ||
+                            (hour === minHour &&
+                                highlightedMinute === minMinute &&
+                                highlightedSecond < minSecond)) {
+                            return true;
+                        }
+                    }
+                    else if (type === "minute") {
+                        if (hour === minHour && minute < minMinute) {
+                            return true;
+                        }
+                    }
+                    else if (type === "second") {
+                        if (hour === minHour && minute === minMinute && second < minSecond) {
+                            return true;
+                        }
+                    }
+                    else {
+                        if (hour < minHour ||
+                            (hour === minHour && minute < minMinute) ||
+                            (hour === minHour && minute === minMinute && second < minSecond)) {
+                            return true;
+                        }
+                    }
+                }
+            }
+            if (this.max) {
+                this.maxTime = parseTimeHelper(this.max).date;
+                if (this.maxTime) {
+                    const maxHour = this.maxTime.getHours();
+                    const maxMinute = this.maxTime.getMinutes();
+                    const maxSecond = this.maxTime.getSeconds();
+                    if (type === "hour") {
+                        const selectedMinute = (_c = this.selectedMinute) !== null && _c !== void 0 ? _c : 59;
+                        const selectedSecond = (_d = this.selectedSecond) !== null && _d !== void 0 ? _d : 59;
+                        if (hour > maxHour ||
+                            (hour === maxHour && selectedMinute > maxMinute) ||
+                            (hour === maxHour &&
+                                selectedMinute === maxMinute &&
+                                selectedSecond > maxSecond)) {
+                            return true;
+                        }
+                    }
+                    else if (type === "minute") {
+                        if (hour === maxHour && minute > maxMinute) {
+                            return true;
+                        }
+                    }
+                    else if (type === "second") {
+                        if (hour === maxHour && minute === maxMinute && second > maxSecond) {
+                            return true;
+                        }
+                    }
+                    else {
+                        if (hour > maxHour ||
+                            (hour === maxHour && minute > maxMinute) ||
+                            (hour === maxHour && minute === maxMinute && second > maxSecond)) {
+                            return true;
+                        }
+                    }
+                }
+            }
+            return false;
+        };
+        this.handleColumnKeyDown = (type, event) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            const columns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(COLUMN_CLASS);
+            const idx = COLUMN_TYPES.indexOf(type);
+            if (!columns)
+                return;
+            const values = this.getColumnValues(type);
+            const selected = this.getSelectedValue(type);
+            const col = columns[idx];
+            if (!col)
+                return;
+            const selectHighlighted = () => {
+                const highlighted = this.getHighlightedValue(type, col);
+                if (highlighted !== null) {
+                    this.handleSelect(type, highlighted);
+                }
+                else if (values.length > 0) {
+                    this.handleSelect(type, values[0]);
+                }
+            };
+            switch (event.key) {
+                case "Enter":
+                case " ":
+                    event.preventDefault();
+                    selectHighlighted();
+                    return;
+                case "ArrowRight":
+                    event.preventDefault();
+                    selectHighlighted();
+                    if (idx < columns.length - 1) {
+                        (_b = columns[idx + 1]) === null || _b === void 0 ? void 0 : _b.focus();
+                    }
+                    return;
+                case "ArrowLeft":
+                    event.preventDefault();
+                    if (idx > 0)
+                        (_c = columns[idx - 1]) === null || _c === void 0 ? void 0 : _c.focus();
+                    return;
+                case "Tab":
+                    if (event.shiftKey) {
+                        if (idx === 0) {
+                            return;
+                        }
+                        else {
+                            event.preventDefault();
+                            (_d = columns[idx - 1]) === null || _d === void 0 ? void 0 : _d.focus();
+                        }
+                    }
+                    else {
+                        event.preventDefault();
+                        selectHighlighted();
+                        this.announceSelectedColumn(type);
+                        if (idx < columns.length - 1) {
+                            (_e = columns[idx + 1]) === null || _e === void 0 ? void 0 : _e.focus();
+                        }
+                        else {
+                            (_g = (_f = this.el.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector(".ic-time-selector-clear-btn")) === null || _g === void 0 ? void 0 : _g.focus();
+                            this.updateAriaLiveMessage();
+                        }
+                    }
+                    return;
+                case "ArrowUp":
+                case "ArrowDown": {
+                    let idxInValues = values.findIndex((v) => v === selected);
+                    if (idxInValues === -1)
+                        idxInValues = 0;
+                    let newIdx = idxInValues;
+                    const direction = event.key === "ArrowUp" ? -1 : 1;
+                    const maxIdx = values.length - 1;
+                    do {
+                        newIdx += direction;
+                    } while (newIdx >= 0 &&
+                        newIdx <= maxIdx &&
+                        (() => {
+                            var _a, _b, _c;
+                            if (type === "hour" || type === "minute" || type === "second") {
+                                const hour = type === "hour"
+                                    ? values[newIdx]
+                                    : (_a = this.selectedHour) !== null && _a !== void 0 ? _a : 0;
+                                const minute = type === "minute"
+                                    ? values[newIdx]
+                                    : (_b = this.selectedMinute) !== null && _b !== void 0 ? _b : 0;
+                                const second = type === "second"
+                                    ? values[newIdx]
+                                    : (_c = this.selectedSecond) !== null && _c !== void 0 ? _c : 0;
+                                return this.isTimeDisabled(hour, minute, second);
+                            }
+                            return false;
+                        })());
+                    this.ariaLiveMessage = `Selected ${type}: ${values[newIdx]}`;
+                    if (newIdx >= 0 && newIdx <= maxIdx && newIdx !== idxInValues) {
+                        this.handleSelect(type, values[newIdx]);
+                    }
+                    return;
+                }
+                default:
+                    return;
+            }
+        };
+        this.renderColumn = (type, values, selected) => {
+            const isTimeColumn = type === "hour" || type === "minute" || type === "second";
+            const isPeriodColumn = type === "period";
+            const headerLabel = this.getHeaderLabel(type);
+            const topSpacerCount = 2;
+            let bottomSpacerCount = 6;
+            if (this.size === "large") {
+                bottomSpacerCount = 5;
+            }
+            else if (this.size === "small") {
+                bottomSpacerCount = 8;
+            }
+            return (h("div", { class: "ic-time-selector-column-wrapper" }, isPeriodColumn ? (h("div", { class: "ic-time-selector-header-row" })) : (headerLabel && (h("div", { class: "ic-time-selector-header-row" }, h("ic-typography", { variant: "subtitle-small" }, headerLabel)))), h("div", { class: {
+                    "ic-time-selector-column": true,
+                    "ic-time-selector-column-period": isPeriodColumn,
+                }, tabIndex: 0, onKeyDown: (e) => this.handleColumnKeyDown(type, e) }, h("ul", { class: "ic-time-selector-list", role: "listbox", "aria-label": type }, this.renderScrollRows(topSpacerCount, `${type}-top-spacer`), values.map((val) => {
+                var _a, _b, _c;
+                let disabled = false;
+                if (isTimeColumn) {
+                    const hour = type === "hour" ? val : (_a = this.selectedHour) !== null && _a !== void 0 ? _a : 0;
+                    const minute = type === "minute"
+                        ? val
+                        : (_b = this.selectedMinute) !== null && _b !== void 0 ? _b : 0;
+                    const second = type === "second"
+                        ? val
+                        : (_c = this.selectedSecond) !== null && _c !== void 0 ? _c : 0;
+                    disabled = this.isTimeDisabled(hour, minute, second, type);
+                }
+                return (h("li", { class: {
+                        "ic-time-selector-item": true,
+                        selected: val === selected,
+                        disabled,
+                    }, role: "option", "aria-selected": val === selected ? "true" : "false", "aria-disabled": disabled ? "true" : "false", onClick: () => !disabled && this.handleSelect(type, val), tabIndex: -1, key: `${type}-val-${val}` }, h("ic-typography", { variant: "subtitle-small" }, typeof val === "number"
+                    ? val.toString().padStart(2, "0")
+                    : val)));
+            }), (isTimeColumn || isPeriodColumn) &&
+                this.renderScrollRows(bottomSpacerCount, `${type}-bottom-spacer`)))));
+        };
+        this.handleClear = () => {
+            this.selectedHour = undefined;
+            this.scrollSelectedItem("hour", true);
+            this.selectedMinute = undefined;
+            this.scrollSelectedItem("minute", true);
+            this.selectedSecond = undefined;
+            this.scrollSelectedItem("second", true);
+            this.selectedPeriod = undefined;
+            this.scrollSelectedItem("period", true);
+            this.lastAnnouncedType = undefined;
+            this.lastAnnouncedValue = undefined;
+            this.icChange.emit({
+                value: null,
+                timeString: null,
+                timeObject: {
+                    hour: null,
+                    minute: null,
+                    second: null,
+                    period: undefined,
+                },
+            });
+        };
+        this.handleConfirmClick = () => {
+            const hour = this.selectedHour != null ? this.selectedHour : null;
+            const minute = this.selectedMinute != null ? this.selectedMinute : null;
+            const second = this.selectedSecond != null ? this.selectedSecond : null;
+            const period = this.selectedPeriod;
+            const hourStr = hour != null ? hour.toString().padStart(2, "0") : null;
+            const minuteStr = minute != null ? minute.toString().padStart(2, "0") : null;
+            const secondStr = second != null ? second.toString().padStart(2, "0") : null;
+            let allSelected = false;
+            if (this.timeFormat === this.DEFAULT_TIME_FORMAT) {
+                allSelected = hour !== null && minute !== null && second !== null;
+            }
+            else {
+                allSelected = hour !== null && minute !== null;
+            }
+            let value = null;
+            let timeString = null;
+            if (allSelected) {
+                let date24hours = hour;
+                if (hour != null && period && this.timePeriod === "12") {
+                    if (period === "PM" && hour < 12)
+                        date24hours = hour + 12;
+                    if (period === "AM" && hour === 12)
+                        date24hours = 0;
+                }
+                value = new Date();
+                value.setHours(date24hours !== null && date24hours !== void 0 ? date24hours : 0);
+                value.setMinutes(minute !== null && minute !== void 0 ? minute : 0);
+                value.setSeconds(second !== null && second !== void 0 ? second : 0);
+                value.setMilliseconds(0);
+                if (this.timeFormat === "HH:MM") {
+                    timeString = hourStr + ":" + minuteStr + (period ? " " + period : "");
+                }
+                else if (this.timeFormat === this.DEFAULT_TIME_FORMAT) {
+                    timeString =
+                        hourStr +
+                            ":" +
+                            minuteStr +
+                            ":" +
+                            secondStr +
+                            (period ? " " + period : "");
+                }
+                this.value = value;
+            }
+            this.icChange.emit({
+                value: allSelected ? value : null,
+                timeString: allSelected ? timeString : null,
+                timeObject: Object.assign({ hour: hourStr, minute: minuteStr, second: secondStr }, (period ? { period } : {})),
+            });
+        };
+    }
+    watchMinHandler() {
+        this.minTime = parseTimeHelper(this.min).date;
+    }
+    watchMaxHandler() {
+        this.maxTime = parseTimeHelper(this.max).date;
+    }
+    watchValueHandler() {
+        this.setTime(this.value);
+        setTimeout(() => {
+            this.scrollSelectedItem("hour");
+            this.scrollSelectedItem("minute");
+            if (this.timeFormat === this.DEFAULT_TIME_FORMAT) {
+                this.scrollSelectedItem("second");
+            }
+            if (this.timePeriod === "12") {
+                this.scrollSelectedItem("period");
+            }
+        }, 0);
+    }
+    componentWillLoad() {
+        this.setTime(this.value);
+    }
+    componentDidLoad() {
+        setTimeout(() => {
+            if (this.selectedHour !== undefined && this.selectedHour !== null) {
+                this.scrollSelectedItem("hour");
+            }
+            else if (this.min) {
+                this.scrollMinTime("hour");
+            }
+            if (this.selectedMinute !== undefined && this.selectedMinute !== null) {
+                this.scrollSelectedItem("minute");
+            }
+            else if (this.min) {
+                this.scrollMinTime("minute");
+            }
+            if (this.timeFormat === this.DEFAULT_TIME_FORMAT) {
+                if (this.selectedSecond !== undefined && this.selectedSecond !== null) {
+                    this.scrollSelectedItem("second");
+                }
+                else if (this.min) {
+                    this.scrollMinTime("second");
+                }
+            }
+            if (this.timePeriod === "12") {
+                if (this.selectedPeriod !== undefined && this.selectedPeriod !== null) {
+                    this.scrollSelectedItem("period");
+                }
+                else if (this.min) {
+                    this.scrollMinTime("period");
+                }
+            }
+            this.updateAriaLiveMessage();
+        }, 0);
+    }
+    getHeaderLabel(type) {
+        switch (type) {
+            case "hour":
+                return "HH";
+            case "minute":
+                return "MM";
+            case "second":
+                return "SS";
+            default:
+                return "";
+        }
+    }
+    setTime(time) {
+        if (time === null || time === undefined || time === "") {
+            this.handleClear();
+            return;
+        }
+        if (typeof time === "string") {
+            const zuluMatch = time.match(/^([0-9]{2}):([0-9]{2}):([0-9]{2})(?:\.[0-9]{1,3})?Z?$/);
+            if (zuluMatch) {
+                this.setTimeParts(Number(zuluMatch[1]), Number(zuluMatch[2]), Number(zuluMatch[3]));
+            }
+            else {
+                const parts = time.split(":");
+                this.setTimeParts(Number(parts[0]) || 0, Number(parts[1]) || 0, Number(parts[2]) || 0);
+            }
+        }
+        else {
+            const { parts } = parseTimeHelper(time);
+            if (parts) {
+                this.setTimeParts(parts.hour, parts.minute, parts.second);
+            }
+        }
+    }
+    renderScrollRows(count, keyPrefix = "scroll-row") {
+        return Array.from({ length: count }).map((_, i) => {
+            const isLast = keyPrefix.endsWith("bottom-spacer")
+                ? i === count - 1
+                : false;
+            return (h("li", { class: Object.assign({ "ic-time-selector-item": true, "ic-time-selector-scroll-row": true }, (isLast ? { "ic-time-selector-scroll-row-last": true } : {})), "aria-hidden": "true", tabIndex: -1, key: `${keyPrefix}-${i}` }));
+        });
+    }
+    scrollSelectedItem(colClass, clear) {
+        var _a;
+        const columns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(COLUMN_CLASS);
+        let colIdx = COLUMN_TYPES.indexOf(colClass);
+        if (colClass === "period" && (columns === null || columns === void 0 ? void 0 : columns.length)) {
+            colIdx = columns.length - 1;
+        }
+        const col = columns === null || columns === void 0 ? void 0 : columns[colIdx];
+        if (col) {
+            const items = col.querySelectorAll(ITEM_CLASS);
+            let selectedIdx = -1;
+            items.forEach((item, idx) => {
+                if (item.classList.contains("selected"))
+                    selectedIdx = idx;
+            });
+            if (clear) {
+                selectedIdx = 0;
+            }
+            if (selectedIdx > -1) {
+                const scrollRow = col.querySelector(".ic-time-selector-scroll-row");
+                let resolvedHeight = 0;
+                if (scrollRow) {
+                    resolvedHeight = parseFloat(getComputedStyle(scrollRow).height);
+                }
+                const offset = resolvedHeight * 2;
+                const scrollTop = items[selectedIdx].offsetTop - offset;
+                const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+                col.scrollTo({
+                    top: scrollTop,
+                    behavior: prefersReducedMotion ? "instant" : "smooth",
+                });
+                if (clear) {
+                    setTimeout(() => {
+                        var _a;
+                        const columns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(COLUMN_CLASS);
+                        if (columns && columns.length > 0) {
+                            this.checkIfScrollIsFinished(columns[0], scrollTop);
+                        }
+                    }, 300);
+                }
+            }
+        }
+    }
+    scrollMinTime(colClass) {
+        var _a;
+        const columns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(COLUMN_CLASS);
+        const colIdx = COLUMN_TYPES.indexOf(colClass);
+        const col = columns === null || columns === void 0 ? void 0 : columns[colIdx];
+        if (!col)
+            return;
+        const items = col.querySelectorAll(ITEM_CLASS);
+        let minHour = 0, minMinute = 0, minSecond = 0;
+        if (this.minTime) {
+            minHour = this.minTime.getHours() + 2;
+            minMinute = this.minTime.getMinutes() + 2;
+            minSecond = this.minTime.getSeconds();
+        }
+        else if (this.min) {
+            const minDate = parseTimeHelper(this.min).date;
+            if (minDate) {
+                minHour = minDate.getHours();
+                minMinute = minDate.getMinutes();
+                minSecond = minDate.getSeconds();
+            }
+        }
+        let targetIdx = -1;
+        const values = this.getColumnValues(colClass);
+        if (colClass === "hour") {
+            targetIdx = values.findIndex((v) => v === minHour);
+        }
+        else if (colClass === "minute") {
+            targetIdx = values.findIndex((v) => v === minMinute);
+        }
+        else if (colClass === "second") {
+            targetIdx = values.findIndex((v) => v === minSecond);
+        }
+        else if (colClass === "period") {
+            let period = "AM";
+            if (this.timePeriod === "12") {
+                if (minHour === 0) {
+                    period = "AM";
+                }
+                else if (minHour === 12) {
+                    period = "PM";
+                }
+                else if (minHour > 12) {
+                    period = "PM";
+                }
+                else {
+                    period = "AM";
+                }
+            }
+            targetIdx = values.findIndex((v) => v === period);
+        }
+        if (targetIdx > -1) {
+            const scrollRow = col.querySelector(".ic-time-selector-scroll-row");
+            let resolvedHeight = 0;
+            if (scrollRow) {
+                resolvedHeight = parseFloat(getComputedStyle(scrollRow).height);
+            }
+            const offset = resolvedHeight * 2;
+            const scrollTop = items[targetIdx].offsetTop - offset;
+            const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+            col.scrollTo({
+                top: scrollTop,
+                behavior: prefersReducedMotion ? "instant" : "smooth",
+            });
+        }
+    }
+    announceSelectedColumn(type) {
+        const value = this.getSelectedValue(type);
+        if (value !== null &&
+            value !== undefined &&
+            (type !== this.lastAnnouncedType || value !== this.lastAnnouncedValue)) {
+            this.ariaLiveMessage = `Selected ${type}: ${value}`;
+        }
+        else {
+            this.ariaLiveMessage = "";
+        }
+        this.lastAnnouncedType = type;
+        this.lastAnnouncedValue = value;
+    }
+    getColumnValues(type) {
+        if (type === "hour")
+            return this.timePeriod === "12"
+                ? Array.from({ length: 12 }, (_, i) => i + 1)
+                : Array.from({ length: 24 }, (_, i) => i);
+        if (type === "minute")
+            return this.minutes;
+        if (type === "second")
+            return this.seconds;
+        if (type === "period")
+            return this.periods;
+        return [];
+    }
+    getSelectedValue(type) {
+        var _a, _b, _c, _d;
+        if (type === "hour")
+            return (_a = this.selectedHour) !== null && _a !== void 0 ? _a : null;
+        if (type === "minute")
+            return (_b = this.selectedMinute) !== null && _b !== void 0 ? _b : null;
+        if (type === "second")
+            return (_c = this.selectedSecond) !== null && _c !== void 0 ? _c : null;
+        if (type === "period")
+            return (_d = this.selectedPeriod) !== null && _d !== void 0 ? _d : null;
+        return null;
+    }
+    getHighlightedValue(type, col) {
+        var _a, _b, _c;
+        const items = Array.from(col.querySelectorAll(ITEM_CLASS));
+        const realItems = items.filter((item) => !item.classList.contains("ic-time-selector-scroll-row"));
+        if (realItems.length === 0)
+            return null;
+        const highlightTop = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".ic-time-selector-highlight-top");
+        const highlightBottom = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".ic-time-selector-highlight-bottom");
+        if (!highlightTop || !highlightBottom)
+            return null;
+        const topRect = highlightTop.getBoundingClientRect();
+        const bottomRect = highlightBottom.getBoundingClientRect();
+        const highlightStart = topRect.bottom;
+        const highlightEnd = bottomRect.top;
+        for (const item of realItems) {
+            const itemRect = item.getBoundingClientRect();
+            const itemCenter = itemRect.top + itemRect.height / 2;
+            if (itemCenter >= highlightStart && itemCenter <= highlightEnd) {
+                const key = item.getAttribute("key");
+                if (key) {
+                    const valStr = key.replace(`${type}-val-`, "");
+                    if (type === "hour" || type === "minute" || type === "second") {
+                        return Number(valStr);
+                    }
+                    else {
+                        return valStr;
+                    }
+                }
+                const text = (_c = item.textContent) === null || _c === void 0 ? void 0 : _c.trim();
+                if (type === "hour" || type === "minute" || type === "second") {
+                    return text ? Number(text) : null;
+                }
+                else {
+                    return text;
+                }
+            }
+        }
+        return null;
+    }
+    updateAriaLiveMessage() {
+        const hourStr = this.selectedHour != null
+            ? this.selectedHour.toString().padStart(2, "0")
+            : null;
+        const minuteStr = this.selectedMinute != null
+            ? this.selectedMinute.toString().padStart(2, "0")
+            : null;
+        const secondStr = this.selectedSecond != null
+            ? this.selectedSecond.toString().padStart(2, "0")
+            : null;
+        let timeString = "";
+        let allSelected = false;
+        if (this.timeFormat === "HH:MM") {
+            allSelected = hourStr !== null && minuteStr !== null;
+            if (allSelected) {
+                timeString =
+                    hourStr +
+                        ":" +
+                        minuteStr +
+                        (this.selectedPeriod ? " " + this.selectedPeriod : "");
+            }
+        }
+        else if (this.timeFormat === this.DEFAULT_TIME_FORMAT) {
+            allSelected =
+                hourStr !== null && minuteStr !== null && secondStr !== null;
+            if (allSelected) {
+                timeString =
+                    hourStr +
+                        ":" +
+                        minuteStr +
+                        ":" +
+                        secondStr +
+                        (this.selectedPeriod ? " " + this.selectedPeriod : "");
+            }
+        }
+        this.ariaLiveMessage =
+            allSelected && timeString ? `Selected time: ${timeString}` : "";
+    }
+    render() {
+        var _a, _b, _c, _d;
+        const hours = this.timePeriod === "12"
+            ? Array.from({ length: 12 }, (_, i) => i + 1)
+            : Array.from({ length: 24 }, (_, i) => i);
+        const timeFormat = this.timeFormat || this.DEFAULT_TIME_FORMAT;
+        const columns = [
+            this.renderColumn("hour", hours, (_a = this.selectedHour) !== null && _a !== void 0 ? _a : null),
+            this.renderColumn("minute", this.minutes, (_b = this.selectedMinute) !== null && _b !== void 0 ? _b : null),
+        ];
+        if (timeFormat === this.DEFAULT_TIME_FORMAT) {
+            columns.push(this.renderColumn("second", this.seconds, (_c = this.selectedSecond) !== null && _c !== void 0 ? _c : null));
+        }
+        let colonSelectedStates = [];
+        if (timeFormat === this.DEFAULT_TIME_FORMAT) {
+            colonSelectedStates = [
+                this.selectedHour !== undefined && this.selectedMinute !== undefined,
+                this.selectedMinute !== undefined && this.selectedSecond !== undefined,
+            ];
+        }
+        else {
+            colonSelectedStates = [
+                this.selectedHour !== undefined && this.selectedMinute !== undefined,
+            ];
+        }
+        const isInPicker = this.el.closest("ic-time-picker") !== null;
+        const { size, theme, timePeriod } = this;
+        return (h(Host, { key: '0a25adbaeba34a4dcd3ef15edd5076d8ed4ad0a5', class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                [`ic-time-selector-${size}`]: true,
+            } }, h("div", { key: 'e65b452fb22c989b634fd1d8839ecf3bcb5c8a96', role: isInPicker ? "dialog" : undefined, "aria-modal": isInPicker ? true : undefined, "aria-label": "Select time. Use arrow keys to navigate and select the options and then tab to move onto the next selection.", class: {
+                "ic-time-selector-dialog-container": true,
+            } }, h("div", { key: '178213ede67d838f70b8bd164aac6481a97b03eb', class: "ic-time-selector-highlight-lines" }, h("div", { key: 'c10de931f6cba5496de152f1fdfc87a118413e08', class: "ic-time-selector-header-border" }), h("div", { key: '440b09028d77256e9b0bb18cc2f24550eac5f30d', class: {
+                "ic-time-selector-highlight": true,
+                "ic-time-selector-highlight-top": true,
+            } }), h("div", { key: 'eed615b5bbd35c5b0d0a5b3625710b00675856ab', class: "ic-time-selector-columns" }, columns.map((col, idx) => [
+            col,
+            idx < columns.length - 1 ? (h("ic-typography", { class: {
+                    "ic-time-selector-colon": true,
+                    "ic-time-selector-colon-selected": colonSelectedStates[idx],
+                }, variant: "subtitle-small", "aria-hidden": "true", key: `colon-${idx}` }, ":")) : null,
+        ]), timePeriod !== "24" &&
+            this.renderColumn("period", this.periods, (_d = this.selectedPeriod) !== null && _d !== void 0 ? _d : null)), h("div", { key: '8b2b12a4e907c615b7e79d9801d5840d522e775d', class: {
+                "ic-time-selector-highlight": true,
+                "ic-time-selector-highlight-bottom": true,
+            } })), h("div", { key: '0d3a320315b1cf0557b8d281b6e468ef517b7ff4', class: "ic-time-selector-actions" }, h("ic-button", { key: '70d842672493c3a63ced6571d7e1ab6afba2abdf', variant: "icon-tertiary", "aria-label": "Clear time", class: {
+                "ic-time-selector-clear-btn": true,
+            }, onClick: this.handleClear, disabled: this.selectedHour === undefined &&
+                this.selectedMinute === undefined &&
+                this.selectedSecond === undefined &&
+                this.selectedPeriod === undefined, size: size, tabIndex: 0, onKeyDown: (e) => {
+                var _a;
+                if (e.key === "Tab" && e.shiftKey) {
+                    e.preventDefault();
+                    const columns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(COLUMN_CLASS);
+                    if (columns && columns.length > 0) {
+                        const lastCol = columns[columns.length - 1];
+                        lastCol === null || lastCol === void 0 ? void 0 : lastCol.focus();
+                    }
+                }
+            } }, h("span", { key: '45c66f9552c10be9e3b466342c6e7d22fd7df90b', "aria-hidden": "true", innerHTML: Clear })), h("ic-button", { key: 'eae553c514bc635a71220b969044df8d32e457bb', variant: "icon-tertiary", "aria-label": "Select time", class: "ic-time-selector-check-btn", onClick: this.handleConfirmClick, disabled: this.selectedHour === undefined &&
+                this.selectedMinute === undefined &&
+                this.selectedSecond === undefined &&
+                this.selectedPeriod === undefined, size: size, tabIndex: 0 }, h("span", { key: 'f586f8d1b2659d3cf2f0f8e7365ebcd9828ebf23', "aria-hidden": "true", innerHTML: Check })))), h("div", { key: '27dd2db88615040635a0b61b9e785d50a488d90a', class: "sr-only", "aria-live": "polite" }, this.ariaLiveMessage)));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "min": ["watchMinHandler"],
+        "max": ["watchMaxHandler"],
+        "value": ["watchValueHandler"]
+    }; }
+    static get style() { return IcTimeSelectorStyle0; }
+}, [1, "ic-time-selector", {
+        "disableTimes": [16],
+        "min": [1],
+        "max": [1],
+        "size": [1],
+        "theme": [1],
+        "timeFormat": [1, "time-format"],
+        "timePeriod": [1, "time-period"],
+        "value": [1025],
+        "selectedHour": [32],
+        "selectedMinute": [32],
+        "selectedSecond": [32],
+        "selectedPeriod": [32],
+        "ariaLiveMessage": [32]
+    }, undefined, {
+        "min": ["watchMinHandler"],
+        "max": ["watchMaxHandler"],
+        "value": ["watchValueHandler"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-time-selector", "ic-button", "ic-loading-indicator", "ic-tooltip", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-time-selector":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TimeSelector);
+            }
+            break;
+        case "ic-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ic-loading-indicator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ic-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IcTimeSelector = TimeSelector;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcTimeSelector, defineCustomElement };
+
+//# sourceMappingURL=ic-time-selector.js.map