@sula-tech/webcomponents 0.4.1 → 0.6.0

package/dist/esm/webcomponents.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-Yyeke16a.js';
-export { s as setNonce } from './index-Yyeke16a.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-or7qTZgT.js';
+export { s as setNonce } from './index-or7qTZgT.js';
 
 /*
  Stencil Client Patch Browser v4.35.1 | MIT Licensed | https://stenciljs.com
@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["sula-avatar_14",[[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[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-button",{"text":[1025],"icon":[1025],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[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],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]]],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-loader",{"size":[1],"animationInstance":[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"],"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]},[[4,"click","handleClick"]]],[1,"sula-menu-select-list",{"items":[1040]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  return bootstrapLazy([["sula-avatar_18",[[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"]}],[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],"selectedItem":[32],"showItems":[32],"isFocused":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"]}],[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],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]]],[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]},[[4,"click","handleClick"]]],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
 });
 //# sourceMappingURL=webcomponents.js.map
 

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

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { SulaButtonAppearance, SulaButtonSize, SulaButtonStatus, SulaButtonType } from './model/sula-button.model';
+import { SulaLoaderSize } from '../sula-loader/model/sula-loader.model';
 export declare class SulaButton {
     /**
      * Button text when is text type
@@ -9,6 +10,14 @@ export declare class SulaButton {
      * Button icon when is Icon type
      */
     icon: string;
+    /**
+     * Button left icon
+     */
+    leftIcon: string;
+    /**
+     * Button right icon
+     */
+    rightIcon: string;
     /**
      * Button appearance
      */
@@ -45,11 +54,12 @@ export declare class SulaButton {
     private getTextButtonStyles;
     private getTextTypeSizeClass;
     private getButtonSizeByTypeClass;
-    private getIconContainerClass;
+    private getArrowIconContainerClass;
     private getBaseButtonClass;
     private renderIconContent;
     private renderTextContent;
     private renderArrowIcon;
+    getLoadingSize(): SulaLoaderSize.Small | SulaLoaderSize.Medium;
     handleClick: () => void;
     render(): any;
 }

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

