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

package/dist/types/components/ic-time-selector/ic-time-selector.d.ts

@@ -0,0 +1,88 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcDisableTimeSelection, IcSizes, IcThemeMode, IcTimeFormatSelector } from "../../utils/types";
+import { IcTimePeriods } from "./ic-time-selector.types";
+export declare class TimeSelector {
+    private DEFAULT_TIME_FORMAT;
+    private minutes;
+    private seconds;
+    private periods;
+    private minTime;
+    private maxTime;
+    private lastAnnouncedType?;
+    private lastAnnouncedValue?;
+    el: HTMLIcTimeSelectorElement;
+    selectedHour?: number;
+    selectedMinute?: number;
+    selectedSecond?: number;
+    selectedPeriod?: IcTimePeriods;
+    ariaLiveMessage: string;
+    /**
+     * 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.
+     */
+    disableTimes: IcDisableTimeSelection[];
+    /**
+     * The earliest time that will be allowed. 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.
+     */
+    min: string | Date;
+    watchMinHandler(): void;
+    /**
+     * The latest time that will be allowed. 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.
+     */
+    max: string | Date;
+    watchMaxHandler(): void;
+    /**
+     * The size of the time selector to be displayed.
+     */
+    size: IcSizes;
+    /**
+     * 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.
+     */
+    theme?: IcThemeMode;
+    /**
+     * The format in which the time will be displayed.
+     */
+    timeFormat: IcTimeFormatSelector;
+    /**
+     * The time period format: "12" for 12-hour, "24" for 24-hour. Defaults to "24".
+     */
+    timePeriod: "12" | "24";
+    /**
+     * 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.
+     */
+    value?: string | Date | null | undefined;
+    watchValueHandler(): void;
+    /**
+     * Emitted when the value has changed.
+     */
+    icChange: EventEmitter<{
+        value: Date | null;
+        timeString: string | null;
+        timeObject: {
+            hour: string | null;
+            minute: string | null;
+            second: string | null;
+            period?: IcTimePeriods;
+        };
+    }>;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private getHeaderLabel;
+    private setTimeParts;
+    private setTime;
+    private renderScrollRows;
+    private scrollSelectedItem;
+    private checkIfScrollIsFinished;
+    private scrollMinTime;
+    private handleSelect;
+    private isTimeDisabled;
+    private announceSelectedColumn;
+    private getColumnValues;
+    private getSelectedValue;
+    private getHighlightedValue;
+    private handleColumnKeyDown;
+    private updateAriaLiveMessage;
+    private renderColumn;
+    private handleClear;
+    private handleConfirmClick;
+    render(): any;
+}

package/dist/types/components/ic-time-selector/ic-time-selector.stories.d.ts

@@ -0,0 +1,99 @@
+declare namespace _default {
+    let title: string;
+    let component: string;
+    namespace parameters {
+        namespace componentAPI {
+            export { readme as data };
+        }
+    }
+}
+export default _default;
+export namespace Default {
+    function render(): import("lit-html").TemplateResult<1>;
+    let name: string;
+}
+export namespace IcChangeEvent {
+    export function render_1(): import("lit-html").TemplateResult<1>;
+    export { render_1 as render };
+    let name_1: string;
+    export { name_1 as name };
+}
+export namespace WithValue {
+    export function render_2(): import("lit-html").TemplateResult<1>;
+    export { render_2 as render };
+    let name_2: string;
+    export { name_2 as name };
+}
+export namespace DateObject {
+    export function render_3(): import("lit-html").TemplateResult<1>;
+    export { render_3 as render };
+    let name_3: string;
+    export { name_3 as name };
+}
+export namespace ZuluTime {
+    export function render_4(): import("lit-html").TemplateResult<1>;
+    export { render_4 as render };
+    let name_4: string;
+    export { name_4 as name };
+}
+export namespace TimePeriod {
+    export function render_5(): import("lit-html").TemplateResult<1>;
+    export { render_5 as render };
+    let name_5: string;
+    export { name_5 as name };
+}
+export namespace IcChangeEventTimePeriod {
+    export function render_6(): import("lit-html").TemplateResult<1>;
+    export { render_6 as render };
+    let name_6: string;
+    export { name_6 as name };
+}
+export namespace DefaultValue12Hour {
+    export function render_7(): import("lit-html").TemplateResult<1>;
+    export { render_7 as render };
+    let name_7: string;
+    export { name_7 as name };
+}
+export namespace TimeFormat {
+    export function render_8(): import("lit-html").TemplateResult<1>;
+    export { render_8 as render };
+    let name_8: string;
+    export { name_8 as name };
+}
+export namespace DefaultValueTimeFormat {
+    export function render_9(): import("lit-html").TemplateResult<1>;
+    export { render_9 as render };
+    let name_9: string;
+    export { name_9 as name };
+}
+export namespace MinTime {
+    export function render_10(): import("lit-html").TemplateResult<1>;
+    export { render_10 as render };
+    let name_10: string;
+    export { name_10 as name };
+}
+export namespace MaxTime {
+    export function render_11(): import("lit-html").TemplateResult<1>;
+    export { render_11 as render };
+    let name_11: string;
+    export { name_11 as name };
+}
+export namespace DisableTimes {
+    export function render_12(): import("lit-html").TemplateResult<1>;
+    export { render_12 as render };
+    let name_12: string;
+    export { name_12 as name };
+}
+export namespace Small {
+    export function render_13(): import("lit-html").TemplateResult<1>;
+    export { render_13 as render };
+    let name_13: string;
+    export { name_13 as name };
+}
+export namespace Large {
+    export function render_14(): import("lit-html").TemplateResult<1>;
+    export { render_14 as render };
+    let name_14: string;
+    export { name_14 as name };
+}
+import readme from "./readme.md";

