@randstad-uca/design-system 1.0.101 → 1.0.102

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

@@ -1186,7 +1186,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 +1224,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 +1483,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 +2619,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 +2685,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 +3965,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}