@randstad-uca/design-system 1.0.12 → 1.0.14

package/dist/index.js

@@ -4222,6 +4222,7 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
                   ${"password"===this.type?o`
                         <button type="button" class="toggle-password" @click=${this.togglePassword}>
                           ${this.isPasswordVisible?o`<randstad-icon name='eye_crossed' size="24px" color="#2175D9"></randstad-icon>`:o`<randstad-icon name='eye' size="24px" color="#2175D9"></randstad-icon>`}
+                          
                         </button>
                       `:r}
                 `}
@@ -4958,6 +4959,12 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     .hidden {
       display: none;
     }
+
+    .options-list li.disabled {
+      pointer-events: none;
+      opacity: 0.5;
+      cursor: default;
+    }
   `}constructor(){if(super(),this.options=[],this.placeholder="Filtrar opciones...",this.defaultValue="",this.disabled=!1,this.label="",this.value="",this.labelColor="",this.filterable=!0,this.filteredOptions=[],this.filterValue="",this.isOpen=!1,this.debounceTimeout=null,this.defaultValue){const t=this.options.find((t=>"string"==typeof t?t===this.defaultValue:t.value===this.defaultValue));t&&(this.filterValue="string"==typeof t?t:t.label)}}willUpdate(t){if(t.has("options")&&(this.filteredOptions=[...this.options]),t.has("defaultValue")||t.has("options")){const t=this.options.find((t=>"string"==typeof t?t===this.defaultValue:t.value===this.defaultValue));t&&(this.filterValue="string"==typeof t?t:t.label)}if(t.has("value")){const t=this.options.find((t=>"string"==typeof t?t===this.value:t.value===this.value));t&&(this.filterValue="string"==typeof t?t:t.label)}}connectedCallback(){super.connectedCallback(),this.filteredOptions=[...this.options],document.addEventListener("click",this.handleClickOutside.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleClickOutside.bind(this))}handleInputClick(t){this.disabled||t.target!==this.shadowRoot.querySelector(".filter-input")||(this.isOpen=!this.isOpen,this.requestUpdate())}handleInput(t){const e=t.target.value.toLowerCase();this.filterValue=e,this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.label).toLowerCase().includes(this.filterValue.toLowerCase()))),this.isOpen=!0,this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout((()=>{this.filterValue.length>2&&this.dispatchEvent(new CustomEvent("filter-location",{detail:{value:this.filterValue},bubbles:!0,composed:!0}))}),300),this.requestUpdate()}handleSelect(t){this.value="string"==typeof t?t:t.value;const e="string"==typeof t?t:t.value;this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:e},bubbles:!0,composed:!0})),this.filterValue="string"==typeof t?t:t.label,this.isOpen=!1,this.requestUpdate()}handleIconClick(){this.disabled||(this.filterable&&this.filterValue?(this.filterValue="",this.filteredOptions=[...this.options],this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0})),this.isOpen=!1):this.isOpen=!this.isOpen,this.requestUpdate())}handleClickOutside(t){this.contains(t.target)||(this.isOpen=!1,this.requestUpdate())}render(){return o`
       <div class="select-container" style="${this.labelColor?` --label-color: ${this.labelColor}`:""}">
         ${this.label?o`
@@ -4986,11 +4993,14 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
             </button>
           </div>
           <ul class="options-list ${this.isOpen&&this.filteredOptions.length>0?"":"hidden"}">
-            ${this.filteredOptions.map((t=>o`
-              <li @click="${()=>this.handleSelect(t)}">
-                ${"string"==typeof t?t:t.label}
-              </li>
-            `))}
+            ${this.filteredOptions.map((t=>{const e="string"==typeof t?t:t.label,i="object"==typeof t&&t.disabled;return o`
+                <li
+                  class="${i?"disabled":""}"
+                  @click="${()=>{i||this.handleSelect(t)}}"
+                >
+                  ${e}
+                </li>
+              `}))}
           </ul>
         </div>
       </div>