@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

package/lib/time-picker/index.js

@@ -1,12 +1,18 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ControlElement, html, css, query, customElement, property } from '@refinitiv-ui/core';
-import '../number-field';
-import { isValidTime, toTimeSegment, TimeFormat, getFormat, format, isAM, isPM, MILLISECONDS_IN_SECOND, MILLISECONDS_IN_MINUTE, MILLISECONDS_IN_HOUR, addOffset, padNumber } from '@refinitiv-ui/utils';
+var TimePicker_1;
+import { __decorate } from "tslib";
+import { ControlElement, html, css } from '@refinitiv-ui/core';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { guard } from '@refinitiv-ui/core/lib/directives/guard.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../version.js';
+import { isValidTime, toTimeSegment, TimeFormat, getFormat, format, isAM, isPM, MILLISECONDS_IN_SECOND, MILLISECONDS_IN_MINUTE, MILLISECONDS_IN_HOUR, addOffset, padNumber, parse } from '@refinitiv-ui/utils/lib/date.js';
+import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
+import '../number-field/index.js';
+import { translate } from '@refinitiv-ui/translate';
+import '@refinitiv-ui/phrasebook/lib/locale/en/time-picker.js';
 var Segment;
 (function (Segment) {
     Segment["HOURS"] = "hours";
@@ -34,9 +40,13 @@ const Placeholder = {
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
  */
-let TimePicker = class TimePicker extends ControlElement {
+let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'group';
+        /**
+         * If time-picker is in mobile mode
+         */
         this.isMobile = false;
         /**
          * Internal hours value, used only in value getters and setters
@@ -64,53 +74,14 @@ let TimePicker = class TimePicker extends ControlElement {
          * Seconds are automatically shown when `hh:mm:ss` time format is provided as a value.
          */
         this.showSeconds = false;
+        this._selectedSegment = null;
         /**
-         * Handles the blur event of any inputs
-         *
-         * @param event Event Object
-         * @returns {void}
+         * Connected to role. If false, the values are not announced in the screen reader
          */
-        this.onBlur = (event) => {
-            if (this.readonly) {
-                return;
-            }
-            const target = event.target;
-            const value = target.value;
-            let segment;
-            if (target === this.hoursInput) {
-                segment = Segment.HOURS;
-            }
-            else if (target === this.minutesInput) {
-                segment = Segment.MINUTES;
-            }
-            else if (target === this.secondsInput) {
-                segment = Segment.SECONDS;
-            }
-            /* istanbul ignore next */
-            if (!segment) {
-                return;
-            }
-            if (value) {
-                this.updateTimeSegmentTo(segment, Number(value));
-            }
-            this.updateSegmentValue(segment);
-        };
-        /**
-         * Handles the focus event of any inputs
-         *
-         * @param event Event Object
-         * @returns {void}
-         */
-        this.onFocus = (event) => {
-            if (this.readonly) {
-                return;
-            }
-            event.target.value = '';
-        };
+        this.announceValues = true;
         /**
          * Handles any keydown events
          * Used for control keys
-         *
          * @param event Event Object
          * @returns {void}
          */
@@ -118,9 +89,17 @@ let TimePicker = class TimePicker extends ControlElement {
             this.manageControlKeys(event);
         };
     }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
     /**
      * Hours time segment in 24hr format
      * @param hours hours value
+     * @default null
      * @returns {void}
      */
     set hours(hours) {
@@ -128,9 +107,9 @@ let TimePicker = class TimePicker extends ControlElement {
         if ((hours !== null && isNaN(hours)) || oldHours === hours) {
             return;
         }
-        this._hours = this.validUnit(hours, MIN_UNIT, MAX_HOURS, oldHours);
+        this._hours = TimePicker_1.validUnit(hours, MIN_UNIT, MAX_HOURS, oldHours);
         if (this._hours !== oldHours) {
-            void this.requestUpdate('hours', oldHours);
+            this.requestUpdate('hours', oldHours);
         }
     }
     /**
@@ -150,14 +129,14 @@ let TimePicker = class TimePicker extends ControlElement {
         if ((minutes !== null && isNaN(minutes)) || oldMinutes === minutes) {
             return;
         }
-        this._minutes = this.validUnit(minutes, MIN_UNIT, MAX_MINUTES, oldMinutes);
+        this._minutes = TimePicker_1.validUnit(minutes, MIN_UNIT, MAX_MINUTES, oldMinutes);
         if (this._minutes !== oldMinutes) {
-            void this.requestUpdate('minutes', oldMinutes);
+            this.requestUpdate('minutes', oldMinutes);
         }
     }
     /**
      * Get minutes value
-     * @returns hours
+     * @returns minutes
      */
     get minutes() {
         return this._minutes;
@@ -172,9 +151,9 @@ let TimePicker = class TimePicker extends ControlElement {
         if ((seconds !== null && isNaN(seconds)) || oldSeconds === seconds) {
             return;
         }
-        this._seconds = this.validUnit(seconds, MIN_UNIT, MAX_SECONDS, oldSeconds);
+        this._seconds = TimePicker_1.validUnit(seconds, MIN_UNIT, MAX_SECONDS, oldSeconds);
         if (this._seconds !== oldSeconds) {
-            void this.requestUpdate('seconds', oldSeconds);
+            this.requestUpdate('seconds', oldSeconds);
         }
     }
     /**
@@ -186,7 +165,6 @@ let TimePicker = class TimePicker extends ControlElement {
     }
     /**
     * Value of the element
-    * @default -
     * @param value Element value
     */
     set value(value) {
@@ -219,6 +197,19 @@ let TimePicker = class TimePicker extends ControlElement {
         }
         return this.currentTimeString;
     }
+    /**
+     * State to select text in the segment
+     * Used to asynchronously select text after render cycle is complete
+     * @param segment Selected segment or null
+     */
+    set selectedSegment(segment) {
+        const oldSelectedSegment = this._selectedSegment;
+        this._selectedSegment = segment;
+        this.requestUpdate('selectedSegment', oldSelectedSegment);
+    }
+    get selectedSegment() {
+        return this._selectedSegment;
+    }
     /**
      * Return the current time string, based on the current hours, minutes and seconds.
      * Used internally to set the value string after updates.
@@ -238,61 +229,105 @@ let TimePicker = class TimePicker extends ControlElement {
         return this.showSeconds || this.valueWithSeconds;
     }
     /**
-     * Formats the hours value
+     * Get hours taking into account AM/PM placeholder
      */
-    get formattedHours() {
+    get periodHours() {
         const _hours = this.hours;
         let hours = _hours;
         if (_hours !== null) {
             hours = this.amPm && _hours > HOURS_OF_NOON
                 ? _hours - HOURS_OF_NOON : this.amPm && !_hours ? HOURS_OF_NOON : _hours;
         }
-        return this.formattedUnit(hours);
+        return hours;
+    }
+    /**
+     * Formats the hours value
+     */
+    get formattedHours() {
+        return TimePicker_1.formattedUnit(this.periodHours);
     }
     /**
      * Formats the minutes value
      */
     get formattedMinutes() {
-        return this.formattedUnit(this.minutes);
+        return TimePicker_1.formattedUnit(this.minutes);
     }
     /**
      * Formats the seconds value
-     * @returns Formatted number
      */
     get formattedSeconds() {
-        return this.formattedUnit(this.seconds);
+        return TimePicker_1.formattedUnit(this.seconds);
+    }
+    /**
+     * Observes attribute change for `attributeChangedCallback`
+     */
+    static get observedAttributes() {
+        const observed = super.observedAttributes;
+        return ['role'].concat(observed);
+    }
+    /**
+     * Synchronizes attribute value
+     * @param name attribute name
+     * @param oldValue old attribute value
+     * @param newValue new attribute value
+     * @returns {void}
+     */
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        if (name === 'role') {
+            this.announceValues = !(!newValue || newValue === 'none' || newValue === 'presentation');
+        }
     }
     /**
      * On first updated life-cycle
-     *
      * @param changedProperties changed properties
      * @returns {void}
      */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        // add events
-        this.renderRoot.addEventListener('blur', this.onBlur, true);
-        this.renderRoot.addEventListener('focus', this.onFocus, true);
         this.renderRoot.addEventListener('keydown', this.onKeydown, true);
     }
     /**
      * On updated life-cycle
-     *
      * @param changedProperties changed properties
      * @returns {void}
      */
     updated(changedProperties) {
         super.updated(changedProperties);
         /* istanbul ignore next */
-        if (this.hasTimeChanged(changedProperties) && this.isMobile) {
+        if (TimePicker_1.hasTimeChanged(changedProperties) && this.isMobile) {
             this.updateMobileTimePickerValue();
         }
+        if (this.selectedSegment && changedProperties.has('selectedSegment')) {
+            void this.selectSegment();
+        }
+    }
+    /**
+     * Select text in input when update element is complete
+     * @returns returns a promise void
+     */
+    async selectSegment() {
+        var _a;
+        await this.updateComplete;
+        switch (this.selectedSegment) {
+            case Segment.HOURS:
+                this.hoursInput.select();
+                break;
+            case Segment.MINUTES:
+                this.minutesInput.select();
+                break;
+            case Segment.SECONDS:
+                (_a = this.secondsInput) === null || _a === void 0 ? void 0 : _a.select();
+                break;
+            // no default
+        }
+        // Silently clear selected segment to ensure it can be reselected
+        this._selectedSegment = null;
     }
     /**
      * Overwrite validation method for value
-     *
      * @param value value
-     * @returns {boolean} result
+     * @returns True if value is valid
      */
     isValidValue(value) {
         return value === '' || isValidTime(value);
@@ -337,21 +372,20 @@ let TimePicker = class TimePicker extends ControlElement {
      * @param changedProperties changed properties
      * @returns True if changed
      */
-    hasTimeChanged(changedProperties) {
+    static hasTimeChanged(changedProperties) {
         return changedProperties.has('hours')
             || changedProperties.has('minutes')
             || changedProperties.has('seconds');
     }
     /**
      * Validates a given unit against a min and max value, returning a fallback if invalid.
-     *
      * @param unit Unit to validate
      * @param min Minimum allowed
      * @param max Maximum allowed
      * @param fallback Fallback value to use, if unit is invalid
      * @returns unit or fallback or 0 value
      */
-    validUnit(unit, min, max, fallback) {
+    static validUnit(unit, min, max, fallback) {
         if (unit === null) {
             return null;
         }
@@ -362,7 +396,6 @@ let TimePicker = class TimePicker extends ControlElement {
     }
     /**
      * Handles value change from native time picker on mobile devices
-     *
      * @param event Event Object
      * @returns {void}
      */
@@ -372,7 +405,6 @@ let TimePicker = class TimePicker extends ControlElement {
     }
     /**
      * Helper, used to update the mobile time picker value
-     *
      * @returns {void}
      */
     /* istanbul ignore next */
@@ -381,9 +413,57 @@ let TimePicker = class TimePicker extends ControlElement {
             this.mtpInput.value = this.value;
         }
     }
+    /**
+     * Handles action when input focused change
+     * @param event Focus change event
+     * @returns {void}
+     */
+    onInputFocusedChanged(event) {
+        const target = event.target;
+        const focused = event.detail.value;
+        let segment;
+        if (target === this.hoursInput) {
+            segment = Segment.HOURS;
+        }
+        else if (target === this.minutesInput) {
+            segment = Segment.MINUTES;
+        }
+        else if (target === this.secondsInput) {
+            segment = Segment.SECONDS;
+        }
+        this.selectedSegment = focused && segment ? segment : null;
+        /* istanbul ignore next */
+        if (!segment || this.readonly) {
+            return;
+        }
+        const value = target.value;
+        if (value) {
+            this.updateTimeSegmentTo(segment, Number(value));
+        }
+        this.updateSegmentValue(segment);
+    }
+    /**
+     * Handles action when input value changes
+     * @param event Value change event
+     * @returns {void}
+     */
+    onInputValueChanged(event) {
+        // Make sure that the value can be reset to null
+        if (!event.detail.value) {
+            const target = event.target;
+            if (target === this.hoursInput) {
+                this.setSegmentAndNotify(Segment.HOURS, null);
+            }
+            else if (target === this.minutesInput) {
+                this.setSegmentAndNotify(Segment.MINUTES, null);
+            }
+            else if (target === this.secondsInput) {
+                this.setSegmentAndNotify(Segment.SECONDS, null);
+            }
+        }
+    }
     /**
      * Updates a time segment to the provided value
-     *
      * @param segment Segment id
      * @param value Unit to change to
      * @returns {void}
@@ -396,7 +476,6 @@ let TimePicker = class TimePicker extends ControlElement {
     }
     /**
      * Updates the value of a time segment (element)
-     *
      * @param segment Segment's name
      * @returns {void}
      */
@@ -417,12 +496,11 @@ let TimePicker = class TimePicker extends ControlElement {
     /**
      * Handle valid control keys and execute their corresponding commands
      * Will stop when readonly is set
-     *
-     * @param event Event Object
+     * @param event Keyboard event
      * @returns {void}
      */
     manageControlKeys(event) {
-        if (this.readonly || this.disabled) {
+        if (this.readonly || this.disabled || event.defaultPrevented) {
             return;
         }
         switch (event.key) {
@@ -439,9 +517,6 @@ let TimePicker = class TimePicker extends ControlElement {
             case ' ':
                 this.handleEnterKey(event);
                 break;
-            case 'Backspace':
-                this.handleBackspaceKey(event);
-                return;
             default:
                 return;
         }
@@ -449,17 +524,18 @@ let TimePicker = class TimePicker extends ControlElement {
     }
     /**
      * Handles ENTER key press
-     *
-     * @param event Event Object
+     * @param event Keyboard event
      * @returns {void}
      */
     handleEnterKey(event) {
-        event.target.blur();
+        if (event.target === this.toggleEl) {
+            this.toggle();
+            event.preventDefault();
+        }
     }
     /**
      * Handles UP key press
-     *
-     * @param event Event Object
+     * @param event Keyboard event
      * @returns {void}
      */
     handleUpKey(event) {
@@ -467,35 +543,15 @@ let TimePicker = class TimePicker extends ControlElement {
     }
     /**
      * Handle DOWN key press
-     *
-     * @param event Event Object
+     * @param event Keyboard event
      * @returns {void}
      */
     handleDownKey(event) {
         this.toggleOrModify(-1, event.target);
     }
-    /**
-     * Handle Backspace key press
-     *
-     * @param event Event Object
-     * @returns {void}
-     */
-    handleBackspaceKey(event) {
-        const target = event.target;
-        if (target === this.hoursInput) {
-            this.setSegmentAndNotify(Segment.HOURS, null);
-        }
-        else if (target === this.minutesInput) {
-            this.setSegmentAndNotify(Segment.MINUTES, null);
-        }
-        else if (target === this.secondsInput) {
-            this.setSegmentAndNotify(Segment.SECONDS, null);
-        }
-    }
     /**
      * Toggles the amPm flag or updates the time segment value.
      * Essentially a handler for user inputs on the control.
-     *
      * @param amount to change value by
      * @param target Segment id
      * @returns {void}
@@ -517,7 +573,6 @@ let TimePicker = class TimePicker extends ControlElement {
     /**
      * Changes a time segment value by a specified amount.
      * Also updates parent values when rolling through cycles.
-     *
      * @param amount Amount to change by
      * @param segment Segment id
      * @returns {void}
@@ -538,6 +593,7 @@ let TimePicker = class TimePicker extends ControlElement {
         }
         const value = addOffset(this.currentTimeString, offset);
         this.setValueAndNotify(value);
+        this.selectedSegment = segment;
     }
     /**
      * Gets the hours segment of the provided value
@@ -559,7 +615,6 @@ let TimePicker = class TimePicker extends ControlElement {
     }
     /**
      * Updates the value of the hours element
-     *
      * @returns {void}
      */
     updateHoursSegmentValue() {
@@ -569,7 +624,6 @@ let TimePicker = class TimePicker extends ControlElement {
     }
     /**
      * Updated the value of the minutes element
-     *
      * @returns {void}
      */
     updateMinutesSegmentValue() {
@@ -579,7 +633,6 @@ let TimePicker = class TimePicker extends ControlElement {
     }
     /**
      * Updates the value of the seconds element
-     *
      * @returns {void}
      */
     updateSecondsSegmentValue() {
@@ -589,32 +642,28 @@ let TimePicker = class TimePicker extends ControlElement {
     }
     /**
      * Formats a given number and prefixes a 0 on numbers lower than 10
-     *
      * @param n Number to format
      * @returns Formatted number
      */
-    formattedUnit(n) {
+    static formattedUnit(n) {
         return n === null ? '' : padNumber(n, 2);
     }
     /**
      * Returns `true` or `false` depending on whether the hours are before, or, after noon
-     *
-     * @returns Result
+     * @returns True if time is AM
      */
     isAM() {
         return isAM(this.currentTimeString);
     }
     /**
      * Returns opposite of isAM
-     *
-     * @returns Result
+     * @returns True if time is PM
      */
     isPM() {
         return isPM(this.currentTimeString);
     }
     /**
      * Toggles the AM/PM state
-     *
      * @returns {void}
      */
     toggle() {
@@ -624,7 +673,7 @@ let TimePicker = class TimePicker extends ControlElement {
         }
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @returns CSS template
@@ -649,49 +698,137 @@ let TimePicker = class TimePicker extends ControlElement {
       }
     `;
     }
+    /**
+     * Template for Hours Segment
+     * @returns template hours segment
+     */
+    get hoursTemplate() {
+        const hours = this.formattedHours;
+        return html `<ef-number-field
+        id="hours"
+        part="input"
+        aria-label="${ifDefined(!isIE ? this.t('SELECT_HOURS', { value: this.periodHours }) : undefined)}"
+        no-spinner
+        transparent
+        min="${this.amPm ? 1 : MIN_UNIT}"
+        max="${this.amPm ? HOURS_OF_NOON : MAX_HOURS}"
+        .value="${hours}"
+        placeholder="${ifDefined(hours ? undefined : Placeholder.HOURS)}"
+        ?disabled="${this.disabled}"
+        ?readonly="${this.readonly}"
+        @value-changed="${this.onInputValueChanged}"
+        @focused-changed=${this.onInputFocusedChanged}></ef-number-field>`;
+    }
+    /**
+     * Template for Minutes Segment
+     * @returns template minutes segment
+     */
+    get minutesTemplate() {
+        const minutes = this.formattedMinutes;
+        return html `<ef-number-field
+        id="minutes"
+        aria-label="${ifDefined(!isIE ? this.t('SELECT_MINUTES', { value: this.minutes }) : undefined)}"
+        part="input"
+        no-spinner
+        min="${MIN_UNIT}"
+        max="${MAX_MINUTES}"
+        .value="${minutes}"
+        placeholder="${ifDefined(minutes ? undefined : Placeholder.MINUTES)}"
+        ?readonly="${this.readonly}"
+        ?disabled="${this.disabled}"
+        transparent
+        @value-changed="${this.onInputValueChanged}"
+        @focused-changed=${this.onInputFocusedChanged}></ef-number-field>`;
+    }
     /**
      * Template for Seconds Segment
-     *
-     * @returns Seconds segment
+     * @returns template seconds segment
      */
-    getSecondsHtml() {
-        return this.isShowSeconds ? html `
-      <span part="divider"></span>
+    get secondsTemplate() {
+        const seconds = this.formattedSeconds;
+        return html `
       <ef-number-field
         id="seconds"
         part="input"
+        aria-label="${ifDefined(!isIE ? this.t('SELECT_SECONDS', { value: this.seconds }) : undefined)}"
         no-spinner
         min="${MIN_UNIT}"
         max="${MAX_SECONDS}"
-        .value="${this.formattedSeconds}"
-        placeholder="${this.formattedSeconds || Placeholder.SECONDS}"
+        .value="${seconds}"
+        placeholder="${ifDefined(seconds ? undefined : Placeholder.SECONDS)}"
         ?readonly="${this.readonly}"
         ?disabled="${this.disabled}"
-        transparent></ef-number-field>
-    ` : null;
+        transparent
+        @value-changed="${this.onInputValueChanged}"
+        @focused-changed=${this.onInputFocusedChanged}></ef-number-field>`;
     }
     /**
      * Template for AmPm Segment
-     *
      * @returns Am/Pm segment
      */
-    getAmPmHtml() {
+    get getAmPmHtml() {
         const hasHours = this.hours !== null;
         return this.amPm ? html `
-      <div id="toggle" part="toggle" @tap=${this.toggle} tabindex="0">
-        <div part="toggle-item" ?active=${hasHours && this.isAM()}>AM</div>
-        <div part="toggle-item" ?active=${hasHours && this.isPM()}>PM</div>
+      <div role="listbox"
+           aria-label="${this.t('TOGGLE_TIME_PERIOD')}"
+           aria-activedescendant="${ifDefined(hasHours ? this.isAM() ? 'toggle-am' : 'toggle-pm' : undefined)}"
+           id="toggle"
+           part="toggle"
+           @tap=${this.toggle}
+           tabindex="0">
+        <div
+          aria-label="${this.t('BEFORE_MIDDAY')}"
+          role="option"
+          id="toggle-am"
+          part="toggle-item"
+          ?active=${hasHours && this.isAM()}>AM</div>
+        <div
+          aria-label="${this.t('AFTER_MIDDAY')}"
+          role="option"
+          id="toggle-pm"
+          part="toggle-item"
+          ?active=${hasHours && this.isPM()}>PM</div>
       </div>
     ` : null;
     }
     /**
      * Native input's template for mobile
-     *
      * @returns input
      */
-    getNativeInputForMobile() {
+    get nativeInputForMobile() {
         return this.isMobile ? html `<input id="mtp" type="time" @change=${this.onMobileTimeChange}>` : null;
     }
+    /**
+     * A template used to notify currently selected value for screen readers
+     * @returns template result
+     */
+    get selectionTemplate() {
+        if (isIE || !this.announceValues) {
+            return;
+        }
+        const value = this.value;
+        const showSeconds = this.isShowSeconds;
+        const amPm = this.amPm;
+        return html `<div
+      part="aria-selection"
+      aria-live="polite"
+      aria-label="${this.t('SELECTED', {
+            value: value ? parse(value) : null,
+            showSeconds,
+            amPm
+        })}"></div>`;
+    }
+    /**
+     * Get time input template
+     * @returns template result
+     */
+    get inputTemplate() {
+        return html `
+      ${this.hoursTemplate}
+      ${TimePicker_1.dividerTemplate}
+      ${this.minutesTemplate}
+      ${this.isShowSeconds ? html `${TimePicker_1.dividerTemplate}${this.secondsTemplate}` : undefined}`;
+    }
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -699,35 +836,18 @@ let TimePicker = class TimePicker extends ControlElement {
      */
     render() {
         return html `
-      <ef-number-field
-        id="hours"
-        part="input"
-        no-spinner
-        transparent
-        min="${this.amPm ? 1 : MIN_UNIT}"
-        max="${this.amPm ? HOURS_OF_NOON : MAX_HOURS}"
-        .value="${this.formattedHours}"
-        placeholder="${this.formattedHours || Placeholder.HOURS}"
-        ?disabled="${this.disabled}"
-        ?readonly="${this.readonly}"></ef-number-field>
-      <span part="divider"></span>
-      <ef-number-field
-        id="minutes"
-        part="input"
-        no-spinner
-        min="${MIN_UNIT}"
-        max="${MAX_MINUTES}"
-        .value="${this.formattedMinutes}"
-        placeholder="${this.formattedMinutes || Placeholder.MINUTES}"
-        ?readonly="${this.readonly}"
-        ?disabled="${this.disabled}"
-        transparent></ef-number-field>
-      ${this.getSecondsHtml()}
-      ${this.getAmPmHtml()}
-      ${this.getNativeInputForMobile()}
+      ${this.inputTemplate}
+      ${guard([this.value, this.lang, this.amPm], () => this.getAmPmHtml)}
+      ${guard([this.isMobile], () => this.nativeInputForMobile)}
+      ${guard([this.value, this.lang, this.showSeconds, this.amPm, this.announceValues], () => this.selectionTemplate)}
     `;
     }
 };
+/**
+ * Template for divider segment
+ * @returns Divider segment
+ */
+TimePicker.dividerTemplate = html `<span part="divider"></span>`;
 __decorate([
     property({ type: Number })
 ], TimePicker.prototype, "hours", null);
@@ -761,10 +881,18 @@ __decorate([
 __decorate([
     query('#toggle')
 ], TimePicker.prototype, "toggleEl", void 0);
-TimePicker = __decorate([
+__decorate([
+    translate({ mode: 'directive', scope: 'ef-time-picker' })
+], TimePicker.prototype, "t", void 0);
+__decorate([
+    state()
+], TimePicker.prototype, "selectedSegment", null);
+__decorate([
+    state()
+], TimePicker.prototype, "announceValues", void 0);
+TimePicker = TimePicker_1 = __decorate([
     customElement('ef-time-picker', {
         alias: 'coral-time-picker'
     })
 ], TimePicker);
 export { TimePicker };
-//# sourceMappingURL=index.js.map