@sula-tech/webcomponents 0.9.2 → 0.10.0

package/dist/esm/webcomponents.js

@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["sula-avatar_19",[[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],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"selectedItem":[32],"showItems":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32]},[[4,"click","handleDocumentClick"]],{"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-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-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"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[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"],"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"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  return bootstrapLazy([["sula-avatar_20",[[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],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"selectedItem":[32],"showItems":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32]},[[4,"click","handleDocumentClick"]],{"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-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"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[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"],"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"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
 });
 //# sourceMappingURL=webcomponents.js.map
 

package/dist/types/components/sula-segmented-control/model/sula-segmented-control.model.d.ts

@@ -0,0 +1,19 @@
+export declare enum SulaSegmentedControlType {
+    Icon = "icon",
+    Text = "text"
+}
+export declare enum SulaSegmentedControlSize {
+    Small = "small",
+    Default = "default"
+}
+export declare enum SulaSegmentedControlColor {
+    White = "white",
+    Gray = "gray"
+}
+export interface SulaSegmentedControlOption {
+    label?: string;
+    addChevron?: boolean;
+    value: string | number;
+    icon?: string;
+    selected?: boolean;
+}

package/dist/types/components/sula-segmented-control/sula-segmented-control.d.ts

@@ -0,0 +1,37 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SulaSegmentedControlColor, SulaSegmentedControlOption, SulaSegmentedControlSize, SulaSegmentedControlType } from './model/sula-segmented-control.model';
+export declare class SulaSegmentedControl {
+    /**
+     * Items for the segmented control.
+     */
+    items: SulaSegmentedControlOption[];
+    /**
+     * Segmented control type.
+     */
+    type: SulaSegmentedControlType;
+    /**
+     * Segmented control size.
+     */
+    size: SulaSegmentedControlSize;
+    /**
+     * Segmented control color.
+     */
+    color: SulaSegmentedControlColor;
+    /**
+     * Emitted when an item is clicked.
+     */
+    itemClicked: EventEmitter<SulaSegmentedControlOption>;
+    /**
+     * Emitted when an item is hovered.
+     */
+    itemHovered: EventEmitter<SulaSegmentedControlOption>;
+    /**
+     * Emitted when an item is blurred.
+     */
+    itemBlur: EventEmitter<SulaSegmentedControlOption>;
+    handleItemClick(selectedItem: SulaSegmentedControlOption): void;
+    handleItemHover(hoveredItem: SulaSegmentedControlOption): void;
+    handleItemBlur(blurredItem: SulaSegmentedControlOption): void;
+    getCaretIconClass(item: SulaSegmentedControlOption): "text-text-primary" | "text-brand-primary" | "text-negative-negative-1" | "text-icon-primary";
+    render(): any;
+}

package/dist/types/components/sula-segmented-control/sula-segmented-control.stories.d.ts

