@ukic/canary-web-components 3.0.0-canary.32 → 3.0.0-canary.34

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

@@ -0,0 +1,928 @@
+import { h, Host, } from "@stencil/core";
+import { parseTimeHelper } from "../../utils/helpers";
+import Check from "../../assets/check-icon.svg";
+import Clear from "../../assets/close-icon.svg";
+const COLUMN_TYPES = ["hour", "minute", "period"];
+const COLUMN_CLASS = ".ic-time-selector-column";
+const ITEM_CLASS = ".ic-time-selector-item";
+export class TimeSelector {
+    constructor() {
+        this.minutes = Array.from({ length: 60 }, (_, i) => i);
+        this.periods = ["AM", "PM"];
+        this.minTime = null;
+        this.maxTime = null;
+        this.ariaLiveMessage = "";
+        /**
+         * An array of objects with start and end values 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 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) => {
+            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.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 "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, type) => {
+            var _a, _b;
+            for (const t of this.disableTimes) {
+                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;
+                        const startVal = startParts.hour * 3600 + startParts.minute * 60;
+                        const endVal = endParts.hour * 3600 + endParts.minute * 60;
+                        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();
+                    if (type === "hour") {
+                        const highlightedMinute = (_a = this.selectedMinute) !== null && _a !== void 0 ? _a : minMinute;
+                        if (hour < minHour ||
+                            (hour === minHour && highlightedMinute < minMinute) ||
+                            (hour === minHour && highlightedMinute === minMinute)) {
+                            return true;
+                        }
+                    }
+                    else if (type === "minute") {
+                        if (hour === minHour && minute < minMinute) {
+                            return true;
+                        }
+                    }
+                    else {
+                        if (hour < minHour ||
+                            (hour === minHour && minute < minMinute) ||
+                            (hour === minHour && minute === minMinute)) {
+                            return true;
+                        }
+                    }
+                }
+            }
+            if (this.max) {
+                this.maxTime = parseTimeHelper(this.max).date;
+                if (this.maxTime) {
+                    const maxHour = this.maxTime.getHours();
+                    const maxMinute = this.maxTime.getMinutes();
+                    if (type === "hour") {
+                        const selectedMinute = (_b = this.selectedMinute) !== null && _b !== void 0 ? _b : 59;
+                        if (hour > maxHour ||
+                            (hour === maxHour && selectedMinute > maxMinute) ||
+                            (hour === maxHour && selectedMinute === maxMinute)) {
+                            return true;
+                        }
+                    }
+                    else if (type === "minute") {
+                        if (hour === maxHour && minute > maxMinute) {
+                            return true;
+                        }
+                    }
+                    else {
+                        if (hour > maxHour ||
+                            (hour === maxHour && minute > maxMinute) ||
+                            (hour === maxHour && minute === maxMinute)) {
+                            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;
+                            if (type === "hour" || type === "minute") {
+                                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;
+                                return this.isTimeDisabled(hour, minute);
+                            }
+                            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";
+            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;
+                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;
+                    disabled = this.isTimeDisabled(hour, minute, 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.selectedPeriod = undefined;
+            this.scrollSelectedItem("period", true);
+            this.lastAnnouncedType = undefined;
+            this.lastAnnouncedValue = undefined;
+            this.icChange.emit({
+                value: null,
+                timeString: null,
+                timeObject: {
+                    hour: null,
+                    minute: null,
+                    period: undefined,
+                },
+            });
+        };
+        this.handleConfirmClick = () => {
+            const hour = this.selectedHour != null ? this.selectedHour : null;
+            const minute = this.selectedMinute != null ? this.selectedMinute : 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;
+            let allSelected = false;
+            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);
+                timeString = hourStr + ":" + minuteStr + (period ? " " + period : "");
+                this.value = value;
+            }
+            this.icChange.emit({
+                value: allSelected ? value : null,
+                timeString: allSelected ? timeString : null,
+                timeObject: Object.assign({ hour: hourStr, minute: minuteStr }, (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.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.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";
+            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]));
+            }
+            else {
+                const parts = time.split(":");
+                this.setTimeParts(Number(parts[0]) || 0, Number(parts[1]) || 0);
+            }
+        }
+        else {
+            const { parts } = parseTimeHelper(time);
+            if (parts) {
+                this.setTimeParts(parts.hour, parts.minute);
+            }
+        }
+    }
+    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;
+        if (this.minTime) {
+            minHour = this.minTime.getHours() + 2;
+            minMinute = this.minTime.getMinutes() + 2;
+        }
+        else if (this.min) {
+            const minDate = parseTimeHelper(this.min).date;
+            if (minDate) {
+                minHour = minDate.getHours();
+                minMinute = minDate.getMinutes();
+            }
+        }
+        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 === "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 === "period")
+            return this.periods;
+        return [];
+    }
+    getSelectedValue(type) {
+        var _a, _b, _c;
+        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 === "period")
+            return (_c = this.selectedPeriod) !== null && _c !== void 0 ? _c : 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") {
+                        return Number(valStr);
+                    }
+                    else {
+                        return valStr;
+                    }
+                }
+                const text = (_c = item.textContent) === null || _c === void 0 ? void 0 : _c.trim();
+                if (type === "hour" || type === "minute") {
+                    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;
+        let timeString = "";
+        let allSelected = false;
+        allSelected = hourStr !== null && minuteStr !== null;
+        if (allSelected) {
+            timeString =
+                hourStr +
+                    ":" +
+                    minuteStr +
+                    (this.selectedPeriod ? " " + this.selectedPeriod : "");
+        }
+        this.ariaLiveMessage =
+            allSelected && timeString ? `Selected time: ${timeString}` : "";
+    }
+    render() {
+        var _a, _b, _c;
+        const hours = this.timePeriod === "12"
+            ? Array.from({ length: 12 }, (_, i) => i + 1)
+            : Array.from({ length: 24 }, (_, i) => i);
+        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),
+        ];
+        let colonSelectedStates = [];
+        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: 'af65b8999b8c677a6ef2e33fe167fb5b333f0571', class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                [`ic-time-selector-${size}`]: true,
+            } }, h("div", { key: 'c345308cda9bc9b1a6e20ad7b1969c8e1b173efa', 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: '85f4f862ec0a9263e491e45dc4cacac69854d5d6', class: "ic-time-selector-highlight-lines" }, h("div", { key: 'd5175185db4049b2660ec4b81971ac13b9b307cb', class: "ic-time-selector-header-border" }), h("div", { key: 'b1be244ff1cdd68b33dad814f501c4e5c8486318', class: {
+                "ic-time-selector-highlight": true,
+                "ic-time-selector-highlight-top": true,
+            } }), h("div", { key: 'ec20a6536aa67a4dbc96f29ef42d424a0342ebe8', 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, (_c = this.selectedPeriod) !== null && _c !== void 0 ? _c : null)), h("div", { key: '72b1abb5e7f19bf853b208dca7365c57b397d9f6', class: {
+                "ic-time-selector-highlight": true,
+                "ic-time-selector-highlight-bottom": true,
+            } })), h("div", { key: '2b8125333fd8e8d119d3496cb690a9c3d3711cb7', class: "ic-time-selector-actions" }, h("ic-button", { key: '5cd3db3be7006940e8e8ed8c2e823c384e6a677c', 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.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: '4c6383f537d199e7d282d0dc5f4d8eac30c86e47', "aria-hidden": "true", innerHTML: Clear })), h("ic-button", { key: '021b111b463ddb83d4449fb2c77cf27c972c04b7', variant: "icon-tertiary", "aria-label": "Select time", class: "ic-time-selector-check-btn", onClick: this.handleConfirmClick, disabled: this.selectedHour === undefined &&
+                this.selectedMinute === undefined &&
+                this.selectedPeriod === undefined, size: size, tabIndex: 0 }, h("span", { key: '95ba008a5b36459cba5d972dee1356f8c0194297', "aria-hidden": "true", innerHTML: Check })))), h("div", { key: '266f4b6084ff8530d3832eee59546af9419eb7a3', class: "sr-only", "aria-live": "polite" }, this.ariaLiveMessage)));
+    }
+    static get is() { return "ic-time-selector"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ic-time-selector.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ic-time-selector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disableTimes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcDisableTimeSelection[]",
+                    "resolved": "IcDisableTimeSelection[]",
+                    "references": {
+                        "IcDisableTimeSelection": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcDisableTimeSelection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of objects with start and end values 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."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Date",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Date",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcSizes",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "IcSizes": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the time selector to be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
+            "timePeriod": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"12\" | \"24\"",
+                    "resolved": "\"12\" | \"24\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The time period format: \"12\" for 12-hour, \"24\" for 24-hour. Defaults to \"24\"."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "time-period",
+                "reflect": false,
+                "defaultValue": "\"24\""
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | Date | null | undefined",
+                    "resolved": "Date | null | string | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedHour": {},
+            "selectedMinute": {},
+            "selectedPeriod": {},
+            "ariaLiveMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "icChange",
+                "name": "icChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value has changed."
+                },
+                "complexType": {
+                    "original": "{\n    value: Date | null;\n    timeString: string | null;\n    timeObject: {\n      hour: string | null;\n      minute: string | null;\n      period?: IcTimePeriods;\n    };\n  }",
+                    "resolved": "{ value: Date | null; timeString: string | null; timeObject: { hour: string | null; minute: string | null; period?: IcTimePeriods | undefined; }; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        },
+                        "IcTimePeriods": {
+                            "location": "import",
+                            "path": "./ic-time-selector.types",
+                            "id": "src/components/ic-time-selector/ic-time-selector.types.ts::IcTimePeriods"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "min",
+                "methodName": "watchMinHandler"
+            }, {
+                "propName": "max",
+                "methodName": "watchMaxHandler"
+            }, {
+                "propName": "value",
+                "methodName": "watchValueHandler"
+            }];
+    }
+}
+//# sourceMappingURL=ic-time-selector.js.map