@aquera/nile-elements 1.4.4-beta-1.2 → 1.4.5-beta-1.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.4.4-beta-1.2",
+  "version": "1.4.5-beta-1.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-auto-complete/nile-auto-complete.ts

@@ -71,6 +71,7 @@ export class NileAutoComplete extends NileElement {
 
   @property({ type: Boolean, reflect: true }) enableTabClose = false;
 
+  @property({ type: Boolean, reflect: true, attribute: true }) noDropdownClose = false;
 
   @state() menuItems: any = [];
 
@@ -225,7 +226,7 @@ enableTabClose: this.enableTabClose,
   public render(): TemplateResult {
     const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();
     return html`
-      <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick exportparts="input, base">
+      <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} ?stay-open-on-select=${this.noDropdownClose} noOpenOnCLick exportparts="input, base">
         <nile-input class="nile-auto-complete--input"
           ?no-border=${this.noBorder}
           ?no-outline=${this.noOutline}
@@ -308,8 +309,13 @@ enableTabClose: this.enableTabClose,
   handleSelect(event: CustomEvent) {
     this.value = event.detail.value;
     this.emit('nile-complete', { value: event.detail.value });
-    this.isDropdownOpen = false;
-    this.dropdownElement?.hide();
+    if (this.noDropdownClose) {
+      this.isDropdownOpen = true;
+      this.dropdownElement?.show();
+    } else {
+      this.isDropdownOpen = false;
+      this.dropdownElement?.hide();
+    }
   }
 
   private setVirtualMenuWidth() {

package/src/nile-chip/nile-chip.ts

@@ -127,9 +127,11 @@ export class NileChip extends NileElement {
 
   @property({ type: Boolean }) enableTagDelete = false;
 
-  private isSelectingFromDropdown = false;
+  @property({ type: String, reflect: true, attribute: true }) openDropdownOnFocus: string = 'true';
 
+  @property({ type: Boolean, reflect: true, attribute: true }) noDropdownClose = false;
 
+  private isSelectingFromDropdown = false;
   private resetDropdownState() {
     this.isSelectingFromDropdown = false;
   }
@@ -206,12 +208,9 @@ export class NileChip extends NileElement {
     const path = event.composedPath();
   
     if (this.isSelectingFromDropdown) {
-      // Do NOT process addOnBlur while selecting dropdown
       this.resetDropdownState();
       return;
     }
-  
-    // User clicked outside chip → normal addOnBlur path
     if (!path.includes(this)) {
       if (this.addOnBlur && this.acceptUserInput && this.inputValue) {
         this.addChipFromInputValue();
@@ -220,8 +219,6 @@ export class NileChip extends NileElement {
     }
   };
   
-  
-  
   connectedCallback() {
     super.connectedCallback();
     document.addEventListener('click', this.handleDocumentClick);
@@ -358,7 +355,7 @@ export class NileChip extends NileElement {
                     .disabled=${this.disabled}
                     .readonly=${this.readonly}
                     .portal=${this.portal}
-                    openOnFocus
+                    ?openOnFocus=${this.openDropdownOnFocus === 'true' ? true : false}
                     exportparts="options__wrapper, input, base"
                     .placeholder=${this.placeholder}
                     @nile-input=${this.handleInputChange}
@@ -367,7 +364,7 @@ export class NileChip extends NileElement {
                     @nile-blur=${this.handleBlur}
                     @nile-complete=${this.handleSelect}
                     @mousedown=${this.markDropdownSelectStart}
-
+                    .noDropdownClose=${this.noDropdownClose}
                   ></nile-auto-complete>
                 `}
           </div>
@@ -389,7 +386,6 @@ export class NileChip extends NileElement {
   private handleSelect(event: CustomEvent<CustomEventDetail>) {
     this.isSelectingFromDropdown = false;
     this.resetDropdownState();
-
     // Add the selected value to the tags array only if it doesn't already exist
     const selectedValue = event.detail.value;
     const selectedOption = this.autoCompleteOptions.find(
@@ -556,7 +552,6 @@ export class NileChip extends NileElement {
 
   private handleBlur() {
     if (this.isSelectingFromDropdown) return;
-  
     if (this.addOnBlur && this.acceptUserInput && this.inputValue) {
       this.addChipFromInputValue();
     }

package/src/nile-dropdown/nile-dropdown.ts

@@ -279,6 +279,9 @@ export class NileDropdown extends NileElement {
     if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === 'nile-menu') {
       this.hide();
       this.focusOnTrigger();
+    } else if(this.stayOpenOnSelect && target.tagName.toLowerCase() === 'nile-menu') {
+      this.show();
+      this.focusOnTrigger();
     }
   }
 

package/src/nile-toast/nile-toast.ts

@@ -192,13 +192,13 @@ export class NileToast extends NileElement {
   getIconNameByVariant() {
     switch (this.variant) {
       case 'success':
-        return 'var(--nile-icon-check-circle, var(--ng-icon-check-circle))';
+        return 'var(--nile-icon-radiodone, var(--ng-icon-check-circle))';
       case 'info':
         return 'var(--nile-icon-info, var(--ng-icon-info-circle))';
       case 'warning':
-        return 'var(--nile-icon-alert-circle, var(--ng-icon-alert-circle))';
+        return 'var(--nile-icon-warning, var(--ng-icon-alert-circle))';
       case 'error':
-        return 'var(--nile-icon-alert-circle, var(--ng-icon-alert-circle))';
+        return 'var(--nile-icon-warning, var(--ng-icon-alert-circle))';
       case 'gray':
         return 'var(--nile-icon-info, var(--ng-icon-info-circle))';
       case 'black':
@@ -315,7 +315,7 @@ export class NileToast extends NileElement {
                     name="${this.getIconNameByVariant()}"
                     size="20"
                     color="${this.getIconColorByVariant()}"
-                    method="var(--nile-svg-method-stroke, var(--ng-svg-method-stroke))"
+                    method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                   ></nile-icon>
                 </div>
               `

package/vscode-html-custom-data.json

@@ -62,7 +62,7 @@
     },
     {
       "name": "nile-auto-complete",
-      "description": "Attributes:\n\n  * `disabled` {`boolean`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `portal` {`boolean`} - When true, the dropdown menu will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `noOutline` {`boolean`} - \n\n  * `noPadding` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `allMenuItems` - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\nProperties:\n\n  * `styles` - \n\n  * `visibilityManager` - \n\n  * `dropdownElement` - \n\n  * `inputElement` - \n\n  * `disabled` {`boolean`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `portal` {`boolean`} - When true, the dropdown menu will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `portalManager` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `noOutline` {`boolean`} - \n\n  * `noPadding` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `filterFunction` - \n\n  * `renderItemFunction` - \n\n  * `allMenuItems` - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `menuItems` - \n\n  * `handleWindowResize` - \n\n  * `handleWindowScroll` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `disabled` {`boolean`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `portal` {`boolean`} - When true, the dropdown menu will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `noOutline` {`boolean`} - \n\n  * `noPadding` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `allMenuItems` - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `noDropdownClose` {`boolean`} - \n\nProperties:\n\n  * `styles` - \n\n  * `visibilityManager` - \n\n  * `dropdownElement` - \n\n  * `inputElement` - \n\n  * `disabled` {`boolean`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `portal` {`boolean`} - When true, the dropdown menu will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `portalManager` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `noOutline` {`boolean`} - \n\n  * `noPadding` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `filterFunction` - \n\n  * `renderItemFunction` - \n\n  * `allMenuItems` - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `noDropdownClose` {`boolean`} - \n\n  * `menuItems` - \n\n  * `handleWindowResize` - \n\n  * `handleWindowScroll` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "disabled",
@@ -130,6 +130,11 @@
           "name": "enableTabClose",
           "description": "`enableTabClose` {`boolean`} - \n\nProperty: enableTabClose\n\nDefault: false",
           "valueSet": "v"
+        },
+        {
+          "name": "noDropdownClose",
+          "description": "`noDropdownClose` {`boolean`} - \n\nProperty: noDropdownClose\n\nDefault: false",
+          "valueSet": "v"
         }
       ]
     },
@@ -809,7 +814,7 @@
     },
     {
       "name": "nile-chip",
-      "description": "Attributes:\n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `noAutoComplete` {`boolean`} - \n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `noDuplicates` {`boolean`} - Disables the duplicate entries.\n\n  * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n  * `tagVariant` {`string`} - \n\n  * `acceptUserInput` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `addOnBlur` {`boolean`} - When true, adds a chip when the input loses focus or when clicking outside the component. Only works when acceptUserInput is true.\n\n  * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `readonly` {`boolean`} - Makes the input readonly.\n\n  * `disabled` {`boolean`} - Disables the input.\n\n  * `portal` {`boolean`} - When true, the dropdown menu will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `enableVirtualScroll` {`boolean`} - Virtual scroll in  dropdown options.\n\n  * `autoCompleteOptions` {`any[]`} - \n\n  * `filteredAutoCompleteOptions` {`any[]`} - \n\n  * `value` {`any[]`} - \n\n  * `noWrap` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `errorIndexes` {`number[]`} - \n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `showTooltip` {`boolean`} - \n\n  * `enableTagDelete` {`boolean`} - \n\nProperties:\n\n  * `hasSlotController` - \n\n  * `tags` {`string[]`} - \n\n  * `inputValue` {`string`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `tooltips` {`(string | null)[]`} - \n\n  * `chipFocusIndex` {`number | null`} - \n\n  * `autoComplete` - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `noAutoComplete` {`boolean`} - \n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `noDuplicates` {`boolean`} - Disables the duplicate entries.\n\n  * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n  * `tagVariant` {`string`} - \n\n  * `acceptUserInput` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `addOnBlur` {`boolean`} - When true, adds a chip when the input loses focus or when clicking outside the component. Only works when acceptUserInput is true.\n\n  * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `readonly` {`boolean`} - Makes the input readonly.\n\n  * `disabled` {`boolean`} - Disables the input.\n\n  * `portal` {`boolean`} - When true, the dropdown menu will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `enableVirtualScroll` {`boolean`} - Virtual scroll in  dropdown options.\n\n  * `autoCompleteOptions` {`any[]`} - \n\n  * `filteredAutoCompleteOptions` {`any[]`} - \n\n  * `value` {`any[]`} - \n\n  * `noWrap` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `errorIndexes` {`number[]`} - \n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `filterFunction` - \n\n  * `renderItemFunction` - \n\n  * `visibilityManager` - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `showTooltip` {`boolean`} - \n\n  * `enableTagDelete` {`boolean`} - \n\n  * `isSelectingFromDropdown` {`boolean`} - \n\n  * `handleDocumentClick` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `noAutoComplete` {`boolean`} - \n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `noDuplicates` {`boolean`} - Disables the duplicate entries.\n\n  * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n  * `tagVariant` {`string`} - \n\n  * `acceptUserInput` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `addOnBlur` {`boolean`} - When true, adds a chip when the input loses focus or when clicking outside the component. Only works when acceptUserInput is true.\n\n  * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `readonly` {`boolean`} - Makes the input readonly.\n\n  * `disabled` {`boolean`} - Disables the input.\n\n  * `portal` {`boolean`} - When true, the dropdown menu will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `enableVirtualScroll` {`boolean`} - Virtual scroll in  dropdown options.\n\n  * `autoCompleteOptions` {`any[]`} - \n\n  * `filteredAutoCompleteOptions` {`any[]`} - \n\n  * `value` {`any[]`} - \n\n  * `noWrap` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `errorIndexes` {`number[]`} - \n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `showTooltip` {`boolean`} - \n\n  * `enableTagDelete` {`boolean`} - \n\n  * `openDropdownOnFocus` {`string`} - \n\n  * `noDropdownClose` {`boolean`} - \n\nProperties:\n\n  * `hasSlotController` - \n\n  * `tags` {`string[]`} - \n\n  * `inputValue` {`string`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `tooltips` {`(string | null)[]`} - \n\n  * `chipFocusIndex` {`number | null`} - \n\n  * `autoComplete` - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `noAutoComplete` {`boolean`} - \n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `noDuplicates` {`boolean`} - Disables the duplicate entries.\n\n  * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n  * `tagVariant` {`string`} - \n\n  * `acceptUserInput` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `addOnBlur` {`boolean`} - When true, adds a chip when the input loses focus or when clicking outside the component. Only works when acceptUserInput is true.\n\n  * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `readonly` {`boolean`} - Makes the input readonly.\n\n  * `disabled` {`boolean`} - Disables the input.\n\n  * `portal` {`boolean`} - When true, the dropdown menu will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `enableVirtualScroll` {`boolean`} - Virtual scroll in  dropdown options.\n\n  * `autoCompleteOptions` {`any[]`} - \n\n  * `filteredAutoCompleteOptions` {`any[]`} - \n\n  * `value` {`any[]`} - \n\n  * `noWrap` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `errorIndexes` {`number[]`} - \n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `filterFunction` - \n\n  * `renderItemFunction` - \n\n  * `visibilityManager` - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `showTooltip` {`boolean`} - \n\n  * `enableTagDelete` {`boolean`} - \n\n  * `openDropdownOnFocus` {`string`} - \n\n  * `noDropdownClose` {`boolean`} - \n\n  * `isSelectingFromDropdown` {`boolean`} - \n\n  * `handleDocumentClick` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "warning",
@@ -936,6 +941,15 @@
           "name": "enableTagDelete",
           "description": "`enableTagDelete` {`boolean`} - \n\nProperty: enableTagDelete\n\nDefault: false",
           "valueSet": "v"
+        },
+        {
+          "name": "openDropdownOnFocus",
+          "description": "`openDropdownOnFocus` {`string`} - \n\nProperty: openDropdownOnFocus\n\nDefault: true"
+        },
+        {
+          "name": "noDropdownClose",
+          "description": "`noDropdownClose` {`boolean`} - \n\nProperty: noDropdownClose\n\nDefault: false",
+          "valueSet": "v"
         }
       ]
     },