@ukic/web-components 3.0.0-alpha.7 → 3.0.0-alpha.9

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

@@ -1,11 +1,10 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcSizes, IcThemeMode } from "../../utils/types";
+import { IcSizes, IcThemeMode, IcIconPlacementOptions, IcButtonTooltipPlacement } from "../../utils/types";
 /**
  * @slot icon - Content will be displayed alongside the toggle button label.
  * @slot badge - Badge component overlaying the top right of the toggle button.
  */
 export declare class ToggleButton {
-    private iconPosition;
     el: HTMLIcToggleButtonElement;
     /**
      * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.
@@ -27,7 +26,7 @@ export declare class ToggleButton {
     /**
      * The placement of the icon in relation to the toggle button label.
      */
-    iconPlacement?: "left" | "right" | "top";
+    iconPlacement?: IcIconPlacementOptions;
     /**
      * The label to display in the toggle button. This is required for the default variant of toggle buttons.
      */
@@ -48,6 +47,10 @@ export declare class ToggleButton {
      * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
      */
     theme?: IcThemeMode;
+    /**
+     * The position of the tooltip in relation to the toggle button.
+     */
+    tooltipPlacement: IcButtonTooltipPlacement;
     /**
      * The variant of the toggle button.
      */
@@ -61,6 +64,7 @@ export declare class ToggleButton {
     componentWillLoad(): void;
     componentDidLoad(): void;
     handleHostClick(e: Event): void;
+    private loopAttributes;
     private handleFocus;
     private handleClick;
     render(): any;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcSizes, IcSelectTypes, IcSelectMethodTypes, IcThemeMode } from "../../utils/types";
+import { IcSizes, IcSelectTypes, IcSelectMethodTypes, IcThemeMode, IcButtonTooltipPlacement } from "../../utils/types";
 import { IcChangeEventDetail } from "./ic-toggle-button-group.types";
 interface lastKey {
     key: string | null;
@@ -21,6 +21,7 @@ export declare class ToggleButtonGroup {
      * If `true`, the toggle button group will fill the width of the container.
      */
     fullWidth?: boolean;
+    watchFullWidthHandler(): void;
     /**
      * The placement of the icons in relation to the toggle button labels.
      */
@@ -29,6 +30,7 @@ export declare class ToggleButtonGroup {
      * If `true`, the toggle button group will be in loading state.
      */
     loading?: boolean;
+    watchLoadingHandler(): void;
     /**
      * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.
      */
@@ -46,15 +48,22 @@ export declare class ToggleButtonGroup {
      * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.
      */
     size?: IcSizes;
+    watchSizeHandler(): void;
     /**
      * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
      */
     theme?: IcThemeMode;
     watchThemeHandler(): void;
+    /**
+     * The position of the tooltip in relation to the toggle buttons.
+     */
+    tooltipPlacement: IcButtonTooltipPlacement;
+    watchTooltipPlacementHandler(): void;
     /**
      * The variant of the toggle button.
      */
     variant: "default" | "icon";
+    watchVariantHandler(): void;
     /**
      * Emitted when a toggle button is selected.
      */

package/dist/types/components.d.ts

@@ -5,10 +5,10 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcButtonTooltipPlacement, IcColor, IcDeviceSizes, IcEmphasisType, IcIconPlacementOptions, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
 import { IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 import { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
-import { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
+import { IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 import { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 import { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
 import { IcDividerLabelPlacement, IcDividerStyles, IcDividerWeights } from "./components/ic-divider/ic-divider.types";
@@ -34,10 +34,10 @@ import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from
 import { IcChangeEventDetail as IcChangeEventDetail3 } from "./components/ic-toggle-button-group/ic-toggle-button-group.types";
 import { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
 import { Options } from "@popperjs/core";
-export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcButtonTooltipPlacement, IcColor, IcDeviceSizes, IcEmphasisType, IcIconPlacementOptions, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
 export { IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 export { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
-export { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
+export { IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 export { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 export { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
 export { IcDividerLabelPlacement, IcDividerStyles, IcDividerWeights } from "./components/ic-divider/ic-divider.types";
@@ -1951,10 +1951,6 @@ export namespace Components {
           * Sets focus on the switch.
          */
         "setFocus": () => Promise<void>;
-        /**
-          * If `true`, the switch will render the On/Off state text.
-         */
-        "showState"?: boolean;
         /**
           * The size of the switch component.
          */
@@ -2234,7 +2230,7 @@ export namespace Components {
         /**
           * The placement of the icon in relation to the toggle button label.
          */
-        "iconPlacement"?: "left" | "right" | "top";
+        "iconPlacement"?: IcIconPlacementOptions;
         /**
           * The label to display in the toggle button. This is required for the default variant of toggle buttons.
          */
@@ -2255,6 +2251,10 @@ export namespace Components {
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
         "theme"?: IcThemeMode;
+        /**
+          * The position of the tooltip in relation to the toggle button.
+         */
+        "tooltipPlacement": IcButtonTooltipPlacement;
         /**
           * The variant of the toggle button.
          */
@@ -2301,6 +2301,10 @@ export namespace Components {
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
         "theme"?: IcThemeMode;
+        /**
+          * The position of the tooltip in relation to the toggle buttons.
+         */
+        "tooltipPlacement": IcButtonTooltipPlacement;
         /**
           * The variant of the toggle button.
          */
@@ -5340,10 +5344,6 @@ declare namespace LocalJSX {
           * Emitted when the toggle has focus.
          */
         "onIcFocus"?: (event: IcSwitchCustomEvent<void>) => void;
-        /**
-          * If `true`, the switch will render the On/Off state text.
-         */
-        "showState"?: boolean;
         /**
           * The size of the switch component.
          */
@@ -5617,7 +5617,7 @@ declare namespace LocalJSX {
         /**
           * The placement of the icon in relation to the toggle button label.
          */
-        "iconPlacement"?: "left" | "right" | "top";
+        "iconPlacement"?: IcIconPlacementOptions;
         /**
           * The label to display in the toggle button. This is required for the default variant of toggle buttons.
          */
@@ -5644,6 +5644,10 @@ declare namespace LocalJSX {
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
         "theme"?: IcThemeMode;
+        /**
+          * The position of the tooltip in relation to the toggle button.
+         */
+        "tooltipPlacement"?: IcButtonTooltipPlacement;
         /**
           * The variant of the toggle button.
          */
@@ -5694,6 +5698,10 @@ declare namespace LocalJSX {
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
         "theme"?: IcThemeMode;
+        /**
+          * The position of the tooltip in relation to the toggle buttons.
+         */
+        "tooltipPlacement"?: IcButtonTooltipPlacement;
         /**
           * The variant of the toggle button.
          */

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

@@ -156,5 +156,6 @@ export declare const convertToRGBA: (color: IcColor) => IcColorRGBA | null;
 export declare const capitalize: (text: string) => string;
 export declare const checkSlotInChildMutations: (addedNodes: NodeList, removedNodes: NodeList, slotName: string | string[]) => boolean;
 export declare const isElInAGGrid: (el: HTMLElement) => boolean;
+export declare const isSlottedInGroup: (component: any) => boolean;
 export declare const hasDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[]) => boolean;
 export declare const renderDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[], ref: any) => void;

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

@@ -82,4 +82,6 @@ type RGB = `rgb(${string})`;
 type RGBA = `rgba(${string})`;
 type HEX = `#${string}`;
 export type IcColor = RGB | RGBA | HEX;
+export type IcIconPlacementOptions = "left" | "right" | "top";
+export type IcButtonTooltipPlacement = "top" | "right" | "bottom" | "left";
 export {};