@haiilo/catalyst 10.28.2 → 10.29.0

package/dist/components/cat-input2.js

@@ -1578,6 +1578,7 @@ const CatInput = /*@__PURE__*/ proxyCustomElement(class CatInput extends HTMLEle
         this._id = `cat-input-${nextUniqueId++}`;
         this.hasSlottedLabel = false;
         this.hasSlottedHint = false;
+        this.hasSlottedCounter = false;
         this.isPasswordShown = false;
         this.errorMap = undefined;
         this.requiredMarker = 'optional';
@@ -1619,6 +1620,7 @@ const CatInput = /*@__PURE__*/ proxyCustomElement(class CatInput extends HTMLEle
     componentWillRender() {
         this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
         this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+        this.hasSlottedCounter = !!this.hostElement.querySelector('[slot="counter"]');
     }
     /**
      * Programmatically move focus to the input. Use this method instead of
@@ -1671,19 +1673,19 @@ const CatInput = /*@__PURE__*/ proxyCustomElement(class CatInput extends HTMLEle
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h("div", { key: 'ffbaf104a60dbf73cb59e07e3164fe0c421540a5', class: {
+        return (h("div", { key: '3d28dff29d5ced59f609ce9fcf6c2b2a14cfdda7', class: {
                 'input-field': true,
                 'input-horizontal': this.horizontal
-            } }, h("div", { key: 'e6139d1d950c2d8c2674bb90f0acbe9333ace2eb', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'fce898969b37f4579f780c1a62354ccb0da5a73e', htmlFor: this.id, part: "label" }, h("span", { key: '8a4d0f653bae9a75db600080ad7d0b9199c14db5', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '6073eadb00b587d1f3ba22d212e5235d21826b08', name: "label" })) || this.label, h("div", { key: 'fc4be508caec71287f275873d49adb5c16931289', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'c1010a473d4bfadb8ada56825db91f0c4d2b7871', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '8b2184a224afa6857f207aeaf71d83e12c92ef9a', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), this.maxLength && (h("div", { key: '6aee4428a06faba6ecf6a82963f0ecf3ca0d5d7b', class: "label-character-count", "aria-hidden": "true" }, this.value?.toString().length ?? 0, "/", this.maxLength))))))), h("div", { key: '9c88a62af0c4083162bea13dc1fd5ead5708efbb', class: "input-container" }, h("div", { key: '556a7b1bc45da66739d8a7afec3d4e1b64f12e77', class: "input-outer-wrapper" }, h("div", { key: '16d000652a934588fa87c71929565aa5cc15069b', class: {
+            } }, h("div", { key: '41399390b76c6a2e96dc3df48eede8ea2bcc4698', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '68bb767790072eb2728d680d448e1ee80e641013', htmlFor: this.id, part: "label" }, h("span", { key: '04c217ff1f227a1fb82b9a52b284bbd67f8d89dd', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '0c462827456af3b83935e569fac4fb45459c2edc', name: "label" })) || this.label, h("div", { key: '9415db27af950dc50efac0c60bdc47aa5efc8c97', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'fc45ea569ef7c9eec048bae75a8b5127beafcc09', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '20f36a7a3e2c042fa4f802ea3f71cb20f60188b3', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (h("div", { key: '58338cb0be0db04c6030e9f295428079ba2c7316', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), h("div", { key: '5ed2b9c0c812c65d2e7d77d02f61cb88f33567e1', class: "input-container" }, h("div", { key: '9b73f259436d1f7d75f2efcaec3959759631f579', class: "input-outer-wrapper" }, h("div", { key: '04ba158193111283c31ea6e8d3d4e34e0dafe995', class: {
                 'input-wrapper': true,
                 'input-round': this.round,
                 'input-readonly': this.readonly,
                 'input-disabled': this.disabled,
                 'input-invalid': this.invalid
-            }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { key: 'de3b5da6a0a09c1f66caeb2fb3c9772a2426778a', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { key: 'f950a57fa6060b9f82629d26b91dcb449b86cd2a', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: 'b98cd1a805712c454262bfa8fae92f1e92b33f09', class: "input-inner-wrapper" }, h("input", { key: '9bd8bc8f345c80ced98a06728d9d09bc462e0823', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
+            }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { key: '6e834d91bca7660e24f7f917034db92a530d3901', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { key: '606625d78126b10f1efbdeec78d2339d9a66cf04', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: '28776786dd55f04d60c985ed7891d85c0e4c1f7b', class: "input-inner-wrapper" }, h("input", { key: '7ee17b1603ed56cd4b98561c9a7f5426edfcb9e8', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
                 'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
                 'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value
-            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: '255d4760d151bfb36f0217295ee378b5cec26647', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: 'd5e62dccaaa64370723d4721d567789b06c94b11', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && h("cat-spinner", { key: '22218dd7cd48b2599d2125ec080467c925b04a4d', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { key: 'c9e5f18bfc54321ad9b18df56a199d0096739621', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { key: '307c0d5f2a1dff6efb7d6bf05a035c487f947994', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { key: '3216d4e278951898d9a96ad48b2df7c17d54c6a3', class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: 'd996aab9325a2eb77401490c3fa2a9e8eaf0ffc6', name: "addon" })), this.hasHint && (h(CatFormHint, { key: '84980cbf543e9405c70d481bce339cd9c743da43', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
+            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: '5195866111feaf77f8ae6b9272443c7f2e6f6c9b', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: 'ffbd5c49957d02e672d1da2710fb5a2698fe34a5', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && h("cat-spinner", { key: '19e83c45128e1110c4404fb266b97d9a0b23ea75', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { key: '2363be86adba00d3748a2b4e72d968027e3cbc03', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { key: '158ae6c58f520b87023e534239550cd963c6c3f2', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { key: '8d0148452fe5b0184ed04fbaa7e84d805ef8648f', class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: 'cc46bb14d556c4144c28b8901e0aac7ff2c6908e', name: "addon" })), this.hasHint && (h(CatFormHint, { key: '0de0feb24f62246485c054bb83237d5610c89a21', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -1773,6 +1775,7 @@ const CatInput = /*@__PURE__*/ proxyCustomElement(class CatInput extends HTMLEle
         "nativeAttributes": [16],
         "hasSlottedLabel": [32],
         "hasSlottedHint": [32],
+        "hasSlottedCounter": [32],
         "isPasswordShown": [32],
         "errorMap": [32],
         "doFocus": [64],