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

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

@@ -1,5 +1,80 @@
 import { IcDataTableColumnObject } from "./ic-data-table.types";
 export declare const COLS: IcDataTableColumnObject[];
+export declare const COLS_WIDTH: IcDataTableColumnObject[];
+export declare const COLS_EXCLUDE_SORT: 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 +83,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 +196,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;
@@ -71,35 +275,321 @@ export declare const ROW_HEADER_DATA: {
     };
 }[];
 export declare const COLS_ELEMENTS: IcDataTableColumnObject[];
+export declare const COLS_ELEMENTS_SINGLE_ACTION: IcDataTableColumnObject[];
 export declare const DATA_ELEMENTS: ({
+    actions: string;
     firstName: {
         data: string;
         href: string;
+        target: string;
+        rel: string;
     };
-    lastName: string;
+    actions2: string;
     age: number;
     jobTitle: string;
     address: string;
+} | {
     actions: string;
+    firstName: {
+        data: string;
+        href: string;
+        target?: undefined;
+        rel?: undefined;
+    };
+    actions2: string;
+    age: number;
+    jobTitle: string;
+    address: string;
 } | {
+    actions: string;
     firstName: string;
-    lastName: string;
+    actions2: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
+export declare const DATA_ELEMENTS_PAGINATION: ({
+    actions: string;
+    firstName: {
+        data: string;
+        href: string;
+        target: string;
+        rel: string;
+    };
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    actions: string;
+    firstName: {
+        data: string;
+        href: string;
+        target?: undefined;
+        rel?: undefined;
+    };
     age: number;
     jobTitle: string;
     address: string;
+} | {
     actions: string;
+    firstName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
+export declare const DATA_REACT_ELEMENTS: ({
+    firstName: {
+        data: string;
+        href: string;
+        target: string;
+        rel: string;
+    };
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        href: string;
+        target?: undefined;
+        rel?: undefined;
+    };
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
+export declare const DATA_REACT_ELEMENTS_PAGINATION: ({
+    firstName: {
+        data: string;
+        href: string;
+        target: string;
+        rel: string;
+    };
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        href: string;
+        target?: undefined;
+        rel?: undefined;
+    };
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
+export declare const DATA_REACT_ELEMENTS_WITH_ICONS: ({
+    firstName: {
+        data: string;
+        href: string;
+        icon: string;
+    };
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
+export declare const ACTION_DATA_ELEMENTS: ({
+    firstName: {
+        data: string;
+        actionElement: string;
+        actionOnClick: (event: Event) => void;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        actionElement: string;
+        actionOnClick?: undefined;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: {
+        data: string;
+        actionElement: string;
+    };
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        actionElement: string;
+        actionOnClick?: undefined;
+    };
+    lastName: string;
+    age: {
+        data: number;
+        actionElement: string;
+    };
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        actionElement: string;
+        actionOnClick?: undefined;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        actionElement: string;
+        actionOnClick?: undefined;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: {
+        data: string;
+        actionElement: string;
+    };
+})[];
+export declare const DATA_WITH_EMPTY_VALUES: {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+}[];
+export declare const LONG_DATA_ELEMENTS_WITH_DESCRIPTIONS: ({
+    firstName: {
+        data: string;
+        description: {
+            data: string;
+            icon: string;
+        };
+        actionElement: string;
+        icon: string;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        actionElement: string;
+        description?: undefined;
+        icon?: undefined;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        data: string;
+        description: {
+            data: string;
+            icon: string;
+        };
+        actionElement: string;
+        icon?: undefined;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: {
+        actionElement: string;
+        description: string;
+        data?: undefined;
+        icon?: undefined;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
+export declare const DATA_ELEMENTS_WITH_DESCRIPTIONS: ({
+    firstName: {
+        data: string;
+        description: {
+            data: string;
+            icon: string;
+        };
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: string;
+    age: {
+        data: number;
+        description: {
+            data: string;
+            icon: string;
+        };
+    };
+    jobTitle: {
+        data: string;
+        description: {
+            data: string;
+            icon: string;
+        };
+    };
+    address: 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;
 export declare const Scrollable: () => HTMLElement;
+export declare const HeaderTruncation: () => HTMLElement;
 export declare const RowHeaders: () => HTMLIcDataTableElement;
 export declare const Sort: () => HTMLIcDataTableElement;
 export declare const SortOptions: () => HTMLIcDataTableElement;
+export declare const DisableSort: () => HTMLIcDataTableElement;
+export declare const ExcludeColumnsFromSort: () => HTMLIcDataTableElement;
 export declare const Pagination: () => HTMLIcDataTableElement;
 export declare const ColumnOverrides: () => HTMLIcDataTableElement;
 export declare const RowOverrides: () => HTMLIcDataTableElement;
 export declare const CellOverrides: () => HTMLIcDataTableElement;
 export declare const LinksHTMLElements: () => HTMLIcDataTableElement;
+export declare const SlottedElementsWithPagination: () => 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 ActionElement: () => HTMLElement;
+export declare const MissingCellData: () => HTMLElement;
+export declare const TurnOffSelectedRowHighlighting: () => HTMLElement;
+export declare const SelectedRowChangeEvent: () => HTMLElement;
+export declare const DevArea: () => HTMLElement;
+export declare const CellDescriptions: () => HTMLIcDataTableElement;
+export declare const LongCellDescriptions: () => 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-data-table-title-bar/ic-data-table-title-bar.stories.d.ts

@@ -0,0 +1,47 @@
+/// <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 Basic {
+    function render(): import("lit-html").TemplateResult<1>;
+    let name: string;
+    let height: string;
+}
+export namespace Slots {
+    export function render_1(): import("lit-html").TemplateResult<1>;
+    export { render_1 as render };
+    let name_1: string;
+    export { name_1 as name };
+    let height_1: string;
+    export { height_1 as height };
+}
+export namespace WithMetadataAndDescription {
+    export function render_2(): import("lit-html").TemplateResult<1>;
+    export { render_2 as render };
+    let name_2: string;
+    export { name_2 as name };
+    let height_2: string;
+    export { height_2 as height };
+}
+export namespace HideDensitySelector {
+    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 CustomActions {
+    export function render_4(): import("lit-html").TemplateResult<1>;
+    export { render_4 as render };
+    let name_4: string;
+    export { name_4 as name };
+    let height_3: string;
+    export { height_3 as height };
+}
+import readme from "./readme.md";

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

@@ -0,0 +1 @@
+export {};