@@ -5,18 +5,50 @@ declare const _default: {
     argTypes: {
         text: {
             control: string;
-            defaultValue: string;
             description: string;
-            type: {
-                required: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         icon: {
             control: string;
-            defaultValue: string;
             description: string;
-            type: {
-                required: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        leftIcon: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        rightIcon: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         appearance: {
@@ -24,10 +56,14 @@ declare const _default: {
                 type: string;
             };
             options: SulaButtonAppearance[];
-            defaultValue: SulaButtonAppearance;
             description: string;
-            type: {
-                required: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         type: {
@@ -35,10 +71,14 @@ declare const _default: {
                 type: string;
             };
             options: SulaButtonType[];
-            defaultValue: SulaButtonType;
             description: string;
-            type: {
-                required: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         size: {
@@ -46,10 +86,14 @@ declare const _default: {
                 type: string;
             };
             options: SulaButtonSize[];
-            defaultValue: SulaButtonSize;
             description: string;
-            type: {
-                required: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         status: {
@@ -57,31 +101,48 @@ declare const _default: {
                 type: string;
             };
             options: SulaButtonStatus[];
-            defaultValue: SulaButtonStatus;
             description: string;
-            type: {
-                required: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         loading: {
             control: string;
-            defaultValue: boolean;
             description: string;
-            type: {
-                required: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         buttonDisabled: {
             control: string;
-            defaultValue: boolean;
             description: string;
-            type: {
-                required: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         buttonClicked: {
             action: string;
             description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
         };
     };
     parameters: {
@@ -93,13 +154,43 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
-export declare const IconButton: any;
+export declare const Playground: any;
+export declare const DefaultAppearance: any;
+export declare const SecondaryAppearance: any;
 export declare const TextAppearance: any;
-export declare const SecondaryButton: any;
-export declare const LargeButton: any;
-export declare const DangerButton: any;
-export declare const NegativeButton: any;
-export declare const DisabledButton: any;
-export declare const LoadingButton: any;
-export declare const IconAndTextButton: any;
+export declare const IconButton: any;
+export declare const Sizes: {
+    (): HTMLDivElement;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const StatusVariations: {
+    (): HTMLDivElement;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const WithLeftIcon: any;
+export declare const WithRightIcon: any;
+export declare const WithBothIcons: any;
+export declare const LoadingState: any;
+export declare const DisabledState: any;
+export declare const AllVariations: {
+    (): HTMLDivElement;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SulaMenuListItem, SulaMenuSelectListCustomEvent } from '../../components';
+export declare class SulaDropdown {
+    /**
+     * Dropdown label
+     */
+    label: string;
+    /**
+     * Dropdown is disabled
+     */
+    disabled: boolean;
+    /**
+     * Items for list
+     */
+    items: SulaMenuListItem[];
+    /**
+     * Value for dropdown
+     */
+    value?: SulaMenuListItem;
+    /**
+     * Event emitted when dropdown is clicked
+     */
+    dropdownClicked: EventEmitter<void>;
+    /**
+     * Event emitted when dropdown is focused
+     */
+    dropdownFocused: EventEmitter<void>;
+    /**
+     * Event emitted when dropdown is focused out
+     */
+    dropdownFocusedOut: EventEmitter<void>;
+    /**
+     * Event emitted when item is selected
+     */
+    menuItemSelected: EventEmitter<SulaMenuListItem>;
+    selectedItem?: SulaMenuListItem;
+    showItems: boolean;
+    isFocused: boolean;
+    node?: HTMLElement;
+    handleValueChange(): void;
+    handleDocumentClick(event: Event): void;
+    componentWillLoad(): void;
+    handleClick: () => void;
+    handleItemSelected: (item: SulaMenuSelectListCustomEvent<SulaMenuListItem>) => void;
+    getIconClass(): "text-text-primary" | "text-icon-disabled";
+    handleFocus: () => void;
+    handleBlur: () => void;
+    render(): any;
+}

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

@@ -0,0 +1,68 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        disabled: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        items: {
+            control: string;
+            defaultValue: any[];
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        value: {
+            control: string;
+            defaultValue: any;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        dropdownClicked: {
+            action: string;
+            description: string;
+        };
+        dropdownFocused: {
+            action: string;
+            description: string;
+        };
+        dropdownFocusedOut: {
+            action: string;
+            description: string;
+        };
+        menuItemSelected: {
+            action: string;
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const WithSelectedValue: any;
+export declare const Disabled: any;
+export declare const DisabledWithValue: any;
+export declare const EmptyItems: any;
+export declare const LongItemsList: any;

package/dist/types/components/sula-menu-select-list/sula-menu-select-list.d.ts

@@ -5,6 +5,10 @@ export declare class SulaMenuSelectList {
      * Items for list
      */
     items: SulaMenuListItem[];
+    /**
+     * Menu is full width
+     */
+    fullWidth: boolean;
     /**
      * Event emitted when item is selected
      */

package/dist/types/components/sula-progress-bar/model/sula-progress-bar.model.d.ts

@@ -0,0 +1,12 @@
+export declare enum SulaProgressBarAppearance {
+    Primary = "primary",
+    Secondary = "secondary",
+    OnPrimary = "on-primary",
+    Success = "success",
+    Error = "error"
+}
+export declare enum SulaProgressBarState {
+    Default = "default",
+    Success = "success",
+    Error = "error"
+}

package/dist/types/components/sula-progress-bar/sula-progress-bar.d.ts

@@ -0,0 +1,33 @@
+import { SulaProgressBarAppearance, SulaProgressBarState } from './model/sula-progress-bar.model';
+export declare class SulaProgressBar {
+    /**
+     * The style of the progress bar.
+     */
+    appearance: SulaProgressBarAppearance;
+    /**
+     * The state of the progress bar.
+     */
+    state: SulaProgressBarState;
+    /**
+     * The label displayed at the top of the progress bar.
+     */
+    topLabel: string;
+    /**
+     * The label displayed at the bottom of the progress bar.
+     */
+    bottomLabel: string;
+    /**
+     * The progress value of the progress bar.
+     */
+    progress: number;
+    /**
+     * Show progress
+     */
+    showProgress: boolean;
+    validateProgress(newValue: number): void;
+    componentWillLoad(): void;
+    handleProgress(value: number): void;
+    getProgressBarStyle(): string;
+    getProgressBarStateElement(): any;
+    render(): any;
+}

package/dist/types/components/sula-progress-bar/sula-progress.stories.d.ts

@@ -0,0 +1,84 @@
+import { SulaProgressBarAppearance, SulaProgressBarState } from './model/sula-progress-bar.model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        appearance: {
+            control: {
+                type: string;
+            };
+            options: SulaProgressBarAppearance[];
+            defaultValue: SulaProgressBarAppearance;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        state: {
+            control: {
+                type: string;
+            };
+            options: SulaProgressBarState[];
+            defaultValue: SulaProgressBarState;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        topLabel: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        bottomLabel: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        progress: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+            defaultValue: number;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        showProgress: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const Secondary: any;
+export declare const OnPrimary: any;
+export declare const Success: any;
+export declare const Error: any;
+export declare const WithoutProgress: any;
+export declare const MinimalProgress: any;
+export declare const AlmostComplete: any;
+export declare const NoLabels: any;
+export declare const SuccessAppearanceDefault: any;

package/dist/types/components/sula-search-bar/model/sula-search.bar-model.d.ts

@@ -0,0 +1,4 @@
+export declare enum SulaSearchBarStyle {
+    Default = "default",
+    Highlight = "highlight"
+}

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

@@ -0,0 +1,50 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SulaSearchBarStyle } from './model/sula-search.bar-model';
+export declare class SulaSearchBar {
+    /**
+     * Value for the search bar.
+     */
+    value?: string;
+    /**
+     * Search bar style
+     */
+    searchBarStyle: SulaSearchBarStyle;
+    /**
+     * Search bar placeholder
+     */
+    placeholder: string;
+    /**
+     * Search bar left icon
+     */
+    leftIcon: string;
+    /**
+     * Search bar right icon
+     */
+    rightIcon: string;
+    /**
+     * Event emitted when search bar value changes.
+     */
+    valueChanged: EventEmitter<string>;
+    /**
+     * Event emitted when search bar is focused.
+     */
+    focusedOn: EventEmitter<void>;
+    /**
+     * Event emitted when search bar is focused out.
+     */
+    focusedOut: EventEmitter<void>;
+    /**
+     * Event emitted when right icon is clicked
+     */
+    rightIconClicked: EventEmitter<void>;
+    isFocused: boolean;
+    textValue: string;
+    inputElement: HTMLInputElement;
+    componentWillLoad(): void;
+    getStyleClass(): string;
+    handleInputFocus: () => void;
+    handleInputBlur: () => void;
+    handleRightIconClick: (event: MouseEvent) => void;
+    handleValueChanges: (event: InputEvent) => void;
+    render(): any;
+}

package/dist/types/components/sula-search-bar/sula-search-bar.stories.d.ts

@@ -0,0 +1,84 @@
+import { SulaSearchBarStyle } from './model/sula-search.bar-model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        value: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        searchBarStyle: {
+            control: {
+                type: string;
+            };
+            options: SulaSearchBarStyle[];
+            defaultValue: SulaSearchBarStyle;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        placeholder: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        leftIcon: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        rightIcon: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        valueChanged: {
+            action: string;
+            description: string;
+        };
+        focusedOn: {
+            action: string;
+            description: string;
+        };
+        focusedOut: {
+            action: string;
+            description: string;
+        };
+        rightIconClicked: {
+            action: string;
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const WithValue: any;
+export declare const WithRightIcon: any;
+export declare const HighlightStyle: any;
+export declare const WithoutLeftIcon: any;
+export declare const WithBothIcons: any;
+export declare const CustomPlaceholder: any;
+export declare const HighlightWithIcons: any;
+export declare const CustomIcons: any;
+export declare const WithValueAndRightIcon: any;