@sula-tech/webcomponents 0.14.0 → 0.14.1

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_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"],"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-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.d.ts

@@ -240,6 +240,11 @@ export namespace Components {
           * Enable search/filter functionality in dropdown
          */
         "searchable"?: boolean;
+        /**
+          * Show or hide dropdown content
+          * @default false
+         */
+        "showContent": boolean;
         /**
           * Value for dropdown
          */
@@ -1263,6 +1268,11 @@ declare namespace LocalJSX {
           * Enable search/filter functionality in dropdown
          */
         "searchable"?: boolean;
+        /**
+          * Show or hide dropdown content
+          * @default false
+         */
+        "showContent"?: boolean;
         /**
           * Value for dropdown
          */

package/dist/webcomponents/{p-01cb6887.entry.js → p-a7141407.entry.js}

@@ -734,7 +734,9 @@ const SulaDropdown = class {
     /**
          * Close dropdown when an item is selected or content is clicked
          */    this.closeOnSelect = true;
-    this.showItems = false;
+    /**
+         * Show or hide dropdown content
+         */    this.showContent = false;
     this.isFocused = false;
     this.searchTerm = "";
     this.filteredItems = [];
@@ -743,9 +745,9 @@ const SulaDropdown = class {
       if (this.disabled) return;
       this.dropdownClicked.emit();
       if (this.customContent || this.items.length > 0) {
-        this.showItems = !this.showItems;
+        this.showContent = !this.showContent;
       }
-      if (this.searchable && this.showItems && this.searchInputRef) {
+      if (this.searchable && this.showContent && this.searchInputRef) {
         this.searchInputRef.focus();
       }
     };
@@ -755,7 +757,7 @@ const SulaDropdown = class {
       this.menuItemSelected.emit(e.detail);
       if (this.closeOnSelect) {
         setTimeout((() => {
-          this.showItems = false;
+          this.showContent = false;
         }), 0);
       }
     };
@@ -787,7 +789,7 @@ const SulaDropdown = class {
       this.selectedItem = this.value;
     }
   }
-  handleShowItemsChange(e) {
+  handleShowContentChange(e) {
     if (!e) {
       this.searchTerm = "";
       this.filteredItems = [];
@@ -798,11 +800,11 @@ const SulaDropdown = class {
     const t = e.composedPath();
     const o = t.some((e => e === this.node));
     if (!o) {
-      this.showItems = false;
+      this.showContent = false;
     }
   }
   handleWindowResize() {
-    if (this.showItems) {
+    if (this.showContent) {
       this.calculateMenuPosition();
     }
   }
@@ -822,7 +824,7 @@ const SulaDropdown = class {
     }
   }
   componentDidRender() {
-    if (this.showItems) {
+    if (this.showContent) {
       this.calculateMenuPosition();
       if (this.searchable && this.searchInputRef) {
         this.searchInputRef.focus();
@@ -836,10 +838,10 @@ const SulaDropdown = class {
   render() {
     var e;
     return h$1(Host, {
-      key: "bcb9fc6510f1f67d054824aeb6d50502e20ab8d0",
+      key: "812029af9121bf2f6b10b426b93dc0095796d66d",
       ref: e => this.node = e
     }, h$1("div", {
-      key: "a46d801d67e501faee720916fff32f37791b0ee9",
+      key: "24e4b075470cd3ac8311374d0eebbc9d62bc248e",
       class: {
         "flex justify-between items-center border border-line-input h-[72px] px-16 rounded-xl relative": true,
         "bg-surface-body cursor-pointer": !this.disabled,
@@ -851,17 +853,17 @@ const SulaDropdown = class {
       onFocus: this.handleFocus,
       onBlur: this.handleBlur
     }, h$1("div", {
-      key: "ef745b49c183c29d86fd50d3fa9d2084e75d8156",
+      key: "10bb402bb063b83a66996c3b21e345045779fea6",
       class: "flex flex-col w-full"
     }, h$1("label", {
-      key: "833a6a1866ebc31842d746fd1beef1af7d368fed",
+      key: "9e6013e76bd927d9cf50bccfe542205b2db5ad3c",
       class: {
-        "text-base leading-4": !this.selectedItem && !(this.searchable && this.showItems),
-        "text-sm leading-4 font-bold": !!this.selectedItem || this.searchable && this.showItems,
+        "text-base leading-4": !this.selectedItem && !(this.searchable && this.showContent),
+        "text-sm leading-4 font-bold": !!this.selectedItem || this.searchable && this.showContent,
         "text-text-primary": !this.disabled,
         "text-text-disabled": this.disabled
       }
-    }, this.label), this.searchable && this.showItems ? h$1("input", {
+    }, this.label), this.searchable && this.showContent ? h$1("input", {
       ref: e => this.searchInputRef = e,
       type: "text",
       value: this.searchTerm,
@@ -875,14 +877,14 @@ const SulaDropdown = class {
         "text-text-disabled": this.disabled
       }
     }, this.selectedItem.title)), h$1("div", {
-      key: "1b8a1970c4750c3f314aa7d8e5193e8d9cfa3483",
+      key: "9c570fe666a9e400882728dd6cc7375efc6fd9c3",
       class: "flex items-center justify-center ml-8 leading-6 text-2xl"
     }, h$1("sula-icon", {
-      key: "635d6d6df91f4ea2d8d051ca7443941a44a7c856",
-      icon: `ph ph-caret-${this.showItems ? "up" : "down"}`,
+      key: "c33165aec78c9d227a645d5a5390caa5f5580e48",
+      icon: `ph ph-caret-${this.showContent ? "up" : "down"}`,
       customClass: `${this.getIconClass()} text-2xl`
-    })), this.showItems && h$1("div", {
-      key: "223e42138b156a98b1296e317599c2eb16e3a633",
+    })), this.showContent && h$1("div", {
+      key: "a5f4c9c26cfc64bb39300474e8efb52174b538ab",
       class: {
         "absolute z-50 left-0 w-full transition-all duration-200 ease-in-out": true,
         "bottom-[72px]": this.openUpward,
@@ -914,7 +916,7 @@ const SulaDropdown = class {
   static get watchers() {
     return {
       value: [ "handleValueChange" ],
-      showItems: [ "handleShowItemsChange" ]
+      showContent: [ "handleShowContentChange" ]
     };
   }
 };
@@ -23082,4 +23084,4 @@ SulaTimelineList.style = sulaTimelineListCss;
 
 export { SulaAvatar as sula_avatar, SulaBadge as sula_badge, SulaBreadcrumb as sula_breadcrumb, SulaButton as sula_button, SulaCheckbox as sula_checkbox, SulaChip as sula_chip, SulaDropdown as sula_dropdown, SulaIcon as sula_icon, SulaLoader as sula_loader, SulaMenuSelectList as sula_menu_select_list, SulaModal as sula_modal, SulaProgressBar as sula_progress_bar, SulaRadioButton as sula_radio_button, SulaSearchBar as sula_search_bar, SulaSegmentedControl as sula_segmented_control, SulaSwitch as sula_switch, SulaTag as sula_tag, SulaTextarea as sula_textarea, SulaTextfield as sula_textfield, SulaTiles as sula_tiles, SulaTimelineList as sula_timeline_list };
 //# sourceMappingURL=sula-avatar.sula-badge.sula-breadcrumb.sula-button.sula-checkbox.sula-chip.sula-dropdown.sula-icon.sula-loader.sula-menu-select-list.sula-modal.sula-progress-bar.sula-radio-button.sula-search-bar.sula-segmented-control.sula-switch.sula-tag.sula-textarea.sula-textfield.sula-tiles.sula-timeline-list.entry.esm.js.map
-//# sourceMappingURL=p-01cb6887.entry.js.map
+//# sourceMappingURL=p-a7141407.entry.js.map