@aquera/nile-elements 0.1.21 → 0.1.22

package/dist/watch.cjs.js

@@ -1,2 +1,2 @@
-System.register([],function(_export,_context){"use strict";function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable;})),t.push.apply(t,o);}return t;}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r));});}return e;}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function t(t,i){var n=_objectSpread({waitUntilFirstUpdate:!1},i);return function(i,s){var o=i.update,c=Array.isArray(t)?t:[t];i.update=function(t){var _this=this;c.forEach(function(i){var o=i;if(t.has(o)){var _i=t.get(o),_c=_this[o];_i!==_c&&(n.waitUntilFirstUpdate&&!_this.hasUpdated||_this[s](_i,_c));}}),o.call(this,t);};};}_export("w",t);return{setters:[],execute:function execute(){}};});
+System.register([],function(_export,_context){"use strict";return{setters:[],execute:function execute(){}};});
 //# sourceMappingURL=watch.cjs.js.map

package/dist/watch.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"watch.cjs.js","sources":["../../src/watch.ts"],"sourcesContent":["import type { LitElement } from 'lit';\n\ntype UpdateHandler = (prev?: unknown, next?: unknown) => void;\n\ntype NonUndefined<A> = A extends undefined ? never : A;\n\ntype UpdateHandlerFunctionKeys<T extends object> = {\n  [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;\n}[keyof T];\n\ninterface WatchOptions {\n  /**\n   * If true, will only start watching after the initial update/render\n   */\n  waitUntilFirstUpdate?: boolean;\n}\n\n/**\n * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an\n * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the\n * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.\n *\n * Usage:\n *\n * @watch('propName')\n * handlePropChange(oldValue, newValue) {\n *   ...\n * }\n */\nexport function watch(propertyName: string | string[], options?: WatchOptions) {\n  const resolvedOptions: Required<WatchOptions> = {\n    waitUntilFirstUpdate: false,\n    ...options\n  };\n  return <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => {\n    // @ts-expect-error - update is a protected property\n    const { update } = proto;\n    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];\n\n    // @ts-expect-error - update is a protected property\n    proto.update = function (this: ElemClass, changedProps: Map<keyof ElemClass, ElemClass[keyof ElemClass]>) {\n      watchedProperties.forEach(property => {\n        const key = property as keyof ElemClass;\n        if (changedProps.has(key)) {\n          const oldValue = changedProps.get(key);\n          const newValue = this[key];\n\n          if (oldValue !== newValue) {\n            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {\n              (this[decoratedFnName] as unknown as UpdateHandler)(oldValue, newValue);\n            }\n          }\n        }\n      });\n\n      update.call(this, changedProps);\n    };\n  };\n}\n"],"names":["watch","propertyName","options","resolvedOptions","_objectSpread","waitUntilFirstUpdate","proto","decoratedFnName","update","watchedProperties","Array","isArray","changedProps","forEach","property","key","has","oldValue","get","newValue","this","hasUpdated","call"],"mappings":"u8CA6BgB,QAAAA,CAAAA,CAAMC,CAAAA,CAAAA,CAAiCC,CACrD,CAAA,CAAA,GAAMC,CAAAA,CAA0C,CAAAC,aAAA,EAC9CC,oBAAsB,CAAA,CAAA,CAAA,EACnBH,CAEL,CAAA,CAAA,MAAO,UAA+BI,CAAAA,CAAkBC,GAEhDC,GAAEA,CAAAA,CAAWF,CAAAA,CAAAA,CAAbE,MAAAA,CACAC,CAAoBC,CAAAA,KAAAA,CAAMC,OAAQV,CAAAA,CAAAA,CAAAA,CAAgBA,CAAe,CAAA,CAACA,CAGxEK,CAAAA,CAAAA,CAAAA,CAAME,MAAS,CAAA,SAA2BI,CACxCH,CAAAA,KAAAA,KAAAA,MAAAA,CAAAA,CAAkBI,QAAQC,SAAAA,CACxB,CAAA,CAAA,GAAMC,CAAAA,CAAMD,CAAAA,CAAAA,CACZ,GAAIF,CAAAA,CAAaI,GAAID,CAAAA,CAAAA,CAAAA,CAAM,CACzB,GAAME,CAAAA,EAAWL,CAAAA,CAAAA,CAAaM,GAAIH,CAAAA,CAAAA,CAAAA,CAC5BI,EAAWC,CAAAA,KAAAA,CAAKL,GAElBE,EAAaE,GAAAA,EAAAA,GACVhB,CAAgBE,CAAAA,oBAAAA,EAAAA,CAAwBe,KAAKC,CAAAA,UAAAA,EAC/CD,KAAKb,CAAAA,CAAAA,CAAAA,CAA8CU,EAAUE,CAAAA,EAAAA,CAAAA,CAGnE,EAGHX,CAAAA,CAAAA,CAAAA,CAAAA,CAAOc,IAAKF,CAAAA,IAAAA,CAAMR,CACpB,CAAA,EAAC,EAEL"}
+{"version":3,"file":"watch.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/watch.esm.js

@@ -1 +1 @@
-function t(t,i){const n={waitUntilFirstUpdate:!1,...i};return(i,s)=>{const{update:o}=i,c=Array.isArray(t)?t:[t];i.update=function(t){c.forEach((i=>{const o=i;if(t.has(o)){const i=t.get(o),c=this[o];i!==c&&(n.waitUntilFirstUpdate&&!this.hasUpdated||this[s](i,c))}})),o.call(this,t)}}}export{t as w};
+

package/package.json

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

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

@@ -8,8 +8,7 @@ import {
 import { customElement, query, state, property } from 'lit/decorators.js';
 import { styles } from './nile-auto-complete.css';
 import NileElement from '../internal/nile-element';
-import { watch } from '../watch';
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, PropertyValues } from 'lit';
 import { NileDropdown } from '../nile-dropdown';
 
 // Define the custom element 'nile-auto-complete'
@@ -36,6 +35,8 @@ export class NileAutoComplete extends NileElement {
 
   @property({ attribute:false}) filterFunction: any = (item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());
 
+  @property({ attribute:false}) renderItemFunction: any = (item:any)=>item;
+
   @property({ type: Array }) allMenuItems: any = [];
 
   @state() menuItems: any = [];
@@ -45,20 +46,44 @@ export class NileAutoComplete extends NileElement {
     this.menuItems = [...this.allMenuItems];
   }
 
-  // Watch for changes in 'allMenuItems' property
-  @watch('allMenuItems')
-  handleAllMenuItemsChange() {
-    this.menuItems = [...this.allMenuItems];
-  }
-
-
-  @watch('isDropdownOpen', { waitUntilFirstUpdate: true })
-  async handleValueChange() {
-    await this.updateComplete;
-    // Filter menu items based on the search value
-    this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+    if (changedProperties.has('allMenuItems')) this.menuItems = [...this.allMenuItems];
+    if (changedProperties.has('isDropdownOpen')) this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);
   }
 
+  public render(): TemplateResult {
+    return html`
+      <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
+        <nile-input class="nile-auto-complete--input"
+          ?no-border=${this.noBorder}
+          .value=${this.value}
+          @nile-input=${this.handleSearch}
+          @focus=${this.handleFocus}
+          @click=${this.handleClick}
+          slot="trigger"
+          placeholder=${this.placeholder}
+        >
+          ${this.loading?html`<nile-icon slot="suffix" color="var(--nile-colors-primary-600)" name="button-loading-blue-animated"></nile-icon>`:nothing}
+        </nile-input>
+        ${this.menuItems.length > 0 && !this.loading
+          ? html`
+              <nile-menu @nile-select=${this.handleSelect} exportparts="menu__items-wrapper:options__wrapper">
+                ${this.menuItems.map(
+                  (item: any)  => {
+                  const renderItem=this.renderItemFunction(item)
+                  return html`
+                    <nile-menu-item value=${renderItem}>${renderItem}</nile-menu-item>
+                  `
+                  }
+                )}
+              </nile-menu>
+            `
+          : ''}
+      </nile-dropdown>
+    `;
+  }  
+  
   private handleSelect(event: CustomEvent) {
     this.value = event.detail.value;
     this.emit('nile-complete', { value: event.detail.value });
@@ -77,12 +102,6 @@ export class NileAutoComplete extends NileElement {
     if (this.isDropdownOpen) this.dropdownElement?.show();
   }
 
-  applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {
-    const res:T[]=[]
-    list.forEach( el=> filterFn(el,this.value) && res.push(el) )
-    return res
-  }
-
   public handleFocus() {
     if (!this.openOnFocus) {
       return;
@@ -100,34 +119,12 @@ export class NileAutoComplete extends NileElement {
     this.dropdownElement?.show();
   }
 
-  public render(): TemplateResult {
-    return html`
-      <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
-        <nile-input class="nile-auto-complete--input"
-          ?no-border=${this.noBorder}
-          .value=${this.value}
-          @nile-input=${this.handleSearch}
-          @focus=${this.handleFocus}
-          @click=${this.handleClick}
-          slot="trigger"
-          placeholder=${this.placeholder}
-        >
-          ${this.loading?html`<nile-icon slot="suffix" color="var(--nile-colors-primary-600)" name="button-loading-blue-animated"></nile-icon>`:nothing}
-        </nile-input>
-        ${this.menuItems.length > 0 && !this.loading
-          ? html`
-              <nile-menu @nile-select=${this.handleSelect} exportparts="menu__items-wrapper:options__wrapper">
-                ${this.menuItems.map(
-                  (item: any)  => html`
-                    <nile-menu-item value=${item}>${item}</nile-menu-item>
-                  `
-                )}
-              </nile-menu>
-            `
-          : ''}
-      </nile-dropdown>
-    `;
+  applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {
+    const res:T[]=[]
+    list.forEach( el=> filterFn(el,this.value) && res.push(el) )
+    return res
   }
+
 }
 
 export default NileAutoComplete;

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

@@ -10,12 +10,12 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
+  PropertyValues,
 } from 'lit';
 import { customElement, query, state, property } from 'lit/decorators.js';
 import { styles } from './nile-chip.css';
 import { classMap } from 'lit/directives/class-map.js';
 import { HasSlotController } from '../internal/slot';
-import { watch } from '../internal/watch';
 import NileElement, { NileFormControl } from '../internal/nile-element';
 
 interface CustomEventDetail {
@@ -91,37 +91,30 @@ export class NileChip extends NileElement {
 
   @property({ attribute:false}) filterFunction: any = (item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());
 
-  @watch('autoCompleteOptions')
-  onAutoCompleteOptionsChanged() {
-    this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];
-
-    if (this.noDuplicates) {
-      this.filteredAutoCompleteOptions =
-        this.filteredAutoCompleteOptions.filter(
-          option => !this.value.includes(option)
-        );
+  @property({ attribute:false}) renderItemFunction: any = (item:any)=>item;
+
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+    if (changedProperties.has('autoCompleteOptions')) {
+      this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];
+      if (this.noDuplicates) {
+        this.filteredAutoCompleteOptions =
+          this.filteredAutoCompleteOptions.filter(
+            option => !this.value.includes(option)
+          );
+      }
     }
-  }
-
-  @watch('value')
-  onValueChanged() {
-    this.tags = [...this.value];
-    this.onTagsChanged();
-  }
-
-  @watch('tags')
-  onTagsChanged() {
-    if (this.noDuplicates) {
-      this.filteredAutoCompleteOptions =
-        this.filteredAutoCompleteOptions.filter(
-          option => !this.tags.includes(option)
-        );
+    if (changedProperties.has('value')){
+      this.tags = [...this.value];
+      this.onTagsChanged();
+    }
+    if (changedProperties.has('tags')){
+      this.onTagsChanged();
     }
   }
 
   connectedCallback() {
     super.connectedCallback();
-
     if (this.noDuplicates) {
       this.filteredAutoCompleteOptions =
         this.filteredAutoCompleteOptions.filter(
@@ -136,74 +129,6 @@ export class NileChip extends NileElement {
     this.emit('nile-destroy');
   }
 
-  private handleSelect(event: CustomEvent<CustomEventDetail>) {
-    // Add the selected value to the tags array only if it doesn't already exist
-    if (!this.noDuplicates || !this.tags.includes(event.detail.value)) {
-      this.tags = [...this.tags, event.detail.value];
-      this.emit('nile-chip-change', { value: this.tags });
-      this.resetInput();
-    }
-  }
-
-  private handleRemove(value: string) {
-    // Remove the tag from the tags array
-    this.tags = this.tags.filter(tag => tag !== value);
-
-    if (this.noDuplicates && this.autoCompleteOptions.includes(value)) {
-      this.filteredAutoCompleteOptions = [
-        ...this.filteredAutoCompleteOptions,
-        value,
-      ];
-    }
-    this.emit('nile-chip-change', { value: this.tags });
-  }
-
-  private handleInputChange(event: CustomEvent<CustomEventDetail>) {
-    // Update the input value
-    this.inputValue = event.detail.value;
-  }
-
-  private handleInputKeydown(event: KeyboardEvent) {
-    if (!this.acceptUserInput) {
-      return;
-    }
-
-    if(event.key === 'Tab'){
-      event.preventDefault()
-    }
-    
-    if (
-      (event.key === 'Enter' || event.key === 'Tab' ) 
-      && this.inputValue 
-      && (!this.noDuplicates || !this.tags.includes(this.inputValue))
-    ) {
-      event.preventDefault()
-      this.tags = [...this.tags, this.inputValue];
-      this.resetInput();
-      this.emit('nile-chip-change', { value: this.tags });
-    }
-
-    if(
-      (event.key === 'Enter'|| event.key === 'Tab' ) 
-      && this.inputValue 
-      && (this.noDuplicates || this.tags.includes(this.inputValue))
-    ){
-      this.emit('nile-duplicates-blocked');
-    }
-  }
-
-  private handleFocus() {
-    this.isDropdownOpen = true;
-  }
-
-  private resetInput() {
-    // Reset the input-related properties
-    this.inputValue = '';
-    this.isDropdownOpen = false;
-    this.autoComplete.value = '';
-    this.autoComplete.handleFocus();
-  }
-
   render() {
     // Check if slots are present
     const hasLabelSlot = this.hasSlotController.test('label');
@@ -263,6 +188,7 @@ export class NileChip extends NileElement {
             <nile-auto-complete
               .allMenuItems=${this.filteredAutoCompleteOptions}
               .filterFunction=${this.filterFunction}
+              .renderItemFunction=${this.renderItemFunction}
               .loading="${this.loading}"
               .value=${this.inputValue}
               ?isDropdownOpen=${this.isDropdownOpen}
@@ -306,6 +232,80 @@ export class NileChip extends NileElement {
       </div>
     `;
   }
+
+  private handleSelect(event: CustomEvent<CustomEventDetail>) {
+    // Add the selected value to the tags array only if it doesn't already exist
+    if (!this.noDuplicates || !this.tags.includes(event.detail.value)) {
+      this.tags = [...this.tags, event.detail.value];
+      this.emit('nile-chip-change', { value: this.tags });
+      this.resetInput();
+    }
+  }
+
+  private handleRemove(value: string) {
+    // Remove the tag from the tags array
+    this.tags = this.tags.filter(tag => tag !== value);
+
+    if (this.noDuplicates && this.autoCompleteOptions.includes(value)) {
+      this.filteredAutoCompleteOptions = [
+        ...this.filteredAutoCompleteOptions,
+        value,
+      ];
+    }
+    this.emit('nile-chip-change', { value: this.tags });
+  }
+
+  private handleInputChange(event: CustomEvent<CustomEventDetail>) {
+    // Update the input value
+    this.inputValue = event.detail.value;
+  }
+
+  private handleInputKeydown(event: KeyboardEvent) {
+    if (!this.acceptUserInput) {
+      return;
+    }
+
+    if(event.key === 'Tab'){
+      event.preventDefault()
+    }
+    
+    if (
+      (event.key === 'Enter' || event.key === 'Tab' ) 
+      && this.inputValue 
+      && (!this.noDuplicates || !this.tags.includes(this.inputValue))
+    ) {
+      event.preventDefault()
+      this.tags = [...this.tags, this.inputValue];
+      this.resetInput();
+      this.emit('nile-chip-change', { value: this.tags });
+    }
+
+    if(
+      (event.key === 'Enter'|| event.key === 'Tab' ) 
+      && this.inputValue 
+      && (this.noDuplicates || this.tags.includes(this.inputValue))
+    ){
+      this.emit('nile-duplicates-blocked');
+    }
+  }
+
+  private handleFocus() {
+    this.isDropdownOpen = true;
+  }
+
+  onTagsChanged() {
+    if (this.noDuplicates)
+      this.filteredAutoCompleteOptions = this.filteredAutoCompleteOptions.filter(option => !this.tags.includes(option));
+  }
+
+
+  private resetInput() {
+    // Reset the input-related properties
+    this.inputValue = '';
+    this.isDropdownOpen = false;
+    this.autoComplete.value = '';
+    this.autoComplete.handleFocus();
+  }
 }
 
 export default NileChip;

package/src/nile-radio-group/nile-radio-group.css.ts

@@ -8,7 +8,7 @@ export default css`
 
   .form-control--inline-radio ::slotted(nile-radio) {
     display: inline-block;
-    margin-right: 24px !important;
+    margin-right: 24px;
   }
 
   .form-control {

package/vscode-html-custom-data.json

@@ -62,7 +62,7 @@
     },
     {
       "name": "nile-auto-complete",
-      "description": "Attributes:\n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `allMenuItems` - \n\nProperties:\n\n  * `styles` - \n\n  * `dropdownElement` - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `filterFunction` - \n\n  * `allMenuItems` - \n\n  * `menuItems` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `allMenuItems` - \n\nProperties:\n\n  * `styles` - \n\n  * `dropdownElement` - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `filterFunction` - \n\n  * `renderItemFunction` - \n\n  * `allMenuItems` - \n\n  * `menuItems` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "isDropdownOpen",
@@ -696,7 +696,7 @@
     },
     {
       "name": "nile-chip",
-      "description": "Attributes:\n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\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  * `acceptUserInput` {`boolean`} - Adds a clear button when the input is not empty.\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  * `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\nProperties:\n\n  * `hasSlotController` - \n\n  * `tags` {`string[]`} - \n\n  * `inputValue` {`string`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `autoComplete` - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\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  * `acceptUserInput` {`boolean`} - Adds a clear button when the input is not empty.\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  * `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  * `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  * `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  * `acceptUserInput` {`boolean`} - Adds a clear button when the input is not empty.\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  * `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\nProperties:\n\n  * `hasSlotController` - \n\n  * `tags` {`string[]`} - \n\n  * `inputValue` {`string`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `autoComplete` - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\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  * `acceptUserInput` {`boolean`} - Adds a clear button when the input is not empty.\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  * `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  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "warning",