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

package/dist/esm/ic-time-selector.entry.js

@@ -16,22 +16,20 @@ const Clear = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=
 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_TYPES = ["hour", "minute", "period"];
 const COLUMN_CLASS = ".ic-time-selector-column";
 const ITEM_CLASS = ".ic-time-selector-item";
 const TimeSelector = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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.
+         * 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 = [];
         /**
@@ -50,10 +48,6 @@ const TimeSelector = class {
          * 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".
          */
@@ -62,7 +56,7 @@ const TimeSelector = class {
          * 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) {
@@ -86,7 +80,6 @@ const TimeSelector = class {
                 this.selectedHour = hour;
             }
             this.selectedMinute = minute;
-            this.selectedSecond = second;
         };
         this.checkIfScrollIsFinished = (column, scrollTop) => {
             const isScrollFinished = setInterval(() => {
@@ -106,9 +99,6 @@ const TimeSelector = class {
                 case "minute":
                     this.selectedMinute = Number(value);
                     break;
-                case "second":
-                    this.selectedSecond = Number(value);
-                    break;
                 case "period":
                     this.selectedPeriod = value;
                     break;
@@ -129,25 +119,16 @@ const TimeSelector = class {
                 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;
                         }
@@ -159,15 +140,11 @@ const TimeSelector = class {
                 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;
                         }
                     }
@@ -176,15 +153,10 @@ const TimeSelector = class {
                             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;
                         }
                     }
@@ -195,15 +167,11 @@ const TimeSelector = class {
                 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;
                         }
                     }
@@ -212,15 +180,10 @@ const TimeSelector = class {
                             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;
                         }
                     }
@@ -302,18 +265,15 @@ const TimeSelector = class {
                     } 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;
                         })());
@@ -328,7 +288,7 @@ const TimeSelector = class {
             }
         };
         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;
@@ -343,17 +303,14 @@ const TimeSelector = 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;
+                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,
@@ -370,8 +327,6 @@ const TimeSelector = class {
             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;
@@ -382,7 +337,6 @@ const TimeSelector = class {
                 timeObject: {
                     hour: null,
                     minute: null,
-                    second: null,
                     period: undefined,
                 },
             });
@@ -390,18 +344,11 @@ const TimeSelector = class {
         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) {
@@ -415,26 +362,13 @@ const TimeSelector = class {
                 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 } : {})),
             });
         };
     }
@@ -449,9 +383,6 @@ const TimeSelector = class {
         setTimeout(() => {
             this.scrollSelectedItem("hour");
             this.scrollSelectedItem("minute");
-            if (this.timeFormat === this.DEFAULT_TIME_FORMAT) {
-                this.scrollSelectedItem("second");
-            }
             if (this.timePeriod === "12") {
                 this.scrollSelectedItem("period");
             }
@@ -474,14 +405,6 @@ const TimeSelector = class {
             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");
@@ -499,8 +422,6 @@ const TimeSelector = class {
                 return "HH";
             case "minute":
                 return "MM";
-            case "second":
-                return "SS";
             default:
                 return "";
         }
@@ -513,17 +434,17 @@ const TimeSelector = class {
         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);
             }
         }
     }
@@ -586,18 +507,16 @@ const TimeSelector = class {
         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;
@@ -608,9 +527,6 @@ const TimeSelector = class {
         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") {
@@ -664,22 +580,18 @@ const TimeSelector = class {
                 : 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) {
@@ -703,7 +615,7 @@ const TimeSelector = class {
                 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 {
@@ -711,7 +623,7 @@ const TimeSelector = class {
                     }
                 }
                 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 {
@@ -728,87 +640,56 @@ const TimeSelector = class {
         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: 'af65b8999b8c677a6ef2e33fe167fb5b333f0571', 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: '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: '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: '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: 'eed615b5bbd35c5b0d0a5b3625710b00675856ab', class: "ic-time-selector-columns" }, columns.map((col, idx) => [
+            } }), 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, (_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: '72b1abb5e7f19bf853b208dca7365c57b397d9f6', 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: '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.selectedSecond === undefined &&
                 this.selectedPeriod === undefined, size: size, tabIndex: 0, onKeyDown: (e) => {
                 var _a;
                 if (e.key === "Tab" && e.shiftKey) {
@@ -819,10 +700,9 @@ const TimeSelector = class {
                         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: '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.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: '95ba008a5b36459cba5d972dee1356f8c0194297', "aria-hidden": "true", innerHTML: Check })))), h("div", { key: '266f4b6084ff8530d3832eee59546af9419eb7a3', class: "sr-only", "aria-live": "polite" }, this.ariaLiveMessage)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {