@getflip/swirl-components 0.394.1 → 0.395.0

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

@@ -28,6 +28,10 @@
   padding-right: calc(1.5rem + var(--s-space-8));
 }
 
+.text-input--clearable .text-input__character-counter, .text-input--type-number .text-input__character-counter, .text-input--type-password .text-input__character-counter {
+    padding-right: calc(1.5rem + var(--s-space-8));
+  }
+
 .text-input--show-password .text-input__input {
     width: 100%;
   }

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

@@ -13,11 +13,12 @@ export class SwirlTextInput {
         this.iconSize = 24;
         this.showPassword = false;
         this.mediaQueryUnsubscribe = () => { };
-        this.clear = () => {
+        this.handleClearClick = () => {
             this.inputEl.value = "";
             this.value = "";
             this.valueChange.emit("");
             this.inputEl.focus();
+            this.clear.emit();
         };
         this.onChange = (event) => {
             const el = event.target;
@@ -140,18 +141,21 @@ export class SwirlTextInput {
             !this.readonly &&
             Boolean(this.value) &&
             !showPasswordToggle &&
-            !showStepper &&
-            !this.showCharacterCounter;
+            !showStepper;
+        const characterCount = this.value?.length ?? 0;
+        const showCharacterCounter = this.showCharacterCounter &&
+            (!this.showCharacterCounterNearLimit ||
+                characterCount >= this.maxLength * 0.8);
         const type = this.type === "password" && this.showPassword ? "text" : this.type;
         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--clearable": showClearButton,
             "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: '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}` : "")))));
+        return (h(Host, { key: '288582bcca41f2ae8cf3c904ed02fcb0a976be7b' }, h("div", { key: '817b0708b7bebf147ded143b4f0dea6206959d49', class: className }, this.prefixLabel && (h("span", { key: '1e1bd63e29fb41cdc58237b78e55b6744bb28cda', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '731a75748b874b5414668e4c4d412fa078b54b3e', "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: '2ac53e8616fba0f233c51e95b7a0686d03dc552c', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: '48f457dfb8c41726623a34b68ba5f7622705145f', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: '5f853517b77fcb680f985c5a4624732026c7d39a', size: this.iconSize }))), showPasswordToggle && (h("button", { key: 'a11670fac677c71297420e1ab2b7ce23dfe99671', "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: 'e098155b27a7d5dd49019b2c1956b0b94e0c3035', class: "text-input__stepper" }, h("button", { key: '008c30c8f3bc1d7b4227db185b367d0216c051da', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '656e442c33bd16d69057fb59158d0900e8640b2c', size: this.iconSize })), h("button", { key: 'f1123bb4c9440e71727846782135c31a912cebf5', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: 'bbd40a1605fa6b3757d308fd5fca6ef5cd133b59', size: this.iconSize })))), showCharacterCounter && (h("span", { key: '98b9121e7b79872e05cd4d4d1c956405118ba0b8', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: '339c0dd5c187d8e7818ae3dc4a75a878b3f81f6c' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
     }
     static get is() { return "swirl-text-input"; }
     static get encapsulation() { return "scoped"; }
@@ -622,6 +626,25 @@ export class SwirlTextInput {
                 "setter": false,
                 "reflect": false
             },
+            "showCharacterCounterNearLimit": {
+                "type": "boolean",
+                "attribute": "show-character-counter-near-limit",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "spellCheck": {
                 "type": "boolean",
                 "attribute": "spell-check",
@@ -848,6 +871,21 @@ export class SwirlTextInput {
     }
     static get events() {
         return [{
+                "method": "clear",
+                "name": "clear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
                 "method": "inputBlur",
                 "name": "inputBlur",
                 "bubbles": true,