@roadtrip/components 3.33.0 → 3.33.1

package/dist/esm/road-phone-number-input.entry.js

@@ -1195,9 +1195,6 @@ i18n.phonenumbers.AsYouTypeFormatter.prototype.inputDigitHelper_=function(a){var
 });
 }(libphonenumber));
 
-// list of forbidden characters
-const forbiddenChars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '=', '[', ']', '{', '}', '|', ';', ':', "'", '"', ',', '.', '<', '>', '/', '?'];
-
 const phoneNumberInputCss = ".is-invalid.sc-road-phone-number-input .phone-number-input-field.sc-road-input.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.road-phone-input-select.sc-road-phone-number-input{position:relative;display:block;font-family:var(--road-font, sans-serif);color:var(--road-on-surface);background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:none;appearance:none;width:5rem;height:3.5rem}.sc-road-phone-number-input-h .is-error.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.form-select-area.sc-road-phone-number-input{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 3rem 0 2rem;margin:0;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right -5px center/2.5rem 2rem;position:absolute;top:0;left:0;height:100%;width:95%;z-index:1;border:0;appearance:none;opacity:1;cursor:pointer}.form-select-area.sc-road-phone-number-input:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select-area.sc-road-phone-number-input::-ms-expand{display:none}.form-select-area.sc-road-phone-number-input::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select-area.sc-road-phone-number-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select-area.sc-road-phone-number-input:focus~.form-select-area-label.sc-road-phone-number-input,.form-select-area[required].sc-road-phone-number-input:valid~.form-select-area-label.sc-road-phone-number-input,.form-select-area.has-value.sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.625) translateY(-0.625rem)}.form-select-area.sc-road-phone-number-input:not(:disabled):focus{border-color:var(--road-input-outline-variant)}.form-select-area.sc-road-phone-number-input:disabled,.form-select-area[readonly].sc-road-phone-number-input{color:transparent;cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.form-select-area-label.sc-road-phone-number-input{position:absolute;top:0.9rem;left:1rem;display:block;font-size:var(--road-font-size-18);line-height:1.5;color:var(--road-on-surface-extra-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select-area.sc-road-phone-number-input:required~.form-select-area-label.sc-road-phone-number-input::after{color:var(--road-on-danger-surface);content:\" *\"}.form-select-area-value.sc-road-phone-number-input{position:absolute;top:1.4rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input{height:3.5rem;padding:0.75rem 0 0 1rem}.input-xl.sc-road-phone-number-input{height:3.5rem;padding:0.75rem 0 0 1rem}.select-xl.sc-road-phone-number-input-h .form-select-area-label.sc-road-phone-number-input{top:1rem}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input:focus~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[required].sc-road-phone-number-input:valid~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area.has-value.sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[type=\"date\"].sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[type=\"time\"].sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input:placeholder-shown~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-phone-number-input{gap:.25rem;display:flex;width:100%;margin:0.5rem 0;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-phone-number-input,.was-validated.sc-road-phone-number-input .form-select-area.sc-road-phone-number-input:invalid{border-color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-phone-number-input~.invalid-feedback.sc-road-phone-number-input,.was-validated.sc-road-phone-number-input .form-select-area.sc-road-phone-number-input:invalid~.invalid-feedback.sc-road-phone-number-input{display:block}.form-select-area.sc-road-phone-number-input option.sc-road-phone-number-input:checked::after{position:absolute;top:0;left:0;content:attr(data-content)}.form-select-area.sc-road-phone-number-input::after{position:absolute;top:0;left:0;content:var(--selected-content, '')}.phone-number-input-label.sc-road-phone-number-input{position:absolute;top:1rem;left:6rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.phone-number-input-field.sc-road-phone-number-input:required~.phone-number-input-label.sc-road-phone-number-input::after{color:var(--road-danger-default);content:\" *\"}.phone-number-input-field.sc-road-phone-number-input:focus~.phone-number-input-label.sc-road-phone-number-input,.phone-number-input-field[required].sc-road-phone-number-input:valid~.phone-number-input-label.sc-road-phone-number-input,.phone-number-input-field.has-value.sc-road-phone-number-input~.phone-number-input-label.sc-road-phone-number-input{transform:scale(0.625) translateY(-0.625rem)}.phone-number-input-field.sc-road-phone-number-input:placeholder-shown~.phone-number-input-label.sc-road-phone-number-input{transform:scale(0.625) translateY(-0.625rem)}.phone-number-input-field.sc-road-phone-number-input:-ms-input-placeholder~.phone-number-input-label.sc-road-phone-number-input{transform:scale(0.625) translateY(-0.625rem)}.phone-number-inputs-container.sc-road-phone-number-input{position:relative;display:flex}.road-phone-input-select.sc-road-phone-number-input{margin-bottom:1rem}.is-error.sc-road-phone-number-input{margin-bottom:0}.phone-number-input-field.sc-road-phone-number-input{flex-grow:1;border:1px solid var(--road-input-outline);border-left:0;border-radius:0.25rem;border-bottom-left-radius:0;border-top-left-radius:0}";
 const RoadPhoneNumberInputStyle0 = phoneNumberInputCss;
 
