@ukic/web-components 2.5.0 → 2.6.0

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

@@ -6,7 +6,7 @@ export declare class PopoverMenu {
   private firstRender;
   private popoverMenuEls;
   private popperInstance;
-  host: HTMLIcPopoverMenuElement;
+  el: HTMLIcPopoverMenuElement;
   openingFromChild: boolean;
   openingFromParent: boolean;
   /**

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

@@ -1,11 +1,11 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcOrientation, IcValueEventDetail } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcOrientation, IcSizesNoLarge, IcValueEventDetail } from "../../utils/types";
 import { IcChangeEventDetail } from "./ic-radio-group.types";
 export declare class RadioGroup {
   private radioContainer;
   private radioOptions;
   private resizeObserver;
-  host: HTMLIcRadioGroupElement;
+  el: HTMLIcRadioGroupElement;
   checkedValue: string;
   currentOrientation: IcOrientation;
   initialOrientation: IcOrientation;
@@ -39,9 +39,13 @@ export declare class RadioGroup {
    */
   required: boolean;
   /**
-   * If `true`, the small styling will be applied to the radio group.
+   * The size of the radio group component.
    */
-  small: boolean;
+  size?: IcSizesNoLarge;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+   */
+  small?: boolean;
   /**
    * The validation status - e.g. 'error' | 'warning' | 'success'.
    */

package/dist/types/components/ic-radio-option/ic-radio-option.d.ts

@@ -1,11 +1,14 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcAdditionalFieldTypes, IcValueEventDetail } from "../../utils/types";
+/**
+ * @slot additional-field - Content to displayed alongside a radio option.
+ */
 export declare class RadioOption {
   private defaultRadioValue;
   private hasAdditionalField;
   private radioElement;
   private skipFocus;
-  host: HTMLIcRadioOptionElement;
+  el: HTMLIcRadioOptionElement;
   /**
    * The style of additionalField that will be displayed if used.
    */
@@ -18,6 +21,30 @@ export declare class RadioOption {
    * The text to be displayed when dynamic.
    */
   dynamicText: string;
+  /**
+   * The <form> element to associate the radio with.
+   */
+  form?: string;
+  /**
+   * The URL that processes the information submitted by the radio. It overrides the action attribute of the radio's form owner. Does nothing if there is no form owner.
+   */
+  formaction?: string;
+  /**
+   * The way the submitted form data is encoded.
+   */
+  formenctype?: string;
+  /**
+   * The HTTP method used to submit the form.
+   */
+  formmethod?: string;
+  /**
+   * If `true`, the form will not be validated when submitted.
+   */
+  formnovalidate?: boolean;
+  /**
+   * The place to display the response from submitting the form. It overrides the target attribute of the radio's form owner.
+   */
+  formtarget?: string;
   /**
    * The group label for the radio option.
    */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAutocompleteTypes, IcAutocorrectStates, IcMenuOption } from "../../utils/types";
+import { IcAutocompleteTypes, IcAutocorrectStates, IcMenuOption, IcSizesNoLarge } from "../../utils/types";
 import { IcSearchBarBlurEventDetail, IcSearchBarSearchModes } from "./ic-search-bar.types";
 import { IcValueEventDetail, IcBlurEventDetail } from "../../utils/types";
 import { IcMenuChangeEventDetail, IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
@@ -128,7 +128,11 @@ export declare class SearchBar {
    */
   searchMode?: IcSearchBarSearchModes;
   /**
-   * If `true`, the small styling will be applied to the search bar.
+   * The size of the search bar component.
+   */
+  size?: IcSizesNoLarge;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
    */
   small?: 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 } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcValueEventDetail, IcSizesNoLarge } from "../../utils/types";
 import { IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
 export declare class Select {
   private anchorEl;
@@ -21,7 +21,7 @@ export declare class Select {
   private searchableSelectElement;
   private timeoutTimer;
   private ungroupedOptions;
-  host: HTMLIcSelectElement;
+  el: HTMLIcSelectElement;
   ariaActiveDescendant: string;
   clearButtonFocused: boolean;
   debounceIcChange: number;
@@ -47,7 +47,33 @@ export declare class Select {
    */
   emptyOptionListText: string;
   /**
-   * If `true`, the select element will fill the width of the container.
+   * The <form> element to associate the select with.
+   */
+  form?: string;
+  /**
+   * The URL that processes the information submitted by the select. It overrides the action attribute of the select's form owner. Does nothing if there is no form owner.
+   * This prop should only be used with searchable select and will only be applied if searchable is true.
+   */
+  formaction?: string;
+  /**
+   * The way the submitted form data is encoded. This prop should only be used with searchable select and will only be applied if searchable is true.
+   */
+  formenctype?: string;
+  /**
+   * The HTTP method used to submit the form. This prop should only be used with searchable select and will only be applied if searchable is true.
+   */
+  formmethod?: string;
+  /**
+   * If `true`, the form will not be validated when submitted. This prop should only be used with searchable select and will only be applied if searchable is true.
+   */
+  formnovalidate?: boolean;
+  /**
+   * The place to display the response from submitting the form. It overrides the target attribute of the select's form owner.
+   * This prop should only be used with searchable select and will only be applied if searchable is true.
+   */
+  formtarget?: string;
+  /**
+   * If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true.
    */
   fullWidth: boolean;
   /**
@@ -107,7 +133,11 @@ export declare class Select {
    */
   showClearButton?: boolean;
   /**
-   * If `true`, the small styling will be applied to the select.
+   * The size of the select component.
+   */
+  size?: IcSizesNoLarge;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
    */
   small?: boolean;
   /**

package/dist/types/components/ic-side-navigation/ic-side-navigation.d.ts

@@ -11,6 +11,7 @@ export declare class SideNavigation {
   private resizeObserver;
   private COLLAPSED_ICON_LABELS_END;
   private COLLAPSED_ICON_LABELS_START;
+  private menuButton;
   el: HTMLIcSideNavigationElement;
   deviceSize: number;
   deviceSizeAppTitle: number;
@@ -30,6 +31,10 @@ export declare class SideNavigation {
    * If `true`, automatic parent wrapper styling will be disabled.
    */
   disableAutoParentStyling: boolean;
+  /**
+   * If `true`, the side navigation will not display as a top bar on small devices.
+   */
+  disableTopBarBehaviour: boolean;
   /**
    * If `true`, the side navigation will load in an expanded state.
    */

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

@@ -6,7 +6,11 @@ export declare class Skeleton {
   heightOnly: boolean;
   widthOnly: boolean;
   /**
-   * If `true`, the skeleton will be set to the light variant.
+   * The appearance of the skeleton.
+   */
+  appearance?: "light" | "default";
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `appearance` to "light" instead.
    */
   light?: boolean;
   /**

package/dist/types/components/ic-status-tag/ic-status-tag.d.ts

@@ -1,11 +1,12 @@
 import { IcStatusTagStatuses, IcStatusTagAppearance } from "./ic-status-tag.types";
+import { IcEmphasisType, IcSizesNoLarge } from "../../utils/types";
 export declare class StatusTag {
   /**
    * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.
    */
   announced?: boolean;
   /**
-   * The emphasis of the status tag.
+   * @deprecated This prop should not be used anymore. Use variant prop instead.
    */
   appearance?: IcStatusTagAppearance;
   /**
@@ -13,13 +14,22 @@ export declare class StatusTag {
    */
   label: string;
   /**
-   * If `true`, the small styling will be applied to the status tag.
+   * The size of the status tag component.
+   */
+  size?: IcSizesNoLarge;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
    */
   small?: boolean;
   /**
    * The colour of the status tag.
    */
   status?: IcStatusTagStatuses;
+  /**
+   * The emphasis of the status tag.
+   */
+  variant?: IcEmphasisType;
+  componentWillLoad(): void;
   componentDidLoad(): void;
   render(): any;
 }

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

@@ -1,5 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcSwitchChangeEventDetail } from "./ic-switch.types";
+import { IcSizesNoLarge } from "../../utils/types";
 /**
  * @slot right-adornment - Content is placed to the right of switch before state label.
  */
@@ -37,7 +38,11 @@ export declare class Switch {
    */
   showState?: boolean;
   /**
-   * If `true`, the small styling will be applied to the switch.
+   * The size of the switch component.
+   */
+  size?: IcSizesNoLarge;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
    */
   small?: boolean;
   /**

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

@@ -9,7 +9,7 @@ export declare class Tab {
   private focusFromClick;
   private focusTabId;
   private isInitialRender;
-  host: HTMLIcTabElement;
+  el: HTMLIcTabElement;
   /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
   appearance?: IcThemeForegroundNoDefault;
   /** @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */

package/dist/types/components/ic-tab-context/ic-tab-context.d.ts

@@ -10,7 +10,7 @@ export declare class TabContext {
   private tabs;
   private tabGroup;
   private tabPanels;
-  host: HTMLIcTabContextElement;
+  el: HTMLIcTabContextElement;
   selectedTab: number | null;
   /**
    * Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.

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

@@ -1,6 +1,5 @@
 import { IcThemeForegroundNoDefault } from "../../utils/types";
 export declare class TabGroup {
-  host: HTMLIcTabGroupElement;
   /**
    * @internal The appearance of the tab group, e.g dark, or light.
    */

package/dist/types/components/ic-tab-panel/ic-tab-panel.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcThemeForegroundNoDefault } from "../../utils/types";
 export declare class TabPanel {
-  host: HTMLIcTabPanelElement;
+  el: HTMLIcTabPanelElement;
   /**
    * @internal The appearance of the tabs, e.g dark, or light.
    */

package/dist/types/components/ic-text-field/ic-text-field.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcValueEventDetail } from "../../utils/types";
+import { IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcValueEventDetail, IcSizesNoLarge } from "../../utils/types";
 import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./ic-text-field.types";
 /**
  * @slot icon - Content will be placed to the left of the text input.
@@ -127,9 +127,13 @@ export declare class TextField {
    */
   rows: number;
   /**
-   * If `true`, the small styling will be applied to the text field.
+   * The size of the text field component.
    */
-  small: boolean;
+  size?: IcSizesNoLarge;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+   */
+  small?: boolean;
   /**
    * If `true`, the value of the text field will have its spelling and grammar checked.
    */

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

@@ -1,7 +1,6 @@
 import { IcTooltipPlacements } from "./ic-tooltip.types";
 export declare class Tooltip {
   private arrow;
-  private ariaDescribedBy;
   private delayedHideEvents;
   private dialogOverflow;
   private icDialogEl;
@@ -10,7 +9,6 @@ export declare class Tooltip {
   private persistTooltip;
   private popperInstance;
   private onDialog;
-  private screenReaderOnlyStyles;
   private showEvents;
   private toolTip;
   el: HTMLIcTooltipElement;
@@ -18,6 +16,10 @@ export declare class Tooltip {
    * If `true`, the tooltip will not be displayed on hover, it will require a click.
    */
   disableHover?: boolean;
+  /**
+   * The number of lines to display before truncating the text.
+   */
+  maxLines?: number;
   /**
    * The position of the tool-tip in relation to the parent element.
    */
@@ -30,9 +32,9 @@ export declare class Tooltip {
    * The text to display on the tooltip.
    */
   label: string;
-  updateLabel(newValue: string): void;
   disconnectedCallback(): void;
   componentDidLoad(): void;
+  componentDidRender(): void;
   /**
    * Method to programmatically show/hide the tooltip without needing to interact with an anchor element
    * @param show Whether to show or hide the tooltip