@ukic/canary-web-components 3.0.0-canary.13 → 3.0.0-canary.14

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

@@ -32,27 +32,33 @@ export declare class DateInput {
     private preventMonthInput;
     private preventYearInput;
     private previousInvalidDateTest;
-    private previousEmittedDate;
     private previousSelectedDate;
     private selectedDate;
     private selectedDateInfoEl;
     private screenReaderInfoId;
     private selectedDateInfoId;
     private yearInputEl;
+    private externalSetDate;
+    private clearInput;
     el: HTMLIcDateInputElement;
-    day: string;
     invalidDateText: string;
     maxDate: Date;
     minDate: Date;
-    month: string;
-    year: string;
     calendarFocused: boolean;
     clearButtonFocused: boolean;
     removeLabelledBy: boolean;
+    day: string;
+    month: string;
+    year: string;
+    watchInputHandler(): void;
     /**
      * The format in which the date will be displayed.
      */
     dateFormat?: IcDateFormat;
+    /**
+     * If `true`, every individual input field completed will emit an icChange event.
+     */
+    emitDatePartChange?: boolean;
     /**
      * If `true`, the disabled state will be set.
      */
@@ -174,6 +180,11 @@ export declare class DateInput {
      */
     icChange: EventEmitter<{
         value: Date;
+        dateObject: {
+            day: string;
+            month: string;
+            year: string;
+        };
     }>;
     /**
      * Emitted when the input gains focus.

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

@@ -118,4 +118,10 @@ export namespace WithClearingValue {
     let name_17: string;
     export { name_17 as name };
 }
+export namespace IcChangeEmitDatePartChanges {
+    export function render_19(): import("lit-html").TemplateResult<1>;
+    export { render_19 as render };
+    let name_18: string;
+    export { name_18 as name };
+}
 import readme from "./readme.md";

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

@@ -50,6 +50,10 @@ export declare class DatePicker {
      */
     disabled?: boolean;
     watchDisabledHandler(): void;
+    /**
+     *  If `true`, every individual input field completed will emit an icChange event.
+     */
+    emitDatePartChange?: boolean;
     /**
      * The days of the week to disable.
      */

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

@@ -133,4 +133,12 @@ export namespace IcChangeEvent {
     let height_15: string;
     export { height_15 as height };
 }
+export namespace IcChangeEventEmitDatePartChange {
+    export function render_16(): HTMLElement;
+    export { render_16 as render };
+    let name_16: string;
+    export { name_16 as name };
+    let height_16: string;
+    export { height_16 as height };
+}
 import readme from "./readme.md";

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

@@ -20,3 +20,4 @@ export declare const HideOutsideMonth: () => HTMLIcDatePickerElement;
 export declare const HideButtons: () => HTMLIcDatePickerElement;
 export declare const JSDates: () => HTMLIcDatePickerElement;
 export declare const IcChangeDate: () => HTMLElement;
+export declare const IcChangeDateEmitDatePartChanges: () => HTMLElement;

package/dist/types/components/ic-tree-item/ic-tree-item.d.ts

@@ -13,6 +13,7 @@ export declare class TreeItem {
     private hostMutationObserver;
     private TOOLTIP;
     private TREE_ITEM_LABEL_CLASS_SELECTOR;
+    private TREE_ITEM_CONTENT_CLASS_SELECTOR;
     el: HTMLIcTreeItemElement;
     childTreeItems: HTMLIcTreeItemElement[];
     /**
@@ -48,6 +49,10 @@ export declare class TreeItem {
      * The label of the tree item.
      */
     label: string;
+    /**
+     * @internal Holds the previous truncation state before the screen switches to a small viewport, so it can be reset when screen size changes again.
+     */
+    previousTruncateTreeItem: boolean;
     /**
      * How much of the referrer to send when following the link.
      */
@@ -100,6 +105,7 @@ export declare class TreeItem {
     updateAriaLabel(): Promise<void>;
     private setTreeItemPadding;
     private truncateTreeItemLabel;
+    private removeTreeItemTruncation;
     private hasRouterSlot;
     private handleDisplayTooltip;
     render(): any;

package/dist/types/components/ic-tree-view/ic-tree-view.d.ts

@@ -1,4 +1,5 @@
 import { IcSizes, IcThemeMode } from "../../utils/types";
+import { IcTreeItemOptions } from "./ic-tree-view.types";
 /**
  * @slot heading - Content is set as the tree view heading.
  * @slot icon - Content is placed to the left of the heading.
@@ -8,7 +9,13 @@ export declare class TreeView {
     private treeItemTag;
     private hostMutationObserver;
     private isLoaded;
+    private resizeObserver;
+    private TOOLTIP;
+    private previousTruncateHeading;
+    private previousTruncateTreeItems;
     el: HTMLIcTreeViewElement;
+    smallDevice: boolean;
+    watchSmallDeviceHandler(): void;
     treeItems: HTMLIcTreeItemElement[];
     /**
      * If `true`, tree items will have inset focus.
@@ -29,12 +36,19 @@ export declare class TreeView {
      */
     theme?: IcThemeMode;
     watchThemeHandler(): void;
+    /**
+     * The content within the tree view tree items. This will take precedence over slotted content.
+     * */
+    treeItemData: IcTreeItemOptions[];
+    watchTreeItemOptionsHandler(): void;
     /**
      * If `true`, the tree view heading will be truncated instead of text wrapping.
+     * When used on small devices, this prop will be overridden and headings will be set to text-wrap.
      */
     truncateHeading?: boolean;
     /**
      * If `true`, tree items will be truncated, unless they are individually overridden.
+     * When used on small devices, this prop will be overridden and tree-items will be set to text-wrap.
      */
     truncateTreeItems?: boolean;
     watchTruncateTreeItemsHandler(): void;
@@ -43,6 +57,8 @@ export declare class TreeView {
     componentDidRender(): void;
     componentDidLoad(): void;
     handleTreeItemSelected(event: CustomEvent): void;
+    private runResizeObserver;
+    private removeTruncation;
     private handleKeyDown;
     private getNextItemToSelect;
     private linkTreeItems;
@@ -50,6 +66,7 @@ export declare class TreeView {
     private getAllTreeItems;
     private addSlotChangeListener;
     private truncateTreeViewHeading;
+    private removeHeadingTruncation;
     private isHeadingDefined;
     private hasHeadingAreaContent;
     render(): any;

package/dist/types/components/ic-tree-view/ic-tree-view.stories.d.ts

@@ -12,81 +12,159 @@ export namespace Basic {
     function render(): import("lit-html").TemplateResult<1>;
     let name: string;
 }
-export namespace Nested {
+export namespace BasicSlotted {
     export function render_1(): import("lit-html").TemplateResult<1>;
     export { render_1 as render };
     let name_1: string;
     export { name_1 as name };
 }
-export namespace WithIcons {
+export namespace Nested {
     export function render_2(): import("lit-html").TemplateResult<1>;
     export { render_2 as render };
     let name_2: string;
     export { name_2 as name };
 }
-export namespace Small {
+export namespace NestedSlotted {
     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 Large {
+export namespace WithIcons {
     export function render_4(): import("lit-html").TemplateResult<1>;
     export { render_4 as render };
     let name_4: string;
     export { name_4 as name };
 }
-export namespace DisabledTreeItems {
+export namespace WithIconsSlotted {
     export function render_5(): import("lit-html").TemplateResult<1>;
     export { render_5 as render };
     let name_5: string;
     export { name_5 as name };
 }
-export namespace RouterItem {
+export namespace Small {
     export function render_6(): import("lit-html").TemplateResult<1>;
     export { render_6 as render };
     let name_6: string;
     export { name_6 as name };
 }
-export namespace SlottedContent {
+export namespace SmallSlotted {
     export function render_7(): import("lit-html").TemplateResult<1>;
     export { render_7 as render };
     let name_7: string;
     export { name_7 as name };
 }
-export namespace MaxContent {
+export namespace Large {
     export function render_8(): import("lit-html").TemplateResult<1>;
     export { render_8 as render };
     let name_8: string;
     export { name_8 as name };
 }
-export namespace TruncationBehaviour {
+export namespace LargeSlotted {
     export function render_9(): import("lit-html").TemplateResult<1>;
     export { render_9 as render };
     let name_9: string;
     export { name_9 as name };
 }
-export namespace SelectedTreeItem {
+export namespace DisabledTreeItems {
     export function render_10(): import("lit-html").TemplateResult<1>;
     export { render_10 as render };
     let name_10: string;
     export { name_10 as name };
 }
-export namespace Link {
+export namespace DisabledTreeItemsSlotted {
     export function render_11(): import("lit-html").TemplateResult<1>;
     export { render_11 as render };
     let name_11: string;
     export { name_11 as name };
 }
-export namespace Expanded {
+export namespace RouterItem {
     export function render_12(): import("lit-html").TemplateResult<1>;
     export { render_12 as render };
     let name_12: string;
     export { name_12 as name };
 }
-export namespace FocusInset {
+export namespace SlottedContent {
     export function render_13(): import("lit-html").TemplateResult<1>;
     export { render_13 as render };
     let name_13: string;
     export { name_13 as name };
 }
+export namespace MaxContent {
+    export function render_14(): import("lit-html").TemplateResult<1>;
+    export { render_14 as render };
+    let name_14: string;
+    export { name_14 as name };
+}
+export namespace MaxContentSlotted {
+    export function render_15(): import("lit-html").TemplateResult<1>;
+    export { render_15 as render };
+    let name_15: string;
+    export { name_15 as name };
+}
+export namespace TruncationBehaviour {
+    export function render_16(): import("lit-html").TemplateResult<1>;
+    export { render_16 as render };
+    let name_16: string;
+    export { name_16 as name };
+}
+export namespace TruncationBehaviourSlotted {
+    export function render_17(): import("lit-html").TemplateResult<1>;
+    export { render_17 as render };
+    let name_17: string;
+    export { name_17 as name };
+}
+export namespace SelectedTreeItem {
+    export function render_18(): import("lit-html").TemplateResult<1>;
+    export { render_18 as render };
+    let name_18: string;
+    export { name_18 as name };
+}
+export namespace SelectedTreeItemSlotted {
+    export function render_19(): import("lit-html").TemplateResult<1>;
+    export { render_19 as render };
+    let name_19: string;
+    export { name_19 as name };
+}
+export namespace Link {
+    export function render_20(): import("lit-html").TemplateResult<1>;
+    export { render_20 as render };
+    let name_20: string;
+    export { name_20 as name };
+}
+export namespace LinkSlotted {
+    export function render_21(): import("lit-html").TemplateResult<1>;
+    export { render_21 as render };
+    let name_21: string;
+    export { name_21 as name };
+}
+export namespace Expanded {
+    export function render_22(): import("lit-html").TemplateResult<1>;
+    export { render_22 as render };
+    let name_22: string;
+    export { name_22 as name };
+}
+export namespace ExpandedSlotted {
+    export function render_23(): import("lit-html").TemplateResult<1>;
+    export { render_23 as render };
+    let name_23: string;
+    export { name_23 as name };
+}
+export namespace FocusInset {
+    export function render_24(): import("lit-html").TemplateResult<1>;
+    export { render_24 as render };
+    let name_24: string;
+    export { name_24 as name };
+}
+export namespace FocusInsetSlotted {
+    export function render_25(): import("lit-html").TemplateResult<1>;
+    export { render_25 as render };
+    let name_25: string;
+    export { name_25 as name };
+}
+export namespace WithNestedSkipLink {
+    export function render_26(): import("lit-html").TemplateResult<1>;
+    export { render_26 as render };
+    let name_26: string;
+    export { name_26 as name };
+}

package/dist/types/components/ic-tree-view/ic-tree-view.types.d.ts

@@ -0,0 +1,12 @@
+import { IcThemeMode } from "../../components";
+export type IcTreeItemOptions = {
+    label: string;
+    icon?: string;
+    children?: IcTreeItemOptions[];
+    disabled?: boolean;
+    expanded?: boolean;
+    href?: string;
+    selected?: boolean;
+    theme?: IcThemeMode;
+    truncateTreeItem?: boolean;
+};

package/dist/types/components.d.ts

@@ -10,11 +10,13 @@ import { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSiz
 import { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
 import { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 import { IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
+import { IcTreeItemOptions } from "./components/ic-tree-view/ic-tree-view.types";
 export { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
 export { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSizes, IcThemeMode, IcWeekDays } from "./utils/types";
 export { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
 export { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 export { IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
+export { IcTreeItemOptions } from "./components/ic-tree-view/ic-tree-view.types";
 export namespace Components {
     interface IcCardHorizontal {
         /**
@@ -260,6 +262,10 @@ export namespace Components {
           * If `true`, the disabled state will be set.
          */
         "disabled"?: boolean;
+        /**
+          * If `true`, every individual input field completed will emit an icChange event.
+         */
+        "emitDatePartChange"?: boolean;
         /**
           * Returns the value as a Date object
           * @returns Date
@@ -367,6 +373,10 @@ export namespace Components {
           * If `true`, the disabled state will be set.
          */
         "disabled"?: boolean;
+        /**
+          * If `true`, every individual input field completed will emit an icChange event.
+         */
+        "emitDatePartChange"?: boolean;
         /**
           * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
          */
@@ -541,6 +551,7 @@ export namespace Components {
           * The label of the tree item.
          */
         "label": string;
+        "previousTruncateTreeItem": boolean;
         /**
           * How much of the referrer to send when following the link.
          */
@@ -590,11 +601,15 @@ export namespace Components {
          */
         "theme"?: IcThemeMode;
         /**
-          * If `true`, the tree view heading will be truncated instead of text wrapping.
+          * The content within the tree view tree items. This will take precedence over slotted content.
+         */
+        "treeItemData": IcTreeItemOptions[];
+        /**
+          * If `true`, the tree view heading will be truncated instead of text wrapping. When used on small devices, this prop will be overridden and headings will be set to text-wrap.
          */
         "truncateHeading"?: boolean;
         /**
-          * If `true`, tree items will be truncated, unless they are individually overridden.
+          * If `true`, tree items will be truncated, unless they are individually overridden. When used on small devices, this prop will be overridden and tree-items will be set to text-wrap.
          */
         "truncateTreeItems"?: boolean;
     }
@@ -669,7 +684,10 @@ declare global {
     interface HTMLIcDateInputElementEventMap {
         "calendarButtonClicked": { value: Date };
         "icBlur": { value: Date };
-        "icChange": { value: Date };
+        "icChange": {
+    value: Date;
+    dateObject: { day: string; month: string; year: string };
+  };
         "icFocus": { value: Date };
     }
     interface HTMLIcDateInputElement extends Components.IcDateInput, HTMLStencilElement {
@@ -1008,6 +1026,10 @@ declare namespace LocalJSX {
           * If `true`, the disabled state will be set.
          */
         "disabled"?: boolean;
+        /**
+          * If `true`, every individual input field completed will emit an icChange event.
+         */
+        "emitDatePartChange"?: boolean;
         /**
           * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
          */
@@ -1051,7 +1073,10 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value has changed.
          */
-        "onIcChange"?: (event: IcDateInputCustomEvent<{ value: Date }>) => void;
+        "onIcChange"?: (event: IcDateInputCustomEvent<{
+    value: Date;
+    dateObject: { day: string; month: string; year: string };
+  }>) => void;
         /**
           * Emitted when the input gains focus.
          */
@@ -1118,6 +1143,10 @@ declare namespace LocalJSX {
           * If `true`, the disabled state will be set.
          */
         "disabled"?: boolean;
+        /**
+          * If `true`, every individual input field completed will emit an icChange event.
+         */
+        "emitDatePartChange"?: boolean;
         /**
           * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
          */
@@ -1348,11 +1377,15 @@ declare namespace LocalJSX {
          */
         "theme"?: IcThemeMode;
         /**
-          * If `true`, the tree view heading will be truncated instead of text wrapping.
+          * The content within the tree view tree items. This will take precedence over slotted content.
+         */
+        "treeItemData"?: IcTreeItemOptions[];
+        /**
+          * If `true`, the tree view heading will be truncated instead of text wrapping. When used on small devices, this prop will be overridden and headings will be set to text-wrap.
          */
         "truncateHeading"?: boolean;
         /**
-          * If `true`, tree items will be truncated, unless they are individually overridden.
+          * If `true`, tree items will be truncated, unless they are individually overridden. When used on small devices, this prop will be overridden and tree-items will be set to text-wrap.
          */
         "truncateTreeItems"?: boolean;
     }

package/dist/types/utils/helpers.d.ts

@@ -149,6 +149,6 @@ export declare const addDataToPosition: (dataObject: IcDataTableDataType, newKey
     key: string;
     index: number;
 }[], newValue: unknown) => IcDataTableDataType;
-export declare const isSlottedInGroup: (component: any) => boolean;
+export declare const isSlottedInGroup: (component: HTMLElement) => boolean;
 export declare const hasDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[]) => boolean;
-export declare const renderDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[], ref: any) => void;
+export declare const renderDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[], ref: unknown) => void;