package/dist/types/components/ic-time-selector/ic-time-selector.types.d.ts

@@ -0,0 +1 @@
+export type IcTimePeriods = "AM" | "PM";

package/dist/types/components.d.ts

@@ -5,15 +5,17 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { IcAriaLive, IcCardDensity, IcDateFormat, IcDateValueFormat, IcDisableTimeSelection, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcPositionTopOrRight, IcSizes, IcThemeMode, IcTimeFormat, IcWeekDays } from "./utils/types";
+import { IcAriaLive, IcCardDensity, IcDateFormat, IcDateValueFormat, IcDisableTimeSelection, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcPositionTopOrRight, IcSizes, IcThemeMode, IcTimeFormat, IcTimeFormatSelector, IcWeekDays } from "./utils/types";
 import { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
 import { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 import { IcItemsPerPageChangeEventDetail, IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
+import { IcTimePeriods } from "./components/ic-time-selector/ic-time-selector.types";
 import { IcTreeItemOptions } from "./components/ic-tree-view/ic-tree-view.types";
-export { IcAriaLive, IcCardDensity, IcDateFormat, IcDateValueFormat, IcDisableTimeSelection, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcPositionTopOrRight, IcSizes, IcThemeMode, IcTimeFormat, IcWeekDays } from "./utils/types";
+export { IcAriaLive, IcCardDensity, IcDateFormat, IcDateValueFormat, IcDisableTimeSelection, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcPositionTopOrRight, IcSizes, IcThemeMode, IcTimeFormat, IcTimeFormatSelector, IcWeekDays } from "./utils/types";
 export { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
 export { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 export { IcItemsPerPageChangeEventDetail, IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
+export { IcTimePeriods } from "./components/ic-time-selector/ic-time-selector.types";
 export { IcTreeItemOptions } from "./components/ic-tree-view/ic-tree-view.types";
 export namespace Components {
     interface IcCalendar {
@@ -540,6 +542,10 @@ export namespace Components {
         "value"?: IcDateValueFormat;
     }
     interface IcPaginationBar {
+        /**
+          * The accessible label passed down to the pagination component to provide context for screen reader users.
+         */
+        "accessibleLabel"?: string;
         /**
           * Sets the alignment of the items in the pagination bar.
          */
@@ -664,7 +670,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * If `true`, every individual input field completed will emit an icChange event.
+          * If `true`, every individual input field completed will emit an icTimeChange event.
          */
         "emitTimePartChange"?: boolean;
         /**
@@ -712,6 +718,10 @@ export namespace Components {
           * If `true`, the input will require a value.
          */
         "required": boolean;
+        /**
+          * If `true`, the time input will show an AM/PM toggle when in 12-hour time period.
+         */
+        "showAmPmToggle"?: boolean;
         /**
           * If `true`, a button which clears the time input when clicked will be displayed.
          */
@@ -733,7 +743,7 @@ export namespace Components {
           * The time period format: "12" for 12-hour, "24" for 24-hour. Defaults to "24".
          */
         "timePeriod": "12" | "24";
-        "triggerIcChange": (t: Date | null) => Promise<void>;
+        "triggerIcTimeChange": (t: Date | null) => Promise<void>;
         /**
           * The value of the `aria-live` attribute on the validation message.
          */
@@ -751,6 +761,40 @@ export namespace Components {
          */
         "value"?: IcDateValueFormat;
     }
+    interface IcTimeSelector {
+        /**
+          * 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.
+         */
+        "disableTimes": IcDisableTimeSelection[];
+        /**
+          * The latest time that will be allowed. 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.
+         */
+        "max": string | Date;
+        /**
+          * The earliest time that will be allowed. 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.
+         */
+        "min": string | Date;
+        /**
+          * The size of the time selector to be displayed.
+         */
+        "size": IcSizes;
+        /**
+          * 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.
+         */
+        "theme"?: IcThemeMode;
+        /**
+          * The format in which the time will be displayed.
+         */
+        "timeFormat": IcTimeFormatSelector;
+        /**
+          * The time period format: "12" for 12-hour, "24" for 24-hour. Defaults to "24".
+         */
+        "timePeriod": "12" | "24";
+        /**
+          * 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.
+         */
+        "value"?: string | Date | null | undefined;
+    }
     interface IcTreeItem {
         /**
           * If `true`, the tree item appears in the disabled state.
@@ -865,6 +909,10 @@ export interface IcTimeInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcTimeInputElement;
 }
+export interface IcTimeSelectorCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcTimeSelectorElement;
+}
 export interface IcTreeItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcTreeItemElement;
@@ -1029,12 +1077,14 @@ declare global {
     interface HTMLIcTimeInputElementEventMap {
         "clockButtonClicked": { value: Date | null };
         "icBlur": { value: Date | null };
-        "icChange": {
+        "icTimeChange": {
     value: Date | null;
     timeObject: {
       hour: string | null;
       minute: string | null;
       second: string | null;
+      millisecond: string | null;
+      period: string | null;
     };
   };
         "icFocus": { value: Date | null };
@@ -1053,6 +1103,32 @@ declare global {
         prototype: HTMLIcTimeInputElement;
         new (): HTMLIcTimeInputElement;
     };
+    interface HTMLIcTimeSelectorElementEventMap {
+        "icChange": {
+    value: Date | null;
+    timeString: string | null;
+    timeObject: {
+      hour: string | null;
+      minute: string | null;
+      second: string | null;
+      period?: IcTimePeriods;
+    };
+  };
+    }
+    interface HTMLIcTimeSelectorElement extends Components.IcTimeSelector, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcTimeSelectorElementEventMap>(type: K, listener: (this: HTMLIcTimeSelectorElement, ev: IcTimeSelectorCustomEvent<HTMLIcTimeSelectorElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcTimeSelectorElementEventMap>(type: K, listener: (this: HTMLIcTimeSelectorElement, ev: IcTimeSelectorCustomEvent<HTMLIcTimeSelectorElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIcTimeSelectorElement: {
+        prototype: HTMLIcTimeSelectorElement;
+        new (): HTMLIcTimeSelectorElement;
+    };
     interface HTMLIcTreeItemElementEventMap {
         "icTreeItemSelected": { id: string };
         "icTreeItemExpanded": {
@@ -1090,6 +1166,7 @@ declare global {
         "ic-pagination-bar": HTMLIcPaginationBarElement;
         "ic-table-of-contents": HTMLIcTableOfContentsElement;
         "ic-time-input": HTMLIcTimeInputElement;
+        "ic-time-selector": HTMLIcTimeSelectorElement;
         "ic-tree-item": HTMLIcTreeItemElement;
         "ic-tree-view": HTMLIcTreeViewElement;
     }
@@ -1690,6 +1767,10 @@ declare namespace LocalJSX {
         "value"?: IcDateValueFormat;
     }
     interface IcPaginationBar {
+        /**
+          * The accessible label passed down to the pagination component to provide context for screen reader users.
+         */
+        "accessibleLabel"?: string;
         /**
           * Sets the alignment of the items in the pagination bar.
          */
@@ -1822,7 +1903,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * If `true`, every individual input field completed will emit an icChange event.
+          * If `true`, every individual input field completed will emit an icTimeChange event.
          */
         "emitTimePartChange"?: boolean;
         /**
@@ -1865,25 +1946,31 @@ declare namespace LocalJSX {
           * Emitted when the input loses focus.
          */
         "onIcBlur"?: (event: IcTimeInputCustomEvent<{ value: Date | null }>) => void;
+        /**
+          * Emitted when the input gains focus.
+         */
+        "onIcFocus"?: (event: IcTimeInputCustomEvent<{ value: Date | null }>) => void;
         /**
           * Emitted when the value has changed.
          */
-        "onIcChange"?: (event: IcTimeInputCustomEvent<{
+        "onIcTimeChange"?: (event: IcTimeInputCustomEvent<{
     value: Date | null;
     timeObject: {
       hour: string | null;
       minute: string | null;
       second: string | null;
+      millisecond: string | null;
+      period: string | null;
     };
   }>) => void;
-        /**
-          * Emitted when the input gains focus.
-         */
-        "onIcFocus"?: (event: IcTimeInputCustomEvent<{ value: Date | null }>) => void;
         /**
           * If `true`, the input will require a value.
          */
         "required"?: boolean;
+        /**
+          * If `true`, the time input will show an AM/PM toggle when in 12-hour time period.
+         */
+        "showAmPmToggle"?: boolean;
         /**
           * If `true`, a button which clears the time input when clicked will be displayed.
          */
@@ -1921,6 +2008,53 @@ declare namespace LocalJSX {
          */
         "value"?: IcDateValueFormat;
     }
+    interface IcTimeSelector {
+        /**
+          * 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.
+         */
+        "disableTimes"?: IcDisableTimeSelection[];
+        /**
+          * The latest time that will be allowed. 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.
+         */
+        "max"?: string | Date;
+        /**
+          * The earliest time that will be allowed. 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.
+         */
+        "min"?: string | Date;
+        /**
+          * Emitted when the value has changed.
+         */
+        "onIcChange"?: (event: IcTimeSelectorCustomEvent<{
+    value: Date | null;
+    timeString: string | null;
+    timeObject: {
+      hour: string | null;
+      minute: string | null;
+      second: string | null;
+      period?: IcTimePeriods;
+    };
+  }>) => void;
+        /**
+          * The size of the time selector to be displayed.
+         */
+        "size"?: IcSizes;
+        /**
+          * 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.
+         */
+        "theme"?: IcThemeMode;
+        /**
+          * The format in which the time will be displayed.
+         */
+        "timeFormat"?: IcTimeFormatSelector;
+        /**
+          * The time period format: "12" for 12-hour, "24" for 24-hour. Defaults to "24".
+         */
+        "timePeriod"?: "12" | "24";
+        /**
+          * 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.
+         */
+        "value"?: string | Date | null | undefined;
+    }
     interface IcTreeItem {
         /**
           * If `true`, the tree item appears in the disabled state.
@@ -2018,6 +2152,7 @@ declare namespace LocalJSX {
         "ic-pagination-bar": IcPaginationBar;
         "ic-table-of-contents": IcTableOfContents;
         "ic-time-input": IcTimeInput;
+        "ic-time-selector": IcTimeSelector;
         "ic-tree-item": IcTreeItem;
         "ic-tree-view": IcTreeView;
     }
@@ -2035,6 +2170,7 @@ declare module "@stencil/core" {
             "ic-pagination-bar": LocalJSX.IcPaginationBar & JSXBase.HTMLAttributes<HTMLIcPaginationBarElement>;
             "ic-table-of-contents": LocalJSX.IcTableOfContents & JSXBase.HTMLAttributes<HTMLIcTableOfContentsElement>;
             "ic-time-input": LocalJSX.IcTimeInput & JSXBase.HTMLAttributes<HTMLIcTimeInputElement>;
+            "ic-time-selector": LocalJSX.IcTimeSelector & JSXBase.HTMLAttributes<HTMLIcTimeSelectorElement>;
             "ic-tree-item": LocalJSX.IcTreeItem & JSXBase.HTMLAttributes<HTMLIcTreeItemElement>;
             "ic-tree-view": LocalJSX.IcTreeView & JSXBase.HTMLAttributes<HTMLIcTreeViewElement>;
         }

package/dist/types/utils/helpers.d.ts

@@ -169,3 +169,17 @@ export declare const addDataToPosition: (dataObject: IcDataTableDataType, newKey
 export declare const isSlottedInGroup: (component: HTMLElement) => boolean;
 export declare const hasDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[]) => boolean;
 export declare const renderDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[], ref: unknown) => void;
+/**
+ * Parses a time string (HH:MM or HH:MM:SS) or Date and returns both Date and time parts.
+ * @param value string or Date
+ * @returns { date: Date | null, parts: { hour: number, minute: number, second: number } | null }
+ */
+export declare function parseTimeHelper(value: string | Date): {
+    date: Date | null;
+    parts: {
+        hour: number;
+        minute: number;
+        second: number;
+        millisecond: number;
+    } | null;
+};

package/dist/types/utils/types.d.ts

@@ -117,7 +117,8 @@ export interface IcPaginationBarOptions {
 }
 export type IcDateFormat = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";
 export type IcDateValueFormat = string | Date | null | undefined;
-export type IcTimeFormat = "HH:MM" | "HH:MM:SS";
+export type IcTimeFormat = "HH:MM" | "HH:MM:SS" | "HH:MM:SS.SSS";
+export type IcTimeFormatSelector = "HH:MM" | "HH:MM:SS";
 export type IcDisableTimeSelection = string | Date | {
     start: string | Date;
     end: string | Date;