@sula-tech/webcomponents 0.11.0 → 0.11.2

package/dist/esm/webcomponents.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-CrFclBiX.js';
-export { s as setNonce } from './index-CrFclBiX.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-CwIBTB8E.js';
+export { s as setNonce } from './index-CwIBTB8E.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_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],"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-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"],"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_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"],"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"],"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"],"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-chip/sula-chip.d.ts

@@ -19,6 +19,10 @@ export declare class SulaChip {
      * Items for list
      */
     items: SulaMenuListItem[];
+    /**
+     * Chip is selected
+     */
+    selected: boolean;
     /**
      * Event emitted when chip is clicked
      */

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

@@ -30,6 +30,14 @@ declare const _default: {
                 required: boolean;
             };
         };
+        selected: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
         items: {
             control: string;
             defaultValue: any[];
@@ -59,6 +67,7 @@ export default _default;
 export declare const Default: any;
 export declare const NegativeAppearance: any;
 export declare const DisabledChip: any;
+export declare const SelectedChip: any;
 export declare const ChipWithDropdown: any;
 export declare const NegativeChipWithDropdown: any;
 export declare const DisabledChipWithItems: any;

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

@@ -21,6 +21,10 @@ export declare class SulaDropdown {
      * Enable search/filter functionality in dropdown
      */
     searchable?: boolean;
+    /**
+     * Maximum height for dropdown menu in pixels
+     */
+    menuMaxHeight: number;
     /**
      * Event emitted when dropdown is clicked
      */
@@ -42,11 +46,14 @@ export declare class SulaDropdown {
     isFocused: boolean;
     searchTerm: string;
     filteredItems: SulaMenuListItem[];
+    openUpward: boolean;
     node?: HTMLElement;
     searchInputRef?: HTMLInputElement;
     handleValueChange(): void;
     handleShowItemsChange(newValue: boolean): void;
     handleDocumentClick(event: Event): void;
+    handleWindowResize(): void;
+    calculateMenuPosition(): void;
     componentWillLoad(): void;
     componentDidRender(): void;
     handleClick: () => void;

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

@@ -42,6 +42,14 @@ declare const _default: {
                 required: boolean;
             };
         };
+        menuMaxHeight: {
+            control: string;
+            defaultValue: number;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
         dropdownClicked: {
             action: string;
             description: string;
@@ -76,3 +84,4 @@ export declare const EmptyItems: any;
 export declare const LongItemsList: any;
 export declare const Searchable: any;
 export declare const SearchableWithSelectedValue: any;
+export declare const AutoPositioning: any;

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

@@ -9,6 +9,10 @@ export declare class SulaMenuSelectList {
      * Menu is full width
      */
     fullWidth: boolean;
+    /**
+     * Maximum height for menu in pixels
+     */
+    maxHeight: number;
     /**
      * Selected value
      */

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

@@ -21,6 +21,11 @@ export declare class SulaSwitch {
      * Switch sub title (avaible when is `list` type)
      */
     subTitle?: string;
+    /**
+     * Enable responsive layout (full width)
+     * @default false
+     */
+    responsive: boolean;
     /**
      * Event emitted when switch value changes.
      */

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

@@ -46,6 +46,14 @@ declare const _default: {
                 required: boolean;
             };
         };
+        responsive: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
         valueChanged: {
             action: string;
             description: string;
@@ -77,3 +85,5 @@ export declare const List: any;
 export declare const ListActive: any;
 export declare const ListDisabled: any;
 export declare const ListActiveDisabled: any;
+export declare const ListResponsive: any;
+export declare const ListResponsiveActive: any;

package/dist/types/components.d.ts

@@ -191,6 +191,11 @@ export namespace Components {
           * @default []
          */
         "items": SulaMenuListItem[];
+        /**
+          * Chip is selected
+          * @default false
+         */
+        "selected": boolean;
         /**
           * Chip text
           * @default ''
@@ -212,6 +217,11 @@ export namespace Components {
           * Dropdown label
          */
         "label": string;
+        /**
+          * Maximum height for dropdown menu in pixels
+          * @default 260
+         */
+        "menuMaxHeight": number;
         /**
           * Enable search/filter functionality in dropdown
          */
@@ -250,6 +260,11 @@ export namespace Components {
           * @default []
          */
         "items": SulaMenuListItem[];
+        /**
+          * Maximum height for menu in pixels
+          * @default 260
+         */
+        "maxHeight": number;
         /**
           * Selected value
          */
@@ -418,6 +433,11 @@ export namespace Components {
           * Switch label
          */
         "label"?: string;
+        /**
+          * Enable responsive layout (full width)
+          * @default false
+         */
+        "responsive": boolean;
         /**
           * Switch sub title (avaible when is `list` type)
          */
@@ -1159,6 +1179,11 @@ declare namespace LocalJSX {
           * Event emitted when item is selected
          */
         "onMenuItemSelected"?: (event: SulaChipCustomEvent<SulaMenuListItem>) => void;
+        /**
+          * Chip is selected
+          * @default false
+         */
+        "selected"?: boolean;
         /**
           * Chip text
           * @default ''
@@ -1180,6 +1205,11 @@ declare namespace LocalJSX {
           * Dropdown label
          */
         "label"?: string;
+        /**
+          * Maximum height for dropdown menu in pixels
+          * @default 260
+         */
+        "menuMaxHeight"?: number;
         /**
           * Event emitted when dropdown is clicked
          */
@@ -1234,6 +1264,11 @@ declare namespace LocalJSX {
           * @default []
          */
         "items"?: SulaMenuListItem[];
+        /**
+          * Maximum height for menu in pixels
+          * @default 260
+         */
+        "maxHeight"?: number;
         /**
           * Event emitted when item is selected
          */
@@ -1470,6 +1505,11 @@ declare namespace LocalJSX {
           * Event emitted when switch value changes.
          */
         "onValueChanged"?: (event: SulaSwitchCustomEvent<boolean>) => void;
+        /**
+          * Enable responsive layout (full width)
+          * @default false
+         */
+        "responsive"?: boolean;
         /**
           * Switch sub title (avaible when is `list` type)
          */