@randstad-uca/design-system 1.0.15 → 1.0.17

package/dist/components/Form.d.ts

@@ -17,9 +17,12 @@ export declare class RandstadForm extends LitElement {
     linkText?: string;
     linkRoute?: string;
     isPasswordVisible: boolean;
+    cleanButton: boolean;
+    maxLength?: number;
     static styles: import("lit").CSSResult;
     private togglePassword;
     private handleInput;
+    private handleClear;
     private handleLinkClick;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/Select.d.ts

@@ -11,6 +11,7 @@ export declare class FilterableSelect extends LitElement {
     filteredOptions: never[];
     filterValue: string;
     isOpen: boolean;
+    maxLength?: number;
     private debounceTimeout;
     static styles: import("lit").CSSResult;
     constructor();

package/dist/index.js

@@ -303,7 +303,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
       text-decoration: none;
       cursor: pointer;
     }
-  `}toggleCheck(t){this.checked=t.target.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked},bubbles:!0,composed:!0}))}renderClause(t,e){return e?o`<a class="terms-link" href="${e}" target="_blank" rel="noopener" @click=${this.stopPropagation}>${t}</a>`:o`${t}`}stopPropagation(t){t.stopPropagation()}render(){return o`
+  `}toggleCheck(t){this.checked=t.target.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked},bubbles:!0,composed:!0})),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}renderClause(t,e){return e?o`<a class="terms-link" href="${e}" target="_blank" rel="noopener" @click=${this.stopPropagation}>${t}</a>`:o`${t}`}stopPropagation(t){t.stopPropagation()}render(){return o`
       <label>
         <input
           type="checkbox"
@@ -3960,7 +3960,7 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
     }
   `}render(){return o`
       <vaadin-date-picker label="Select a date"></vaadin-date-picker>
-    `}}customElements.define("my-date-picker",ws);let xs=class extends t{constructor(){super(...arguments),this.value="",this.size="md",this.icon=null,this.helper=null,this.error=!1,this.errorMessage="",this.success=!1,this.disabled=!1,this.typing=!1,this.type="text",this.isPasswordVisible=!1}static{this.styles=e`
+    `}}customElements.define("my-date-picker",ws);let xs=class extends t{constructor(){super(...arguments),this.value="",this.size="md",this.icon=null,this.helper=null,this.error=!1,this.errorMessage="",this.success=!1,this.disabled=!1,this.typing=!1,this.type="text",this.isPasswordVisible=!1,this.cleanButton=!1}static{this.styles=e`
     :host {
       display: block;
       font-family: 'Graphik', sans-serif;
@@ -4060,10 +4060,16 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
       background-color: #d4edda;
     }
 
