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

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

@@ -2,20 +2,20 @@ 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", "second", "period"];
+import "../../../../web-components/src/components/ic-typography/ic-typography";
+import "../../../../web-components/src/components/ic-button/ic-button";
+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.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.
+         * 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 = [];
         /**
@@ -34,10 +34,6 @@ export class TimeSelector {
          * 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".
          */
@@ -46,7 +42,7 @@ export class TimeSelector {
          * 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) => {
+        this.setTimeParts = (hour, minute) => {
             let period = "AM";
             if (this.timePeriod === "12") {
                 if (hour === 0) {
@@ -70,7 +66,6 @@ export class TimeSelector {
                 this.selectedHour = hour;
             }
             this.selectedMinute = minute;
-            this.selectedSecond = second;
         };
         this.checkIfScrollIsFinished = (column, scrollTop) => {
             const isScrollFinished = setInterval(() => {
@@ -90,9 +85,6 @@ export class TimeSelector {
                 case "minute":
                     this.selectedMinute = Number(value);
                     break;
-                case "second":
-                    this.selectedSecond = Number(value);
-                    break;
                 case "period":
                     this.selectedPeriod = value;
                     break;
@@ -113,25 +105,16 @@ export class TimeSelector {
                 this.lastAnnouncedValue = this.getSelectedValue(type);
             }
         };
-        this.isTimeDisabled = (hour, minute, second, type) => {
-            var _a, _b, _c, _d;
+        this.isTimeDisabled = (hour, minute, type) => {
+            var _a, _b;
             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) {
+                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;
+                        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;
                         }
@@ -143,15 +126,11 @@ export class TimeSelector {
                 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)) {
+                            (hour === minHour && highlightedMinute === minMinute)) {
                             return true;
                         }
                     }
@@ -160,15 +139,10 @@ export class TimeSelector {
                             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)) {
+                            (hour === minHour && minute === minMinute)) {
                             return true;
                         }
                     }
@@ -179,15 +153,11 @@ export class TimeSelector {
                 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;
+                        const selectedMinute = (_b = this.selectedMinute) !== null && _b !== void 0 ? _b : 59;
                         if (hour > maxHour ||
                             (hour === maxHour && selectedMinute > maxMinute) ||
-                            (hour === maxHour &&
-                                selectedMinute === maxMinute &&
-                                selectedSecond > maxSecond)) {
+                            (hour === maxHour && selectedMinute === maxMinute)) {
                             return true;
                         }
                     }
@@ -196,15 +166,10 @@ export class TimeSelector {
                             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)) {
+                            (hour === maxHour && minute === maxMinute)) {
                             return true;
                         }
                     }
@@ -286,18 +251,15 @@ export class TimeSelector {
                     } while (newIdx >= 0 &&
                         newIdx <= maxIdx &&
                         (() => {
-                            var _a, _b, _c;
-                            if (type === "hour" || type === "minute" || type === "second") {
+                            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;
-                                const second = type === "second"
-                                    ? values[newIdx]
-                                    : (_c = this.selectedSecond) !== null && _c !== void 0 ? _c : 0;
-                                return this.isTimeDisabled(hour, minute, second);
+                                return this.isTimeDisabled(hour, minute);
                             }
                             return false;
                         })());
@@ -312,7 +274,7 @@ export class TimeSelector {
             }
         };
         this.renderColumn = (type, values, selected) => {
-            const isTimeColumn = type === "hour" || type === "minute" || type === "second";
+            const isTimeColumn = type === "hour" || type === "minute";
             const isPeriodColumn = type === "period";
             const headerLabel = this.getHeaderLabel(type);
             const topSpacerCount = 2;
@@ -327,17 +289,14 @@ export class TimeSelector {
                     "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;
+                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;
-                    const second = type === "second"
-                        ? val
-                        : (_c = this.selectedSecond) !== null && _c !== void 0 ? _c : 0;
-                    disabled = this.isTimeDisabled(hour, minute, second, type);
+                    disabled = this.isTimeDisabled(hour, minute, type);
                 }
                 return (h("li", { class: {
                         "ic-time-selector-item": true,
@@ -354,8 +313,6 @@ export class TimeSelector {
             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;
@@ -366,7 +323,6 @@ export class TimeSelector {
                 timeObject: {
                     hour: null,
                     minute: null,
-                    second: null,
                     period: undefined,
                 },
             });
@@ -374,18 +330,11 @@ export class TimeSelector {
         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;
-            }
+            allSelected = hour !== null && minute !== null;
             let value = null;
             let timeString = null;
             if (allSelected) {
@@ -399,26 +348,13 @@ export class TimeSelector {
                 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 : "");
-                }
+                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, second: secondStr }, (period ? { period } : {})),
+                timeObject: Object.assign({ hour: hourStr, minute: minuteStr }, (period ? { period } : {})),
             });
         };
     }
@@ -433,9 +369,6 @@ export class TimeSelector {
         setTimeout(() => {
             this.scrollSelectedItem("hour");
             this.scrollSelectedItem("minute");
-            if (this.timeFormat === this.DEFAULT_TIME_FORMAT) {
-                this.scrollSelectedItem("second");
-            }
             if (this.timePeriod === "12") {
                 this.scrollSelectedItem("period");
             }
@@ -458,14 +391,6 @@ export class TimeSelector {
             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");
@@ -483,8 +408,6 @@ export class TimeSelector {
                 return "HH";
             case "minute":
                 return "MM";
-            case "second":
-                return "SS";
             default:
                 return "";
         }
@@ -497,17 +420,17 @@ export class TimeSelector {
         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]));
+                this.setTimeParts(Number(zuluMatch[1]), Number(zuluMatch[2]));
             }
             else {
                 const parts = time.split(":");
-                this.setTimeParts(Number(parts[0]) || 0, Number(parts[1]) || 0, Number(parts[2]) || 0);
+                this.setTimeParts(Number(parts[0]) || 0, Number(parts[1]) || 0);
             }
         }
         else {
             const { parts } = parseTimeHelper(time);
             if (parts) {
-                this.setTimeParts(parts.hour, parts.minute, parts.second);
+                this.setTimeParts(parts.hour, parts.minute);
             }
         }
     }
