npm - @haiilo/catalyst - Versions diffs - 5.0.1 → 5.1.1 - Mend

@haiilo/catalyst 5.0.1 → 5.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/dist/catalyst/catalyst.css +0 -9
package/dist/catalyst/catalyst.esm.js +1 -1
package/dist/catalyst/p-44e1b613.entry.js +10 -0
package/dist/catalyst/p-44e1b613.entry.js.map +1 -0
package/dist/catalyst/scss/_snippets/_form-label.scss +63 -0
package/dist/catalyst/scss/index.scss +0 -1
package/dist/catalyst/scss/index.shadow.scss +0 -1
package/dist/cjs/cat-alert_24.cjs.entry.js +8 -8
package/dist/cjs/cat-alert_24.cjs.entry.js.map +1 -1
package/dist/collection/components/cat-input/cat-input.css +68 -41
package/dist/collection/components/cat-input/cat-input.js +3 -3
package/dist/collection/components/cat-input/cat-input.js.map +1 -1
package/dist/collection/components/cat-label/cat-label.js +2 -0
package/dist/collection/components/cat-label/cat-label.js.map +1 -1
package/dist/collection/components/cat-textarea/cat-textarea.css +61 -34
package/dist/collection/components/cat-textarea/cat-textarea.js +3 -3
package/dist/collection/components/cat-textarea/cat-textarea.js.map +1 -1
package/dist/collection/scss/_snippets/_form-label.scss +63 -0
package/dist/collection/scss/index.scss +0 -1
package/dist/collection/scss/index.shadow.scss +0 -1
package/dist/components/cat-input.js +4 -4
package/dist/components/cat-input.js.map +1 -1
package/dist/components/cat-label.js.map +1 -1
package/dist/components/cat-textarea.js +4 -4
package/dist/components/cat-textarea.js.map +1 -1
package/dist/esm/cat-alert_24.entry.js +8 -8
package/dist/esm/cat-alert_24.entry.js.map +1 -1
package/dist/types/components/cat-label/cat-label.d.ts +2 -0
package/dist/types/components.d.ts +4 -0
package/package.json +2 -2
package/dist/catalyst/p-d1ee6a09.entry.js +0 -10
package/dist/catalyst/p-d1ee6a09.entry.js.map +0 -1
package/dist/catalyst/scss/core/_form.scss +0 -8
package/dist/collection/scss/core/_form.scss +0 -8

package/dist/components/cat-input.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './cat-button2.js';
 import { d as defineCustomElement$3 } from './cat-icon2.js';
 import { d as defineCustomElement$2 } from './cat-spinner2.js';