-    .form-input:hover {
+    /* Hover normal (sin error ni foco) */
+    .form:not(.error):not(:focus-within) .form-input:hover {
       box-shadow: 0px 0px 0px 4px #D1D3DB;
     }
 
+    /* Hover con error (sin foco) */
+    .form.error:not(:focus-within) .form-input:hover {
+      box-shadow: 0px 0px 0px 4px #E00F0F1A;
+    }
+
     .form-input:focus {
       border: 2px solid #2175D9
     }
@@ -4182,21 +4188,38 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
     .toggle-password randstad-icon svg {
       fill: #2175D9 !important;
     }
-  `}togglePassword(t){this.isPasswordVisible=!this.isPasswordVisible;const e=t.currentTarget.parentElement?.querySelector("input");e&&(e.type=this.isPasswordVisible?"text":"password"),this.requestUpdate()}handleInput(t){const e=t.target;this.value=e.value,this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0}))}handleLinkClick(t){t.preventDefault(),this.linkRoute&&this.dispatchEvent(new CustomEvent("linkClicked",{detail:this.linkRoute,bubbles:!0,composed:!0}))}render(){return o`
+
+    .clean-button {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+    }
+    .clean-button randstad-icon {
+      width: 24px;
+      height: 24px;
+    }
+  `}togglePassword(t){this.isPasswordVisible=!this.isPasswordVisible;const e=t.currentTarget.parentElement?.querySelector("input");e&&(e.type=this.isPasswordVisible?"text":"password"),this.requestUpdate()}handleInput(t){const e=t.target.value;void 0!==this.maxLength&&"textarea"!==this.type?this.value=e.slice(0,this.maxLength):this.value=e,this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0})),this.requestUpdate()}handleClear(){this.value="",this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0})),this.requestUpdate()}handleLinkClick(t){t.preventDefault(),this.linkRoute&&this.dispatchEvent(new CustomEvent("linkClicked",{detail:this.linkRoute,bubbles:!0,composed:!0}))}render(){const t=this.cleanButton&&this.value&&"password"!==this.type&&"textarea"!==this.type;return o`
       <div
         class="form ${this.error?"error":""} ${this.success?"success":""} ${this.disabled?"disabled":""}"
         style=${this.labelColor?`--label-color: ${this.labelColor}`:r}
       >
         ${this.label?o`
-              <div class="label-container">
-                <label class="form-label">${this.label}</label>
-                ${this.tooltipMessage&&""!==this.tooltipMessage.trim()?o`
-                      <div class="tooltip-wrapper">
-                        <randstad-icon class="help-icon" name="ayuda" size="20px" color="#2175D9"></randstad-icon>
-                      </div>
-                    `:r}
-              </div>
-            `:r}
+          <div class="label-container">
+            <label class="form-label">${this.label}</label>
+            ${this.tooltipMessage?.trim()?o`<div class="tooltip-wrapper">
+                  <randstad-icon class="help-icon" name="ayuda" size="20px" color="#2175D9"></randstad-icon>
+                </div>`:r}
+          </div>
+        `:r}
 
         <div class="form-container">
           ${"left"===this.icon?o`<span class="icon left"></span>`:r}
@@ -4209,8 +4232,7 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
                     .value=${this.value}
                     ?disabled=${this.disabled}
                     @input=${this.handleInput}
-                  ></textarea>
-                `:o`
+                  ></textarea>`:o`
                   <input
                     class="form-input"
                     type=${"password"!==this.type||this.isPasswordVisible?"text":"password"}
@@ -4218,29 +4240,32 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
                     .value=${this.value}
                     ?disabled=${this.disabled}
                     @input=${this.handleInput}
+                    maxlength=${this.maxLength??r}
                   />
-                  ${"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}
-                `}
+
+                  ${"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}
+
+                  ${t?o`<button type="button" class="clean-button" @click=${this.handleClear}>
+                        <randstad-icon name="close" size="24px" color="#2175D9"></randstad-icon>
+                      </button>`:r}
+              `}
           </div>
 
           ${"right"===this.icon?o`<span class="icon right"></span>`:r}
         </div>
 
         ${this.error?o`
-              <p class="error-message">
-                ${this.errorMessage?this.errorMessage:o`<slot name="error-extended"></slot>`}
-              </p>
-            `:r}
+          <p class="error-message">
+            ${this.errorMessage?this.errorMessage:o`<slot name="error-extended"></slot>`}
+          </p>`:r}
+
         ${this.linkText&&this.linkRoute?o`<a class="link-text" href="#" @click=${this.handleLinkClick}>${this.linkText}</a>`:r}
 
         ${this.helper?o`<p class="helper-description">${this.helper}</p>`:r}
       </div>