@@ -0,0 +1,136 @@
+import { SulaSegmentedControlColor, SulaSegmentedControlSize, SulaSegmentedControlType } from './model/sula-segmented-control.model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        items: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        type: {
+            control: {
+                type: string;
+            };
+            options: SulaSegmentedControlType[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        size: {
+            control: {
+                type: string;
+            };
+            options: SulaSegmentedControlSize[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        color: {
+            control: {
+                type: string;
+            };
+            options: SulaSegmentedControlColor[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        itemClicked: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        itemHovered: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        itemBlur: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Playground: any;
+export declare const TextType: any;
+export declare const IconType: any;
+export declare const WithChevron: any;
+export declare const SmallSize: any;
+export declare const Sizes: {
+    (): HTMLDivElement;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const GrayBackground: any;
+export declare const ColorVariations: {
+    (): HTMLDivElement;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const ManyOptions: any;
+export declare const AllVariations: {
+    (): HTMLDivElement;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

package/dist/types/components.d.ts

@@ -16,6 +16,7 @@ import { SulaLoaderSize } from "./components/sula-loader/model/sula-loader.model
 import { SulaModalSlotOverflow, SulaModalType } from "./components/sula-modal/model/sula-modal.model";
 import { SulaProgressBarAppearance, SulaProgressBarState } from "./components/sula-progress-bar/model/sula-progress-bar.model";
 import { SulaSearchBarStyle } from "./components/sula-search-bar/model/sula-search.bar-model";
+import { SulaSegmentedControlColor, SulaSegmentedControlOption, SulaSegmentedControlSize, SulaSegmentedControlType } from "./components/sula-segmented-control/model/sula-segmented-control.model";
 import { SulaSwitchType } from "./components/sula-switch/model/sula-switch.model";
 import { SulaTagAppearance, SulaTagFontWeight, SulaTagIconStatus, SulaTagSize } from "./components/sula-tag/model/sula-tag.model";
 import { SulaTextareaStatus } from "./components/sula-textarea/model/sula-textarea.model";
@@ -33,6 +34,7 @@ export { SulaLoaderSize } from "./components/sula-loader/model/sula-loader.model
 export { SulaModalSlotOverflow, SulaModalType } from "./components/sula-modal/model/sula-modal.model";
 export { SulaProgressBarAppearance, SulaProgressBarState } from "./components/sula-progress-bar/model/sula-progress-bar.model";
 export { SulaSearchBarStyle } from "./components/sula-search-bar/model/sula-search.bar-model";
+export { SulaSegmentedControlColor, SulaSegmentedControlOption, SulaSegmentedControlSize, SulaSegmentedControlType } from "./components/sula-segmented-control/model/sula-segmented-control.model";
 export { SulaSwitchType } from "./components/sula-switch/model/sula-switch.model";
 export { SulaTagAppearance, SulaTagFontWeight, SulaTagIconStatus, SulaTagSize } from "./components/sula-tag/model/sula-tag.model";
 export { SulaTextareaStatus } from "./components/sula-textarea/model/sula-textarea.model";
@@ -370,6 +372,28 @@ export namespace Components {
          */
         "value"?: string;
     }
+    interface SulaSegmentedControl {
+        /**
+          * Segmented control color.
+          * @default SulaSegmentedControlColor.White
+         */
+        "color": SulaSegmentedControlColor;
+        /**
+          * Items for the segmented control.
+          * @default []
+         */
+        "items": SulaSegmentedControlOption[];
+        /**
+          * Segmented control size.
+          * @default SulaSegmentedControlSize.Default
+         */
+        "size": SulaSegmentedControlSize;
+        /**
+          * Segmented control type.
+          * @default SulaSegmentedControlType.Text
+         */
+        "type": SulaSegmentedControlType;
+    }
     interface SulaSwitch {
         /**
           * Is switch active
@@ -584,6 +608,10 @@ export interface SulaSearchBarCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSulaSearchBarElement;
 }
+export interface SulaSegmentedControlCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSulaSegmentedControlElement;
+}
 export interface SulaSwitchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSulaSwitchElement;
@@ -784,6 +812,25 @@ declare global {
         prototype: HTMLSulaSearchBarElement;
         new (): HTMLSulaSearchBarElement;
     };
+    interface HTMLSulaSegmentedControlElementEventMap {
+        "itemClicked": SulaSegmentedControlOption;
+        "itemHovered": SulaSegmentedControlOption;
+        "itemBlur": SulaSegmentedControlOption;
+    }
+    interface HTMLSulaSegmentedControlElement extends Components.SulaSegmentedControl, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSulaSegmentedControlElementEventMap>(type: K, listener: (this: HTMLSulaSegmentedControlElement, ev: SulaSegmentedControlCustomEvent<HTMLSulaSegmentedControlElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSulaSegmentedControlElementEventMap>(type: K, listener: (this: HTMLSulaSegmentedControlElement, ev: SulaSegmentedControlCustomEvent<HTMLSulaSegmentedControlElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSulaSegmentedControlElement: {
+        prototype: HTMLSulaSegmentedControlElement;
+        new (): HTMLSulaSegmentedControlElement;
+    };
     interface HTMLSulaSwitchElementEventMap {
         "valueChanged": boolean;
         "focusedOn": void;
@@ -895,6 +942,7 @@ declare global {
         "sula-progress-bar": HTMLSulaProgressBarElement;
         "sula-radio-button": HTMLSulaRadioButtonElement;
         "sula-search-bar": HTMLSulaSearchBarElement;
+        "sula-segmented-control": HTMLSulaSegmentedControlElement;
         "sula-switch": HTMLSulaSwitchElement;
         "sula-tag": HTMLSulaTagElement;
         "sula-textarea": HTMLSulaTextareaElement;
@@ -1319,6 +1367,40 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface SulaSegmentedControl {
+        /**
+          * Segmented control color.
+          * @default SulaSegmentedControlColor.White
+         */
+        "color"?: SulaSegmentedControlColor;
+        /**
+          * Items for the segmented control.
+          * @default []
+         */
+        "items"?: SulaSegmentedControlOption[];
+        /**
+          * Emitted when an item is blurred.
+         */
+        "onItemBlur"?: (event: SulaSegmentedControlCustomEvent<SulaSegmentedControlOption>) => void;
+        /**
+          * Emitted when an item is clicked.
+         */
+        "onItemClicked"?: (event: SulaSegmentedControlCustomEvent<SulaSegmentedControlOption>) => void;
+        /**
+          * Emitted when an item is hovered.
+         */
+        "onItemHovered"?: (event: SulaSegmentedControlCustomEvent<SulaSegmentedControlOption>) => void;
+        /**
+          * Segmented control size.
+          * @default SulaSegmentedControlSize.Default
+         */
+        "size"?: SulaSegmentedControlSize;
+        /**
+          * Segmented control type.
+          * @default SulaSegmentedControlType.Text
+         */
+        "type"?: SulaSegmentedControlType;
+    }
     interface SulaSwitch {
         /**
           * Is switch active
@@ -1559,6 +1641,7 @@ declare namespace LocalJSX {
         "sula-progress-bar": SulaProgressBar;
         "sula-radio-button": SulaRadioButton;
         "sula-search-bar": SulaSearchBar;
+        "sula-segmented-control": SulaSegmentedControl;
         "sula-switch": SulaSwitch;
         "sula-tag": SulaTag;
         "sula-textarea": SulaTextarea;
@@ -1584,6 +1667,7 @@ declare module "@stencil/core" {
             "sula-progress-bar": LocalJSX.SulaProgressBar & JSXBase.HTMLAttributes<HTMLSulaProgressBarElement>;
             "sula-radio-button": LocalJSX.SulaRadioButton & JSXBase.HTMLAttributes<HTMLSulaRadioButtonElement>;
             "sula-search-bar": LocalJSX.SulaSearchBar & JSXBase.HTMLAttributes<HTMLSulaSearchBarElement>;
+            "sula-segmented-control": LocalJSX.SulaSegmentedControl & JSXBase.HTMLAttributes<HTMLSulaSegmentedControlElement>;
             "sula-switch": LocalJSX.SulaSwitch & JSXBase.HTMLAttributes<HTMLSulaSwitchElement>;
             "sula-tag": LocalJSX.SulaTag & JSXBase.HTMLAttributes<HTMLSulaTagElement>;
             "sula-textarea": LocalJSX.SulaTextarea & JSXBase.HTMLAttributes<HTMLSulaTextareaElement>;

package/dist/types/testing/e2e-setup.d.ts

@@ -0,0 +1 @@
+export {};