-const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 105, 118, 135)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}:host{display:flex;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.input-field,.input-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.input-field.input-horizontal{flex-direction:row;gap:1rem}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.input-wrapper:not(.input-disabled):hover.input-invalid{box-shadow:0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.input-wrapper:not(.input-disabled):focus-within.input-invalid{outline:2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper.input-invalid{box-shadow:0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}label{align-self:flex-start;overflow:hidden;word-wrap:break-word;word-break:break-word}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-optional{display:block;margin-top:0.25rem;margin-left:0}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
+const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 105, 118, 135)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-container .label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem}.label-optional{display:flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.label-character-count{display:flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata{justify-content:flex-start}:host{display:flex;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.input-field,.input-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.input-field.input-horizontal{flex-direction:row;gap:1rem}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.input-wrapper:not(.input-disabled):hover.input-invalid{box-shadow:0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.input-wrapper:not(.input-disabled):focus-within.input-invalid{outline:2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper.input-invalid{box-shadow:0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
 let nextUniqueId = 0;
 const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -102,21 +102,21 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   render() {
-    var _a;
+    var _a, _b, _c;
     return (h("div", { class: {
         'input-field': true,
         'input-horizontal': this.horizontal
       } }, h("div", { class: {
         hidden: this.labelHidden,
         'label-container': true
-      } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id }, h("span", { class: "label-wrapper", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")))))), h("div", { class: "input-container" }, h("div", { class: {
+      } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id }, h("span", { class: "label-wrapper", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), this.maxLength && (h("div", { class: "label-character-count", "aria-hidden": "true" }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0, "/", this.maxLength))))))), h("div", { class: "input-container" }, h("div", { class: {
         'input-wrapper': true,
         'input-round': this.round,
         'input-disabled': this.disabled,
         'input-invalid': this.invalid
       }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l" }), h("div", { class: "input-inner-wrapper" }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.id, class: {
         'has-clearable': this.clearable && !this.disabled
-      }, 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.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": ((_a = this.hint) === null || _a === void 0 ? void 0 : _a.length) ? this.id + '-hint' : undefined })), this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this) }))), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" })), this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (h(CatFormHint, { 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.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": ((_c = this.hint) === null || _c === void 0 ? void 0 : _c.length) ? this.id + '-hint' : undefined })), this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this) }))), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" })), this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
   }
   get invalid() {
     return !!this.errorMap;

package/dist/components/cat-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-input.js","mappings":"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","names":["CatInput","log","i18n"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n\n$-input-height: 2.5rem;\n\n:host {\n display: flex;\n @include cat-body('m');\n margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.input-field,\n.input-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n flex: 1 1 auto;\n}\n\n.input-field.input-horizontal {\n flex-direction: row;\n gap: 1rem;\n}\n\n.input-wrapper {\n display: flex;\n align-items: stretch;\n gap: 0.75rem;\n padding: 0 0.75rem;\n height: $-input-height;\n overflow: hidden;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n box-shadow: 0 0 0 1px cat-token('color.ui.border.dark');\n transition: box-shadow cat-token('time.transition.s') linear;\n\n &.input-round {\n border-radius: 10rem;\n }\n\n &.input-disabled {\n background: cat-token('color.ui.background.muted');\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &:not(.input-disabled):hover {\n box-shadow: 0 0 0 2px cat-token('color.ui.border.dark');\n\n &.input-invalid {\n box-shadow: 0 0 0 2px cat-token('color.theme.danger.bg', 0.2);\n }\n }\n\n &:not(.input-disabled):focus-within {\n outline: 2px solid cat-token('color.ui.border.focus');\n\n &.input-invalid {\n outline: 2px solid cat-token('color.theme.danger.bg', 0.2);\n }\n }\n\n &.input-invalid {\n box-shadow: 0 0 0 1px cat-token('color.theme.danger.bg', 0.2);\n }\n\n /* stylelint-disable property-no-vendor-prefix /\n &:has(input:-webkit-autofill) {\n &,\n &:hover,\n &:focus {\n background-color: cat-token('color.ui.background.inputAutofill');\n }\n }\n / stylelint-enable property-no-vendor-prefix /\n}\n\nlabel {\n align-self: flex-start;\n overflow: hidden;\n @include cat-break-word;\n}\n\n.label-container {\n flex-basis: var(--label-size, 33.33%);\n\n &.hidden {\n @include cat-visually-hidden;\n }\n}\n\n.label-optional {\n margin-left: 0.25rem;\n @include cat-body('xs');\n color: cat-token('color.ui.font.muted');\n}\n\n.input-horizontal {\n label {\n min-height: $-input-height;\n display: inline-flex;\n align-items: center;\n }\n\n .label-optional {\n display: block;\n margin-top: 0.25rem;\n margin-left: 0;\n }\n}\n\n.text-prefix,\n.text-suffix {\n display: inline-flex;\n align-items: center;\n @include cat-select(none);\n}\n\n.text-prefix {\n border-right: 1px solid cat-token('color.ui.border.dark');\n padding-right: 0.75rem;\n}\n\n.text-suffix {\n border-left: 1px solid cat-token('color.ui.border.dark');\n padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n align-self: center;\n}\n\n.input-inner-wrapper {\n display: flex;\n align-items: center;\n position: relative;\n flex: 1 1 auto;\n}\n\ninput {\n font: inherit;\n margin: 0;\n padding: 0;\n width: 100%;\n min-width: 0;\n border: none;\n outline: none;\n background: none;\n\n .input-disabled & {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &.has-clearable {\n padding-right: 1.5rem;\n }\n\n &::placeholder {\n color: cat-token('color.ui.font.muted');\n }\n\n / stylelint-disable property-no-vendor-prefix /\n &:-webkit-autofill {\n &,\n &:hover,\n &:focus {\n -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;\n }\n }\n / stylelint-enable property-no-vendor-prefix /\n}\n\n.clearable {\n position: absolute;\n top: calc(50% - 1rem);\n right: -0.5rem;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/\n Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n \n @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n /\n@Component({\n tag: 'cat-input',\n styleUrl: 'cat-input.scss',\n shadow: true\n})\nexport class CatInput {\n private readonly _id = `cat-input-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n private errorMapSrc?: ErrorMap;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() errorMap?: ErrorMap;\n\n /\n Whether the label need a marker to shown if the input is required or optional.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n Whether the label is on top or left.\n /\n @Prop() horizontal = false;\n\n /\n Hint for form autofill feature.\n /\n @Prop() autoComplete?: string;\n\n /\n Whether the input should show a clear button.\n /\n @Prop() clearable = false;\n\n /\n Whether the input is disabled.\n /\n @Prop() disabled = false;\n\n /\n Optional hint text(s) to be displayed with the input.\n /\n @Prop() hint?: string \| string[];\n\n /\n The name of an icon to be displayed in the input.\n /\n @Prop() icon?: string;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label for the input.\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n A maximum value for date, time and numeric values.\n /\n @Prop() max?: number \| string;\n\n /\n A maximum length (number of characters) for textual values.\n /\n @Prop() maxLength?: number;\n\n /\n A minimum value for date, time and numeric values.\n /\n @Prop() min?: number \| string;\n\n /\n A minimum length (number of characters) for textual values.\n /\n @Prop() minLength?: number;\n\n /\n The name of the form control. Submitted with the form as part of a name/value pair.\n /\n @Prop() name?: string;\n\n /\n The placeholder text to display within the input.\n /\n @Prop() placeholder?: string;\n\n /\n A textual prefix to be displayed in the input.\n /\n @Prop() textPrefix?: string;\n\n /\n A textual suffix to be displayed in the input.\n /\n @Prop() textSuffix?: string;\n\n /\n The value is not editable.\n /\n @Prop() readonly = false;\n\n /\n A value is required or must be check for the form to be submittable.\n /\n @Prop() required = false;\n\n /\n Use round input edges.\n /\n @Prop() round = false;\n\n /\n Type of form control.\n /\n @Prop() type: InputType = 'text';\n\n /\n The value of the control.\n /\n @Prop({ mutable: true }) value?: string \| number;\n\n /\n The validation errors for this input. Will render a hint under the input\n * with the translated error message(s) `error.${key}`. If an object is\n * passed, the keys will be used as error keys and the values translation\n * parameters.\n * If the value is `true`, the input will be marked as invalid without any\n * hints under the input.\n /\n @Prop() errors?: boolean \| string[] \| ErrorMap;\n\n /\n Fine-grained control over when the errors are shown. Can be `false` to\n * never show errors, `true` to show errors on blur, or a number to show\n * errors on change with the given delay in milliseconds.\n /\n @Prop() errorUpdate: boolean \| number = 0;\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the input received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.watchErrorsHandler(this.errors);\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on input', this);\n }\n }\n\n /\n Programmatically move focus to the input. Use this method instead of\n * `input.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.input.focus(options);\n }\n\n /\n Programmatically remove focus from the input. Use this method instead of\n * `input.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n /\n Programmatically simulate a click on the input.\n /\n @Method()\n async doClick(): Promise<void> {\n this.input.click();\n }\n\n /\n Clear the input.\n */\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n }\n\n @Watch('errors')\n watchErrorsHandler(value?: boolean \| string[] \| ErrorMap) {\n if (this.errorUpdate === false) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(value)\n ? (value as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n : value === true\n ? {}\n : value \|\| undefined;\n }\n }\n\n render() {\n return (\n <div\n class={{\n 'input-field': true,\n 'input-horizontal': this.horizontal\n }}\n >\n <div\n class={{\n hidden: this.labelHidden,\n 'label-container': true\n }}\n >\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id}>\n <span class=\"label-wrapper\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n {!this.required && this.requiredMarker.startsWith('optional') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker.startsWith('required') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n </span>\n </label>\n )}\n </div>\n <div class=\"input-container\">\n <div\n class={{\n 'input-wrapper': true,\n 'input-round': this.round,\n 'input-disabled': this.disabled,\n 'input-invalid': this.invalid\n }}\n onClick={() => this.input.focus()}\n >\n {this.textPrefix && (\n <span class=\"text-prefix\" part=\"prefix\">\n {this.textPrefix}\n </span>\n )}\n {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n <div class=\"input-inner-wrapper\">\n <input\n {...this.nativeAttributes}\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n class={{\n 'has-clearable': this.clearable && !this.disabled\n }}\n autocomplete={this.autoComplete}\n disabled={this.disabled}\n max={this.max}\n maxlength={this.maxLength}\n min={this.min}\n minlength={this.minLength}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n type={this.type}\n value={this.value}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-invalid={this.invalid ? 'true' : undefined}\n aria-describedby={this.hint?.length ? this.id + '-hint' : undefined}\n ></input>\n {this.clearable && !this.disabled && this.value && (\n <cat-button\n class=\"clearable\"\n icon=\"cross-circle-outlined\"\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t('input.clear')}\n onClick={this.clear.bind(this)}\n ></cat-button>\n )}\n </div>\n {!this.invalid && this.icon && this.iconRight && (\n <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>\n )}\n {this.invalid && (\n <cat-icon icon=\"alert-circle-outlined\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>\n )}\n {this.textSuffix && (\n <span class=\"text-suffix\" part=\"suffix\">\n {this.textSuffix}\n </span>\n )}\n </div>\n {(this.hint \|\| this.hasSlottedHint \|\| !!Object.keys(this.errorMap \|\| {}).length) && (\n <CatFormHint\n id={this.id}\n hint={this.hint}\n slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n errorMap={this.errorMap}\n />\n )}\n </div>\n </div>\n );\n }\n\n private get invalid() {\n return !!this.errorMap;\n }\n\n private errorUpdateTimeoutId?: number;\n private onInput(event: InputEvent) {\n this.value = this.input.value;\n this.catChange.emit(event);\n if (typeof this.errorUpdate === 'number') {\n typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), this.errorUpdate);\n }\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n if (this.errorUpdate !== false) {\n this.errorMap = this.errorMapSrc;\n }\n }\n}\n"],"version":3}
1	+ {"file":"cat-input.js","mappings":"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","names":["CatInput","log","i18n"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n@use '_snippets/form-label';\n\n:host {\n display: flex;\n @include cat-body('m');\n margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.input-field,\n.input-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n flex: 1 1 auto;\n}\n\n.input-field.input-horizontal {\n flex-direction: row;\n gap: 1rem;\n}\n\n.input-wrapper {\n display: flex;\n align-items: stretch;\n gap: 0.75rem;\n padding: 0 0.75rem;\n height: form-label.$cat-input-height;\n overflow: hidden;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n box-shadow: 0 0 0 1px cat-token('color.ui.border.dark');\n transition: box-shadow cat-token('time.transition.s') linear;\n\n &.input-round {\n border-radius: 10rem;\n }\n\n &.input-disabled {\n background: cat-token('color.ui.background.muted');\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &:not(.input-disabled):hover {\n box-shadow: 0 0 0 2px cat-token('color.ui.border.dark');\n\n &.input-invalid {\n box-shadow: 0 0 0 2px cat-token('color.theme.danger.bg', 0.2);\n }\n }\n\n &:not(.input-disabled):focus-within {\n outline: 2px solid cat-token('color.ui.border.focus');\n\n &.input-invalid {\n outline: 2px solid cat-token('color.theme.danger.bg', 0.2);\n }\n }\n\n &.input-invalid {\n box-shadow: 0 0 0 1px cat-token('color.theme.danger.bg', 0.2);\n }\n\n /* stylelint-disable property-no-vendor-prefix /\n &:has(input:-webkit-autofill) {\n &,\n &:hover,\n &:focus {\n background-color: cat-token('color.ui.background.inputAutofill');\n }\n }\n / stylelint-enable property-no-vendor-prefix /\n}\n\n.text-prefix,\n.text-suffix {\n display: inline-flex;\n align-items: center;\n @include cat-select(none);\n}\n\n.text-prefix {\n border-right: 1px solid cat-token('color.ui.border.dark');\n padding-right: 0.75rem;\n}\n\n.text-suffix {\n border-left: 1px solid cat-token('color.ui.border.dark');\n padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n align-self: center;\n}\n\n.input-inner-wrapper {\n display: flex;\n align-items: center;\n position: relative;\n flex: 1 1 auto;\n}\n\ninput {\n font: inherit;\n margin: 0;\n padding: 0;\n width: 100%;\n min-width: 0;\n border: none;\n outline: none;\n background: none;\n\n .input-disabled & {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &.has-clearable {\n padding-right: 1.5rem;\n }\n\n &::placeholder {\n color: cat-token('color.ui.font.muted');\n }\n\n / stylelint-disable property-no-vendor-prefix /\n &:-webkit-autofill {\n &,\n &:hover,\n &:focus {\n -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;\n }\n }\n / stylelint-enable property-no-vendor-prefix /\n}\n\n.clearable {\n position: absolute;\n top: calc(50% - 1rem);\n right: -0.5rem;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/\n Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n \n @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n /\n@Component({\n tag: 'cat-input',\n styleUrl: 'cat-input.scss',\n shadow: true\n})\nexport class CatInput {\n private readonly _id = `cat-input-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n private errorMapSrc?: ErrorMap;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() errorMap?: ErrorMap;\n\n /\n Whether the label need a marker to shown if the input is required or optional.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n Whether the label is on top or left.\n /\n @Prop() horizontal = false;\n\n /\n Hint for form autofill feature.\n /\n @Prop() autoComplete?: string;\n\n /\n Whether the input should show a clear button.\n /\n @Prop() clearable = false;\n\n /\n Whether the input is disabled.\n /\n @Prop() disabled = false;\n\n /\n Optional hint text(s) to be displayed with the input.\n /\n @Prop() hint?: string \| string[];\n\n /\n The name of an icon to be displayed in the input.\n /\n @Prop() icon?: string;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label for the input.\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n A maximum value for date, time and numeric values.\n /\n @Prop() max?: number \| string;\n\n /\n A maximum length (number of characters) for textual values.\n /\n @Prop() maxLength?: number;\n\n /\n A minimum value for date, time and numeric values.\n /\n @Prop() min?: number \| string;\n\n /\n A minimum length (number of characters) for textual values.\n /\n @Prop() minLength?: number;\n\n /\n The name of the form control. Submitted with the form as part of a name/value pair.\n /\n @Prop() name?: string;\n\n /\n The placeholder text to display within the input.\n /\n @Prop() placeholder?: string;\n\n /\n A textual prefix to be displayed in the input.\n /\n @Prop() textPrefix?: string;\n\n /\n A textual suffix to be displayed in the input.\n /\n @Prop() textSuffix?: string;\n\n /\n The value is not editable.\n /\n @Prop() readonly = false;\n\n /\n A value is required or must be check for the form to be submittable.\n /\n @Prop() required = false;\n\n /\n Use round input edges.\n /\n @Prop() round = false;\n\n /\n Type of form control.\n /\n @Prop() type: InputType = 'text';\n\n /\n The value of the control.\n /\n @Prop({ mutable: true }) value?: string \| number;\n\n /\n The validation errors for this input. Will render a hint under the input\n * with the translated error message(s) `error.${key}`. If an object is\n * passed, the keys will be used as error keys and the values translation\n * parameters.\n * If the value is `true`, the input will be marked as invalid without any\n * hints under the input.\n /\n @Prop() errors?: boolean \| string[] \| ErrorMap;\n\n /\n Fine-grained control over when the errors are shown. Can be `false` to\n * never show errors, `true` to show errors on blur, or a number to show\n * errors on change with the given delay in milliseconds.\n /\n @Prop() errorUpdate: boolean \| number = 0;\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the input received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.watchErrorsHandler(this.errors);\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on input', this);\n }\n }\n\n /\n Programmatically move focus to the input. Use this method instead of\n * `input.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.input.focus(options);\n }\n\n /\n Programmatically remove focus from the input. Use this method instead of\n * `input.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n /\n Programmatically simulate a click on the input.\n /\n @Method()\n async doClick(): Promise<void> {\n this.input.click();\n }\n\n /\n Clear the input.\n */\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n }\n\n @Watch('errors')\n watchErrorsHandler(value?: boolean \| string[] \| ErrorMap) {\n if (this.errorUpdate === false) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(value)\n ? (value as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n : value === true\n ? {}\n : value \|\| undefined;\n }\n }\n\n render() {\n return (\n <div\n class={{\n 'input-field': true,\n 'input-horizontal': this.horizontal\n }}\n >\n <div\n class={{\n hidden: this.labelHidden,\n 'label-container': true\n }}\n >\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id}>\n <span class=\"label-wrapper\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n <div class=\"label-metadata\">\n {!this.required && this.requiredMarker.startsWith('optional') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker.startsWith('required') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n {this.maxLength && (\n <div class=\"label-character-count\" aria-hidden=\"true\">\n {this.value?.toString().length ?? 0}/{this.maxLength}\n </div>\n )}\n </div>\n </span>\n </label>\n )}\n </div>\n <div class=\"input-container\">\n <div\n class={{\n 'input-wrapper': true,\n 'input-round': this.round,\n 'input-disabled': this.disabled,\n 'input-invalid': this.invalid\n }}\n onClick={() => this.input.focus()}\n >\n {this.textPrefix && (\n <span class=\"text-prefix\" part=\"prefix\">\n {this.textPrefix}\n </span>\n )}\n {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n <div class=\"input-inner-wrapper\">\n <input\n {...this.nativeAttributes}\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n class={{\n 'has-clearable': this.clearable && !this.disabled\n }}\n autocomplete={this.autoComplete}\n disabled={this.disabled}\n max={this.max}\n maxlength={this.maxLength}\n min={this.min}\n minlength={this.minLength}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n type={this.type}\n value={this.value}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-invalid={this.invalid ? 'true' : undefined}\n aria-describedby={this.hint?.length ? this.id + '-hint' : undefined}\n ></input>\n {this.clearable && !this.disabled && this.value && (\n <cat-button\n class=\"clearable\"\n icon=\"cross-circle-outlined\"\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t('input.clear')}\n onClick={this.clear.bind(this)}\n ></cat-button>\n )}\n </div>\n {!this.invalid && this.icon && this.iconRight && (\n <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>\n )}\n {this.invalid && (\n <cat-icon icon=\"alert-circle-outlined\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>\n )}\n {this.textSuffix && (\n <span class=\"text-suffix\" part=\"suffix\">\n {this.textSuffix}\n </span>\n )}\n </div>\n {(this.hint \|\| this.hasSlottedHint \|\| !!Object.keys(this.errorMap \|\| {}).length) && (\n <CatFormHint\n id={this.id}\n hint={this.hint}\n slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n errorMap={this.errorMap}\n />\n )}\n </div>\n </div>\n );\n }\n\n private get invalid() {\n return !!this.errorMap;\n }\n\n private errorUpdateTimeoutId?: number;\n private onInput(event: InputEvent) {\n this.value = this.input.value;\n this.catChange.emit(event);\n if (typeof this.errorUpdate === 'number') {\n typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), this.errorUpdate);\n }\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n if (this.errorUpdate !== false) {\n this.errorMap = this.errorMapSrc;\n }\n }\n}\n"],"version":3}

package/dist/components/cat-label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-label.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,wQAAwQ;;~~MCW~~/QA,UAAQ;;;;;0BAa8E,UAAU;;oBAUxF,KAAK;;EAExB,OAAO;;IACL,IAAI,IAAI,CAAC,GAAG,EAAE;;MAEZ,OAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;KACjF;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IACxD,eAAa,EACZ,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,KAC3D,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM,SAC3CC,eAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,MACrB,CACR,EACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,KAC1D,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM,SAC3CA,eAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,MACrB,CACR,CACK,CACH,EACP;GACH;EAEO,gBAAgB,CAAC,EAAU;;IACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAGD,UAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,oBAAoB,CAACA,UAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;MACxE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,0CAAE,cAAc,CAAC,EAAE,CAAC,CAAC;QACvD,IAAI,MAAM,EAAE;UACV,OAAO,MAAM,CAAC;SACf;OACF;KACF;IACD,OAAO,IAAI,CAAC;GACb;;;;;;;AA9DuBA,yBAAc,GAAG;EACvC,WAAW;EACX,cAAc;EACd,cAAc;EACd,YAAY;EACZ,WAAW;EACX,YAAY;CACb,CAAC;;;;;;;;;;;;;;;;;;;;","names":["CatLabel","i18n"],"sources":["./src/components/cat-label/cat-label.scss?tag=cat-label&encapsulation=shadow","./src/components/cat-label/cat-label.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n\n:host {\n display: inline-flex;\n align-items: center;\n min-height: 2.5rem;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.input-optional {\n margin-left: 0.25rem;\n @include cat-body('xs');\n color: cat-token('color.ui.font.muted');\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/*\n Labels are used to provide a short description of an input or form element.\n /\n@Component({\n tag: 'cat-label',\n styleUrl: 'cat-label.scss',\n shadow: true\n})\nexport class CatLabel {\n private static readonly SHADOW_TARGETS = [\n 'CAT-INPUT',\n 'CAT-TEXTAREA',\n 'CAT-CHECKBOX',\n 'CAT-TOGGLE',\n 'CAT-RADIO',\n 'CAT-SELECT'\n ];\n\n /\n Whether the label need a marker to shown if the input is required or optional.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n The unique identifier for a referenced input.\n /\n @Prop() for?: string;\n\n /\n A value is required or must be check for the form to be submittable.\n */\n @Prop() required = false;\n\n onClick() {\n if (this.for) {\n // focus target that is possibly hidden inside a shadow root\n (document.getElementById(this.for) \|\| this.findShadowTarget(this.for))?.focus();\n }\n }\n\n render() {\n return (\n <Host>\n <label htmlFor={this.for} onClick={this.onClick.bind(this)}>\n <slot></slot>\n {!this.required && this.requiredMarker.startsWith('optional') && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker.startsWith('required') && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n </label>\n </Host>\n );\n }\n\n private findShadowTarget(id: string): HTMLElement \| null {\n for (let i = 0; i < CatLabel.SHADOW_TARGETS.length; i++) {\n const elems = document.getElementsByTagName(CatLabel.SHADOW_TARGETS[i]);\n for (let i = 0; i < elems.length; i++) {\n const target = elems[i].shadowRoot?.getElementById(id);\n if (target) {\n return target;\n }\n }\n }\n return null;\n }\n}\n"],"version":3}
1	+ {"file":"cat-label.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,wQAAwQ;;MCa/QA,UAAQ;;;;;0BAa8E,UAAU;;oBAUxF,KAAK;;EAExB,OAAO;;IACL,IAAI,IAAI,CAAC,GAAG,EAAE;;MAEZ,OAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;KACjF;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IACxD,eAAa,EACZ,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,KAC3D,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM,SAC3CC,eAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,MACrB,CACR,EACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,KAC1D,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM,SAC3CA,eAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,MACrB,CACR,CACK,CACH,EACP;GACH;EAEO,gBAAgB,CAAC,EAAU;;IACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAGD,UAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,oBAAoB,CAACA,UAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;MACxE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,0CAAE,cAAc,CAAC,EAAE,CAAC,CAAC;QACvD,IAAI,MAAM,EAAE;UACV,OAAO,MAAM,CAAC;SACf;OACF;KACF;IACD,OAAO,IAAI,CAAC;GACb;;;;;;;AA9DuBA,yBAAc,GAAG;EACvC,WAAW;EACX,cAAc;EACd,cAAc;EACd,YAAY;EACZ,WAAW;EACX,YAAY;CACb,CAAC;;;;;;;;;;;;;;;;;;;;","names":["CatLabel","i18n"],"sources":["./src/components/cat-label/cat-label.scss?tag=cat-label&encapsulation=shadow","./src/components/cat-label/cat-label.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n\n:host {\n display: inline-flex;\n align-items: center;\n min-height: 2.5rem;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.input-optional {\n margin-left: 0.25rem;\n @include cat-body('xs');\n color: cat-token('color.ui.font.muted');\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/*\n Labels are used to provide a short description of an input or form element.\n \n @deprecated Use label attribute of form elements instead.\n /\n@Component({\n tag: 'cat-label',\n styleUrl: 'cat-label.scss',\n shadow: true\n})\nexport class CatLabel {\n private static readonly SHADOW_TARGETS = [\n 'CAT-INPUT',\n 'CAT-TEXTAREA',\n 'CAT-CHECKBOX',\n 'CAT-TOGGLE',\n 'CAT-RADIO',\n 'CAT-SELECT'\n ];\n\n /\n Whether the label need a marker to shown if the input is required or optional.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n The unique identifier for a referenced input.\n /\n @Prop() for?: string;\n\n /\n A value is required or must be check for the form to be submittable.\n */\n @Prop() required = false;\n\n onClick() {\n if (this.for) {\n // focus target that is possibly hidden inside a shadow root\n (document.getElementById(this.for) \|\| this.findShadowTarget(this.for))?.focus();\n }\n }\n\n render() {\n return (\n <Host>\n <label htmlFor={this.for} onClick={this.onClick.bind(this)}>\n <slot></slot>\n {!this.required && this.requiredMarker.startsWith('optional') && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker.startsWith('required') && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n </label>\n </Host>\n );\n }\n\n private findShadowTarget(id: string): HTMLElement \| null {\n for (let i = 0; i < CatLabel.SHADOW_TARGETS.length; i++) {\n const elems = document.getElementsByTagName(CatLabel.SHADOW_TARGETS[i]);\n for (let i = 0; i < elems.length; i++) {\n const target = elems[i].shadowRoot?.getElementById(id);\n if (target) {\n return target;\n }\n }\n }\n return null;\n }\n}\n"],"version":3}

package/dist/components/cat-textarea.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$2 } from './cat-icon2.js';
 var e=new Map;function t(t){var r=e.get(t);r&&r.destroy();}function r(t){var r=e.get(t);r&&r.update();}var o=null;"undefined"==typeof window?((o=function(e){return e}).destroy=function(e){return e},o.update=function(e){return e}):((o=function(t,r){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&"TEXTAREA"===t.nodeName&&!e.has(t)){var r=null,o=window.getComputedStyle(t),n=function(r){window.removeEventListener("resize",l,!1),t.removeEventListener("input",l,!1),t.removeEventListener("keyup",l,!1),t.removeEventListener("autosize:destroy",n,!1),t.removeEventListener("autosize:update",l,!1),Object.keys(r).forEach(function(e){return t.style[e]=r[e]}),e.delete(t);}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener("autosize:destroy",n,!1),window.addEventListener("resize",l,!1),t.addEventListener("input",l,!1),t.addEventListener("autosize:update",l,!1),t.style.overflowX="hidden",t.style.wordWrap="break-word",e.set(t,{destroy:n,update:l}),l();}function l(e){void 0===e&&(e=null);var n=o.overflowY;if(0!==t.scrollHeight){var i,a=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],r=e[1];t.style.scrollBehavior="auto",t.scrollTop=r,t.style.scrollBehavior=null;})}}(t);if(t.style.height="","vertical"===o.resize?t.style.resize="none":"both"===o.resize&&(t.style.resize="horizontal"),i="content-box"===o.boxSizing?t.scrollHeight-(parseFloat(o.paddingTop)+parseFloat(o.paddingBottom)):t.scrollHeight+parseFloat(o.borderTopWidth)+parseFloat(o.borderBottomWidth),"none"!==o.maxHeight&&i>parseFloat(o.maxHeight)?("hidden"===o.overflowY&&(t.style.overflow="scroll"),i=parseFloat(o.maxHeight)):"hidden"!==o.overflowY&&(t.style.overflow="hidden"),t.style.height=i+"px",e&&(t.style.textAlign=e),a(),r!==i&&(t.dispatchEvent(new Event("autosize:resized",{bubbles:!0})),r=i),n!==o.overflow&&!e){var s=o.textAlign;"hidden"===o.overflow&&(t.style.textAlign="start"===s?"end":"start"),l(s);}}}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},o.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e});var n=o;
-const catTextareaCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 105, 118, 135)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.textarea-field,.textarea-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.textarea-field.textarea-horizontal{flex-direction:row;gap:1rem}label{align-self:flex-start;overflow:hidden;word-wrap:break-word;word-break:break-word}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.textarea-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.textarea-horizontal .label-optional{display:block;margin-top:0.25rem;margin-left:0}.textarea-wrapper{position:relative;display:flex;flex-direction:column}.icon-suffix{position:absolute;top:calc(0.625rem - 2px);right:0.75rem;background:rgba(255, 255, 255, 0.75);border-radius:100rem}.textarea-disabled .icon-suffix{background:rgba(242, 244, 247, 0.75)}textarea{margin:0;padding:0.625rem 0.75rem;min-height:2.5rem;font:inherit;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);border:none;box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;resize:vertical;}textarea:disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));resize:none}.textarea-invalid textarea{box-shadow:0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea:hover:not(:disabled){box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.textarea-invalid textarea:hover:not(:disabled){box-shadow:0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea:focus{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.textarea-invalid textarea:focus{outline:2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}";
+const catTextareaCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 105, 118, 135)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-container .label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem}.label-optional{display:flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.label-character-count{display:flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata{justify-content:flex-start}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.textarea-field,.textarea-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.textarea-field.textarea-horizontal{flex-direction:row;gap:1rem}.textarea-wrapper{position:relative;display:flex;flex-direction:column}.icon-suffix{position:absolute;top:calc(0.625rem - 2px);right:0.75rem;background:rgba(255, 255, 255, 0.75);border-radius:100rem}.textarea-disabled .icon-suffix{background:rgba(242, 244, 247, 0.75)}textarea{margin:0;padding:0.625rem 0.75rem;min-height:2.5rem;font:inherit;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);border:none;box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;resize:vertical;}textarea:disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));resize:none}.textarea-invalid textarea{box-shadow:0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea:hover:not(:disabled){box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.textarea-invalid textarea:hover:not(:disabled){box-shadow:0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea:focus{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.textarea-invalid textarea:focus{outline:2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}";
 let nextUniqueId = 0;
 const CatTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -90,18 +90,18 @@ const CatTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   render() {
-    var _a;
+    var _a, _b, _c;
     return (h(Host, null, h("div", { class: {
         'textarea-field': true,
         'textarea-horizontal': this.horizontal
       } }, h("div", { class: {
         hidden: this.labelHidden,
         'label-container': true
-      } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")))))), h("div", { class: "textarea-container" }, h("div", { class: {
+      } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { class: "label-wrapper", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), this.maxLength && (h("div", { class: "label-character-count", "aria-hidden": "true" }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0, "/", this.maxLength))))))), h("div", { class: "textarea-container" }, h("div", { class: {
         'textarea-wrapper': true,
         'textarea-disabled': this.disabled,
         'textarea-invalid': this.invalid
-      } }, h("textarea", Object.assign({}, this.nativeAttributes, { 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": ((_a = this.hint) === null || _a === void 0 ? void 0 : _a.length) ? this.id + '-hint' : undefined })), this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
+      } }, h("textarea", Object.assign({}, this.nativeAttributes, { 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": ((_c = this.hint) === null || _c === void 0 ? void 0 : _c.length) ? this.id + '-hint' : undefined })), this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
   }
   get invalid() {
     return !!this.errorMap;

package/dist/components/cat-textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-textarea.js","mappings":"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","names":["CatTextarea","log","autosize","i18n"],"sources":["../node_modules/autosize/dist/autosize.esm.js","./src/components/cat-textarea/cat-textarea.scss?tag=cat-textarea&encapsulation=shadow","./src/components/cat-textarea/cat-textarea.tsx"],"sourcesContent":["var e=new Map;function t(t){var r=e.get(t);r&&r.destroy()}function r(t){var r=e.get(t);r&&r.update()}var o=null;\"undefined\"==typeof window?((o=function(e){return e}).destroy=function(e){return e},o.update=function(e){return e}):((o=function(t,r){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&\"TEXTAREA\"===t.nodeName&&!e.has(t)){var r=null,o=window.getComputedStyle(t),n=function(r){window.removeEventListener(\"resize\",l,!1),t.removeEventListener(\"input\",l,!1),t.removeEventListener(\"keyup\",l,!1),t.removeEventListener(\"autosize:destroy\",n,!1),t.removeEventListener(\"autosize:update\",l,!1),Object.keys(r).forEach(function(e){return t.style[e]=r[e]}),e.delete(t)}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener(\"autosize:destroy\",n,!1),window.addEventListener(\"resize\",l,!1),t.addEventListener(\"input\",l,!1),t.addEventListener(\"autosize:update\",l,!1),t.style.overflowX=\"hidden\",t.style.wordWrap=\"break-word\",e.set(t,{destroy:n,update:l}),l()}function l(e){void 0===e&&(e=null);var n=o.overflowY;if(0!==t.scrollHeight){var i,a=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],r=e[1];t.style.scrollBehavior=\"auto\",t.scrollTop=r,t.style.scrollBehavior=null})}}(t);if(t.style.height=\"\",\"vertical\"===o.resize?t.style.resize=\"none\":\"both\"===o.resize&&(t.style.resize=\"horizontal\"),i=\"content-box\"===o.boxSizing?t.scrollHeight-(parseFloat(o.paddingTop)+parseFloat(o.paddingBottom)):t.scrollHeight+parseFloat(o.borderTopWidth)+parseFloat(o.borderBottomWidth),\"none\"!==o.maxHeight&&i>parseFloat(o.maxHeight)?(\"hidden\"===o.overflowY&&(t.style.overflow=\"scroll\"),i=parseFloat(o.maxHeight)):\"hidden\"!==o.overflowY&&(t.style.overflow=\"hidden\"),t.style.height=i+\"px\",e&&(t.style.textAlign=e),a(),r!==i&&(t.dispatchEvent(new Event(\"autosize:resized\",{bubbles:!0})),r=i),n!==o.overflow&&!e){var s=o.textAlign;\"hidden\"===o.overflow&&(t.style.textAlign=\"start\"===s?\"end\":\"start\"),l(s)}}}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},o.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e});var n=o;export default n;\n","@use 'variables' as ;\n@use 'mixins' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n\n$-textarea-min-height: 2.5rem;\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n @include cat-body('m');\n margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.textarea-field,\n.textarea-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n flex: 1 1 auto;\n}\n\n.textarea-field.textarea-horizontal {\n flex-direction: row;\n gap: 1rem;\n}\n\nlabel {\n align-self: flex-start;\n overflow: hidden;\n @include cat-break-word;\n}\n\n.label-container {\n flex-basis: var(--label-size, 33.33%);\n\n &.hidden {\n @include cat-visually-hidden;\n }\n}\n\n.label-optional {\n margin-left: 0.25rem;\n @include cat-body('xs');\n color: cat-token('color.ui.font.muted');\n}\n\n.textarea-horizontal {\n label {\n min-height: $-textarea-min-height;\n display: inline-flex;\n align-items: center;\n }\n\n .label-optional {\n display: block;\n margin-top: 0.25rem;\n margin-left: 0;\n }\n}\n\n.textarea-wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n\n.icon-suffix {\n position: absolute;\n top: calc(0.625rem - 2px);\n right: 0.75rem;\n background: cat-token('color.ui.background.input', 0.75);\n border-radius: 100rem;\n\n .textarea-disabled & {\n background: cat-token('color.ui.background.muted', 0.75);\n }\n}\n\ntextarea {\n margin: 0;\n padding: 0.625rem 0.75rem;\n min-height: $-textarea-min-height;\n font: inherit;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n border: none;\n box-shadow: 0 0 0 1px cat-token('color.ui.border.dark');\n transition: box-shadow cat-token('time.transition.s') linear;\n resize: vertical;\n\n &:disabled {\n background: cat-token('color.ui.background.muted');\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n resize: none;\n }\n\n .textarea-invalid & {\n box-shadow: 0 0 0 1px cat-token('color.theme.danger.bg', 0.2);\n }\n\n &:hover:not(:disabled) {\n box-shadow: 0 0 0 2px cat-token('color.ui.border.dark');\n }\n\n .textarea-invalid &:hover:not(:disabled) {\n box-shadow: 0 0 0 2px cat-token('color.theme.danger.bg', 0.2);\n }\n\n &:focus {\n outline: 2px solid cat-token('color.ui.border.focus');\n }\n\n .textarea-invalid &:focus {\n outline: 2px solid cat-token('color.theme.danger.bg', 0.2);\n }\n\n &::placeholder {\n color: cat-token('color.ui.font.muted');\n }\n\n /* stylelint-disable property-no-vendor-prefix /\n &:-webkit-autofill {\n &,\n &:hover,\n &:focus {\n -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;\n }\n }\n / stylelint-enable property-no-vendor-prefix /\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport autosize from 'autosize';\nimport log from 'loglevel';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/\n Textarea specifies a control that allows user to write text over multiple\n * rows. Used when the expected user input is long. For shorter input, use the\n * input component.\n \n @slot hint - Optional hint element to be displayed with the textarea.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n /\n@Component({\n tag: 'cat-textarea',\n styleUrl: 'cat-textarea.scss',\n shadow: true\n})\nexport class CatTextarea {\n private readonly _id = `cat-textarea-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private textarea!: HTMLTextAreaElement;\n private errorMapSrc?: ErrorMap;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() errorMap?: ErrorMap;\n\n /\n Whether the label need a marker to shown if the textarea is required or optional.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n Whether the label is on top or left.\n /\n @Prop() horizontal = false;\n\n /\n Whether the textarea is disabled.\n /\n @Prop() disabled = false;\n\n /\n Optional hint text(s) to be displayed with the textarea.\n /\n @Prop() hint?: string \| string[];\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label for the textarea.\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n A maximum length (number of characters) for textual values.\n /\n @Prop() maxLength?: number;\n\n /\n A minimum length (number of characters) for textual values.\n /\n @Prop() minLength?: number;\n\n /\n The name of the form control. Submitted with the form as part of a name/value pair.\n /\n @Prop() name?: string;\n\n /\n The placeholder text to display within the input.\n /\n @Prop() placeholder?: string;\n\n /\n The value is not editable.\n /\n @Prop() readonly = false;\n\n /\n A value is required or must be check for the form to be submittable.\n /\n @Prop() required = false;\n\n /\n Specifies the initial number of lines in the textarea.\n /\n @Prop() rows = 3;\n\n /\n The initial value of the control.\n /\n @Prop({ mutable: true }) value?: string \| number;\n\n /\n The validation errors for this input. Will render a hint under the input\n * with the translated error message(s) `error.${key}`. If an object is\n * passed, the keys will be used as error keys and the values translation\n * parameters.\n * If the value is `true`, the input will be marked as invalid without any\n * hints under the input.\n /\n @Prop() errors?: boolean \| string[] \| ErrorMap;\n\n /\n Fine-grained control over when the errors are shown. Can be `false` to\n * never show errors, `true` to show errors on blur, or a number to show\n * errors on change with the given delay in milliseconds.\n /\n @Prop() errorUpdate: boolean \| number = 0;\n\n /\n Attributes that will be added to the native HTML textarea element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the textarea received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the textarea loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.watchErrorsHandler(this.errors);\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on textarea', this);\n }\n }\n\n componentDidLoad(): void {\n autosize(this.textarea);\n }\n\n /\n Programmatically move focus to the textarea. Use this method instead of\n * `textarea.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.textarea.focus(options);\n }\n\n /\n Programmatically remove focus from the textarea. Use this method instead of\n * `textarea.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.textarea.blur();\n }\n\n /\n Programmatically simulate a click on the textarea.\n */\n @Method()\n async doClick(): Promise<void> {\n this.textarea.click();\n }\n\n @Watch('errors')\n watchErrorsHandler(value?: boolean \| string[] \| ErrorMap) {\n if (this.errorUpdate === false) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(value)\n ? (value as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n : value === true\n ? {}\n : value \|\| undefined;\n }\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'textarea-field': true,\n 'textarea-horizontal': this.horizontal\n }}\n >\n <div\n class={{\n hidden: this.labelHidden,\n 'label-container': true\n }}\n >\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n <span part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n {!this.required && this.requiredMarker.startsWith('optional') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker.startsWith('required') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n </span>\n </label>\n )}\n </div>\n <div class=\"textarea-container\">\n <div\n class={{\n 'textarea-wrapper': true,\n 'textarea-disabled': this.disabled,\n 'textarea-invalid': this.invalid\n }}\n >\n <textarea\n {...this.nativeAttributes}\n ref={el => (this.textarea = el as HTMLTextAreaElement)}\n id={this.id}\n disabled={this.disabled}\n maxlength={this.maxLength}\n minlength={this.minLength}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n rows={this.rows}\n value={this.value}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-invalid={this.invalid ? 'true' : undefined}\n aria-describedby={this.hint?.length ? this.id + '-hint' : undefined}\n ></textarea>\n {this.invalid && (\n <cat-icon\n icon=\"alert-circle-outlined\"\n class=\"icon-suffix cat-text-danger\"\n size=\"l\"\n onClick={() => this.textarea.focus()}\n ></cat-icon>\n )}\n </div>\n {(this.hint \|\| this.hasSlottedHint \|\| !!Object.keys(this.errorMap \|\| {}).length) && (\n <CatFormHint\n id={this.id}\n hint={this.hint}\n slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n errorMap={this.errorMap}\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n\n private get invalid() {\n return !!this.errorMap;\n }\n\n private errorUpdateTimeoutId?: number;\n private onInput(event: InputEvent) {\n this.value = this.textarea.value;\n this.catChange.emit(event);\n if (typeof this.errorUpdate === 'number') {\n typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), this.errorUpdate);\n }\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n if (this.errorUpdate !== false) {\n this.errorMap = this.errorMapSrc;\n }\n }\n}\n"],"version":3}
1	+ {"file":"cat-textarea.js","mappings":"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","names":["CatTextarea","log","autosize","i18n"],"sources":["../node_modules/autosize/dist/autosize.esm.js","./src/components/cat-textarea/cat-textarea.scss?tag=cat-textarea&encapsulation=shadow","./src/components/cat-textarea/cat-textarea.tsx"],"sourcesContent":["var e=new Map;function t(t){var r=e.get(t);r&&r.destroy()}function r(t){var r=e.get(t);r&&r.update()}var o=null;\"undefined\"==typeof window?((o=function(e){return e}).destroy=function(e){return e},o.update=function(e){return e}):((o=function(t,r){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&\"TEXTAREA\"===t.nodeName&&!e.has(t)){var r=null,o=window.getComputedStyle(t),n=function(r){window.removeEventListener(\"resize\",l,!1),t.removeEventListener(\"input\",l,!1),t.removeEventListener(\"keyup\",l,!1),t.removeEventListener(\"autosize:destroy\",n,!1),t.removeEventListener(\"autosize:update\",l,!1),Object.keys(r).forEach(function(e){return t.style[e]=r[e]}),e.delete(t)}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener(\"autosize:destroy\",n,!1),window.addEventListener(\"resize\",l,!1),t.addEventListener(\"input\",l,!1),t.addEventListener(\"autosize:update\",l,!1),t.style.overflowX=\"hidden\",t.style.wordWrap=\"break-word\",e.set(t,{destroy:n,update:l}),l()}function l(e){void 0===e&&(e=null);var n=o.overflowY;if(0!==t.scrollHeight){var i,a=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],r=e[1];t.style.scrollBehavior=\"auto\",t.scrollTop=r,t.style.scrollBehavior=null})}}(t);if(t.style.height=\"\",\"vertical\"===o.resize?t.style.resize=\"none\":\"both\"===o.resize&&(t.style.resize=\"horizontal\"),i=\"content-box\"===o.boxSizing?t.scrollHeight-(parseFloat(o.paddingTop)+parseFloat(o.paddingBottom)):t.scrollHeight+parseFloat(o.borderTopWidth)+parseFloat(o.borderBottomWidth),\"none\"!==o.maxHeight&&i>parseFloat(o.maxHeight)?(\"hidden\"===o.overflowY&&(t.style.overflow=\"scroll\"),i=parseFloat(o.maxHeight)):\"hidden\"!==o.overflowY&&(t.style.overflow=\"hidden\"),t.style.height=i+\"px\",e&&(t.style.textAlign=e),a(),r!==i&&(t.dispatchEvent(new Event(\"autosize:resized\",{bubbles:!0})),r=i),n!==o.overflow&&!e){var s=o.textAlign;\"hidden\"===o.overflow&&(t.style.textAlign=\"start\"===s?\"end\":\"start\"),l(s)}}}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},o.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e});var n=o;export default n;\n","@use 'variables' as ;\n@use 'mixins' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n@use '_snippets/form-label';\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n @include cat-body('m');\n margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.textarea-field,\n.textarea-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n flex: 1 1 auto;\n}\n\n.textarea-field.textarea-horizontal {\n flex-direction: row;\n gap: 1rem;\n}\n\n.textarea-wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n\n.icon-suffix {\n position: absolute;\n top: calc(0.625rem - 2px);\n right: 0.75rem;\n background: cat-token('color.ui.background.input', 0.75);\n border-radius: 100rem;\n\n .textarea-disabled & {\n background: cat-token('color.ui.background.muted', 0.75);\n }\n}\n\ntextarea {\n margin: 0;\n padding: 0.625rem 0.75rem;\n min-height: form-label.$cat-input-height;\n font: inherit;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n border: none;\n box-shadow: 0 0 0 1px cat-token('color.ui.border.dark');\n transition: box-shadow cat-token('time.transition.s') linear;\n resize: vertical;\n\n &:disabled {\n background: cat-token('color.ui.background.muted');\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n resize: none;\n }\n\n .textarea-invalid & {\n box-shadow: 0 0 0 1px cat-token('color.theme.danger.bg', 0.2);\n }\n\n &:hover:not(:disabled) {\n box-shadow: 0 0 0 2px cat-token('color.ui.border.dark');\n }\n\n .textarea-invalid &:hover:not(:disabled) {\n box-shadow: 0 0 0 2px cat-token('color.theme.danger.bg', 0.2);\n }\n\n &:focus {\n outline: 2px solid cat-token('color.ui.border.focus');\n }\n\n .textarea-invalid &:focus {\n outline: 2px solid cat-token('color.theme.danger.bg', 0.2);\n }\n\n &::placeholder {\n color: cat-token('color.ui.font.muted');\n }\n\n /* stylelint-disable property-no-vendor-prefix /\n &:-webkit-autofill {\n &,\n &:hover,\n &:focus {\n -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;\n }\n }\n / stylelint-enable property-no-vendor-prefix /\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport autosize from 'autosize';\nimport log from 'loglevel';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/\n Textarea specifies a control that allows user to write text over multiple\n * rows. Used when the expected user input is long. For shorter input, use the\n * input component.\n \n @slot hint - Optional hint element to be displayed with the textarea.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n /\n@Component({\n tag: 'cat-textarea',\n styleUrl: 'cat-textarea.scss',\n shadow: true\n})\nexport class CatTextarea {\n private readonly _id = `cat-textarea-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private textarea!: HTMLTextAreaElement;\n private errorMapSrc?: ErrorMap;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() errorMap?: ErrorMap;\n\n /\n Whether the label need a marker to shown if the textarea is required or optional.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n Whether the label is on top or left.\n /\n @Prop() horizontal = false;\n\n /\n Whether the textarea is disabled.\n /\n @Prop() disabled = false;\n\n /\n Optional hint text(s) to be displayed with the textarea.\n /\n @Prop() hint?: string \| string[];\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label for the textarea.\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n A maximum length (number of characters) for textual values.\n /\n @Prop() maxLength?: number;\n\n /\n A minimum length (number of characters) for textual values.\n /\n @Prop() minLength?: number;\n\n /\n The name of the form control. Submitted with the form as part of a name/value pair.\n /\n @Prop() name?: string;\n\n /\n The placeholder text to display within the input.\n /\n @Prop() placeholder?: string;\n\n /\n The value is not editable.\n /\n @Prop() readonly = false;\n\n /\n A value is required or must be check for the form to be submittable.\n /\n @Prop() required = false;\n\n /\n Specifies the initial number of lines in the textarea.\n /\n @Prop() rows = 3;\n\n /\n The initial value of the control.\n /\n @Prop({ mutable: true }) value?: string \| number;\n\n /\n The validation errors for this input. Will render a hint under the input\n * with the translated error message(s) `error.${key}`. If an object is\n * passed, the keys will be used as error keys and the values translation\n * parameters.\n * If the value is `true`, the input will be marked as invalid without any\n * hints under the input.\n /\n @Prop() errors?: boolean \| string[] \| ErrorMap;\n\n /\n Fine-grained control over when the errors are shown. Can be `false` to\n * never show errors, `true` to show errors on blur, or a number to show\n * errors on change with the given delay in milliseconds.\n /\n @Prop() errorUpdate: boolean \| number = 0;\n\n /\n Attributes that will be added to the native HTML textarea element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the textarea received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the textarea loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.watchErrorsHandler(this.errors);\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on textarea', this);\n }\n }\n\n componentDidLoad(): void {\n autosize(this.textarea);\n }\n\n /\n Programmatically move focus to the textarea. Use this method instead of\n * `textarea.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.textarea.focus(options);\n }\n\n /\n Programmatically remove focus from the textarea. Use this method instead of\n * `textarea.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.textarea.blur();\n }\n\n /\n Programmatically simulate a click on the textarea.\n */\n @Method()\n async doClick(): Promise<void> {\n this.textarea.click();\n }\n\n @Watch('errors')\n watchErrorsHandler(value?: boolean \| string[] \| ErrorMap) {\n if (this.errorUpdate === false) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(value)\n ? (value as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n : value === true\n ? {}\n : value \|\| undefined;\n }\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'textarea-field': true,\n 'textarea-horizontal': this.horizontal\n }}\n >\n <div\n class={{\n hidden: this.labelHidden,\n 'label-container': true\n }}\n >\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n <span class=\"label-wrapper\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n <div class=\"label-metadata\">\n {!this.required && this.requiredMarker.startsWith('optional') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker.startsWith('required') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n {this.maxLength && (\n <div class=\"label-character-count\" aria-hidden=\"true\">\n {this.value?.toString().length ?? 0}/{this.maxLength}\n </div>\n )}\n </div>\n </span>\n </label>\n )}\n </div>\n <div class=\"textarea-container\">\n <div\n class={{\n 'textarea-wrapper': true,\n 'textarea-disabled': this.disabled,\n 'textarea-invalid': this.invalid\n }}\n >\n <textarea\n {...this.nativeAttributes}\n ref={el => (this.textarea = el as HTMLTextAreaElement)}\n id={this.id}\n disabled={this.disabled}\n maxlength={this.maxLength}\n minlength={this.minLength}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n rows={this.rows}\n value={this.value}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-invalid={this.invalid ? 'true' : undefined}\n aria-describedby={this.hint?.length ? this.id + '-hint' : undefined}\n ></textarea>\n {this.invalid && (\n <cat-icon\n icon=\"alert-circle-outlined\"\n class=\"icon-suffix cat-text-danger\"\n size=\"l\"\n onClick={() => this.textarea.focus()}\n ></cat-icon>\n )}\n </div>\n {(this.hint \|\| this.hasSlottedHint \|\| !!Object.keys(this.errorMap \|\| {}).length) && (\n <CatFormHint\n id={this.id}\n hint={this.hint}\n slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n errorMap={this.errorMap}\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n\n private get invalid() {\n return !!this.errorMap;\n }\n\n private errorUpdateTimeoutId?: number;\n private onInput(event: InputEvent) {\n this.value = this.textarea.value;\n this.catChange.emit(event);\n if (typeof this.errorUpdate === 'number') {\n typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), this.errorUpdate);\n }\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n if (this.errorUpdate !== false) {\n this.errorMap = this.errorMapSrc;\n }\n }\n}\n"],"version":3}

package/dist/esm/cat-alert_24.entry.js CHANGED Viewed

@@ -3192,7 +3192,7 @@ const CatIcon = class {
 };
 CatIcon.style = catIconCss;
-const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 105, 118, 135)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}:host{display:flex;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.input-field,.input-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.input-field.input-horizontal{flex-direction:row;gap:1rem}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.input-wrapper:not(.input-disabled):hover.input-invalid{box-shadow:0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.input-wrapper:not(.input-disabled):focus-within.input-invalid{outline:2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper.input-invalid{box-shadow:0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}label{align-self:flex-start;overflow:hidden;word-wrap:break-word;word-break:break-word}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-optional{display:block;margin-top:0.25rem;margin-left:0}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
+const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 105, 118, 135)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-container .label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem}.label-optional{display:flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.label-character-count{display:flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata{justify-content:flex-start}:host{display:flex;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.input-field,.input-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.input-field.input-horizontal{flex-direction:row;gap:1rem}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.input-wrapper:not(.input-disabled):hover.input-invalid{box-shadow:0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.input-wrapper:not(.input-disabled):focus-within.input-invalid{outline:2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper.input-invalid{box-shadow:0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
 let nextUniqueId$6 = 0;
 const CatInput = class {
@@ -3286,21 +3286,21 @@ const CatInput = class {
     }
   }
   render() {
-    var _a;
+    var _a, _b, _c;
     return (h("div", { class: {
         'input-field': true,
         'input-horizontal': this.horizontal
       } }, h("div", { class: {
         hidden: this.labelHidden,
         'label-container': true
-      } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id }, h("span", { class: "label-wrapper", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")))))), h("div", { class: "input-container" }, h("div", { class: {
+      } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id }, h("span", { class: "label-wrapper", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), this.maxLength && (h("div", { class: "label-character-count", "aria-hidden": "true" }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0, "/", this.maxLength))))))), h("div", { class: "input-container" }, h("div", { class: {
         'input-wrapper': true,
         'input-round': this.round,
         'input-disabled': this.disabled,
         'input-invalid': this.invalid
       }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l" }), h("div", { class: "input-inner-wrapper" }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.id, class: {
         'has-clearable': this.clearable && !this.disabled
-      }, 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.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": ((_a = this.hint) === null || _a === void 0 ? void 0 : _a.length) ? this.id + '-hint' : undefined })), this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this) }))), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" })), this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (h(CatFormHint, { 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.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": ((_c = this.hint) === null || _c === void 0 ? void 0 : _c.length) ? this.id + '-hint' : undefined })), this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this) }))), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" })), this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
   }
   get invalid() {
     return !!this.errorMap;
@@ -7640,7 +7640,7 @@ CatTabs.style = catTabsCss;
 var e=new Map;function t(t){var r=e.get(t);r&&r.destroy();}function r(t){var r=e.get(t);r&&r.update();}var o=null;"undefined"==typeof window?((o=function(e){return e}).destroy=function(e){return e},o.update=function(e){return e}):((o=function(t,r){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&"TEXTAREA"===t.nodeName&&!e.has(t)){var r=null,o=window.getComputedStyle(t),n=function(r){window.removeEventListener("resize",l,!1),t.removeEventListener("input",l,!1),t.removeEventListener("keyup",l,!1),t.removeEventListener("autosize:destroy",n,!1),t.removeEventListener("autosize:update",l,!1),Object.keys(r).forEach(function(e){return t.style[e]=r[e]}),e.delete(t);}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener("autosize:destroy",n,!1),window.addEventListener("resize",l,!1),t.addEventListener("input",l,!1),t.addEventListener("autosize:update",l,!1),t.style.overflowX="hidden",t.style.wordWrap="break-word",e.set(t,{destroy:n,update:l}),l();}function l(e){void 0===e&&(e=null);var n=o.overflowY;if(0!==t.scrollHeight){var i,a=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],r=e[1];t.style.scrollBehavior="auto",t.scrollTop=r,t.style.scrollBehavior=null;})}}(t);if(t.style.height="","vertical"===o.resize?t.style.resize="none":"both"===o.resize&&(t.style.resize="horizontal"),i="content-box"===o.boxSizing?t.scrollHeight-(parseFloat(o.paddingTop)+parseFloat(o.paddingBottom)):t.scrollHeight+parseFloat(o.borderTopWidth)+parseFloat(o.borderBottomWidth),"none"!==o.maxHeight&&i>parseFloat(o.maxHeight)?("hidden"===o.overflowY&&(t.style.overflow="scroll"),i=parseFloat(o.maxHeight)):"hidden"!==o.overflowY&&(t.style.overflow="hidden"),t.style.height=i+"px",e&&(t.style.textAlign=e),a(),r!==i&&(t.dispatchEvent(new Event("autosize:resized",{bubbles:!0})),r=i),n!==o.overflow&&!e){var s=o.textAlign;"hidden"===o.overflow&&(t.style.textAlign="start"===s?"end":"start"),l(s);}}}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},o.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e});var n=o;
-const catTextareaCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 105, 118, 135)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.textarea-field,.textarea-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.textarea-field.textarea-horizontal{flex-direction:row;gap:1rem}label{align-self:flex-start;overflow:hidden;word-wrap:break-word;word-break:break-word}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.textarea-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.textarea-horizontal .label-optional{display:block;margin-top:0.25rem;margin-left:0}.textarea-wrapper{position:relative;display:flex;flex-direction:column}.icon-suffix{position:absolute;top:calc(0.625rem - 2px);right:0.75rem;background:rgba(255, 255, 255, 0.75);border-radius:100rem}.textarea-disabled .icon-suffix{background:rgba(242, 244, 247, 0.75)}textarea{margin:0;padding:0.625rem 0.75rem;min-height:2.5rem;font:inherit;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);border:none;box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;resize:vertical;}textarea:disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));resize:none}.textarea-invalid textarea{box-shadow:0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea:hover:not(:disabled){box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.textarea-invalid textarea:hover:not(:disabled){box-shadow:0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea:focus{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.textarea-invalid textarea:focus{outline:2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}";
+const catTextareaCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 105, 118, 135)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-container .label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem}.label-optional{display:flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.label-character-count{display:flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata{justify-content:flex-start}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.textarea-field,.textarea-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.textarea-field.textarea-horizontal{flex-direction:row;gap:1rem}.textarea-wrapper{position:relative;display:flex;flex-direction:column}.icon-suffix{position:absolute;top:calc(0.625rem - 2px);right:0.75rem;background:rgba(255, 255, 255, 0.75);border-radius:100rem}.textarea-disabled .icon-suffix{background:rgba(242, 244, 247, 0.75)}textarea{margin:0;padding:0.625rem 0.75rem;min-height:2.5rem;font:inherit;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);border:none;box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;resize:vertical;}textarea:disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));resize:none}.textarea-invalid textarea{box-shadow:0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea:hover:not(:disabled){box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.textarea-invalid textarea:hover:not(:disabled){box-shadow:0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea:focus{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.textarea-invalid textarea:focus{outline:2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}textarea::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}";
 let nextUniqueId$2 = 0;
 const CatTextarea = class {
@@ -7722,18 +7722,18 @@ const CatTextarea = class {
     }
   }
   render() {
-    var _a;
+    var _a, _b, _c;
     return (h(Host, null, h("div", { class: {
         'textarea-field': true,
         'textarea-horizontal': this.horizontal
       } }, h("div", { class: {
         hidden: this.labelHidden,
         'label-container': true
-      } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")))))), h("div", { class: "textarea-container" }, h("div", { class: {
+      } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { class: "label-wrapper", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), this.maxLength && (h("div", { class: "label-character-count", "aria-hidden": "true" }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0, "/", this.maxLength))))))), h("div", { class: "textarea-container" }, h("div", { class: {
         'textarea-wrapper': true,
         'textarea-disabled': this.disabled,
         'textarea-invalid': this.invalid
-      } }, h("textarea", Object.assign({}, this.nativeAttributes, { 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": ((_a = this.hint) === null || _a === void 0 ? void 0 : _a.length) ? this.id + '-hint' : undefined })), this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
+      } }, h("textarea", Object.assign({}, this.nativeAttributes, { 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": ((_c = this.hint) === null || _c === void 0 ? void 0 : _c.length) ? this.id + '-hint' : undefined })), this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
   }
   get invalid() {
     return !!this.errorMap;