@randstad-uca/design-system 1.0.101 → 1.0.103

package/dist/components/Form.d.ts

@@ -31,6 +31,7 @@ export declare class RandstadForm extends BaseControl {
     */
     private get _isCleanButtonVisible();
     private handleKeyDown;
+    private get _inputMode();
     private handleInputArrowKey;
     private handleButtonArrowKey;
     render(): TemplateResult<1>;

package/dist/index.js

@@ -143,9 +143,10 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       justify-content: space-between;
       gap: 16px;
       flex-direction: row;
-      align-items: flex-start;
+      align-items: center;
       cursor: pointer;
-      min-height: 57px;
+      min-height: 25px;
+      padding-bottom: 16px;
     }
 
     .title {
@@ -155,7 +156,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
 
     .icon-wrapper {
       position: absolute;
-      top: 0;
+      top: -7px;
       right: 0;
       width: 40px;
       height: 40px;
@@ -209,22 +210,10 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
     
     @media (max-width: 501px) {
-      .header {
-        min-height: 42px;
-        max-height: 67px;
-      }
       .title {
-        margin-bottom: 16px;
         max-width: 90%;
       }
     }
-
-    @media (max-width: 355px) {
-      .header {
-        min-height: 42px;
-        max-height: unset;
-      }
-    }
   `}connectedCallback(){super.connectedCallback(),this.mediaQueryList=window.matchMedia(V),this.mediaQueryList.addEventListener("change",this.handleMediaQueryChange)}disconnectedCallback(){super.disconnectedCallback(),this.mediaQueryList.removeEventListener("change",this.handleMediaQueryChange)}toggle(){this.isOpen=!this.isOpen}render(){const t=e`
       <randstad-icon
         name="${this.isOpen?"arrow_up":"arrow_down"}"
@@ -1186,7 +1175,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
         height: 24px;
         color: var( --primary-color );
       }
-    `]}togglePassword(t){this.isPasswordVisible=!this.isPasswordVisible;const e=t.currentTarget.parentElement?.querySelector("input");e&&(e.type=this.isPasswordVisible?"text":"password"),this.requestUpdate()}handleInput(t){this.handleInputCustom(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}))}_updateValueWithCursor(t,e,i){const o=t.value;if(o!==e){i.preventDefault();const r=t.selectionStart,s=t.selectionEnd;if(t.value=e,null!==r&&null!==s){const i=o.length-e.length,n=Math.max(0,r-i),a=Math.max(0,s-i);t.setSelectionRange(n,a)}}}handleInputCustom(t){const e=t.target;let i=!1;if("number"===this.keydown||"text"===this.keydown||"alfanumeric"===this.keydown)i=!0;else if(this.keydownRegex)try{i=!new RegExp(this.keydownRegex).test("😀")}catch(t){i=!0}if(i){const i=e.value.replace(tt,"");this._updateValueWithCursor(e,i,t)}"number"===this.keydown?this.onlyNumeric(t):"text"===this.keydown?this.onlyText(t):"alfanumeric"===this.keydown?this.onlyAlphanumeric(t):this.keydownRegex&&this.onlyRegex(t)}onlyNumeric(t){const e=t.target,i=e.value.replace(/[^0-9]/g,"");this._updateValueWithCursor(e,i,t)}onlyText(t){const e=t.target,i=e.value.replace(/[^a-zA-Z\sáéíóúüñÁÉÍÓÚÑÜ]/g,"").trimStart();this._updateValueWithCursor(e,i,t)}onlyAlphanumeric(t){const e=t.target,i=e.value.replace(/[^a-zA-Z0-9]/g,"").trimStart();this._updateValueWithCursor(e,i,t)}onlyRegex(t){if(!this.keydownRegex)return;const e=t.target,i=e.value;let o=this.keydownRegex.match(/\[\^?[^\]]+\]/g);o||(o=[`[${this.keydownRegex}]`]);let r="";const s=o.length>=2,n=new RegExp(o[0]),a=s?new RegExp(o[1]):n,l=i.split("");for(let t=0;t<l.length;t++){const e=l[t];0===t?n.test(e)&&(r+=e):a.test(e)&&(r+=e)}const d=r.trimStart();this._updateValueWithCursor(e,d,t)}handleInputKeyDown(t){this.handleKeyDown(t),this.handleInputArrowKey(t)}get _isCleanButtonVisible(){return this.cleanButton&&!!this.value&&"password"!==this.type&&"textarea"!==this.type}handleKeyDown(t){if("Enter"!==t.key)return;const e=new Event("submit",{bubbles:!0,composed:!0,cancelable:!0}),i=this.closest("form");i&&i.dispatchEvent(e)}handleInputArrowKey(t){if("ArrowRight"!==t.key)return;const e=t.target;if(("password"===this.type||this._isCleanButtonVisible)&&e.selectionStart===e.value.length){t.preventDefault();const e=this.shadowRoot?.querySelector(".toggle-password, .clean-button");e?.focus()}}handleButtonArrowKey(t){if("ArrowLeft"!==t.key)return;t.preventDefault();const e=this.shadowRoot?.querySelector(".form-input");e&&(e.focus(),e.selectionStart=e.selectionEnd=e.value.length)}render(){const t="textarea"===this.type?` height: ${this.heightTextArea??"30px"}; max-height: ${this.maxHeightTextArea??"30px"}; overflow-y: auto; `:"",o=this.labelColor?`--label-color: ${this.labelColor};`:"",r=e`
+    `]}togglePassword(t){this.isPasswordVisible=!this.isPasswordVisible;const e=t.currentTarget.parentElement?.querySelector("input");e&&(e.type=this.isPasswordVisible?"text":"password"),this.requestUpdate()}handleInput(t){this.handleInputCustom(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}))}_updateValueWithCursor(t,e,i){const o=t.value;if(o!==e){i.preventDefault();const r=t.selectionStart,s=t.selectionEnd;if(t.value=e,null!==r&&null!==s){const i=o.length-e.length,n=Math.max(0,r-i),a=Math.max(0,s-i);t.setSelectionRange(n,a)}}}handleInputCustom(t){const e=t.target;let i=!1;if("number"===this.keydown||"text"===this.keydown||"alfanumeric"===this.keydown)i=!0;else if(this.keydownRegex)try{i=!new RegExp(this.keydownRegex).test("😀")}catch(t){i=!0}if(i){const i=e.value.replace(tt,"");this._updateValueWithCursor(e,i,t)}"number"===this.keydown?this.onlyNumeric(t):"text"===this.keydown?this.onlyText(t):"alfanumeric"===this.keydown?this.onlyAlphanumeric(t):this.keydownRegex&&this.onlyRegex(t)}onlyNumeric(t){const e=t.target,i=e.value.replace(/[^0-9]/g,"");this._updateValueWithCursor(e,i,t)}onlyText(t){const e=t.target,i=e.value.replace(/[^a-zA-Z\sáéíóúüñÁÉÍÓÚÑÜ]/g,"").trimStart();this._updateValueWithCursor(e,i,t)}onlyAlphanumeric(t){const e=t.target,i=e.value.replace(/[^a-zA-Z0-9]/g,"").trimStart();this._updateValueWithCursor(e,i,t)}onlyRegex(t){if(!this.keydownRegex)return;const e=t.target,i=e.value;let o=this.keydownRegex.match(/\[\^?[^\]]+\]/g);o||(o=[`[${this.keydownRegex}]`]);let r="";const s=o.length>=2,n=new RegExp(o[0]),a=s?new RegExp(o[1]):n,l=i.split("");for(let t=0;t<l.length;t++){const e=l[t];0===t?n.test(e)&&(r+=e):a.test(e)&&(r+=e)}const d=r.trimStart();this._updateValueWithCursor(e,d,t)}handleInputKeyDown(t){this.handleKeyDown(t),this.handleInputArrowKey(t)}get _isCleanButtonVisible(){return this.cleanButton&&!!this.value&&"password"!==this.type&&"textarea"!==this.type}handleKeyDown(t){if("Enter"!==t.key)return;const e=new Event("submit",{bubbles:!0,composed:!0,cancelable:!0}),i=this.closest("form");i&&i.dispatchEvent(e)}get _inputMode(){return"password"===this.type?"text":"number"===this.keydown?"numeric":"text"}handleInputArrowKey(t){if("ArrowRight"!==t.key)return;const e=t.target;if(("password"===this.type||this._isCleanButtonVisible)&&e.selectionStart===e.value.length){t.preventDefault();const e=this.shadowRoot?.querySelector(".toggle-password, .clean-button");e?.focus()}}handleButtonArrowKey(t){if("ArrowLeft"!==t.key)return;t.preventDefault();const e=this.shadowRoot?.querySelector(".form-input");e&&(e.focus(),e.selectionStart=e.selectionEnd=e.value.length)}render(){const t="textarea"===this.type?` height: ${this.heightTextArea??"30px"}; max-height: ${this.maxHeightTextArea??"30px"}; overflow-y: auto; `:"",o=this.labelColor?`--label-color: ${this.labelColor};`:"",r=e`
       <randstad-icon
         name="${this.isPasswordVisible?"eye_crossed":"eye"}"
         size="24px"
@@ -1224,7 +1213,8 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
                   ?disabled=${this.disabled}
                   @input=${this.handleInput}
                   maxlength=${this.maxLength??i}
-                   @keydown=${this.handleInputKeyDown}
+                  @keydown=${this.handleInputKeyDown}
+                  inputmode=${this._inputMode}
                 />
 
                 ${"password"===this.type?e`
@@ -1482,6 +1472,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
             ?disabled=${this.disabled}
             @keydown=${this._handleKeyDown}
             @input=${this._handleInputOrPaste}
+            inputmode=${"google"===this.platform?"email":"url"}
             maxlength=${o>0?o:i}
           />
 
@@ -2617,6 +2608,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
                     maxlength="${this.maxLength??""}"
                     tabindex="0"
                     role="combobox"
+                    inputmode="search"
                     autocomplete="new-password" 
                     aria-expanded="${this.isOpen}"
                     aria-controls="options-list"
@@ -2682,6 +2674,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
                     @keydown="${this.preventInvalidStart}"
                     @paste="${this.handlePaste}"
                     placeholder="${h}"
+                    inputmode="search"
                     maxlength="${this.maxLength??""}"
                   />
 
@@ -3961,6 +3954,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
               ?disabled=${this.disabled}
               ?readonly=${this.readonly}
               maxlength="${this.maxLength}"
+              inputmode="numeric"
               @input=${this.readonly?null:this.handleInput}
               @keydown=${this.readonly?null:this.handleKeyDown}
               @click=${this.readonly?this.handleCalendarButtonClick:null}