@sula-tech/webcomponents 0.14.0 → 0.15.0

package/dist/esm/webcomponents.js

@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["sula-avatar_21",[[1,"sula-modal",{"opened":[1028],"blockBodyScroll":[1028,"block-body-scroll"],"closeOnClickOutside":[1028,"close-on-click-outside"],"type":[1],"headerIcon":[1,"header-icon"],"modalTitle":[1,"modal-title"],"promoImage":[1,"promo-image"],"subTitle":[1,"sub-title"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"slotOverflow":[1,"slot-overflow"],"isAnimating":[32],"shouldRender":[32]},null,{"opened":["handleOpenedChange"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"selected":[1028],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"menuMaxHeight":[2,"menu-max-height"],"contentMaxHeight":[2,"content-max-height"],"customContent":[516,"custom-content"],"closeOnSelect":[4,"close-on-select"],"selectedItem":[32],"showItems":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32],"openUpward":[32]},[[4,"click","handleDocumentClick"],[9,"resize","handleWindowResize"]],{"value":["handleValueChange"],"showItems":["handleShowItemsChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-breadcrumb",{"items":[1040]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-segmented-control",{"items":[1040],"type":[1025],"size":[1025],"color":[1025]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"maskPattern":[1,"mask-pattern"],"maskPatternSwitchMaxLength":[2,"mask-pattern-switch-max-length"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"],"maskPattern":["watchMaskPatternHandler"],"maskPatternSwitchMaxLength":["watchMaskPatternSwitchMaxLengthHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"responsive":[4],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"],"maxHeight":[2,"max-height"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  return bootstrapLazy([["sula-avatar_22",[[1,"sula-modal",{"opened":[1028],"blockBodyScroll":[1028,"block-body-scroll"],"closeOnClickOutside":[1028,"close-on-click-outside"],"type":[1],"headerIcon":[1,"header-icon"],"modalTitle":[1,"modal-title"],"promoImage":[1,"promo-image"],"subTitle":[1,"sub-title"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"slotOverflow":[1,"slot-overflow"],"isAnimating":[32],"shouldRender":[32]},null,{"opened":["handleOpenedChange"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"selected":[1028],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"menuMaxHeight":[2,"menu-max-height"],"contentMaxHeight":[2,"content-max-height"],"customContent":[516,"custom-content"],"closeOnSelect":[4,"close-on-select"],"showContent":[1540,"show-content"],"selectedItem":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32],"openUpward":[32]},[[4,"click","handleDocumentClick"],[9,"resize","handleWindowResize"]],{"value":["handleValueChange"],"showContent":["handleShowContentChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-breadcrumb",{"items":[1040]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-segmented-control",{"items":[1040],"type":[1025],"size":[1025],"color":[1025]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"maskPattern":[1,"mask-pattern"],"maskPatternSwitchMaxLength":[2,"mask-pattern-switch-max-length"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"],"maskPattern":["watchMaskPatternHandler"],"maskPatternSwitchMaxLength":["watchMaskPatternSwitchMaxLengthHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-tooltip",{"text":[1],"position":[1],"focused":[4],"trigger":[1],"isVisible":[32]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"responsive":[4],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"],"maxHeight":[2,"max-height"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
 });
 //# sourceMappingURL=webcomponents.js.map
 

package/dist/types/components/sula-dropdown/sula-dropdown.d.ts

@@ -37,6 +37,10 @@ export declare class SulaDropdown {
      * Close dropdown when an item is selected or content is clicked
      */
     closeOnSelect: boolean;
+    /**
+     * Show or hide dropdown content
+     */
+    showContent: boolean;
     /**
      * Event emitted when dropdown is clicked
      */
@@ -54,7 +58,6 @@ export declare class SulaDropdown {
      */
     menuItemSelected: EventEmitter<SulaMenuListItem>;
     selectedItem?: SulaMenuListItem;
-    showItems: boolean;
     isFocused: boolean;
     searchTerm: string;
     filteredItems: SulaMenuListItem[];
@@ -62,7 +65,7 @@ export declare class SulaDropdown {
     node?: HTMLElement;
     searchInputRef?: HTMLInputElement;
     handleValueChange(): void;
-    handleShowItemsChange(newValue: boolean): void;
+    handleShowContentChange(newValue: boolean): void;
     handleDocumentClick(event: Event): void;
     handleWindowResize(): void;
     calculateMenuPosition(): void;

package/dist/types/components/sula-dropdown/sula-dropdown.stories.d.ts

@@ -74,6 +74,14 @@ declare const _default: {
                 required: boolean;
             };
         };
+        showContent: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
         dropdownClicked: {
             action: string;
             description: string;

package/dist/types/components/sula-tooltip/model/sula-tooltip.model.d.ts

@@ -0,0 +1,10 @@
+export declare enum SulaTooltipPosition {
+    Top = "top",
+    Bottom = "bottom",
+    Left = "left",
+    Right = "right"
+}
+export declare enum SulaTooltipTrigger {
+    Icon = "icon",
+    Parent = "parent"
+}

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

@@ -0,0 +1,40 @@
+import { SulaTooltipPosition, SulaTooltipTrigger } from './model/sula-tooltip.model';
+export declare class SulaTooltip {
+    el: HTMLElement;
+    /**
+     * Tooltip hint text — max 300 characters
+     */
+    text: string;
+    /**
+     * Tooltip position relative to trigger
+     */
+    position: SulaTooltipPosition;
+    private readonly icon;
+    /**
+     * When true, renders a focus ring (21.5×21.5px, 1px border) around the icon.
+     */
+    focused: boolean;
+    /**
+     * Trigger mode.
+     * - `'icon'` (default): the built-in info icon is the hover target.
+     * - `'parent'`: the icon is hidden; the component stretches to fill the
+     *   parent element (which **must** have `position: relative`) and the hint
+     *   appears on hover of that parent.
+     */
+    trigger: SulaTooltipTrigger;
+    isVisible: boolean;
+    private parentEl;
+    private hintEl;
+    private triggerEl;
+    private arrowEl;
+    private popperInstance;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private initPopper;
+    private get displayText();
+    private getIconClasses;
+    private getHintClasses;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    render(): any;
+}

package/dist/types/components/sula-tooltip/sula-tooltip.stories.d.ts

@@ -0,0 +1,105 @@
+import { SulaTooltipPosition, SulaTooltipTrigger } from './model/sula-tooltip.model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        text: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        position: {
+            control: {
+                type: string;
+            };
+            options: SulaTooltipPosition[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        icon: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        focused: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        trigger: {
+            control: {
+                type: string;
+            };
+            options: SulaTooltipTrigger[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Playground: any;
+export declare const Positions: {
+    (): HTMLDivElement;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const FocusRing: any;
+export declare const CustomIcon: any;
+export declare const LongText: any;
+export declare const ParentTrigger: {
+    (): HTMLDivElement;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

package/dist/types/components.d.ts

@@ -24,6 +24,7 @@ import { SulaTextareaStatus } from "./components/sula-textarea/model/sula-textar
 import { SulaTextfieldStatus, SulaTextfieldType } from "./components/sula-textfield/model/sula-textfield.model";
 import { SulaTilesSize, SulaTilesType } from "./components/sula-tiles/model/sula-tiles.model";
 import { SulaTimelineListItem } from "./components/sula-timeline-list/model/sula-timeline-list.model";
+import { SulaTooltipPosition, SulaTooltipTrigger } from "./components/sula-tooltip/model/sula-tooltip.model";
 export { SulaAvatarSize } from "./components/sula-avatar/model/sula-avatar.model";
 export { SulaBadgeSize, SulaBadgeStatus, SulaBadgeType } from "./components/sula-badge/model/sula-badge.model";
 export { SulaMenuBreadcrumb } from "./components/sula-breadcrumb/model/sula-breadcrumb.model";
@@ -43,6 +44,7 @@ export { SulaTextareaStatus } from "./components/sula-textarea/model/sula-textar
 export { SulaTextfieldStatus, SulaTextfieldType } from "./components/sula-textfield/model/sula-textfield.model";
 export { SulaTilesSize, SulaTilesType } from "./components/sula-tiles/model/sula-tiles.model";
 export { SulaTimelineListItem } from "./components/sula-timeline-list/model/sula-timeline-list.model";
+export { SulaTooltipPosition, SulaTooltipTrigger } from "./components/sula-tooltip/model/sula-tooltip.model";
 export namespace Components {
     interface SulaAvatar {
         /**
@@ -240,6 +242,11 @@ export namespace Components {
           * Enable search/filter functionality in dropdown
          */
         "searchable"?: boolean;
+        /**
+          * Show or hide dropdown content
+          * @default false
+         */
+        "showContent": boolean;
         /**
           * Value for dropdown
          */
@@ -622,6 +629,27 @@ export namespace Components {
          */
         "sulaTimelineList": SulaTimelineListItem[];
     }
+    interface SulaTooltip {
+        /**
+          * When true, renders a focus ring (21.5×21.5px, 1px border) around the icon.
+          * @default false
+         */
+        "focused": boolean;
+        /**
+          * Tooltip position relative to trigger
+          * @default SulaTooltipPosition.Top
+         */
+        "position": SulaTooltipPosition;
+        /**
+          * Tooltip hint text — max 300 characters
+         */
+        "text": string;
+        /**
+          * Trigger mode. - `'icon'` (default): the built-in info icon is the hover target. - `'parent'`: the icon is hidden; the component stretches to fill the   parent element (which **must** have `position: relative`) and the hint   appears on hover of that parent.
+          * @default SulaTooltipTrigger.Icon
+         */
+        "trigger": SulaTooltipTrigger;
+    }
 }
 export interface SulaBreadcrumbCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -997,6 +1025,12 @@ declare global {
         prototype: HTMLSulaTimelineListElement;
         new (): HTMLSulaTimelineListElement;
     };
+    interface HTMLSulaTooltipElement extends Components.SulaTooltip, HTMLStencilElement {
+    }
+    var HTMLSulaTooltipElement: {
+        prototype: HTMLSulaTooltipElement;
+        new (): HTMLSulaTooltipElement;
+    };
     interface HTMLElementTagNameMap {
         "sula-avatar": HTMLSulaAvatarElement;
         "sula-badge": HTMLSulaBadgeElement;
@@ -1019,6 +1053,7 @@ declare global {
         "sula-textfield": HTMLSulaTextfieldElement;
         "sula-tiles": HTMLSulaTilesElement;
         "sula-timeline-list": HTMLSulaTimelineListElement;
+        "sula-tooltip": HTMLSulaTooltipElement;
     }
 }
 declare namespace LocalJSX {
@@ -1263,6 +1298,11 @@ declare namespace LocalJSX {
           * Enable search/filter functionality in dropdown
          */
         "searchable"?: boolean;
+        /**
+          * Show or hide dropdown content
+          * @default false
+         */
+        "showContent"?: boolean;
         /**
           * Value for dropdown
          */
@@ -1750,6 +1790,27 @@ declare namespace LocalJSX {
          */
         "sulaTimelineList"?: SulaTimelineListItem[];
     }
+    interface SulaTooltip {
+        /**
+          * When true, renders a focus ring (21.5×21.5px, 1px border) around the icon.
+          * @default false
+         */
+        "focused"?: boolean;
+        /**
+          * Tooltip position relative to trigger
+          * @default SulaTooltipPosition.Top
+         */
+        "position"?: SulaTooltipPosition;
+        /**
+          * Tooltip hint text — max 300 characters
+         */
+        "text"?: string;
+        /**
+          * Trigger mode. - `'icon'` (default): the built-in info icon is the hover target. - `'parent'`: the icon is hidden; the component stretches to fill the   parent element (which **must** have `position: relative`) and the hint   appears on hover of that parent.
+          * @default SulaTooltipTrigger.Icon
+         */
+        "trigger"?: SulaTooltipTrigger;
+    }
     interface IntrinsicElements {
         "sula-avatar": SulaAvatar;
         "sula-badge": SulaBadge;
@@ -1772,6 +1833,7 @@ declare namespace LocalJSX {
         "sula-textfield": SulaTextfield;
         "sula-tiles": SulaTiles;
         "sula-timeline-list": SulaTimelineList;
+        "sula-tooltip": SulaTooltip;
     }
 }
 export { LocalJSX as JSX };
@@ -1799,6 +1861,7 @@ declare module "@stencil/core" {
             "sula-textfield": LocalJSX.SulaTextfield & JSXBase.HTMLAttributes<HTMLSulaTextfieldElement>;
             "sula-tiles": LocalJSX.SulaTiles & JSXBase.HTMLAttributes<HTMLSulaTilesElement>;
             "sula-timeline-list": LocalJSX.SulaTimelineList & JSXBase.HTMLAttributes<HTMLSulaTimelineListElement>;
+            "sula-tooltip": LocalJSX.SulaTooltip & JSXBase.HTMLAttributes<HTMLSulaTooltipElement>;
         }
     }
 }