@ukic/canary-web-components 2.0.0-canary.9 → 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

@@ -32,6 +32,7 @@ export declare class DateInput {
     private preventMonthInput;
     private preventYearInput;
     private previousInvalidDateTest;
+    private previousEmittedDate;
     private previousSelectedDate;
     private selectedDate;
     private selectedDateInfoEl;
@@ -68,6 +69,7 @@ export declare class DateInput {
      * 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.
      */
@@ -76,6 +78,7 @@ export declare class DateInput {
      * 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.
      */
@@ -84,10 +87,18 @@ export declare class DateInput {
      * 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.
      */
@@ -112,6 +123,7 @@ export declare class DateInput {
      * 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.
      */
@@ -178,6 +190,10 @@ export declare class DateInput {
      * @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;
     /**
@@ -238,5 +254,6 @@ export declare class DateInput {
     private handleCalendarBlur;
     private handleClearFocus;
     private handleClearBlur;
+    private emitIcChange;
     render(): any;
 }

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

@@ -1,31 +1,9 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcWeekDays, IcDateFormat, IcSizes, IcInformationStatusOrEmpty } from "../../utils/types";
-interface IcDateInputProps {
-    dateFormat?: IcDateFormat;
-    disabled?: boolean;
-    disableDays?: IcWeekDays[];
-    disableDaysMessage?: string;
-    disableFuture?: boolean;
-    disableFutureMessage?: string;
-    disablePast?: boolean;
-    disablePastMessage?: string;
-    helperText?: string;
-    inputId?: string;
-    label: string;
-    max?: string | Date;
-    min?: string | Date;
-    name?: string;
-    required?: boolean;
-    showClearButton?: boolean;
-    showCalendarButton?: boolean;
-    size?: IcSizes;
-    value?: string | Date;
-    validationStatus?: IcInformationStatusOrEmpty;
-    validationText?: string;
-}
 export declare class DatePicker {
     private inputEl;
     private clearButtonEl;
+    private dateInputProps;
     private daysOfWeek;
     private dayButtonFocussed;
     private dayPickerKeyboardNav;
@@ -48,7 +26,6 @@ export declare class DatePicker {
     calendarOpen: boolean;
     currMonthView: Date[];
     currYearPickerView: number[];
-    dateInputProps: IcDateInputProps;
     decadeView: number[];
     focussedDate: Date;
     focussedDay: number;
@@ -84,6 +61,7 @@ export declare class DatePicker {
      * 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.
      */
@@ -92,6 +70,7 @@ export declare class DatePicker {
      * 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.
      */
@@ -100,10 +79,18 @@ export declare class DatePicker {
      * 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 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.
      */
@@ -154,6 +141,7 @@ export declare class DatePicker {
      * Default is Monday.
      */
     startOfWeek?: IcWeekDays;
+    watchStartOfWeekHandler(): void;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
      */
@@ -180,6 +168,8 @@ export declare class DatePicker {
         value: Date;
     }>;
     componentWillLoad(): void;
+    componentWillRender(): void;
+    componentWillUpdate(): void;
     localCalendarButtonClickHandler(ev: CustomEvent): void;
     calendarButtonClickHandler(): void;
     private setDecadeView;
@@ -248,4 +238,3 @@ export declare class DatePicker {
     private setDateInputProps;
     render(): any;
 }
-export {};

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

@@ -12,12 +12,15 @@ export declare class Menu {
     private isMultiSelect;
     private isSearchBar;
     private isSearchableSelect;
+    private lastOptionSelected;
+    private lastOptionFocused;
     private menu;
     private multiOptionClicked;
     private popperInstance;
     private preventClickOpen;
     private preventMenuFocus;
     private selectAllButton;
+    private shiftPressed;
     private ungroupedOptions;
     el: HTMLIcMenuWithMultiElement;
     focusFromSearchKeypress: boolean;
@@ -83,10 +86,6 @@ export declare class Menu {
      * The size of the menu.
      */
     size?: IcSizes;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * The possible menu selection options.
      */
@@ -178,6 +177,8 @@ export declare class Menu {
     private setHighlightedOption;
     private autoSetInputValueKeyboardOpen;
     private selectHighlightedOption;
+    private isOptionSelected;
+    private deselectSelectedOptions;
     private manualSetInputValueKeyboardOpen;
     private setInputValue;
     private handleOptionClick;
@@ -191,12 +192,17 @@ export declare class Menu {
     private handleSelectAllBlur;
     private handleSelectAllFocus;
     private handleSelectAllMouseDown;
+    private handleSingleShiftSelect;
+    private handleMultipleShiftSelect;
+    private handleOptionSelect;
+    private getFirstOptionInSelection;
     private emitSelectAll;
     private emitMenuKeyPress;
     private autoSetValueOnMenuKeyDown;
     private getOptionId;
     private getOptionAriaLabel;
     private getSortedOptions;
+    private getOptionHighlightedIndex;
     private isManualMode;
     private scrollToSelected;
     private loadUngroupedOptions;

package/dist/types/components/ic-pagination-bar/ic-pagination-bar.d.ts

@@ -1,20 +1,29 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
-import { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "../ic-pagination/ic-pagination.types";
+import { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 export declare class PaginationBar {
-    private PAGINATION;
-    private TEXT_FIELD;
-    private TOOLTIP;
     private PAGE_INPUT_FIELD_ID;
     private INVALID_PAGE_ERROR;
-    private NAN_ERROR;
     private resizeObserver;
+    private pageDropdownEl;
+    private pageInputEl;
+    private pageInputTooltipEl;
     private paginationBarEl;
+    private paginationEl;
     el: HTMLIcPaginationBarElement;
+    capitalizedItemLabel: string;
+    capitalizedPageLabel: string;
     currentPage: number;
+    displayedItemsPerPageOptions?: {
+        label: string;
+        value: string;
+    }[];
     inputError: string;
-    itemsPerPage: string;
+    itemsPerPage: number;
+    itemsPerPageString: string;
     lowerBound: number;
+    lowerCaseItemLabel: string;
+    lowerCasePageLabel: string;
     paginationWidth: number;
     paginationWrapped: boolean;
     totalPages: number;
@@ -28,9 +37,10 @@ export declare class PaginationBar {
      */
     appearance?: IcThemeForeground;
     /**
-     * The label which will be used in place of 'items' if paginationType is data. Should be capitalised.
+     * The text which will be used in place of 'Item' on the pagination bar.
      */
     itemLabel?: string;
+    watchItemLabelHandler(): void;
     /**
      * The options which will be displayed for 'items per page' select input. Set a maximum of 4 options including a required 'All' option with value equal to total number of items.
      */
@@ -38,26 +48,34 @@ export declare class PaginationBar {
         label: string;
         value: string;
     }[];
+    watchItemsPerPageOptionsHandler(newVal: {
+        label: string;
+        value: string;
+    }[], oldVal: {
+        label: string;
+        value: string;
+    }[]): void;
     /**
      * Whether the displayed pagination is simple or complex.
      */
-    paginationControl?: IcPaginationControlTypes;
+    type?: IcPaginationTypes;
     /**
      * Whether total number of items and current item range or total number of pages and current page is displayed.
      */
-    paginationType?: IcPaginationTypes;
+    rangeLabelType?: IcPaginationLabelTypes;
     /**
-     * The label which will be used in place of 'Page' if paginationType is page. Should be capitalised.
+     * The text which will be used in place of 'Page' on the pagination bar.
      */
     pageLabel?: string;
+    watchPageLabelHandler(): void;
     /**
      * If `true`, the 'go to page' control should be displayed.
      */
     showGoToPageControl?: boolean;
     /**
-     * If `true`, the number of total items and current item range or number of total pages and current page should be displayed.
+     * If `true`, the number of total items and current item range or number of total pages and current page will be hidden.
      */
-    showItemsPerPage?: boolean;
+    hideRangeLabel?: boolean;
     /**
      * If `true`, the select input to control 'items per page' should be displayed.
      */
@@ -66,6 +84,7 @@ export declare class PaginationBar {
      * Total number of items to be displayed across all pages.
      */
     totalItems: number;
+    watchTotalItemsHandler(): void;
     /**
      * Emitted when a page is navigated to via the 'go to' input.
      */
@@ -84,20 +103,20 @@ export declare class PaginationBar {
     pageChangeHandler(ev: CustomEvent): void;
     private changeItemsPerPage;
     private changePage;
+    private focusElFromLabel;
     private goToPage;
+    private goToPageLabelClickHandler;
     private handleBlur;
     private handleFocus;
     private handleInputChange;
     private handleKeydown;
     private handleKeyUp;
+    private itemsPerPageLabelClickHandler;
     private paginationShouldWrap;
-    private resizeObserverCallback;
     private runResizeObserver;
-    private setDefaultItemsPerPage;
-    private setDefaultItemsPerPageOptions;
-    private setGoToPageInputStyles;
-    private setNumberPages;
+    private setInputError;
+    private setItemsPerPage;
+    private setPaginationBarContent;
     private setUpperBound;
-    private trimItemsPerPageOptions;
     render(): any;
 }