@@ -570,18 +493,16 @@ export class TimeSelector {
         if (!col)
             return;
         const items = col.querySelectorAll(ITEM_CLASS);
-        let minHour = 0, minMinute = 0, minSecond = 0;
+        let minHour = 0, minMinute = 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;
@@ -592,9 +513,6 @@ export class TimeSelector {
         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") {
@@ -648,22 +566,18 @@ export class TimeSelector {
                 : 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;
+        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 === "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 (_c = this.selectedPeriod) !== null && _c !== void 0 ? _c : null;
         return null;
     }
     getHighlightedValue(type, col) {
@@ -687,7 +601,7 @@ export class TimeSelector {
                 const key = item.getAttribute("key");
                 if (key) {
                     const valStr = key.replace(`${type}-val-`, "");
-                    if (type === "hour" || type === "minute" || type === "second") {
+                    if (type === "hour" || type === "minute") {
                         return Number(valStr);
                     }
                     else {
@@ -695,7 +609,7 @@ export class TimeSelector {
                     }
                 }
                 const text = (_c = item.textContent) === null || _c === void 0 ? void 0 : _c.trim();
-                if (type === "hour" || type === "minute" || type === "second") {
+                if (type === "hour" || type === "minute") {
                     return text ? Number(text) : null;
                 }
                 else {
@@ -712,87 +626,56 @@ export class TimeSelector {
         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 : "");
-            }
+        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, _d;
+        var _a, _b, _c;
         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,
-            ];
-        }
+        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: {
+        return (h(Host, { key: 'f5e125293b43e43658876edeaaa4f75e29c1572f', 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: {
+            } }, h("div", { key: '00ec623021312ad0a526e22d6ba60ce522ff5d46', 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: {
+            } }, h("div", { key: 'f0d281e2df0cdbfed96b17c8e4af0fa37a7be923', class: "ic-time-selector-highlight-lines" }, h("div", { key: '4ffaa451f24110eaa60f354da26af8ad77c5ba99', class: "ic-time-selector-header-border" }), h("div", { key: 'ccf0242629b48db2fb58db3b292a49a78372b3df', 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) => [
+            } }), h("div", { key: 'e65f5376dc0762a3917bd4c3ed3f561f73a8fe1c', 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: {
+            this.renderColumn("period", this.periods, (_c = this.selectedPeriod) !== null && _c !== void 0 ? _c : null)), h("div", { key: 'db46b5dde029e6be211d05e582fe29009d21ac0a', 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: {
+            } })), h("div", { key: 'c738427308610bf768b7ac6313802e55513c4217', class: "ic-time-selector-actions" }, h("ic-button", { key: 'a0c27433567645b0f602f47ce3b65f5032662826', 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) {
@@ -803,10 +686,9 @@ export class TimeSelector {
                         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 &&
+            } }, h("span", { key: '3223e4b9b6a34cbb298f2c524fd417fc82b4359c', "aria-hidden": "true", innerHTML: Clear })), h("ic-button", { key: 'bc456653e7348a60dd17ef10dbab01fe8a6697ed', 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)));
+                this.selectedPeriod === undefined, size: size, tabIndex: 0 }, h("span", { key: '4c6f39926dec4d9967c94816103c75b46fce2cf3', "aria-hidden": "true", innerHTML: Check })))), h("div", { key: '07f1489842c9dae8727a76f718013e1b3674783b', class: "sr-only", "aria-live": "polite" }, this.ariaLiveMessage)));
     }
     static get is() { return "ic-time-selector"; }
     static get encapsulation() { return "shadow"; }
@@ -840,7 +722,7 @@ export class TimeSelector {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "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."
+                    "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,
@@ -948,32 +830,6 @@ export class TimeSelector {
                 "reflect": false,
                 "defaultValue": "\"inherit\""
             },
-            "timeFormat": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IcTimeFormatSelector",
-                    "resolved": "\"HH:MM\" | \"HH:MM:SS\"",
-                    "references": {
-                        "IcTimeFormatSelector": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcTimeFormatSelector"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The format in which the time will be displayed."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "time-format",
-                "reflect": false,
-                "defaultValue": "this.DEFAULT_TIME_FORMAT"
-            },
             "timePeriod": {
                 "type": "string",
                 "mutable": false,
@@ -1025,7 +881,6 @@ export class TimeSelector {
         return {
             "selectedHour": {},
             "selectedMinute": {},
-            "selectedSecond": {},
             "selectedPeriod": {},
             "ariaLiveMessage": {}
         };
@@ -1042,8 +897,8 @@ export class TimeSelector {
                     "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      second: string | null;\n      period?: IcTimePeriods;\n    };\n  }",
-                    "resolved": "{ value: Date | null; timeString: string | null; timeObject: { hour: string | null; minute: string | null; second: string | null; period?: IcTimePeriods | undefined; }; }",
+                    "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",