@randstad-uca/design-system 1.0.7 → 1.0.9

package/dist/components/Select.d.ts

@@ -5,6 +5,7 @@ export declare class FilterableSelect extends LitElement {
     defaultValue: string;
     disabled: boolean;
     label: string;
+    value: string;
     labelColor: string;
     filterable: boolean;
     filteredOptions: never[];
@@ -13,7 +14,7 @@ export declare class FilterableSelect extends LitElement {
     private debounceTimeout;
     static styles: import("lit").CSSResult;
     constructor();
-    willUpdate(changedProperties: any): void;
+    willUpdate(changedProperties: Map<string, any>): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleInputClick(e: any): void;

package/dist/index.js

@@ -149,7 +149,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
     }
 
     .button-round {
-      width: 48px !important;
+      width: 48px;
       height: 48px;
       border-radius: 50%;
       background-color: var(--white);
@@ -221,7 +221,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
       border: none;
       color: var(--white);
     }
-  `}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`
+  `}handleClick(t){this.disabled||this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0}))}render(){const t=`button button-${this.size} ${this.variant} ${this.loader?"loader":""}`,e="button-tertiary"===this.variant?"#2175D9":"white";return o`
       <button
         type="button"
         class=${t}
@@ -237,7 +237,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}
               ${this.iconName&&"button-round"!==this.variant&&"right"===this.iconPosition?o`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
             `}
       </button>
@@ -308,7 +308,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
           ${this.prefix}&nbsp;
           ${this.renderClause(this.clause1Text,this.clause1Url)},&nbsp;
           ${this.connector}&nbsp;
-          ${this.renderClause(this.clause2Text,this.clause2Url)}
+          ${this.renderClause(this.clause2Text,this.clause2Url)}.
         </span>
       </label>
     `}};n([I({type:String}),a("design:type",Object)],M.prototype,"prefix",void 0),n([I({type:String}),a("design:type",Object)],M.prototype,"clause1Text",void 0),n([I({type:String}),a("design:type",String)],M.prototype,"clause1Url",void 0),n([I({type:String}),a("design:type",Object)],M.prototype,"connector",void 0),n([I({type:String}),a("design:type",Object)],M.prototype,"clause2Text",void 0),n([I({type:String}),a("design:type",String)],M.prototype,"clause2Url",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Object)],M.prototype,"checked",void 0),M=n([l("randstad-checkbox")],M);
@@ -4041,7 +4041,7 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
       outline: none;
       transition: border-color 0.3s ease, box-shadow 0.3s ease;
       width: 100%;
-      color: #0F1941 !important;
+      color: #0F1941;
     }
 
     .form.error .form-input {
@@ -4161,7 +4161,7 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
     }
 
     .link-text:hover {
-      text-decoration: underline;
+      color: #0f3b65;
     }
 
     .tooltip-wrapper randstad-icon {
@@ -4176,13 +4176,6 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
     .toggle-password randstad-icon svg {
       fill: #2175D9 !important;
     }
-
-    input:-webkit-autofill,
-    textarea:-webkit-autofill {
-      box-shadow: 0 0 0px 1000px white inset !important;
-      -webkit-text-fill-color: #0F1941 !important;
-      transition: background-color 5000s ease-in-out 0s;
-    }
   `}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`
       <div
         class="form ${this.error?"error":""} ${this.success?"success":""} ${this.disabled?"disabled":""}"
@@ -4240,11 +4233,7 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
                 ${this.errorMessage?this.errorMessage:o`<slot name="error-extended"></slot>`}
               </p>
             `:r}
-        ${this.linkText&&this.linkRoute?o`
-            <div style="text-align: right;">
-              <a class="link-text" href="#" @click=${this.handleLinkClick}>${this.linkText}</a>
-            </div>
-          `: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>
@@ -4348,6 +4337,7 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
       line-height: 25px;
       font-weight: 400;
       color: white;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
       font-family: 'Graphik', sans-serif;
     }
     .container {
@@ -4460,13 +4450,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">
@@ -4855,7 +4849,6 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       background: white;
       cursor: pointer;
       transition: background-color 0.3s ease;
-      color: #0F1941 !important;
     }
 
     .input-container:hover .filter-input {
@@ -4963,7 +4956,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(){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`
           <div class="label-container">
@@ -4986,7 +4979,8 @@ 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.filterable&&this.filterValue?o`<randstad-icon name="close" size="24px" color="#2175D9"></randstad-icon>`:this.isOpen&&this.filteredOptions.length>0?o`<randstad-icon name="arrow_up" size="24px" color="#2175D9"></randstad-icon>`:o`<randstad-icon name="arrow_down" size="24px" color="#2175D9"></randstad-icon>`}
+
             </button>
           </div>
           <ul class="options-list ${this.isOpen&&this.filteredOptions.length>0?"":"hidden"}">
@@ -4998,7 +4992,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",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),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;
@@ -5155,8 +5149,8 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
         align-items: center;
         box-sizing: border-box;
         min-height: 48px;
-        min-width: 380px;
-        max-width: 380px;
+        min-width: 270px;
+        max-width: 480px;
         border-radius: 4px;
         padding: 8px;
         gap: 8px;
@@ -5210,17 +5204,6 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       .informative {
         background-color: var(--ui-informative);
       }
-
-      @media (max-width: 940px) {
-        :host {
-          bottom: 16px !important;
-          left: 50% !important;
-          right: auto !important;
-          top: auto !important;
-          transform: translateX(-50%) !important;
-          justify-content: center !important;
-        }
-      }
     `]}constructor(){super(),this.type="informative",this.icon="info",this.message="Este es un mensaje.",this.open=!1,this.position="bottom-center"}static get properties(){return{type:{type:String},icon:{type:String},message:{type:String},open:{type:Boolean},position:{type:String,reflect:!0}}}render(){const t="error"===this.type||"warning"===this.type?"alert":"status";return o`
       <div
         class="container ${this.open?"":"hidden"} ${this.type}"