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

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

@@ -1,24 +1,7 @@
-import { EventEmitter } from "../../stencil-public-runtime";
-import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail } from "./ic-data-table.types";
+import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./ic-data-table.types";
 import { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "../ic-pagination/ic-pagination.types";
-import { IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
-/**
- * @slot empty-state - Content is slotted below the table header when there is no data and the table is not loading.
- * @slot {COLUMN_KEY}-{ROW_INDEX}[-icon] - Each cell should have its own slot, named using the column tag and the row index, allowing for custom elements to be displayed. Include `-icon` at the end for that cell's icon slot.
- * @slot {COLUMN_KEY}-column-icon - The icon slot for a column header.
- * @slot title-bar - A custom ic-data-table-title-bar can be slotted above the column headers to display additional information about the table.
- */
 export declare class DataTable {
-    private DENSITY_HEIGHT_MULTIPLIER;
-    private DENSITY_PADDING_HEIGHT_DIFF;
     private SORT_ICONS;
-    private currentRowHeight;
-    private dataIsSorted;
-    private hasLoadedForOneSecond;
-    private itemsPerPageChanged;
-    private loadingIndicator;
-    private timerStarted;
-    private updateTruncation;
     el: HTMLIcDataTableElement;
     fromRow: number;
     previousRowsPerPage: number;
@@ -51,35 +34,10 @@ export declare class DataTable {
      * Applies a border to the table container.
      */
     embedded?: boolean;
-    /**
-     * Sets the row height on all rows in the table that aren't set using the variableRowHeight method.
-     */
-    globalRowHeight?: IcDataTableRowHeights;
     /**
      * If `true`, column headers will not be visible.
      */
     hideColumnHeaders?: boolean;
-    /**
-     * When set to `true`, the full table will show a loading state, featuring a radial indicator.
-     */
-    loading?: boolean;
-    /**
-     * Sets the props for the circular loading indicator used in the loading state.
-     */
-    loadingOptions?: {
-        appearance?: IcThemeForegroundNoDefault;
-        description?: string;
-        label?: string;
-        labelDuration?: number;
-        max?: number;
-        min?: number;
-        progress?: number;
-        showBackground?: boolean;
-    };
-    /**
-     * The minimum amount of time the `loading` state displays for before showing the data. Used to prevent flashing in the component.
-     */
-    minimumLoadingDisplayDuration?: number;
     /**
      * Sets the props for the pagination bar.
      */
@@ -117,70 +75,17 @@ export declare class DataTable {
      * If `true`, row headers will remain to the left when scrolling horizontally.
      */
     stickyRowHeaders?: boolean;
-    /**
-     * For long text in cells that aren't set to textWrap, define how they should be truncated.
-     * `tooltip` adds a tooltip for the rest of the text, `showHide` adds the ic-typography "See More"/"See Less" buttons.
-     */
-    truncationPattern?: IcDataTableTruncationTypes;
-    /**
-     * If `true`, the table displays a linear loading indicator below the header row to indicate an updating state.
-     */
-    updating?: boolean;
-    /**
-     * Sets the props for the linear loading indicator used in the updating state.
-     */
-    updatingOptions?: {
-        appearance?: IcThemeForegroundNoDefault;
-        description?: string;
-        max?: number;
-        min?: number;
-        progress?: number;
-    };
-    /**
-     * Allows for custom setting of row heights on individual rows based on an individual value from the `data` prop and the row index.
-     * If the function returns `null`, that row's height will be set to the `globalRowHeight` property.
-     */
-    variableRowHeight?: (params: {
-        [key: string]: any;
-        index: number;
-    }) => IcDataTableRowHeights | null;
-    /**
-     * Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table.
-     */
-    icRowHeightChange: EventEmitter<void>;
     componentWillLoad(): void;
     componentDidLoad(): void;
-    componentDidUpdate(): void;
-    private removeDivStyles;
-    private VERTICAL_CLASSES;
-    private removeVerticalAlignment;
-    private setMaxLines;
-    private resetMaxLines;
-    private dataTruncation;
     handleItemsPerPageChange(ev: CustomEvent): void;
     handlePageChange(ev: CustomEvent): void;
-    handleDensityChange(ev: CustomEvent<IcDensityUpdateEventDetail>): void;
     clickListener(ev: MouseEvent): void;
-    loadingHandler(newValue: boolean): void;
-    dataHandler(newData: {
-        [key: string]: any;
-    }[]): void;
-    rowHeightChangeHandler(): void;
-    /**
-     * Resets the `globalRowHeight` prop to `40px` and sets the `variableRowHeight` prop to `null`.
-     */
-    resetRowHeights(): Promise<void>;
-    private showLoadingIndicator;
-    private startLoadingTimer;
     private isObject;
     private notDefaultDensity;
     private getCellContent;
     private getCellAlignment;
-    private createUpdatingIndicator;
-    private setRowHeight;
     private createCells;
     private createColumnHeaders;
-    private onRowClick;
     private createRows;
     private getObjectValue;
     private getSortButtonLabel;

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 {};