@ukic/canary-web-components 2.0.0-canary.4 → 2.0.0-canary.41

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

@@ -0,0 +1,264 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcInformationStatusOrEmpty, IcSizes, IcDateFormat, IcWeekDays } from "../../utils/types";
+export declare class DateInput {
+    private ARIA_INVALID;
+    private ARIA_LABEL;
+    private ARIA_LABELLED_BY;
+    private assistiveHintId;
+    private calendarButtonEl;
+    private dayInputEl;
+    private defaultHelperText;
+    private EVENT_OBJECT_STRING;
+    private FIT_TO_VALUE;
+    private initialValue;
+    private inputCompContainerEl;
+    private INPUT_EVENT_OBJECT_STRING;
+    private inputsInOrder;
+    private isAfterMax;
+    private isBeforeMin;
+    private isDateSetFromKeyboardEvent;
+    private isDisabledDate;
+    private isPasteValidationDisplayed;
+    private isValidDay;
+    private isValidMonth;
+    private isValidDate;
+    private isZuluTime;
+    private KEYBOARD_EVENT_OBJECT_STRING;
+    private MAX_DAY;
+    private MAX_MONTH;
+    private monthInputEl;
+    private preventAutoFormatting;
+    private preventDayInput;
+    private preventMonthInput;
+    private preventYearInput;
+    private previousInvalidDateTest;
+    private previousEmittedDate;
+    private previousSelectedDate;
+    private selectedDate;
+    private selectedDateInfoEl;
+    private screenReaderInfoId;
+    private selectedDateInfoId;
+    private yearInputEl;
+    el: HTMLIcDateInputElement;
+    day: string;
+    invalidDateText: string;
+    maxDate: Date;
+    minDate: Date;
+    month: string;
+    year: string;
+    calendarFocused: boolean;
+    clearButtonFocused: boolean;
+    removeLabelledBy: boolean;
+    /**
+     * The format in which the date will be displayed.
+     */
+    dateFormat?: IcDateFormat;
+    /**
+     * If `true`, the disabled state will be set.
+     */
+    disabled?: boolean;
+    watchDisabledHandler(): void;
+    /**
+     * The days of the week to disable.
+     */
+    disableDays?: IcWeekDays[];
+    /**
+     * The text to display as the validation message when `disableDays` is set 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;
+    /**
+     * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
+     */
+    hideHelperText: boolean;
+    /**
+     * If `true`, the label will be visually hidden, but will still be read out by screen readers.
+     */
+    hideLabel?: boolean;
+    /**
+     * The ID for the input.
+     */
+    inputId?: string;
+    /**
+     * The text to display as the validation message when an invalid date is entered.
+     */
+    invalidDateMessage?: 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;
+    /**
+     * If `true`, the input will require a value.
+     */
+    required?: boolean;
+    watchRequiredHandler(): void;
+    /**
+     * @internal If `true`, a button which displays the calendar view when clicked will be displayed.
+     */
+    showCalendarButton?: boolean;
+    /**
+     * If `true`, a button which clears the date input when clicked will be displayed.
+     */
+    showClearButton?: boolean;
+    /**
+     * The size of the date input to be displayed.
+     */
+    size?: IcSizes;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * @internal Emitted when the calendar is opened.
+     */
+    calendarButtonClicked: EventEmitter<{
+        value: Date;
+    }>;
+    /**
+     * Emitted when the input loses focus.
+     */
+    icBlur: EventEmitter<{
+        value: Date;
+    }>;
+    /**
+     * Emitted when the value has changed.
+     */
+    icChange: EventEmitter<{
+        value: Date;
+    }>;
+    /**
+     * Emitted when the input gains focus.
+     */
+    icFocus: EventEmitter<{
+        value: Date;
+    }>;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentWillUpdate(): void;
+    componentDidRender(): void;
+    /**
+     * Returns the value as a Date object
+     * @returns Date
+     */
+    getDate(): Promise<Date>;
+    /**
+     * @internal Sets focus on the calendar button.
+     */
+    setCalendarFocus(): Promise<void>;
+    /**
+     * @internal Used to pass disabledDays from parent component.
+     */
+    setDisableDays(days: IcWeekDays[]): Promise<void>;
+    /**
+     * @internal Used to enable other components to invoke an IcChange event from the input.
+     */
+    triggerIcChange(d: Date): Promise<void>;
+    private setInputPasteValue;
+    private checkSingleCopiedValueIsValid;
+    /**
+     * Using Object.prototype.string to determine type if event from user
+     * @param event - event object used to differentiate keyboard, generic or input event
+     * @returns boolean
+     */
+    private isKeyboardOrEvent;
+    private setDateValidity;
+    private handleInput;
+    private handleKeyDown;
+    private handleFocus;
+    private handleBlur;
+    private handleLeftRightArrowKeyPress;
+    private notifyScreenReaderSelectedDate;
+    private handleUpDownArrowKeyPress;
+    private handleDateChange;
+    private slicePastedDate;
+    private isPastedStringDateValid;
+    private handlePaste;
+    private setDate;
+    private formatMinMax;
+    private updateInputValues;
+    private setInputValue;
+    private setValidationMessage;
+    private setInputsInOrder;
+    private setAriaLabelledBy;
+    private setPreventInput;
+    private getInputFromDatePart;
+    private getInputsInOrder;
+    private getDescOfInputsOrder;
+    private getScreenReaderInfo;
+    private preventInput;
+    private isSelectedDateDisabled;
+    private moveToNextInput;
+    private moveToPreviousInput;
+    private autocompleteInput;
+    private autocompleteYear;
+    private convertToDate;
+    private handleHostBlur;
+    private handleHostFocus;
+    private handleFormReset;
+    private getAriaLabel;
+    private notifyScreenReaderArrowKeys;
+    private removeAriaLabelledBy;
+    private setPastedValueAndValidation;
+    private pasteZuluDateTime;
+    private displayPastedValidation;
+    private setPasteInvalidText;
+    private notifyScreenReader;
+    private notifyScreenReaderInput;
+    private setFitToValueStyling;
+    private setAriaInvalid;
+    private handleClear;
+    private handleCalendarOpen;
+    private setValueAndEmitChange;
+    private handleCalendarFocus;
+    private handleCalendarBlur;
+    private handleClearFocus;
+    private handleClearBlur;
+    private emitIcChange;
+    render(): any;
+}

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

