@randstad-uca/design-system 1.0.13 → 1.0.15

package/dist/components/Button.d.ts

@@ -9,6 +9,7 @@ export declare class RandstadButton extends LitElement {
     iconPosition: 'left' | 'right';
     disabled: boolean;
     iconName: string | null;
+    type: 'button' | 'submit' | 'reset';
     static styles: import("lit").CSSResult;
     private handleClick;
     render(): import("lit-html").TemplateResult<1>;

package/dist/index.js

@@ -36,7 +36,7 @@ const T={attribute:!0,type:String,converter:E,reflect:!1,hasChanged:P},O=(t=T,e,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,o),o))(e,o,{get(){return(e=>e.renderRoot?.querySelector(t)??null)(this)}})}let z=class extends t{constructor(){super(...arguments),this.variant="button-primary",this.size="md",this.label="",this.loader=!1,this.iconPosition="left",this.disabled=!1,this.iconName=null}static{this.styles=e`
+function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,o),o))(e,o,{get(){return(e=>e.renderRoot?.querySelector(t)??null)(this)}})}let z=class extends t{constructor(){super(...arguments),this.variant="button-primary",this.size="md",this.label="",this.loader=!1,this.iconPosition="left",this.disabled=!1,this.iconName=null,this.type="button"}static{this.styles=e`
     :host {
       display: inline-block;
     }
@@ -229,7 +229,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
     }
   `}handleClick(t){this.disabled||this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0}))}render(){const t=`button ${"button-round"===this.variant?"":`button-${this.size}`} ${this.variant} ${this.loader?"loader":""}`,e="button-tertiary"===this.variant?"#2175D9":"white";return o`
       <button
-        type="button"
+        type=${this.type}
         class=${t}
         ?disabled=${this.disabled}
         @click=${this.handleClick}
@@ -247,7 +247,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
               ${this.iconName&&"button-round"!==this.variant&&"right"===this.iconPosition?o`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
             `}
       </button>
-    `}};n([I({type:String}),a("design:type",String)],z.prototype,"variant",void 0),n([I({type:String}),a("design:type",String)],z.prototype,"size",void 0),n([I({type:String}),a("design:type",Object)],z.prototype,"label",void 0),n([I({type:Boolean}),a("design:type",Object)],z.prototype,"loader",void 0),n([I({type:String}),a("design:type",String)],z.prototype,"iconSrc",void 0),n([I({type:String}),a("design:type",String)],z.prototype,"iconPosition",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Boolean)],z.prototype,"disabled",void 0),n([I({type:String}),a("design:type",Object)],z.prototype,"iconName",void 0),z=n([l("randstad-button")],z);let M=class extends t{constructor(){super(...arguments),this.prefix="Acepto los",this.clause1Text="términos y condiciones",this.connector="y los",this.clause2Text="avisos de privacidad del sitio",this.checked=!1}static{this.styles=e`
+    `}};n([I({type:String}),a("design:type",String)],z.prototype,"variant",void 0),n([I({type:String}),a("design:type",String)],z.prototype,"size",void 0),n([I({type:String}),a("design:type",Object)],z.prototype,"label",void 0),n([I({type:Boolean}),a("design:type",Object)],z.prototype,"loader",void 0),n([I({type:String}),a("design:type",String)],z.prototype,"iconSrc",void 0),n([I({type:String}),a("design:type",String)],z.prototype,"iconPosition",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Boolean)],z.prototype,"disabled",void 0),n([I({type:String}),a("design:type",Object)],z.prototype,"iconName",void 0),n([I({type:String}),a("design:type",String)],z.prototype,"type",void 0),z=n([l("randstad-button")],z);let M=class extends t{constructor(){super(...arguments),this.prefix="Acepto los",this.clause1Text="términos y condiciones",this.connector="y los",this.clause2Text="avisos de privacidad del sitio",this.checked=!1}static{this.styles=e`
     :host {
       display: block;
       max-width: 100%;
@@ -4959,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`
@@ -4987,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>