@ukic/web-components 2.12.0 → 2.14.0

package/dist/types/components/ic-accordion-group/ic-accordion-group.d.ts

@@ -4,6 +4,10 @@ export declare class AccordionGroup {
     el: HTMLIcAccordionGroupElement;
     accordions: HTMLIcAccordionElement[];
     areAllAccordionsOpen: boolean;
+    /**
+     * The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.
+     */
+    accessibleButtonLabel: string;
     /**
      * The appearance of the accordion group, e.g dark, or light.
      */
@@ -29,5 +33,6 @@ export declare class AccordionGroup {
     private handleExpanded;
     private linkAccordions;
     private setExpandedToAreAllAccordionsOpen;
+    private accordionOpenBtnText;
     render(): any;
 }

package/dist/types/components/ic-button/ic-button.d.ts

@@ -7,6 +7,7 @@ import { IcSizes, IcThemeForeground } from "../../utils/types";
  * @slot right-icon - Content will be placed to the right of the button label.
  * @slot top-icon - Content will be placed above the button label.
  * @slot badge - Badge component overlaying the top right of the button.
+ * @slot router-item - Handle routing by nesting your routes in this slot. Setting loading to true will have no impact on this slot.
  */
 export declare class Button {
     private buttonEl;
@@ -18,10 +19,15 @@ export declare class Button {
     private describedById;
     private mutationObserver;
     private hostMutationObserver;
+    private routerSlot;
     el: HTMLIcButtonElement;
     ariaLabel: string;
     describedByContent: string;
     title: string;
+    /**
+     * If `fileUpload` is set to `true`, this is the accepted list of file types.
+     */
+    accept?: string;
     /**
      * The appearance of the button, e.g. dark, light, or the default.
      */
@@ -54,6 +60,14 @@ export declare class Button {
      * If `true`, the aria-expanded value will be set to true. This is only applied if the dropdown prop is also true.
      */
     dropdownExpanded?: boolean;
+    /**
+     * If `true`, when the button is clicked the native file explorer will be launched.
+     */
+    fileUpload?: boolean;
+    /**
+     * The name of the control for the file input, which is submitted with the form data.
+     */
+    fileInputName: string;
     /**
      * The <form> element to associate the button with.
      */
@@ -94,6 +108,10 @@ export declare class Button {
      * If `true`, the button will be in loading state.
      */
     loading?: boolean;
+    /**
+     * If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.
+     */
+    multiple?: boolean;
     /**
      * How much of the referrer to send when following the link.
      */
@@ -102,6 +120,10 @@ export declare class Button {
      * The relationship of the linked URL as space-separated link types.
      */
     rel?: string;
+    /**
+     * The list of the files that have been selected by a user.
+     */
+    selectedFiles: FileList;
     /**
      * The size of the button to be displayed.
      */
@@ -130,6 +152,10 @@ export declare class Button {
      * Emitted when button has blur
      */
     icBlur: EventEmitter<void>;
+    /**
+     * If `fileUpload` is set to `true`, this will be emitted when a file is selected in the native explorer.
+     */
+    icFileSelection: EventEmitter<FileList>;
     /**
      * Emitted when button has focus
      */
@@ -149,6 +175,7 @@ export declare class Button {
     private hasLeftIconSlot;
     private hasTopIconSlot;
     private hasRightIconSlot;
+    private hasRouterSlot;
     private setViewBox;
     private handleHiddenFormButtonClick;
     private handleClick;
@@ -159,6 +186,7 @@ export declare class Button {
     private mutationCallback;
     private hostMutationCallback;
     private setHasTooltip;
+    private openFileExplorer;
     private isTooltipSilent;
     render(): any;
 }

package/dist/types/components/ic-card/ic-card.d.ts

@@ -36,9 +36,9 @@ export declare class Card {
      */
     fullWidth?: boolean;
     /**
-     * The heading for the card.
+     * The heading for the card. This is required, unless a slotted heading is used.
      */
-    heading: string;
+    heading?: string;
     /**
      * The URL that the clickable card link points to. If set, the clickable card will render as an "a" tag, otherwise it will render as a button.
      */

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

@@ -31,12 +31,7 @@ export declare class DataRow {
     componentDidLoad(): void;
     private runResizeObserver;
     private checkLabelAbove;
-    /**
-     * Renders the label either as a ic-typography or slot. Slotted content takes precedence.
-     * @param label string - label of value
-     * @returns HTMLDivElement - returns label as slot or ic-typography with label as textContent
-     */
-    private renderLabel;
+    private renderCellContent;
     private labelEndComponent;
     render(): any;
 }

package/dist/types/components/ic-dialog/ic-dialog.d.ts

@@ -55,6 +55,10 @@ export declare class Dialog {
      * This prop also prevents popover elements from being cut off within the content area.
      */
     disableHeightConstraint?: boolean;
+    /**
+     * If set to `true`, the content area width property is removed, allowing content to take the full width of the dialog when using the large variant.
+     */
+    disableWidthConstraint?: boolean;
     /**
      * If `true`, the close button will not be displayed.
      */

package/dist/types/components/ic-input-component-container/ic-input-component-container.d.ts

@@ -1,4 +1,4 @@
-import { IcInformationStatusOrEmpty, IcSizesNoLarge } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcSizes } from "../../utils/types";
 /**
  * @slot left-icon - Content will be placed to the left of the input.
  */
@@ -31,7 +31,7 @@ export declare class InputComponentContainer {
     /**
      * The size of the input component container component.
      */
-    size?: IcSizesNoLarge;
+    size?: IcSizes;
     /**
      * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
      */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcActivationTypes, IcMenuOption, IcSizesNoLarge, IcValueEventDetail } from "../../utils/types";
+import { IcActivationTypes, IcMenuOption, IcSizes, IcValueEventDetail } from "../../utils/types";
 import { IcOptionSelectEventDetail, IcMenuChangeEventDetail, IcMenuOptionIdEventDetail } from "./ic-menu.types";
 import { IcSearchBarSearchModes } from "../ic-search-bar/ic-search-bar.types";
 export declare class Menu {
@@ -71,7 +71,7 @@ export declare class Menu {
     /**
      * The size of the menu component.
      */
-    size?: IcSizesNoLarge;
+    size?: IcSizes;
     /**
      * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
      */

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

@@ -96,7 +96,7 @@ export declare class SearchBar {
      */
     labelField?: string;
     /**
-     * Trigger loading state when fetching options asyncronously
+     * Trigger loading state when fetching options asynchronously
      */
     loading?: boolean;
     /**

package/dist/types/components/ic-select/ic-select.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcValueEventDetail, IcSizesNoLarge } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcValueEventDetail, IcSizes } from "../../utils/types";
 import { IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
 export declare class Select {
     private anchorEl;
@@ -139,7 +139,7 @@ export declare class Select {
     /**
      * The size of the select component.
      */
-    size?: IcSizesNoLarge;
+    size?: IcSizes;
     /**
      * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
      */
@@ -157,7 +157,7 @@ export declare class Select {
      */
     validationText?: string;
     /**
-     * If `true`, the loading state will be triggered when fetching options asyncronously.
+     * If `true`, the loading state will be triggered when fetching options asynchronously.
      */
     loading?: boolean;
     loadingHandler(newValue: boolean): void;
@@ -182,6 +182,7 @@ export declare class Select {
     inputValueToFilter: string;
     currValue: string;
     valueChangedHandler(): void;
+    openChangedHandler(): void;
     /**
      * Emitted when the select loses focus.
      */
@@ -194,6 +195,10 @@ export declare class Select {
      * Emitted when the clear button is clicked.
      */
     icClear: EventEmitter<void>;
+    /**
+     * Emitted when the select options menu is closed.
+     */
+    icClose: EventEmitter<void>;
     /**
      * Emitted when the select gains focus.
      */
@@ -202,6 +207,10 @@ export declare class Select {
      * Emitted when a keyboard input occurred.
      */
     icInput: EventEmitter<IcValueEventDetail>;
+    /**
+     * Emitted when the select options menu is opened.
+     */
+    icOpen: EventEmitter<void>;
     /**
      * Emitted when an option is highlighted within the menu.
      * Highlighting a menu item will also trigger an `icChange/onIcChange` due to the value being updated.

package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts

@@ -55,6 +55,7 @@ export declare class ToggleButton {
     componentWillLoad(): void;
     componentDidLoad(): void;
     handleHostClick(e: Event): void;
+    private handleFocus;
     private handleClick;
     render(): any;
 }

package/dist/types/components/ic-toggle-button-group/ic-toggle-button-group.d.ts

@@ -0,0 +1,68 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcSizes, IcThemeForeground, IcSelectTypes, IcSelectMethodTypes } from "../../utils/types";
+import { IcChangeEventDetail } from "./ic-toggle-button-group.types";
+interface lastKey {
+    key: string | null;
+    shift: boolean;
+}
+export declare class ToggleButtonGroup {
+    el: HTMLIcToggleButtonGroupElement;
+    lastKeyPressed: lastKey;
+    /**
+     * The accessible label of the toggle button group component to provide context for screen reader users.
+     */
+    accessibleLabel?: string;
+    /**
+     * The appearance of the toggle button group, e.g dark, or light.
+     */
+    appearance: IcThemeForeground;
+    /**
+     * If `true`, the toggle button group will be set to the disabled state.
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the toggle button group will fill the width of the container.
+     */
+    fullWidth?: boolean;
+    /**
+     * The placement of the icons in relation to the toggle button labels.
+     */
+    iconPlacement?: "left" | "right" | "top";
+    /**
+     * If `true`, the toggle button group will be in loading state.
+     */
+    loading?: boolean;
+    /**
+     * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.
+     */
+    selectMethod?: IcSelectMethodTypes;
+    /**
+     * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.
+     */
+    selectType?: IcSelectTypes;
+    /**
+     * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.
+     */
+    size?: IcSizes;
+    /**
+     * The variant of the toggle button.
+     */
+    variant: "default" | "icon";
+    /**
+     * Emitted when a toggle button is selected.
+     */
+    icChange: EventEmitter<IcChangeEventDetail>;
+    selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private keyListener;
+    private setSlottedAria;
+    private handleHostFocus;
+    private proxySelectHandler;
+    private handleKeyDown;
+    private getNextItemToSelect;
+    private getAllToggleButtons;
+    render(): any;
+}
+export {};

package/dist/types/components/ic-toggle-button-group/ic-toggle-button-group.types.d.ts

@@ -0,0 +1,7 @@
+export interface IcChangeEventDetail {
+    toggleChecked: boolean[] | boolean;
+    toggledOptions?: {
+        toggleButton: HTMLIcToggleButtonElement;
+    }[];
+    selectedOption: HTMLIcToggleButtonElement;
+}