@@ -0,0 +1,124 @@
+/// <reference types="mdx" />
+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 WithHyphens {
+    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 EpochTime {
+    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 Required {
+    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 HideLabel {
+    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 Disabled {
+    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 Sizes {
+    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 CustomHelperText {
+    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 HideHelperText {
+    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 CustomValidation {
+    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 DisabledPastDates {
+    export function render_14(): import("lit-html").TemplateResult<1>;
+    export { render_14 as render };
+    let name_14: string;
+    export { name_14 as name };
+}
+export namespace DisabledFutureDates {
+    export function render_15(): import("lit-html").TemplateResult<1>;
+    export { render_15 as render };
+    let name_15: string;
+    export { name_15 as name };
+}
+export namespace MinAndMax {
+    export function render_16(): import("lit-html").TemplateResult<1>;
+    export { render_16 as render };
+    let name_16: string;
+    export { name_16 as name };
+}
+export namespace Form {
+    export function render_17(): HTMLFormElement;
+    export { render_17 as render };
+    let name_17: string;
+    export { name_17 as name };
+}
+export namespace WithClearingValue {
+    export function render_18(): import("lit-html").TemplateResult<1>;
+    export { render_18 as render };
+    let name_18: string;
+    export { name_18 as name };
+}
+import readme from "./readme.md";

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

@@ -0,0 +1 @@
+export declare const createDateInputForm: () => HTMLFormElement;

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

@@ -0,0 +1,23 @@
+import { SpecPage } from "@stencil/core/testing";
+interface EventType {
+    inputType: string;
+    target: HTMLInputElement;
+    data: string;
+}
+interface KeyboardEvent {
+    key: string;
+    preventDefault: () => void;
+}
+interface DateInputType {
+    page: SpecPage;
+    component: HTMLIcDateInputElement;
+    componentInstance: any;
+    dayInput: HTMLInputElement;
+    monthInput: HTMLInputElement;
+    yearInput: HTMLInputElement;
+}
+export declare const createDateInput: (format?: string) => Promise<SpecPage>;
+export declare const handleEvent: (input: HTMLInputElement) => EventType;
+export declare const keyboardEvent: (keyboardKey: string) => KeyboardEvent;
+export declare const createDateInputEnv: (format?: string) => Promise<DateInputType>;
+export {};

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

@@ -0,0 +1,262 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcDateFormat, IcInformationStatusOrEmpty, IcSizes, IcWeekDays } 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;
+    private selectedDateInfoEl;
+    private selectedDateInfoId;
+    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;
+    watchDisabledHandler(): void;
+    /**
+     * 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;
+    /**
+     * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
+     */
+    hideHelperText: boolean;
+    /**
+     * If `true`, the label will be visually hidden, but the required label will still be read out by screen readers.
+     */
+    hideLabel?: boolean;
+    /**
+     * The ID for the input field. The default will be an automatically generated value.
+     */
+    inputId?: string;
+    /**
+     * The text to display as the validation message when an invalid date is entered.
+     */
+    invalidDateMessage?: 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;
+    /**
+     * @deprecated This prop should not be used anymore. If `false` hides the date input control and just displays the calendar.
+     */
+    showDateInput?: boolean;
+    watchShowDateInputHandler(): void;
+    /**
+     * 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;
+    watchStartOfWeekHandler(): void;
+    /**
+     * 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;
+    }>;
+    /**
+     * Emitted when the selected date has changed.
+     */
+    icSelectedDateChange: EventEmitter<{
+        value: Date;
+    }>;
+    componentWillLoad(): void;
+    componentWillRender(): void;
+    componentWillUpdate(): void;
+    componentDidLoad(): void;
+    localCalendarButtonClickHandler(ev: CustomEvent): void;
+    calendarButtonClickHandler(): void;
+    private setDecadeView;
+    private notifyScreenReaderSelectedDate;
+    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;
+    private renderHiddenInput;
+    private renderCalendar;
+    render(): any;
+}