@@ -1251,13 +1248,6 @@ const RoadPhoneNumberInput = class {
         this.phoneNumber = input.value;
         this.createAndDispatchPhoneData();
     }
-    // On user key down
-    handleKeyDown(event) {
-        // checks if the forbidden characters's list contains the pressed key
-        if (forbiddenChars.includes(event.key)) {
-            event.preventDefault();
-        }
-    }
     // On user select
     handleSelect(event) {
         const select = event.target;
@@ -1361,9 +1351,9 @@ const RoadPhoneNumberInput = class {
         const isErrorClass = this.errorMessage.length ? 'is-error' : '';
         const hasValueClass = this.hasValue() ? 'has-value' : '';
         const sizes = 'xl';
-        return (h(Host, { key: '9f90460c652db496fc88dd4b8e611bdf348e3f5a' }, h("div", { key: '03fceb8966c9622782a0341a2f0a01511cfe7006', class: 'phone-number-inputs-container' }, h("div", { key: '4a889f1e223cf354a262fd68d948c05dc265a14b', class: `road-phone-input-select ${isErrorClass} ${isInvalidClass}`, slot: "prepend" }, h("select", { key: 'cc520dea43d2b64645f9cbf67c768efce7790079', id: selectId, class: `form-select-area has-value`, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, onChange: (event) => this.handleSelect(event), "aria-label": this.codeLabel, tabIndex: this.disabled ? -1 : 0 }, this.countryOptions && this.countryOptions.map(option => (h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), h("label", { key: '6769d2bda09b72449a566ece542ebf7edc5a0e40', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { key: '513bfd2c0eab6609d74eb7b9ebc14a212be4cc9d', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("input", { key: 'db609e065a32f7014c6d32dec4aae86b2b607e77', type: 'tel', id: inputId, class: `input-${sizes} phone-number-input-field ${hasValueClass} ${isErrorClass}`, value: this.phoneValue, required: this.required, tabIndex: 0, onInput: (event) => this.handleInput(event), onKeyDown: (event) => this.handleKeyDown(event) }), h("label", { key: 'cac7f2ae8afa700db8871bc4d2b35f49822ca179', class: "phone-number-input-label", id: labelId, htmlFor: inputId }, this.phoneLabel)), this.errorMessage
+        return (h(Host, { key: '7d65a01428b79587c98a5e399bab8403c0849a68' }, h("div", { key: 'b59d36be4bd2ecbe7469b37c194501d542895b29', class: 'phone-number-inputs-container' }, h("div", { key: '4cf3f4e60de5f861e09c8cbde5551fb95f209970', class: `road-phone-input-select ${isErrorClass} ${isInvalidClass}`, slot: "prepend" }, h("select", { key: '187f3724fcc9bf5c34c6490e61e5adee102ac052', id: selectId, class: `form-select-area has-value`, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, onChange: (event) => this.handleSelect(event), "aria-label": this.codeLabel, tabIndex: this.disabled ? -1 : 0 }, this.countryOptions && this.countryOptions.map(option => (h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), h("label", { key: '8e867ef3d625b2e69246591cb8f84e7794ba1a7c', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { key: '71ae31a4e0da49b93d28e433a41fbb40b74b603d', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("input", { key: '289ac4032540c87f77784439864983ed5d544439', type: 'tel', id: inputId, class: `input-${sizes} phone-number-input-field ${hasValueClass} ${isErrorClass}`, value: this.phoneValue, required: this.required, tabIndex: 0, onInput: (event) => this.handleInput(event) }), h("label", { key: '60e9f10714d8807449534d1bce2f74f65a1646dc', class: "phone-number-input-label", id: labelId, htmlFor: inputId }, this.phoneLabel)), this.errorMessage
             && this.errorMessage !== ''
-            && h("p", { key: 'cb521ea80ae33ce0743a64270d47234cc0bdf114', class: "invalid-feedback" }, h("road-icon", { key: '1dcf2587dabc46402d1c16bbf75604aedfc4d54d', slot: "start", color: 'danger', name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.errorMessage)));
+            && h("p", { key: 'b140351db845f88befd99aab39daa115c770732e', class: "invalid-feedback" }, h("road-icon", { key: 'ed89fc9c99493f67973448bbea8d7f0c20e0c455', slot: "start", color: 'danger', name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.errorMessage)));
     }
     get el() { return getElement(this); }
 };