@ukic/canary-web-components 3.0.0-canary.30 → 3.0.0-canary.31

package/dist/types/components/ic-calendar/ic-calendar.stories.d.ts

@@ -0,0 +1,151 @@
+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 Value {
+    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 OpenAtDate {
+    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 MinMax {
+    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 JavascriptDates {
+    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 DateFormats {
+    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 StartOfWeek {
+    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 DisableDaysOfWeek {
+    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 DisablePast {
+    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 DisableFuture {
+    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 DaysOutsideMonthHidden {
+    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 ButtonsHidden {
+    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 IcChangeEvent {
+    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 Playground {
+    export function render_13(args: any): import("lit-html").TemplateResult<1>;
+    export { render_13 as render };
+    let name_13: string;
+    export { name_13 as name };
+    export { defaultArgs as args };
+    export let argTypes: {
+        "date-format": {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            control: string;
+            options: string[];
+        };
+        "start-of-week": {
+            options: string[];
+            mapping: {
+                Sunday: number;
+                Monday: number;
+                Tuesday: number;
+                Wednesday: number;
+                Thursday: number;
+                Friday: number;
+                Saturday: number;
+            };
+            control: {
+                type: string;
+                labels: {
+                    Sunday: string;
+                    Monday: string;
+                    Tuesday: string;
+                    Wednesday: string;
+                    Thursday: string;
+                    Friday: string;
+                    Saturday: string;
+                };
+            };
+        };
+        theme: {
+            control: string;
+            options: string[];
+        };
+    };
+}
+import readme from "./readme.md";
+declare const defaultArgs: {
+    "date-format": string;
+    disabled: boolean;
+    "disable-days": never[];
+    "disable-future": boolean;
+    "disable-past": boolean;
+    max: string;
+    min: string;
+    "open-at-date": string;
+    "show-clear-button": boolean;
+    "show-days-outside-month": boolean;
+    "show-today-button": boolean;
+    size: string;
+    "start-of-week": number;
+    theme: string;
+    value: string;
+};

package/dist/types/components/ic-calendar/test/a11y/ic-calendar.test.a11y.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/ic-card-horizontal/ic-card-horizontal.d.ts

@@ -1,5 +1,4 @@
-import { IcBrand, IcBrandForeground, IcCardDensity, IcThemeMode } from "../../utils/types";
-import { IcSizes } from "../../utils/types";
+import { IcBrand, IcBrandForeground, IcCardDensity, IcSizes, IcThemeMode } from "../../utils/types";
 /**
  * @slot heading - Content will be placed at the top of the horizontal card to the right of the icon.
  * @slot message - Content will be placed in the main body of the horizontal card.

package/dist/types/components/ic-date-input/ic-date-input.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAriaLive, IcInformationStatusOrEmpty, IcSizes, IcDateFormat, IcWeekDays, IcThemeMode } from "../../utils/types";
+import { IcAriaLive, IcInformationStatusOrEmpty, IcSizes, IcDateFormat, IcDateValueFormat, IcWeekDays, IcThemeMode } from "../../utils/types";
 /**
  * @slot helper-text - Content is set as the helper text for the date input.
  */
@@ -159,7 +159,7 @@ export declare class DateInput {
     /**
      * The value of the date input. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
      */
-    value?: string | Date | null | undefined;
+    value?: IcDateValueFormat;
     /**
      * The value of the `aria-live` attribute on the validation message.
      */

package/dist/types/components/ic-date-picker/ic-date-picker.d.ts

@@ -1,49 +1,24 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAriaLive, IcWeekDays, IcDateFormat, IcSizes, IcInformationStatusOrEmpty, IcThemeMode } from "../../utils/types";
+import { IcAriaLive, IcWeekDays, IcDateFormat, IcDateValueFormat, IcSizes, IcInformationStatusOrEmpty, IcThemeMode } from "../../utils/types";
 /**
  * @slot helper-text - Content is set as the helper text for the date picker.
  */
 export declare class DatePicker {
+    private calendarEl?;
     private inputEl?;
-    private clearButtonEl;
+    private calendarProps;
     private dateInputProps;
-    private daysOfWeek;
-    private dayButtonFocussed;
-    private dayPickerKeyboardNav;
-    private decadeStart;
-    private decadeEnd;
-    private dialogDescription;
-    private focusDay;
-    private focussedYearEl;
-    private liveRegionEl?;
-    private monthButtonEl;
-    private monthNames;
-    private monthInViewUpdateHandled;
     private myCalendarButtonClicked;
+    private hostMutationObserver;
     private showPickerAbove;
-    private today;
-    private todayButtonEl;
-    private yearButtonEl;
-    private yearButtonFocussed;
     el: HTMLIcDatePickerElement;
     calendarOpen: boolean;
-    currMonthView: Date[];
-    currYearPickerView: number[];
-    decadeView: number[];
-    focussedDate: Date | null;
-    focussedDay: number;
-    focussedDayEl: HTMLButtonElement;
-    focussedMonth: number;
-    focussedMonthEl: HTMLIcButtonElement;
-    focussedYear: number;
     maxDate: Date | null;
     minDate: Date | null;
     monthInView: number;
     monthPickerVisible: boolean;
     orderedDaysOfWeek: string[];
     selectedDate: Date | null;
-    yearInView: number;
-    yearPickerVisible: boolean;
     /**
      * The format in which the date will be displayed.
      */
@@ -53,10 +28,6 @@ export declare class DatePicker {
      */
     disabled: boolean;
     watchDisabledHandler(): void;
-    /**
-     *  If `true`, every individual input field completed will emit an icChange event.
-     */
-    emitDatePartChange?: boolean;
     /**
      * The days of the week to disable.
      */
@@ -83,6 +54,10 @@ export declare class DatePicker {
      * The text to display as the validation message when `disablePast` is `true` and a date in the past is entered.
      */
     disablePastMessage?: string;
+    /**
+     *  If `true`, every individual input field completed will emit an icChange event.
+     */
+    emitDatePartChange?: boolean;
     /**
      * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
      */
@@ -157,7 +132,6 @@ export declare class DatePicker {
      * Default is Monday.
      */
     startOfWeek: IcWeekDays;
-    watchStartOfWeekHandler(): void;
     /**
      * Sets the date picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
      */
@@ -177,90 +151,33 @@ export declare class DatePicker {
     /**
      * The value of the date picker. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
      */
-    value?: string | Date | null | undefined;
+    value?: IcDateValueFormat;
     watchOpenHandler(): void;
-    watchFocussedDateHandler(current: Date, previous: Date): void;
-    watchMonthInViewHandler(): void;
-    watchYearInViewHandler(): void;
-    watchYearPickerVisibleHandler(): void;
-    watchMonthPickerVisibleHandler(): void;
-    watchFocussedDayEl(): void;
     /**
      * Emitted when the value has changed.
      */
     icChange: EventEmitter<{
-        value: Date;
+        value: Date | null;
+        dateObject?: {
+            day: string | null;
+            month: string | null;
+            year: string | null;
+        };
+        utcValue: Date | null;
     }>;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     componentWillRender(): void;
     componentWillUpdate(): void;
-    localCalendarButtonClickHandler(ev: CustomEvent<{
-        value: Date | null;
-    }>): void;
+    localCalendarButtonClickHandler(): void;
     calendarButtonClickHandler(): void;
-    private setDecadeView;
-    private setSelectedDate;
-    private handleCalendarMouseDown;
-    private handleCalendarClick;
+    handleCalendarDaySelect(): void;
+    dateChangeHandler(ev: CustomEvent): void;
+    private updateDate;
     private handleDocumentClick;
     private keyDownHandler;
     private closeButtonClickHandler;
-    private focusFirstElement;
-    private focusLastElement;
-    private focusFocussedDay;
-    private monthButtonClickHandler;
-    private yearButtonClickHandler;
-    private todayButtonClickHandler;
-    private todayButtonKeyDownHandler;
-    private clearButtonClickHandler;
-    private setMonthSelectedLiveRegionText;
-    private setYearSelectedLiveRegionText;
-    private getMonthInViewText;
-    private getDecadeInViewText;
-    private setAriaLiveRegionText;
-    private clearDialogDescription;
-    private clearButtonKeyDownHandler;
-    private goToPreviousMonth;
-    private goToNextMonth;
-    private goToPreviousYear;
-    private goToNextYear;
-    private navButtonMouseDownHandler;
-    private renderMonthYearNavButton;
-    private monthYearNavClickHandler;
-    private previousMonthButton;
-    private nextMonthButton;
-    private previousYearButton;
-    private nextYearButton;
-    private isPrevYearAllowed;
-    private isNextYearAllowed;
-    private isYearAllowed;
-    private getMonthView;
-    private isCurrentMonth;
-    private updateMonthInView;
-    private handleSelectDay;
-    private handleSelectMonth;
-    private handleSelectYear;
-    private monthPickerKeyDownHandler;
-    private yearPickerKeyDownHandler;
-    private onYearButtonFocusHandler;
-    private onYearButtonBlurHandler;
-    private monthButtonKeyDownHandler;
-    private yearButtonKeyDownHandler;
-    private handleCalendarKeyDown;
-    private calendarTabHandler;
-    private onDayButtonFocusHandler;
-    private onDayButtonBlurHandler;
-    private getNextDayToFocus;
-    private moveDays;
-    private moveMonths;
-    private moveYears;
-    private updateFocussedMonth;
-    private updateFocussedYear;
-    private setFocussedDate;
-    private setFocussedDayEl;
-    private setFocussedMonthEl;
-    private setFocussedYearEl;
-    private setFocussedYear;
+    private setCalendarProps;
     private setDateInputProps;
     render(): any;
 }

package/dist/types/components/ic-date-picker/ic-date-picker.stories.d.ts

@@ -157,4 +157,85 @@ export namespace CalendarOpensAboveInput {
     let height_18: string;
     export { height_18 as height };
 }
+export namespace Playground {
+    export function render_19(args: any): import("lit-html").TemplateResult<1>;
+    export { render_19 as render };
+    let name_19: string;
+    export { name_19 as name };
+    export { defaultArgs as args };
+    export let argTypes: {
+        "date-format": {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            control: string;
+            options: string[];
+        };
+        "start-of-week": {
+            options: string[];
+            mapping: {
+                Sunday: number;
+                Monday: number;
+                Tuesday: number;
+                Wednesday: number;
+                Thursday: number;
+                Friday: number;
+                Saturday: number;
+            };
+            control: {
+                type: string;
+                labels: {
+                    Sunday: string;
+                    Monday: string;
+                    Tuesday: string;
+                    Wednesday: string;
+                    Thursday: string;
+                    Friday: string;
+                    Saturday: string;
+                };
+            };
+        };
+        theme: {
+            control: string;
+            options: string[];
+        };
+        "validation-status": {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+}
 import readme from "./readme.md";
+declare const defaultArgs: {
+    "date-format": string;
+    disabled: boolean;
+    "disable-days": never[];
+    "disable-days-message": string;
+    "disable-future": boolean;
+    "disable-future-message": string;
+    "disable-past": boolean;
+    "disable-past-message": string;
+    "helper-text": string;
+    "hide-helper-text": boolean;
+    "hide-label": boolean;
+    "invalid-date-message": string;
+    label: string;
+    max: string;
+    min: string;
+    "open-at-date": string;
+    required: boolean;
+    "show-days-outside-month": boolean;
+    "show-picker-clear-button": boolean;
+    "show-picker-today-button": boolean;
+    size: string;
+    "start-of-week": number;
+    theme: string;
+    "validation-status": string;
+    "validation-text": string;
+    value: string;
+};

package/dist/types/components/ic-pagination-bar/ic-pagination-bar.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcThemeMode } from "@ukic/web-components";
+import { IcThemeMode } from "../../utils/types";
 import { IcItemsPerPageChangeEventDetail, IcPageChangeEventDetail } from "./ic-pagination-bar.types";
 import { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 export declare class PaginationBar {

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAriaLive, IcDisableTimeSelection, IcInformationStatusOrEmpty, IcSizes, IcThemeMode, IcTimeFormat } from "../../utils/types";
+import { IcAriaLive, IcDateValueFormat, IcDisableTimeSelection, IcInformationStatusOrEmpty, IcSizes, IcThemeMode, IcTimeFormat } from "../../utils/types";
 /**
  * @slot helper-text - Content is set as the helper text for the time input.
  */
@@ -130,7 +130,7 @@ export declare class TimeInput {
     /**
      * The value of the time input. 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;
+    value?: IcDateValueFormat;
     /**
      * The value of the `aria-live` attribute on the validation message.
      */