@refinitiv-ui/elements 5.11.0 → 5.12.0-alpha.0

package/lib/time-picker/index.js

@@ -1,898 +0,0 @@
-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";
-    Segment["MINUTES"] = "minutes";
-    Segment["SECONDS"] = "seconds";
-})(Segment || (Segment = {}));
-const MIN_UNIT = 0;
-const MAX_HOURS = 23;
-const MAX_MINUTES = 59;
-const MAX_SECONDS = 59;
-const HOURS_IN_DAY = 24;
-const HOURS_OF_NOON = 12;
-const Placeholder = {
-    HOURS: '--',
-    MINUTES: '--',
-    SECONDS: '--'
-};
-/**
- * Control the time input
- * @event value-changed - Dispatched when value changes
- *
- * @attr {boolean} readonly - Set readonly state
- * @prop {boolean} [readonly=false] - Set readonly state
- *
- * @attr {boolean} disabled - Set disabled state
- * @prop {boolean} [disabled=false] - Set disabled state
- */
-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
-         */
-        this._hours = null;
-        /**
-         * Internal minutes value, used only in value getters and setters
-         */
-        this._minutes = null;
-        /**
-         * Internal seconds value, used only in value getters and setters
-         */
-        this._seconds = null;
-        /**
-         * If external value is set with seconds, this flag is true.
-         * The flag is not relevant when withSecond is forced to be true
-         */
-        this.valueWithSeconds = false;
-        /**
-         * Toggles 12hr time display
-         */
-        this.amPm = false;
-        /**
-         * Flag to show seconds time segment in display.
-         * Seconds are automatically shown when `hh:mm:ss` time format is provided as a value.
-         */
-        this.showSeconds = false;
-        this._selectedSegment = null;
-        /**
-         * Connected to role. If false, the values are not announced in the screen reader
-         */
-        this.announceValues = true;
-        /**
-         * Handles any keydown events
-         * Used for control keys
-         * @param event Event Object
-         * @returns {void}
-         */
-        this.onKeydown = (event) => {
-            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) {
-        const oldHours = this.hours;
-        if ((hours !== null && isNaN(hours)) || oldHours === hours) {
-            return;
-        }
-        this._hours = TimePicker_1.validUnit(hours, MIN_UNIT, MAX_HOURS, oldHours);
-        if (this._hours !== oldHours) {
-            this.requestUpdate('hours', oldHours);
-        }
-    }
-    /**
-     * Get hours value
-     * @returns hours
-     */
-    get hours() {
-        return this._hours;
-    }
-    /**
-     * Minutes time segment
-     * @param minutes minutes value
-     * @returns {void}
-     */
-    set minutes(minutes) {
-        const oldMinutes = this.minutes;
-        if ((minutes !== null && isNaN(minutes)) || oldMinutes === minutes) {
-            return;
-        }
-        this._minutes = TimePicker_1.validUnit(minutes, MIN_UNIT, MAX_MINUTES, oldMinutes);
-        if (this._minutes !== oldMinutes) {
-            this.requestUpdate('minutes', oldMinutes);
-        }
-    }
-    /**
-     * Get minutes value
-     * @returns minutes
-     */
-    get minutes() {
-        return this._minutes;
-    }
-    /**
-     * Seconds time segment
-     * @param seconds seconds value
-     * @returns {void}
-     */
-    set seconds(seconds) {
-        const oldSeconds = this.seconds;
-        if ((seconds !== null && isNaN(seconds)) || oldSeconds === seconds) {
-            return;
-        }
-        this._seconds = TimePicker_1.validUnit(seconds, MIN_UNIT, MAX_SECONDS, oldSeconds);
-        if (this._seconds !== oldSeconds) {
-            this.requestUpdate('seconds', oldSeconds);
-        }
-    }
-    /**
-     * Get seconds value
-     * @returns seconds
-     */
-    get seconds() {
-        return this._seconds;
-    }
-    /**
-    * Value of the element
-    * @param value Element value
-    */
-    set value(value) {
-        const oldValue = this.value;
-        value = this.castValue(value);
-        if (!this.isValidValue(value)) {
-            this.warnInvalidValue(value);
-            // it does not make sense to clear value here, as the value is always defined
-            return;
-        }
-        /* special case to reset hours, minutes and seconds */
-        if (value === '' && (this.hours || this.minutes || this.seconds)) {
-            this.hours = null;
-            this.minutes = null;
-            this.seconds = null;
-            return;
-        }
-        if (oldValue !== value) { /** never store actual value, instead operate with hours/minutes/seconds */
-            const info = toTimeSegment(value);
-            const format = getFormat(value);
-            this.valueWithSeconds = format === TimeFormat.HHmmss || format === TimeFormat.HHmmssSSS;
-            this.hours = info.hours;
-            this.minutes = info.minutes;
-            this.seconds = info.seconds;
-        }
-    }
-    get value() {
-        if (this.hours === null || this.minutes === null || (this.isShowSeconds && this.seconds === null)) {
-            return '';
-        }
-        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.
-     */
-    get currentTimeString() {
-        return format({
-            hours: this.hours || 0,
-            minutes: this.minutes || 0,
-            seconds: this.seconds || 0,
-            milliseconds: 0
-        }, this.isShowSeconds ? TimeFormat.HHmmss : TimeFormat.HHmm);
-    }
-    /**
-     * Seconds are automatically shown when `hh:mm:ss` time format is provided as a value.
-     */
-    get isShowSeconds() {
-        return this.showSeconds || this.valueWithSeconds;
-    }
-    /**
-     * Get hours taking into account AM/PM placeholder
-     */
-    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 hours;
-    }
-    /**
-     * Formats the hours value
-     */
-    get formattedHours() {
-        return TimePicker_1.formattedUnit(this.periodHours);
-    }
-    /**
-     * Formats the minutes value
-     */
-    get formattedMinutes() {
-        return TimePicker_1.formattedUnit(this.minutes);
-    }
-    /**
-     * Formats the seconds value
-     */
-    get formattedSeconds() {
-        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);
-        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 (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 True if value is valid
-     */
-    isValidValue(value) {
-        return value === '' || isValidTime(value);
-    }
-    /**
-     * Set time segment value in consistent way
-     * @param segment Time segment
-     * @param value Value to check
-     * @returns {void}
-     */
-    setSegmentAndNotify(segment, value) {
-        const oldValue = this.value;
-        switch (segment) {
-            case Segment.HOURS:
-                this.hours = value;
-                break;
-            case Segment.MINUTES:
-                this.minutes = value;
-                break;
-            case Segment.SECONDS:
-                this.seconds = value;
-                break;
-            // no default
-        }
-        // Pre-populate empty segments
-        if (value !== null) {
-            if (segment === Segment.HOURS && this.minutes === null) {
-                this.minutes = 0;
-            }
-            if (this.isShowSeconds && this.seconds === null && (segment === Segment.HOURS || segment === Segment.MINUTES)) {
-                this.seconds = 0;
-            }
-        }
-        // verify value again, as time segment validation
-        // might fail in setter and previous value returned
-        if (oldValue !== this.value) {
-            this.notifyPropertyChange('value', this.value);
-        }
-    }
-    /**
-     * True if time segment has changed
-     * @param changedProperties changed properties
-     * @returns True if changed
-     */
-    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
-     */
-    static validUnit(unit, min, max, fallback) {
-        if (unit === null) {
-            return null;
-        }
-        if (isNaN(unit) || unit < min || unit > max) {
-            return fallback;
-        }
-        return unit;
-    }
-    /**
-     * Handles value change from native time picker on mobile devices
-     * @param event Event Object
-     * @returns {void}
-     */
-    /* istanbul ignore next */
-    onMobileTimeChange(event) {
-        this.value = event.target.value;
-    }
-    /**
-     * Helper, used to update the mobile time picker value
-     * @returns {void}
-     */
-    /* istanbul ignore next */
-    updateMobileTimePickerValue() {
-        if (this.mtpInput) {
-            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}
-     */
-    updateTimeSegmentTo(segment, value) {
-        if (segment === Segment.HOURS) {
-            value = this.getHoursSegment(value);
-        }
-        this.setSegmentAndNotify(segment, value);
-    }
-    /**
-     * Updates the value of a time segment (element)
-     * @param segment Segment's name
-     * @returns {void}
-     */
-    updateSegmentValue(segment) {
-        switch (segment) {
-            case Segment.HOURS:
-                this.updateHoursSegmentValue();
-                break;
-            case Segment.MINUTES:
-                this.updateMinutesSegmentValue();
-                break;
-            case Segment.SECONDS:
-                this.updateSecondsSegmentValue();
-                break;
-            // no default
-        }
-    }
-    /**
-     * Handle valid control keys and execute their corresponding commands
-     * Will stop when readonly is set
-     * @param event Keyboard event
-     * @returns {void}
-     */
-    manageControlKeys(event) {
-        if (this.readonly || this.disabled || event.defaultPrevented) {
-            return;
-        }
-        switch (event.key) {
-            case 'Up': // IE
-            case 'ArrowUp':
-                this.handleUpKey(event);
-                break;
-            case 'Down': // IE
-            case 'ArrowDown':
-                this.handleDownKey(event);
-                break;
-            case 'Enter':
-            case 'Spacebar':
-            case ' ':
-                this.handleEnterKey(event);
-                break;
-            default:
-                return;
-        }
-        event.preventDefault();
-    }
-    /**
-     * Handles ENTER key press
-     * @param event Keyboard event
-     * @returns {void}
-     */
-    handleEnterKey(event) {
-        if (event.target === this.toggleEl) {
-            this.toggle();
-            event.preventDefault();
-        }
-    }
-    /**
-     * Handles UP key press
-     * @param event Keyboard event
-     * @returns {void}
-     */
-    handleUpKey(event) {
-        this.toggleOrModify(1, event.target);
-    }
-    /**
-     * Handle DOWN key press
-     * @param event Keyboard event
-     * @returns {void}
-     */
-    handleDownKey(event) {
-        this.toggleOrModify(-1, event.target);
-    }
-    /**
-     * 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}
-     */
-    toggleOrModify(amount, target) {
-        if (target === this.toggleEl) {
-            this.toggle();
-        }
-        else if (target === this.hoursInput) {
-            this.changeValueBy(amount, Segment.HOURS);
-        }
-        else if (target === this.minutesInput) {
-            this.changeValueBy(amount, Segment.MINUTES);
-        }
-        else if (target === this.secondsInput) {
-            this.changeValueBy(amount, Segment.SECONDS);
-        }
-    }
-    /**
-     * 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}
-     */
-    changeValueBy(amount, segment) {
-        let offset = 0;
-        switch (segment) {
-            case Segment.HOURS:
-                offset = this.hours === null ? 0 : amount * MILLISECONDS_IN_HOUR;
-                break;
-            case Segment.MINUTES:
-                offset = this.minutes === null ? 0 : amount * MILLISECONDS_IN_MINUTE;
-                break;
-            case Segment.SECONDS:
-                offset = this.seconds === null ? 0 : amount * MILLISECONDS_IN_SECOND;
-                break;
-            // no default
-        }
-        const value = addOffset(this.currentTimeString, offset);
-        this.setValueAndNotify(value);
-        this.selectedSegment = segment;
-    }
-    /**
-     * Gets the hours segment of the provided value
-     * as there is extra logic required for 12hr support
-     *
-     * @param value Unit to change to
-     * @returns updated value
-     */
-    getHoursSegment(value) {
-        if (this.amPm) {
-            if (value === HOURS_OF_NOON && this.isAM()) {
-                value = 0;
-            }
-            if (this.isPM() && value < HOURS_OF_NOON) {
-                value += HOURS_OF_NOON;
-            }
-        }
-        return value;
-    }
-    /**
-     * Updates the value of the hours element
-     * @returns {void}
-     */
-    updateHoursSegmentValue() {
-        if (this.hoursInput) {
-            this.hoursInput.value = this.formattedHours;
-        }
-    }
-    /**
-     * Updated the value of the minutes element
-     * @returns {void}
-     */
-    updateMinutesSegmentValue() {
-        if (this.minutesInput) {
-            this.minutesInput.value = this.formattedMinutes;
-        }
-    }
-    /**
-     * Updates the value of the seconds element
-     * @returns {void}
-     */
-    updateSecondsSegmentValue() {
-        if (this.secondsInput) {
-            this.secondsInput.value = this.formattedSeconds;
-        }
-    }
-    /**
-     * Formats a given number and prefixes a 0 on numbers lower than 10
-     * @param n Number to format
-     * @returns Formatted number
-     */
-    static formattedUnit(n) {
-        return n === null ? '' : padNumber(n, 2);
-    }
-    /**
-     * Returns `true` or `false` depending on whether the hours are before, or, after noon
-     * @returns True if time is AM
-     */
-    isAM() {
-        return isAM(this.currentTimeString);
-    }
-    /**
-     * Returns opposite of isAM
-     * @returns True if time is PM
-     */
-    isPM() {
-        return isPM(this.currentTimeString);
-    }
-    /**
-     * Toggles the AM/PM state
-     * @returns {void}
-     */
-    toggle() {
-        if (this.amPm) {
-            const hours = this.hours === null ? new Date().getHours() : (this.hours + HOURS_IN_DAY / 2) % HOURS_IN_DAY;
-            this.setSegmentAndNotify(Segment.HOURS, hours);
-        }
-    }
-    /**
-     * A `CSSResultGroup` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     * @returns CSS template
-     */
-    static get styles() {
-        return css `
-      :host {
-        display: inline-flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        justify-content: center;
-        user-select:none;
-        position: relative;
-      }
-      input {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-      }
-    `;
-    }
-    /**
-     * 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 template seconds segment
-     */
-    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="${seconds}"
-        placeholder="${ifDefined(seconds ? undefined : Placeholder.SECONDS)}"
-        ?readonly="${this.readonly}"
-        ?disabled="${this.disabled}"
-        transparent
-        @value-changed="${this.onInputValueChanged}"
-        @focused-changed=${this.onInputFocusedChanged}></ef-number-field>`;
-    }
-    /**
-     * Template for AmPm Segment
-     * @returns Am/Pm segment
-     */
-    get getAmPmHtml() {
-        const hasHours = this.hours !== null;
-        return this.amPm ? html `
-      <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
-     */
-    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.
-     * @returns Render template
-     */
-    render() {
-        return html `
-      ${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);
-__decorate([
-    property({ type: Number })
-], TimePicker.prototype, "minutes", null);
-__decorate([
-    property({ type: Number })
-], TimePicker.prototype, "seconds", null);
-__decorate([
-    property({ type: Boolean, attribute: 'am-pm', reflect: true })
-], TimePicker.prototype, "amPm", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'show-seconds', reflect: true })
-], TimePicker.prototype, "showSeconds", void 0);
-__decorate([
-    property({ type: String })
-], TimePicker.prototype, "value", null);
-__decorate([
-    query('#mtp')
-], TimePicker.prototype, "mtpInput", void 0);
-__decorate([
-    query('#hours')
-], TimePicker.prototype, "hoursInput", void 0);
-__decorate([
-    query('#minutes')
-], TimePicker.prototype, "minutesInput", void 0);
-__decorate([
-    query('#seconds')
-], TimePicker.prototype, "secondsInput", void 0);
-__decorate([
-    query('#toggle')
-], TimePicker.prototype, "toggleEl", void 0);
-__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 };