@randstad-uca/design-system 1.0.7 → 1.0.8

package/dist/components/Icon.d.ts

@@ -3,10 +3,9 @@ export declare class IconComponent extends LitElement {
     name: string;
     size: string;
     color: string;
+    key: string;
     static styles: import("lit").CSSResult;
-    constructor();
-    connectedCallback(): void;
     updated(changedProperties: Map<string, unknown>): void;
     loadIcon(): Promise<void>;
-    render(): null;
+    render(): symbol;
 }

package/dist/index.js

@@ -41,11 +41,6 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
       display: inline-block;
     }
 
-    :host([disabled]) {
-      pointer-events: none;
-      cursor: not-allowed;
-    }
-
     .button {
       display: flex;
       align-items: center;
@@ -61,95 +56,99 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
       width: 100%;
     }
 
-    .button[disabled] {
-      cursor: not-allowed;
-    }
-
     .button-lg {
       font-size: 18px;
       line-height: 30px;
-      min-width: 48px;
-      min-height: 62px; /* padding (16px * 2) + line-height (30px) */
+      min-height: 62px;
     }
 
     .button-md {
       font-size: 14px;
       line-height: 25px;
-      min-height: 57px; /* padding (16px * 2) + line-height (25px) */
+      min-height: 57px;
     }
 
+    /* Primary */
     .button-primary {
       background-color: var(--primary-color);
       color: var(--white);
     }
 
