@getflip/swirl-components 0.389.1 → 0.391.0

package/dist/collection/components/swirl-text-input/swirl-text-input.js

@@ -133,10 +133,11 @@ export class SwirlTextInput {
         const ariaInvalid = this.invalid === true || this.invalid === false
             ? String(this.invalid)
             : undefined;
-        const showStepper = this.type === "number" && !this.disabled;
+        const showStepper = this.type === "number" && !this.disabled && !this.readonly;
         const showPasswordToggle = this.type === "password" && !this.disabled;
         const showClearButton = this.clearable &&
             !this.disabled &&
+            !this.readonly &&
             Boolean(this.value) &&
             !showPasswordToggle &&
             !showStepper &&
@@ -145,13 +146,12 @@ export class SwirlTextInput {
         const className = classnames("text-input", `text-input--font-size-${this.fontSize}`, `text-input--type-${this.type}`, {
             "text-input--auto-grow": this.autoGrow,
             "text-input--clearable": this.clearable,
-            "text-input--disabled": this.disabled,
             "text-input--disable-dynamic-width": this.disableDynamicWidth || Boolean(this.placeholder),
             "text-input--has-suffix": Boolean(this.suffixLabel),
             "text-input--inline": this.inline,
             "text-input--show-password": this.type === "password" && this.showPassword,
         });
-        return (h(Host, { key: '118c43993df15e8a56132135bd6e5bd7b20c7fa5' }, h("div", { key: 'b32019d666499025e823f65c84107090b3e0bdde', class: className }, this.prefixLabel && (h("span", { key: 'e92f359d218821987e795d91ba09de0a5ac83787', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '311c606dc2c9b78965d35543c79c828bbf04939d', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '2e2987f816f1a26b074ca67fc67d2b88031af88e', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: '82218c372d0374651f5cb3a07a679c5f045dabfc', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: '9c42c315b34e9a614a145d2e8a00da2b28fcc21e', size: this.iconSize }))), showPasswordToggle && (h("button", { key: 'd78dcd286ba441a8d5df0a9d9e8b02c466dab617', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'e29c6cb14c6bb8ff7ebf67800b2b267ca0208df9', class: "text-input__stepper" }, h("button", { key: '6218def82164fd3b57015d3fb8c40391cefcf84d', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '9b338df89a94563b9f9fde0ba16cb1fae537c203', size: this.iconSize })), h("button", { key: '6d31cb2c37f9a2887c57f2350afe184a76dd09f8', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: 'f2b7974999012a8ad29d84dd5df8a908605f57b4', size: this.iconSize })))), this.showCharacterCounter && (h("span", { key: '4dae89e8b35db216b513bbca04dff56c48b64696', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: 'c48b6c6017b6b2a8524a2f3f5e9d2d8869026b3f' }, this.characterCounterLabel), this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+        return (h(Host, { key: '47932ba64512368fef5948a2560afdf722ae106c' }, h("div", { key: '089210f7581a26934fa1851899e1b279c96a4f55', class: className }, this.prefixLabel && (h("span", { key: '7d77cb2af315fe8909fa92f7ea328e4970c853fb', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '1c73d0168a7ca0e7380b665c0e398b3dfb8be35b', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '2ae0f456126a27f0256b5dfd851da830ea379018', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: 'ea47c05178f0ce61188ca8ed15f3bbe6f132b1dc', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: 'd419f462f82b28bc6c8602f3d4cf65d2649d0234', size: this.iconSize }))), showPasswordToggle && (h("button", { key: '565f3c92ef3fd90d1d43c673b94feec9bcf213cf', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'ec02752a5258a06827fc156fd4b4cd5a0e712751', class: "text-input__stepper" }, h("button", { key: 'c698d2fda7bf64b338920410ef0c894955cf6372', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '0f662dd62d1a315d288622a31e4f0dfb0ee530e0', size: this.iconSize })), h("button", { key: '49fc4ece3d4b67e3b6fa38ecdb681edf5e2e0791', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: '49de410032a3f513ba78e7f6a986645441db80eb', size: this.iconSize })))), this.showCharacterCounter && (h("span", { key: 'cc12de838a87f683af5ab14009cedcd1f98b39bb', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: '8df695b8970b8f35d7b119bff1cfe573c427f1e6' }, this.characterCounterLabel), this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
     }
     static get is() { return "swirl-text-input"; }
     static get encapsulation() { return "scoped"; }
@@ -818,6 +818,25 @@ export class SwirlTextInput {
                 "getter": false,
                 "setter": false,
                 "reflect": true
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }

package/dist/collection/components/swirl-time-input/swirl-time-input.js

@@ -136,7 +136,7 @@ export class SwirlTimeInput {
         const className = classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: 'ae938e34b6749f2d8769188b03ba397f48053c7c' }, h("div", { key: '820bb9a8af14ec2e0566610cdc7acf685ebaab49', class: className }, h("input", { key: '01f30edbb831a35124af67a6a9632b8177f30d17', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), h("span", { key: '8e239ac224665ffcd26ec4f2ef3786394ae21bbb', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'a23c7d2781e37cd572778bab9bca884d7800fbf6', size: this.iconSize })))));
+        return (h(Host, { key: 'e23b038bf99ddfd9893ff2b2cc2981ee7de0fbda' }, h("div", { key: '26b6cbb9a67cfb986bae34b2ff604862992f7076', class: className }, h("input", { key: 'd5123ad3101a1c0571e491d91c5916fba51aabe9', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: 'd53e9ea53813798aa0cdd2ce7f6f685053859862', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '61e91a6ae302b0b64d4283525f02b97bad37e9ad', size: this.iconSize })))));
     }
     static get is() { return "swirl-time-input"; }
     static get encapsulation() { return "scoped"; }
@@ -343,6 +343,25 @@ export class SwirlTimeInput {
                 "getter": false,
                 "setter": false,
                 "reflect": true
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }