@haiilo/catalyst 10.28.2 → 10.29.0

package/dist/cjs/cat-alert_30.cjs.entry.js

@@ -10411,6 +10411,7 @@ const CatInput = class {
         this._id = `cat-input-${nextUniqueId$7++}`;
         this.hasSlottedLabel = false;
         this.hasSlottedHint = false;
+        this.hasSlottedCounter = false;
         this.isPasswordShown = false;
         this.errorMap = undefined;
         this.requiredMarker = 'optional';
@@ -10452,6 +10453,7 @@ const CatInput = class {
     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
@@ -10504,19 +10506,19 @@ const CatInput = class {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (index.h("div", { key: 'ffbaf104a60dbf73cb59e07e3164fe0c421540a5', class: {
+        return (index.h("div", { key: '3d28dff29d5ced59f609ce9fcf6c2b2a14cfdda7', class: {
                 'input-field': true,
                 'input-horizontal': this.horizontal
-            } }, index.h("div", { key: 'e6139d1d950c2d8c2674bb90f0acbe9333ace2eb', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'fce898969b37f4579f780c1a62354ccb0da5a73e', htmlFor: this.id, part: "label" }, index.h("span", { key: '8a4d0f653bae9a75db600080ad7d0b9199c14db5', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '6073eadb00b587d1f3ba22d212e5235d21826b08', name: "label" })) || this.label, index.h("div", { key: 'fc4be508caec71287f275873d49adb5c16931289', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'c1010a473d4bfadb8ada56825db91f0c4d2b7871', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '8b2184a224afa6857f207aeaf71d83e12c92ef9a', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), this.maxLength && (index.h("div", { key: '6aee4428a06faba6ecf6a82963f0ecf3ca0d5d7b', class: "label-character-count", "aria-hidden": "true" }, this.value?.toString().length ?? 0, "/", this.maxLength))))))), index.h("div", { key: '9c88a62af0c4083162bea13dc1fd5ead5708efbb', class: "input-container" }, index.h("div", { key: '556a7b1bc45da66739d8a7afec3d4e1b64f12e77', class: "input-outer-wrapper" }, index.h("div", { key: '16d000652a934588fa87c71929565aa5cc15069b', class: {
+            } }, index.h("div", { key: '41399390b76c6a2e96dc3df48eede8ea2bcc4698', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '68bb767790072eb2728d680d448e1ee80e641013', htmlFor: this.id, part: "label" }, index.h("span", { key: '04c217ff1f227a1fb82b9a52b284bbd67f8d89dd', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '0c462827456af3b83935e569fac4fb45459c2edc', name: "label" })) || this.label, index.h("div", { key: '9415db27af950dc50efac0c60bdc47aa5efc8c97', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'fc45ea569ef7c9eec048bae75a8b5127beafcc09', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '20f36a7a3e2c042fa4f802ea3f71cb20f60188b3', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (index.h("div", { key: '58338cb0be0db04c6030e9f295428079ba2c7316', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (index.h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), index.h("div", { key: '5ed2b9c0c812c65d2e7d77d02f61cb88f33567e1', class: "input-container" }, index.h("div", { key: '9b73f259436d1f7d75f2efcaec3959759631f579', class: "input-outer-wrapper" }, index.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 && (index.h("span", { key: 'de3b5da6a0a09c1f66caeb2fb3c9772a2426778a', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (index.h("cat-icon", { key: 'f950a57fa6060b9f82629d26b91dcb449b86cd2a', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), index.h("div", { key: 'b98cd1a805712c454262bfa8fae92f1e92b33f09', class: "input-inner-wrapper" }, index.h("input", { key: '9bd8bc8f345c80ced98a06728d9d09bc462e0823', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
+            }, onClick: () => this.input.focus() }, this.textPrefix && (index.h("span", { key: '6e834d91bca7660e24f7f917034db92a530d3901', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (index.h("cat-icon", { key: '606625d78126b10f1efbdeec78d2339d9a66cf04', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), index.h("div", { key: '28776786dd55f04d60c985ed7891d85c0e4c1f7b', class: "input-inner-wrapper" }, index.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 && (index.h("cat-button", { key: '255d4760d151bfb36f0217295ee378b5cec26647', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (index.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": of.catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && index.h("cat-spinner", { key: '22218dd7cd48b2599d2125ec080467c925b04a4d', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { key: 'c9e5f18bfc54321ad9b18df56a199d0096739621', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (index.h("cat-icon", { key: '307c0d5f2a1dff6efb7d6bf05a035c487f947994', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (index.h("span", { key: '3216d4e278951898d9a96ad48b2df7c17d54c6a3', class: "text-suffix", part: "suffix" }, this.textSuffix))), index.h("slot", { key: 'd996aab9325a2eb77401490c3fa2a9e8eaf0ffc6', name: "addon" })), this.hasHint && (index.h(CatFormHint, { key: '84980cbf543e9405c70d481bce339cd9c743da43', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.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 && (index.h("cat-button", { key: '5195866111feaf77f8ae6b9272443c7f2e6f6c9b', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (index.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": of.catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && index.h("cat-spinner", { key: '19e83c45128e1110c4404fb266b97d9a0b23ea75', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { key: '2363be86adba00d3748a2b4e72d968027e3cbc03', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (index.h("cat-icon", { key: '158ae6c58f520b87023e534239550cd963c6c3f2', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (index.h("span", { key: '8d0148452fe5b0184ed04fbaa7e84d805ef8648f', class: "text-suffix", part: "suffix" }, this.textSuffix))), index.h("slot", { key: 'cc46bb14d556c4144c28b8901e0aac7ff2c6908e', name: "addon" })), this.hasHint && (index.h(CatFormHint, { key: '0de0feb24f62246485c054bb83237d5610c89a21', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -13445,6 +13447,7 @@ const CatTextarea = class {
         this._id = `cat-textarea-${nextUniqueId$2++}`;
         this.hasSlottedLabel = false;
         this.hasSlottedHint = false;
+        this.hasSlottedCounter = false;
         this.errorMap = undefined;
         this.requiredMarker = 'optional';
         this.horizontal = false;
@@ -13474,6 +13477,7 @@ const CatTextarea = class {
     componentWillRender() {
         this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
         this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+        this.hasSlottedCounter = !!this.hostElement.querySelector('[slot="counter"]');
     }
     componentDidLoad() {
         n(this.textarea);
@@ -13517,15 +13521,15 @@ const CatTextarea = class {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (index.h(index.Host, { key: '7baa83d9d2722e629503623daa7d64f669d9d14b' }, index.h("div", { key: '7e23d71bea6eb4b3c1f512ce6e6052c4d0c93675', class: {
+        return (index.h(index.Host, { key: 'e0e8b3fabdf014e3abb845abd4c3b028b4043c26' }, index.h("div", { key: 'c5eefbac266c1803b855f4d3f351d5d254a843e0', class: {
                 'textarea-field': true,
                 'textarea-horizontal': this.horizontal
-            } }, index.h("div", { key: '51da73044afe3fb0100c921556f4bc60f4823597', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '21efe02e678b15577efbd4e6889ed278e519f6e1', htmlFor: this.id, part: "label" }, index.h("span", { key: '35e58dc082d073296563ec6473734ec7bb995b5e', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'f32da2b24d1d50b06a7d55d4d15185441feb285a', name: "label" })) || this.label, index.h("div", { key: 'ed4abb4e4b492130a990fca89699fea9838c758c', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '97dfc883e7a8af4d2090bb4b40208e0886585da6', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '9c74951359ccab83ec46bbd868bccefaf1356f6f', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), this.maxLength && (index.h("div", { key: '702c2c4a8238430927882a11490cd5be399bd3f5', class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), index.h("div", { key: '3f2aa62a32dd8b775b9826fe8c92129219135dcb', class: "textarea-container" }, index.h("div", { key: '270d8f0b27b99f7388e17edc88affe7daab15438', class: {
+            } }, index.h("div", { key: '5a08a002182c85f7f6190f46837d6c2b493a0526', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'd913acdda8ecfd3c2e94b13baa68b9f1f74a71b7', htmlFor: this.id, part: "label" }, index.h("span", { key: 'a8e12d729ce8ab5188443aa389fc4236c98b845e', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '7384887d64025e761e6d20361776cc1e8dc15d59', name: "label" })) || this.label, index.h("div", { key: 'ccc4600fbf6e1582c7861c9766b1adbaefa0020a', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '03a5c508b2efe5c7199d90eaa95b234db88afa03', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '6ac979c9e774195fcc84e13841d681719ac0a1ed', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (index.h("div", { key: '8ba288043e196c0d10390aa596d8c76f8c774af5', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (index.h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), index.h("div", { key: 'aced365e81997561263a13c93f732e9dd6dd83d0', class: "textarea-container" }, index.h("div", { key: '0b3aba012006a6197a8d8a0cd9fb4590ec3a2dfe', class: {
                 'textarea-wrapper': true,
                 'textarea-readonly': this.readonly,
                 'textarea-disabled': this.disabled,
                 'textarea-invalid': this.invalid
-            } }, index.h("textarea", { key: 'a0091c3f756c983d416ee12bf777cf7101c07b48', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, 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.invalid && (index.h("cat-icon", { key: '9ff1a0a8b7bf6ae5deb8b489f4426053d5ff54b9', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (index.h(CatFormHint, { key: 'badc9780d07df9f6645c7f4bbdcfe97610db6741', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
+            } }, index.h("textarea", { key: '8992ee5dcb6b7e099e11aee5184fdbf0209948f2', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, 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.invalid && (index.h("cat-icon", { key: '8ddbd6e3fbf7ab23328b7bdb826b7f1dbf041562', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (index.h(CatFormHint, { key: 'd5d4bbe3c53d2f624c6e2fe93b1e7297551c1adc', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;