-    :host(:hover) .button-primary:not([disabled]) {
+    .button-primary:not([disabled]):hover {
       background-color: var(--primary-button-hover);
     }
 
-    :host(:active) .button-primary:not([disabled]) {
+    .button-primary:not([disabled]):active {
       background-color: var(--primary-button-active);
     }
 
-    :host(:focus-within) .button-primary:not([disabled]) {
-      background-color: var(--primary-button-focus);
+    .button-primary:not([disabled]):focus-visible {
+      outline: 2px solid var(--primary-button-focus);
+      outline-offset: 2px;
     }
 
     .button-primary[disabled] {
       color: var(--secondary-color-60);
       background-color: var(--secondary-color-20);
+      cursor: not-allowed;
     }
 
+    /* Secondary */
     .button-secondary {
       background: none;
       color: var(--primary-color);
       border: 1px solid var(--primary-color);
     }
 
-    :host(:hover) .button-secondary:not([disabled]) {
+    .button-secondary:not([disabled]):hover {
       color: #175197;
-      border: 1px solid #175197;
+      border-color: #175197;
     }
 
-    :host(:active) .button-secondary:not([disabled]) {
+    .button-secondary:not([disabled]):active {
       color: var(--secondary-color-80);
-      border: 1px solid var(--secondary-color-80);
+      border-color: var(--secondary-color-80);
     }
 
-    :host(:focus-within) .button-secondary:not([disabled]) {
-      color: var(--primary-color);
-      border: 1px solid var(--primary-color);
+    .button-secondary:not([disabled]):focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
     }
 
     .button-secondary[disabled] {
       color: var(--secondary-color-60);
-      border: 1px solid var(--secondary-color-60);
+      border-color: var(--secondary-color-60);
+      cursor: not-allowed;
     }
 
+    /* Tertiary */
     .button-tertiary {
       background: none;
       border: none;
       color: var(--primary-color);
     }
 
-    :host(:hover) .button-tertiary:not([disabled]) {
+    .button-tertiary:not([disabled]):hover {
       background: #2175D90D;
     }
 
-    :host(:active) .button-tertiary:not([disabled]) {
+    .button-tertiary:not([disabled]):active {
       background-color: #2175D91A;
     }
 
-    :host(:focus-within) .button-tertiary:not([disabled]) {
-      border: 1px solid var(--primary-color);
+    .button-tertiary:not([disabled]):focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
     }
 
     .button-tertiary[disabled] {
       color: #6F758D;
+      cursor: not-allowed;
     }
 
+    /* Round */
     .button-round {
-      width: 48px !important;
+      width: 48px;
       height: 48px;
       border-radius: 50%;
       background-color: var(--white);
@@ -157,16 +156,22 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
       padding: 0;
     }
 
-    :host(:hover) .button-round:not([disabled]) {
+    .button-round:not([disabled]):hover {
       background-color: #E8F1FB;
     }
 
-    :host(:active) .button-round:not([disabled]) {
+    .button-round:not([disabled]):active {
       background-color: #A6C8F0;
     }
 
+    .button-round:not([disabled]):focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
+    }
+
     .button-round[disabled] {
       background-color: var(--secondary-color-20);
+      cursor: not-allowed;
     }
 
     .button-round img.button-icon {
@@ -174,13 +179,14 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
       height: 24px;
     }
 
+    /* Loader */
     .loader {
       display: flex;
       gap: 8px;
       justify-content: center;
       align-items: center;
       width: 100%;
-      height: 100%; /* Ocupa toda la altura del botón */
+      height: 100%;
     }
 
     .dot {
@@ -237,7 +243,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
             `:o`
               ${this.iconSrc&&"button-round"===this.variant?o`<img src=${this.iconSrc} alt="icon" class="button-icon" />`:""}
               ${this.iconName&&"button-round"!==this.variant&&"left"===this.iconPosition?o`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
-              <slot>${this.label}</slot>
+              ${this.label?o`<span>${this.label}</span>`:o`<slot></slot>`}
               ${this.iconName&&"button-round"!==this.variant&&"right"===this.iconPosition?o`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
             `}
       </button>
@@ -4222,11 +4228,10 @@ 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}>
-                          <randstad-icon
-                            name=${this.isPasswordVisible?"eye_crossed":"eye"}
-                            size="24px"
-                            color="#2175D9"
-                          ></randstad-icon>
+                          <button type="button" class="toggle-password" @click=${this.togglePassword}>
+                            ${this.isPasswordVisible?o`<randstad-icon name="eye_crossed" size="24px" color="#2175D9" key="visible"></randstad-icon>`:o`<randstad-icon name="eye" size="24px" color="#2175D9" key="hidden"></randstad-icon>`}
+                          </button>
+
                         </button>
                       `:r}
                 `}
@@ -4248,7 +4253,7 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
 
         ${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),xs=n([l("randstad-form")],xs);class Cs extends t{constructor(){super(...arguments),this.name="",this.size="24px",this.color="",this.key=""}static{this.styles=e`
     :host {
       display: inline-flex;
       width: var(--icon-size, 24px);
@@ -4256,12 +4261,13 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
       align-items: center;
       justify-content: center;
     }
+
     svg {
-      width: var(--icon-size, 24px); /* Tamaño fijo basado en size */
-      height: var(--icon-size, 24px); /* Tamaño fijo basado en size */
+      width: var(--icon-size, 24px);
+      height: var(--icon-size, 24px);
       fill: var(--icon-color, currentColor);
     }
-  `}constructor(){super(),this.name="",this.size="24px",this.color=""}connectedCallback(){super.connectedCallback(),this.name&&this.loadIcon()}updated(t){t.has("name")&&this.name&&this.loadIcon(),t.has("size")&&this.style.setProperty("--icon-size",this.size),t.has("color")&&this.style.setProperty("--icon-color",this.color)}async loadIcon(){if(this.name)try{const t=await fetch(`/assets/icons/${this.name}.svg`);if(!t.ok)throw new Error("Icon not found");const e=await t.text(),o=new DOMParser,i=o.parseFromString(e,"image/svg+xml").querySelector("svg");if(!i)throw new Error("No se encontró un elemento SVG válido");i.removeAttribute("fill"),i.setAttribute("width",this.size||"24px"),i.setAttribute("height",this.size||"24px"),this.renderRoot.innerHTML="",this.renderRoot.appendChild(i)}catch(t){console.error(`❌ Error cargando icono ${this.name}:`,t),this.renderRoot.innerHTML="<span>⚠️</span>"}else this.renderRoot.innerHTML=""}render(){return null}}n([I({type:String}),a("design:type",String)],Cs.prototype,"name",void 0),n([I({type:String}),a("design:type",String)],Cs.prototype,"size",void 0),n([I({type:String}),a("design:type",String)],Cs.prototype,"color",void 0),customElements.define("randstad-icon",Cs);let ks=class extends t{constructor(){super(...arguments),this.open=!1,this.title="Título del modal"}static{this.styles=e`
+  `}updated(t){(t.has("name")||t.has("key"))&&this.loadIcon(),t.has("size")&&this.style.setProperty("--icon-size",this.size),t.has("color")&&this.style.setProperty("--icon-color",this.color)}async loadIcon(){if(this.name)try{const t=await fetch(`/assets/icons/${this.name}.svg`);if(!t.ok)throw new Error("Icon not found");const e=await t.text(),o=new DOMParser,i=o.parseFromString(e,"image/svg+xml").querySelector("svg");if(!i)throw new Error("No se encontró un SVG válido");i.removeAttribute("fill"),i.setAttribute("width",this.size),i.setAttribute("height",this.size),this.renderRoot.innerHTML="",this.renderRoot.appendChild(i)}catch(t){console.error(`❌ Error cargando icono ${this.name}:`,t),this.renderRoot.innerHTML="<span>⚠️</span>"}else this.renderRoot.innerHTML=""}render(){return r}}n([I({type:String}),a("design:type",String)],Cs.prototype,"name",void 0),n([I({type:String}),a("design:type",String)],Cs.prototype,"size",void 0),n([I({type:String}),a("design:type",String)],Cs.prototype,"color",void 0),n([I({type:String}),a("design:type",String)],Cs.prototype,"key",void 0),customElements.define("randstad-icon",Cs);let ks=class extends t{constructor(){super(...arguments),this.open=!1,this.title="Título del modal"}static{this.styles=e`
     :host {
       display: none;
       position: fixed;
@@ -4460,13 +4466,17 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
   `}closePopup(t){this.dispatchEvent(new CustomEvent("popup-close",{detail:t})),this.open=!1}render(){return o`
       <div class="popup" style="width: ${this.width};">
         ${"default"===this.type?o`
-          <div><img src="assets/img/icon_${this.icon}.svg"></div>
+          <div>
+            <randstad-icon name="${this.icon}" size="56px"></randstad-icon>
+          </div>
           <p>${this.description}</p>
           <div class="buttons">
             <button class="primary" @click=${()=>this.closePopup(!0)}>${this.buttonText}</button>
           </div>
         `:o`
-          <div><img src="assets/img/icon_${this.icon}.svg"></div>
+          <div>
+            <randstad-icon name="${this.icon}" size="56px"></randstad-icon>
+          </div>
           <h2>${this.title}</h2>
           <p>${this.description}</p>
           <div class="buttons">
@@ -4963,7 +4973,7 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     .hidden {
       display: none;
     }
-  `}constructor(){super(),this.options=[],this.placeholder="Filtrar opciones...",this.defaultValue="",this.disabled=!1,this.label="",this.labelColor="",this.filterable=!0,this.filteredOptions=[],this.filterValue="",this.isOpen=!1,this.debounceTimeout=null,this.defaultValue&&this.options.includes(this.defaultValue)&&(this.filterValue=this.defaultValue)}willUpdate(t){t.has("options")&&(this.filteredOptions=[...this.options]),t.has("defaultValue")&&this.options.includes(this.defaultValue)&&(this.filterValue=this.defaultValue)}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){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.isOpen||this.filterValue?(this.isOpen=!1,this.filterValue="",this.filteredOptions=[...this.options],this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0}))):this.isOpen=!0,this.requestUpdate())}handleClickOutside(t){this.contains(t.target)||(this.isOpen=!1,this.requestUpdate())}render(){const t=this.isOpen||this.filterValue?"close":"arrow_down";return o`
+  `}constructor(){super(),this.options=[],this.placeholder="Filtrar opciones...",this.defaultValue="",this.disabled=!1,this.label="",this.labelColor="",this.filterable=!0,this.filteredOptions=[],this.filterValue="",this.isOpen=!1,this.debounceTimeout=null,this.defaultValue&&this.options.includes(this.defaultValue)&&(this.filterValue=this.defaultValue)}willUpdate(t){t.has("options")&&(this.filteredOptions=[...this.options]),t.has("defaultValue")&&this.options.includes(this.defaultValue)&&(this.filterValue=this.defaultValue)}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){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.isOpen||this.filterValue?(this.isOpen=!1,this.filterValue="",this.filteredOptions=[...this.options],this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0}))):this.isOpen=!0,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">
@@ -4986,7 +4996,7 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
               @click="${this.handleIconClick}"
               ?disabled="${this.disabled}"
             >
-              <randstad-icon name="${t}" size="24px" color="#2175D9"></randstad-icon>
+              ${this.isOpen||this.filterValue?o`<randstad-icon name="close" size="24px" color="#2175D9" key="visible"></randstad-icon>`:o`<randstad-icon name="arrow_down" size="24px" color="#2175D9" key="hidden"></randstad-icon>`}
             </button>
           </div>
           <ul class="options-list ${this.isOpen&&this.filteredOptions.length>0?"":"hidden"}">