@ukic/canary-web-components 2.0.0-canary.8 → 3.0.0-canary.1

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

@@ -1,5 +1,79 @@
 import { IcDataTableColumnObject } from "./ic-data-table.types";
 export declare const COLS: IcDataTableColumnObject[];
+export declare const COLS_WIDTH: IcDataTableColumnObject[];
+export declare const VERY_LONG_DATA: (rows?: number) => {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+    rowOptions: {
+        textWrap: boolean;
+    };
+}[];
+export declare const textWrapColumns: () => IcDataTableColumnObject[];
+export declare const textWrapRow: () => ({
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+} | {
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+} | {
+    rowOptions: {
+        textWrap: boolean;
+    };
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+} | {
+    rowOptions: {
+        textWrap: boolean;
+    };
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+})[];
+export declare const textWrapCell: () => ({
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+} | {
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+} | {
+    jobTitle: {
+        data: string;
+        textWrap: boolean;
+    };
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+} | {
+    jobTitle: {
+        data: string;
+        textWrap: boolean;
+    };
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+})[];
 export declare const COLS_ALIGNMENT: IcDataTableColumnObject[];
 export declare const DATA: {
     firstName: string;
@@ -8,6 +82,75 @@ export declare const DATA: {
     jobTitle: string;
     address: string;
 }[];
+export declare const LONG_TEXT: {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+}[];
+export declare const TEXT_WRAP_LONG_DATA: ({
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: {
+        data: string;
+        textWrap: boolean;
+    };
+    rowOptions?: undefined;
+} | {
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+    rowOptions?: undefined;
+} | {
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+    rowOptions: {
+        textWrap: boolean;
+    };
+} | {
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+    rowOptions?: undefined;
+})[];
+export declare const COLUMNS_NO_TEXT_WRAP: IcDataTableColumnObject[];
+export declare const COLUMNS_TEXT_WRAP: IcDataTableColumnObject[];
+export declare const LONG_DATA_VALUES: ({
+    name: string;
+    age: number;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+} | {
+    name: string;
+    age: string;
+    department: string;
+    employeeNumber: number;
+    jobTitle: string;
+})[];
+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;
@@ -52,6 +195,66 @@ export declare const ROW_ALIGNMENT: ({
     address: string;
 })[];
 export declare const LONG_COLS: IcDataTableColumnObject[];
+export declare const ICON_COLS: IcDataTableColumnObject[];
+export declare const ICON_DATA_LONG_VALUES: ({
+    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;
+})[];
+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;
@@ -72,25 +275,41 @@ export declare const ROW_HEADER_DATA: {
 }[];
 export declare const COLS_ELEMENTS: IcDataTableColumnObject[];
 export declare const DATA_ELEMENTS: ({
+    actions: string;
     firstName: {
         data: string;
         href: string;
     };
-    lastName: string;
+    actions2: string;
     age: number;
     jobTitle: string;
     address: string;
+} | {
     actions: string;
+    firstName: string;
+    actions2: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
+export declare const DATA_REACT_ELEMENTS: ({
+    firstName: {
+        data: string;
+        href: string;
+    };
+    age: number;
+    jobTitle: string;
+    address: 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 DataTableSizing: () => HTMLElement;
+export declare const LargeDataSet: () => HTMLIcDataTableElement;
 export declare const Embedded: () => HTMLIcDataTableElement;
 export declare const Dense: () => HTMLElement;
 export declare const Spacious: () => HTMLElement;
@@ -103,3 +322,17 @@ 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 TruncationTextWrap: () => HTMLElement;
+export declare const TruncationTooltip: () => HTMLElement;
+export declare const CustomTitleBar: () => HTMLIcDataTableElement;
+export declare const UpdatingData: () => HTMLElement;
+export declare const SlottedPagination: () => HTMLIcDataTableElement;
+export declare const DevArea: () => HTMLElement;

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

@@ -0,0 +1,36 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcDensityUpdateEventDetail } from "../ic-data-table/ic-data-table.types";
+/**
+ * @slot primary-action - Render an interactive element that will perform a primary action. Renders to the right of the density select.
+ * @slot custom-actions - Render additional custom actions to the left of the density select.
+ * @slot heading - The heading to render on the data table title bar.
+ * @slot description - Render an alternative description in the description section.
+ */
+export declare class DataTableTitleBar {
+    private initialDensitySelectOption;
+    private isEmbedded;
+    el: HTMLIcDataTableTitleBarElement;
+    /**
+     * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.
+     */
+    description?: string;
+    /**
+     * The heading of the title bar. Can be overridden with the `heading` slot. If used with an `ic-data-table` it will default to the table's `caption` unless overridden.
+     */
+    heading?: string;
+    /**
+     * When `true`, the density select will not be rendered.
+     */
+    hideDensitySelect?: boolean;
+    /**
+     * The metadata displayed next to the `heading`.
+     */
+    metadata?: string;
+    /**
+     * Emitted when the table density select value is changed.
+     */
+    icTableDensityUpdate: EventEmitter<IcDensityUpdateEventDetail>;
+    componentWillLoad(): void;
+    private changeDensity;
+    render(): any;
+}

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

@@ -0,0 +1,259 @@
+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;
+    /**
+     * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
+     */
+    hideHelperText: 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/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 {};