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

package/dist/types/components/ic-data-table/ic-data-table.types.d.ts

@@ -9,18 +9,7 @@ export type IcDataTableColumnObject = {
         horizontal?: string;
         vertical?: string;
     };
-    textWrap?: boolean;
     cellAlignment?: string;
     emphasis?: string;
     colspan?: number;
-    icon?: {
-        icon: string;
-        onAllCells?: boolean;
-        hideOnHeader?: boolean;
-    };
 };
-export type IcDataTableRowHeights = number | "auto";
-export interface IcDensityUpdateEventDetail {
-    value: IcDataTableDensityOptions;
-}
-export type IcDataTableTruncationTypes = "tooltip" | "showHide";

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

@@ -8,42 +8,6 @@ export declare const DATA: {
     jobTitle: string;
     address: string;
 }[];
-export declare const COLUMNS_NO_TEXT_WRAP: IcDataTableColumnObject[];
-export declare const LONG_DATA_VALUES: ({
-    name: string;
-    age: number;
-    department: string;
-    employeeNumber: number;
-    jobTitle: string;
-    textWrap?: undefined;
-} | {
-    name: string;
-    age: number;
-    department: string;
-    employeeNumber: number;
-    jobTitle: string;
-    textWrap: boolean;
-} | {
-    name: string;
-    age: string;
-    department: string;
-    employeeNumber: number;
-    jobTitle: string;
-    textWrap?: undefined;
-})[];
-export declare const LONG_DATA_VALUES_UPDATE: ({
-    name: string;
-    age: number;
-    department: string;
-    employeeNumber: number;
-    jobTitle: string;
-} | {
-    name: string;
-    age: string;
-    department: string;
-    employeeNumber: number;
-    jobTitle: string;
-})[];
 export declare const DATA_CELL_ALIGNMENT: ({
     firstName: {
         data: string;
@@ -88,41 +52,6 @@ export declare const ROW_ALIGNMENT: ({
     address: string;
 })[];
 export declare const LONG_COLS: IcDataTableColumnObject[];
-export declare const ICON_COLS: IcDataTableColumnObject[];
-export declare const ICON_DATA: ({
-    firstName: {
-        data: string;
-        icon: string;
-    };
-    lastName: string;
-    age: number;
-    jobTitle: string;
-    address: string;
-} | {
-    firstName: string;
-    lastName: {
-        data: string;
-        icon: string;
-    };
-    age: number;
-    jobTitle: string;
-    address: string;
-} | {
-    firstName: string;
-    lastName: string;
-    age: number;
-    jobTitle: string;
-    address: string;
-} | {
-    firstName: string;
-    lastName: string;
-    age: number;
-    jobTitle: {
-        data: string;
-        icon: string;
-    };
-    address: string;
-})[];
 export declare const LONG_DATA: {
     employeeNumber: number;
     name: string;
@@ -160,24 +89,6 @@ export declare const DATA_ELEMENTS: ({
     address: string;
     actions: string;
 })[];
-export declare const DATA_REACT_ELEMENTS: ({
-    firstName: {
-        data: string;
-        href: string;
-    };
-    lastName: string;
-    age: number;
-    jobTitle: string;
-    address: string;
-    actions: string;
-} | {
-    firstName: string;
-    lastName: string;
-    age: number;
-    jobTitle: string;
-    address: string;
-    actions: string;
-})[];
 export declare const createDataTableElement: (caption: string, columns?: IcDataTableColumnObject[], data?: object[]) => HTMLIcDataTableElement;
 export declare const Basic: () => HTMLIcDataTableElement;
 export declare const Embedded: () => HTMLIcDataTableElement;
@@ -192,13 +103,3 @@ export declare const ColumnOverrides: () => HTMLIcDataTableElement;
 export declare const RowOverrides: () => HTMLIcDataTableElement;
 export declare const CellOverrides: () => HTMLIcDataTableElement;
 export declare const LinksHTMLElements: () => HTMLIcDataTableElement;
-export declare const Empty: () => HTMLIcDataTableElement;
-export declare const EmptySlotted: () => HTMLIcDataTableElement;
-export declare const Loading: () => HTMLIcDataTableElement;
-export declare const EmptyLoading: () => HTMLIcDataTableElement;
-export declare const Updating: () => HTMLIcDataTableElement;
-export declare const CustomIcons: () => HTMLIcDataTableElement;
-export declare const CustomRowHeights: () => HTMLElement;
-export declare const TruncationShowHide: () => HTMLElement;
-export declare const TruncationTooltip: () => HTMLElement;
-export declare const CustomTitleBar: () => HTMLIcDataTableElement;

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

@@ -0,0 +1,251 @@
+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;
+    /**
+     * 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;
+    /**
+     * The ID for the input.
+     */
+    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;
+    /**
+     * 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/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,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>;