@ukic/canary-web-components 2.0.0-canary.12 → 2.0.0-canary.13

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

@@ -0,0 +1,231 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcWeekDays, IcDateFormat, IcSizes, IcInformationStatusOrEmpty } from "../../utils/types";
+export declare class DatePicker {
+    private inputEl;
+    private clearButtonEl;
+    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 showPickerAbove;
+    private today;
+    private todayButtonEl;
+    private yearButtonEl;
+    private yearButtonFocussed;
+    el: HTMLIcDatePickerElement;
+    calendarOpen: boolean;
+    currMonthView: Date[];
+    currYearPickerView: number[];
+    decadeView: number[];
+    focussedDate: Date;
+    focussedDay: number;
+    focussedDayEl: HTMLButtonElement;
+    focussedMonth: number;
+    focussedMonthEl: HTMLIcButtonElement;
+    focussedYear: number;
+    maxDate: Date;
+    minDate: Date;
+    monthInView: number;
+    monthPickerVisible: boolean;
+    orderedDaysOfWeek: string[];
+    selectedDate: Date;
+    yearInView: number;
+    yearPickerVisible: boolean;
+    /**
+     * The format in which the date will be displayed.
+     */
+    dateFormat?: IcDateFormat;
+    /**
+     * If `true`, the disabled state will be set.
+     */
+    disabled?: boolean;
+    /**
+     * The days of the week to disable.
+     */
+    disableDays?: IcWeekDays[];
+    /**
+     * The text to display as the validation message when `disableDays` is `true` and a disabled date is entered.
+     */
+    disableDaysMessage?: string;
+    /**
+     * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
+     */
+    disableFuture?: boolean;
+    watchDisableFutureHandler(): void;
+    /**
+     * The text to display as the validation message when `disableFuture` is `true` and a date in the future is entered.
+     */
+    disableFutureMessage?: string;
+    /**
+     * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
+     */
+    disablePast?: boolean;
+    watchDisablePastHandler(): void;
+    /**
+     * The text to display as the validation message when `disablePast` is `true` and a date in the past is entered.
+     */
+    disablePastMessage?: string;
+    /**
+     * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
+     */
+    helperText?: string;
+    /**
+     * The ID for the input field. The default will be an automatically generated value.
+     */
+    inputId?: string;
+    /**
+     * The label for the date input.
+     */
+    label: string;
+    /**
+     * The latest date that will be allowed. 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.
+     * The value of this prop is ignored if `disableFuture` is set to `true`.
+     */
+    max?: string | Date;
+    watchMaxHandler(): void;
+    /**
+     * The earliest date that will be allowed. 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.
+     * The value of this prop is ignored if `disablePast` is set to `true`.
+     */
+    min?: string | Date;
+    watchMinHandler(): void;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name?: string;
+    /**
+     * The date visible when the calendar opens. Used if no date is currently selected.
+     * 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.
+     */
+    openAtDate: string | Date;
+    /**
+     * If `true`, the input will require a value.
+     */
+    required?: boolean;
+    /**
+     * If `true`, days outside the current month will be visible in the date picker.
+     */
+    showDaysOutsideMonth?: boolean;
+    /**
+     * If `true`, the `Clear` button on the date picker will be visible.
+     */
+    showPickerClearButton?: boolean;
+    /**
+     * If `true`, the `Go to today` button on the date picker will be visible.
+     */
+    showPickerTodayButton?: boolean;
+    /**
+     * The size of the date picker to be displayed.
+     */
+    size?: IcSizes;
+    /**
+     * The first day of the week. `0` for Sunday, `1` for Monday, etc.
+     * Default is Monday.
+     */
+    startOfWeek?: IcWeekDays;
+    /**
+     * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
+     */
+    validationStatus?: IcInformationStatusOrEmpty;
+    /**
+     * The text to display as the validation message. This will override the built-in date validation.
+     */
+    validationText?: string;
+    /**
+     * 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;
+    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;
+    }>;
+    componentWillLoad(): void;
+    componentWillRender(): void;
+    componentWillUpdate(): void;
+    localCalendarButtonClickHandler(ev: CustomEvent): void;
+    calendarButtonClickHandler(): void;
+    private setDecadeView;
+    private setSelectedDate;
+    private handleCalendarMouseDown;
+    private handleCalendarClick;
+    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 setDateInputProps;
+    render(): any;
+}

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

@@ -0,0 +1,16 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+export type DayButtonProps = {
+    focussed: boolean;
+    today: boolean;
+    day: Date;
+    monthInView: number;
+    onFocusDay: () => void;
+    onBlurDay: () => void;
+    onSelectDay: (day: Date) => void;
+    selected: boolean;
+    focussedDayRef?: (element: HTMLButtonElement) => void;
+    inRange: boolean;
+    showDaysOutsideMonth: boolean;
+    disableDay: boolean;
+};
+export declare const DayButton: FunctionalComponent<DayButtonProps>;

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

@@ -0,0 +1,14 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+import { IcSizes } from "../../utils/types";
+export type MonthPickerProps = {
+    size: IcSizes;
+    focussedMonth: number;
+    monthInView: number;
+    yearInView: number;
+    onSelectMonth: (month: number) => void;
+    onKeyDown: (ev: KeyboardEvent) => void;
+    focussedMonthRef: (element: HTMLIcButtonElement) => void;
+    minDate: Date;
+    maxDate: Date;
+};
+export declare const MonthPicker: FunctionalComponent<MonthPickerProps>;

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

@@ -0,0 +1,16 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+import { IcSizes } from "../../utils/types";
+export type YearPickerProps = {
+    decadeView: number[];
+    size: IcSizes;
+    focussedYear: number;
+    yearInView: number;
+    onSelectYear: (year: number) => void;
+    onKeyDown: (ev: KeyboardEvent) => void;
+    onFocusYear: () => void;
+    onBlurYear: () => void;
+    minDate: Date;
+    maxDate: Date;
+    focussedYearRef: (element: HTMLIcButtonElement) => void;
+};
+export declare const YearPicker: FunctionalComponent<YearPickerProps>;

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

@@ -0,0 +1,22 @@
+export declare const DATE_PICKER_LABEL = "When would you like to collect your coffee?";
+export declare const createDatePickerElement: () => HTMLIcDatePickerElement;
+export declare const Default: () => HTMLIcDatePickerElement;
+export declare const Small: () => HTMLIcDatePickerElement;
+export declare const Large: () => HTMLIcDatePickerElement;
+export declare const Sizes: () => HTMLElement;
+export declare const MaxWidth: () => HTMLElement;
+export declare const MonthFirst: () => HTMLIcDatePickerElement;
+export declare const YearFirst: () => HTMLIcDatePickerElement;
+export declare const DateFormats: () => HTMLElement;
+export declare const Value: () => HTMLIcDatePickerElement;
+export declare const OpenAt: () => HTMLIcDatePickerElement;
+export declare const WeekStart: () => HTMLIcDatePickerElement;
+export declare const WorkingWeek: () => HTMLIcDatePickerElement;
+export declare const MaxMin: () => HTMLIcDatePickerElement;
+export declare const Disabled: () => HTMLIcDatePickerElement;
+export declare const DisablePast: () => HTMLIcDatePickerElement;
+export declare const DisableFuture: () => HTMLIcDatePickerElement;
+export declare const HideOutsideMonth: () => HTMLIcDatePickerElement;
+export declare const HideButtons: () => HTMLIcDatePickerElement;
+export declare const JSDates: () => HTMLIcDatePickerElement;
+export declare const IcChangeDate: () => HTMLElement;

package/dist/types/components/ic-menu-with-multi/ic-menu.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcActivationTypes, IcMenuOption, IcSizes } from "@ukic/web-components/dist/types/utils/types";
+import { IcActivationTypes, IcMenuOption } from "@ukic/web-components/dist/types/utils/types";
 import { IcOptionSelectEventDetail, IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
-import { IcValueEventDetail } from "../../utils/types";
+import { IcValueEventDetail, IcSizes } from "../../utils/types";
 export declare class Menu {
     private activeDescendantAttr;
     private clearButtonId;

package/dist/types/components/ic-select-with-multi/ic-select.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcOptionSelectEventDetail } from "@ukic/web-components/dist/types/components";
-import { IcMenuOption, IcSizes } from "@ukic/web-components/dist/types/utils/types";
-import { IcInformationStatusOrEmpty, IcSearchMatchPositions, IcValueEventDetail } from "../../utils/types";
+import { IcMenuOption } from "@ukic/web-components/dist/types/utils/types";
+import { IcInformationStatusOrEmpty, IcSearchMatchPositions, IcValueEventDetail, IcSizes } from "../../utils/types";
 export declare class Select {
     private anchorEl;
     private blurredBecauseButtonPressed;