-    `}};n([I({type:String}),a("design:type",String)],xs.prototype,"placeholder",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"labelColor",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"value",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"size",void 0),n([I({type:String}),a("design:type",Object)],xs.prototype,"icon",void 0),n([I({type:String}),a("design:type",Object)],xs.prototype,"helper",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"error",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"errorMessage",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"success",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"disabled",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"typing",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"type",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"tooltipMessage",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"linkText",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"linkRoute",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Object)],xs.prototype,"isPasswordVisible",void 0),xs=n([l("randstad-form")],xs);class Cs extends t{static{this.styles=e`
+    `}};n([I({type:String}),a("design:type",String)],xs.prototype,"placeholder",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"labelColor",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"value",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"size",void 0),n([I({type:String}),a("design:type",Object)],xs.prototype,"icon",void 0),n([I({type:String}),a("design:type",Object)],xs.prototype,"helper",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"error",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"errorMessage",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"success",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"disabled",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"typing",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"type",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"tooltipMessage",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"linkText",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"linkRoute",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Object)],xs.prototype,"isPasswordVisible",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"cleanButton",void 0),n([I({type:Number}),a("design:type",Number)],xs.prototype,"maxLength",void 0),xs=n([l("randstad-form")],xs);class Cs extends t{static{this.styles=e`
     :host {
       display: inline-flex;
       width: var(--icon-size, 24px);
@@ -4965,7 +4990,7 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       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`
+  `}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,o=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.filterValue=o,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`
           <div class="label-container">
@@ -4982,6 +5007,7 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
               placeholder="${this.filterValue?"":this.placeholder}"
               ?disabled="${this.disabled}"
               ?readonly="${!this.filterable}"
+              maxlength="${this.maxLength??""}"
             />
             <button
               class="icon-button"
@@ -5004,7 +5030,7 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
           </ul>
         </div>
       </div>
-    `}};n([I({type:Array}),a("design:type",Array)],ma.prototype,"options",void 0),n([I({type:String}),a("design:type",Object)],ma.prototype,"placeholder",void 0),n([I({type:String,attribute:"default-value"}),a("design:type",Object)],ma.prototype,"defaultValue",void 0),n([I({type:Boolean}),a("design:type",Object)],ma.prototype,"disabled",void 0),n([I({type:String}),a("design:type",Object)],ma.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],ma.prototype,"value",void 0),n([I({type:String}),a("design:type",Object)],ma.prototype,"labelColor",void 0),n([I({type:Boolean}),a("design:type",Object)],ma.prototype,"filterable",void 0),n([$(),a("design:type",Object)],ma.prototype,"filteredOptions",void 0),n([$(),a("design:type",Object)],ma.prototype,"filterValue",void 0),n([$(),a("design:type",Object)],ma.prototype,"isOpen",void 0),ma=n([l("filterable-select"),a("design:paramtypes",[])],ma);let fa=class extends t{constructor(){super(...arguments),this.totalSteps=4,this.currentStep=0}static{this.styles=e`
+    `}};n([I({type:Array}),a("design:type",Array)],ma.prototype,"options",void 0),n([I({type:String}),a("design:type",Object)],ma.prototype,"placeholder",void 0),n([I({type:String,attribute:"default-value"}),a("design:type",Object)],ma.prototype,"defaultValue",void 0),n([I({type:Boolean}),a("design:type",Object)],ma.prototype,"disabled",void 0),n([I({type:String}),a("design:type",Object)],ma.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],ma.prototype,"value",void 0),n([I({type:String}),a("design:type",Object)],ma.prototype,"labelColor",void 0),n([I({type:Boolean}),a("design:type",Object)],ma.prototype,"filterable",void 0),n([$(),a("design:type",Object)],ma.prototype,"filteredOptions",void 0),n([$(),a("design:type",Object)],ma.prototype,"filterValue",void 0),n([$(),a("design:type",Object)],ma.prototype,"isOpen",void 0),n([I({type:Number}),a("design:type",Number)],ma.prototype,"maxLength",void 0),ma=n([l("filterable-select"),a("design:paramtypes",[])],ma);let fa=class extends t{constructor(){super(...arguments),this.totalSteps=4,this.currentStep=0}static{this.styles=e`
     .stepper {
       display: flex;
       gap: 20px;