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

package/lib/time-picker/index.d.ts

@@ -1,6 +1,8 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../number-field';
+import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../number-field/index.js';
+import { TranslateDirective } from '@refinitiv-ui/translate';
+import '@refinitiv-ui/phrasebook/lib/locale/en/time-picker.js';
 declare enum Segment {
     HOURS = "hours",
     MINUTES = "minutes",
@@ -17,6 +19,15 @@ declare enum Segment {
  * @prop {boolean} [disabled=false] - Set disabled state
  */
 export declare class TimePicker extends ControlElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    protected readonly defaultRole: string | null;
+    /**
+     * If time-picker is in mobile mode
+     */
     private isMobile;
     /**
      * Internal hours value, used only in value getters and setters
@@ -38,6 +49,7 @@ export declare class TimePicker extends ControlElement {
     /**
      * Hours time segment in 24hr format
      * @param hours hours value
+     * @default null
      * @returns {void}
      */
     set hours(hours: number | null);
@@ -54,7 +66,7 @@ export declare class TimePicker extends ControlElement {
     set minutes(minutes: number | null);
     /**
      * Get minutes value
-     * @returns hours
+     * @returns minutes
      */
     get minutes(): number | null;
     /**
@@ -79,7 +91,6 @@ export declare class TimePicker extends ControlElement {
     showSeconds: boolean;
     /**
     * Value of the element
-    * @default -
     * @param value Element value
     */
     set value(value: string);
@@ -104,6 +115,22 @@ export declare class TimePicker extends ControlElement {
      * Getter for toggle part.
      */
     private toggleEl?;
+    /**
+     * Used for translations
+     */
+    protected t: TranslateDirective;
+    private _selectedSegment;
+    /**
+     * State to select text in the segment
+     * Used to asynchronously select text after render cycle is complete
+     * @param segment Selected segment or null
+     */
+    private set selectedSegment(value);
+    private get selectedSegment();
+    /**
+     * Connected to role. If false, the values are not announced in the screen reader
+     */
+    private announceValues;
     /**
      * Return the current time string, based on the current hours, minutes and seconds.
      * Used internally to set the value string after updates.
@@ -113,6 +140,10 @@ export declare class TimePicker extends ControlElement {
      * Seconds are automatically shown when `hh:mm:ss` time format is provided as a value.
      */
     private get isShowSeconds();
+    /**
+     * Get hours taking into account AM/PM placeholder
+     */
+    private get periodHours();
     /**
      * Formats the hours value
      */
@@ -123,28 +154,41 @@ export declare class TimePicker extends ControlElement {
     private get formattedMinutes();
     /**
      * Formats the seconds value
-     * @returns Formatted number
      */
     private get formattedSeconds();
+    /**
+     * Observes attribute change for `attributeChangedCallback`
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Synchronizes attribute value
+     * @param name attribute name
+     * @param oldValue old attribute value
+     * @param newValue new attribute value
+     * @returns {void}
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /**
      * On first updated life-cycle
-     *
      * @param changedProperties changed properties
      * @returns {void}
      */
     protected firstUpdated(changedProperties: PropertyValues): void;
     /**
      * On updated life-cycle
-     *
      * @param changedProperties changed properties
      * @returns {void}
      */
     protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Select text in input when update element is complete
+     * @returns returns a promise void
+     */
+    private selectSegment;
     /**
      * Overwrite validation method for value
-     *
      * @param value value
-     * @returns {boolean} result
+     * @returns True if value is valid
      */
     protected isValidValue(value: string): boolean;
     /**
@@ -159,40 +203,41 @@ export declare class TimePicker extends ControlElement {
      * @param changedProperties changed properties
      * @returns True if changed
      */
-    private hasTimeChanged;
+    private static hasTimeChanged;
     /**
      * 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
      */
-    private validUnit;
+    private static validUnit;
     /**
      * Handles value change from native time picker on mobile devices
-     *
      * @param event Event Object
      * @returns {void}
      */
     private onMobileTimeChange;
     /**
      * Helper, used to update the mobile time picker value
-     *
      * @returns {void}
      */
     private updateMobileTimePickerValue;
     /**
-     * Handles the blur event of any inputs
-     *
-     * @param event Event Object
+     * Handles action when input focused change
+     * @param event Focus change event
      * @returns {void}
      */
-    private onBlur;
+    private onInputFocusedChanged;
+    /**
+     * Handles action when input value changes
+     * @param event Value change event
+     * @returns {void}
+     */
+    private onInputValueChanged;
     /**
      * Updates a time segment to the provided value
-     *
      * @param segment Segment id
      * @param value Unit to change to
      * @returns {void}
@@ -200,22 +245,13 @@ export declare class TimePicker extends ControlElement {
     private updateTimeSegmentTo;
     /**
      * Updates the value of a time segment (element)
-     *
      * @param segment Segment's name
      * @returns {void}
      */
     private updateSegmentValue;
-    /**
-     * Handles the focus event of any inputs
-     *
-     * @param event Event Object
-     * @returns {void}
-     */
-    private onFocus;
     /**
      * Handles any keydown events
      * Used for control keys
-     *
      * @param event Event Object
      * @returns {void}
      */
@@ -223,43 +259,31 @@ export declare 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}
      */
     private manageControlKeys;
     /**
      * Handles ENTER key press
-     *
-     * @param event Event Object
+     * @param event Keyboard event
      * @returns {void}
      */
     private handleEnterKey;
     /**
      * Handles UP key press
-     *
-     * @param event Event Object
+     * @param event Keyboard event
      * @returns {void}
      */
     private handleUpKey;
     /**
      * Handle DOWN key press
-     *
-     * @param event Event Object
+     * @param event Keyboard event
      * @returns {void}
      */
     private handleDownKey;
-    /**
-     * Handle Backspace key press
-     *
-     * @param event Event Object
-     * @returns {void}
-     */
-    private handleBackspaceKey;
     /**
      * 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}
@@ -268,7 +292,6 @@ export declare 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}
@@ -284,72 +307,87 @@ export declare class TimePicker extends ControlElement {
     private getHoursSegment;
     /**
      * Updates the value of the hours element
-     *
      * @returns {void}
      */
     private updateHoursSegmentValue;
     /**
      * Updated the value of the minutes element
-     *
      * @returns {void}
      */
     private updateMinutesSegmentValue;
     /**
      * Updates the value of the seconds element
-     *
      * @returns {void}
      */
     private updateSecondsSegmentValue;
     /**
      * Formats a given number and prefixes a 0 on numbers lower than 10
-     *
      * @param n Number to format
      * @returns Formatted number
      */
-    private formattedUnit;
+    private static formattedUnit;
     /**
      * Returns `true` or `false` depending on whether the hours are before, or, after noon
-     *
-     * @returns Result
+     * @returns True if time is AM
      */
     private isAM;
     /**
      * Returns opposite of isAM
-     *
-     * @returns Result
+     * @returns True if time is PM
      */
     private isPM;
     /**
      * Toggles the AM/PM state
-     *
      * @returns {void}
      */
     toggle(): void;
     /**
-     * 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
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
+    /**
+     * Template for divider segment
+     * @returns Divider segment
+     */
+    private static dividerTemplate;
+    /**
+     * Template for Hours Segment
+     * @returns template hours segment
+     */
+    private get hoursTemplate();
+    /**
+     * Template for Minutes Segment
+     * @returns template minutes segment
+     */
+    private get minutesTemplate();
     /**
      * Template for Seconds Segment
-     *
-     * @returns Seconds segment
+     * @returns template seconds segment
      */
-    private getSecondsHtml;
+    private get secondsTemplate();
     /**
      * Template for AmPm Segment
-     *
      * @returns Am/Pm segment
      */
-    private getAmPmHtml;
+    private get getAmPmHtml();
     /**
      * Native input's template for mobile
-     *
      * @returns input
      */
-    private getNativeInputForMobile;
+    private get nativeInputForMobile();
+    /**
+     * A template used to notify currently selected value for screen readers
+     * @returns template result
+     */
+    private get selectionTemplate();
+    /**
+     * Get time input template
+     * @returns template result
+     */
+    private get inputTemplate();
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -369,4 +407,6 @@ declare global {
       'ef-time-picker': Partial<TimePicker> | JSXInterface.ControlHTMLAttributes<TimePicker>;
     }
   }
-}
+}
+
+export {};