npm - @haiilo/catalyst - Versions diffs - 10.30.2 → 10.31.0 - Mend

@haiilo/catalyst 10.30.2 → 10.31.0

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 (55) hide show

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

	@@ -1 +1 @@
1	- {"file":"cat-tag.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,o1aAAo1a,CAAC;AACv2a,qBAAe,SAAS;;ACIxB,IAAI,YAAY,GAAG,CAAC,CAAC;MAeRA,QAAM;;;;;;;;QACA,QAAG,GAAG,aAAa,YAAY,EAAE,EAAE,CAAC;+BAU1B,KAAK;8BAEN,KAAK;oBAEL,EAAE;;8BAOsE,UAAU;wBAKzF,KAAK;;;;qBAoBR,EAAE;;2BAUI,KAAK;wBAKR,KAAK;;;yBAeJ,KAAK;;2BAiBe,CAAC;gCAOJ,CAAC,GAAG,CAAC;yBAKtB,KAAK;;IAxGzB,IAAY,EAAE;QACZ,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC;KACpC;IAuHD,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;KACrD;IAED,mBAAmB;QACjB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC1E,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;KACzE;IAGD,SAAS,CAAC,KAAoB;QAC5B,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,aAAa,KAAK,IAAI,CAAC,KAAK,CAAC;QACjF,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,cAAc,EAAE;YAC7E,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;aAAM,IACL,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC;YACjC,IAAI,CAAC,KAAK,EAAE,cAAc,KAAK,CAAC;YAChC,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC;YAC7B,cAAc,EACd;YACA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;YAC5C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACjC;KACF;IAGD,eAAe,CAAC,QAAwC,EAAE,SAAmB,EAAE,SAAkB,IAAI;QACnG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;SAC3B;aAAM;YACL,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;kBACrC,QAAqB,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC;kBAC/E,QAAQ,IAAI,SAAS,CAAC;YAC1B,IAAI,MAAM,EAAE;gBACV,IAAI,CAAC,mBAAmB,EAAE,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;aAC1D;SACF;KACF;IAED,MAAM;QACJ,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;QACnF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,IAC9D,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,KAAK,MAClC,8DAAO,OAAO,EAAE,QAAQ,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,IACnD,6DAAM,KAAK,EAAC,eAAe,IACxB,CAAC,IAAI,CAAC,eAAe,IAAI,6DAAM,IAAI,EAAC,OAAO,GAAQ,KAAK,IAAI,CAAC,KAAK,EACnE,4DAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,UAAU,EAAE,UAAU,CAAC,UAAU,CAAC,KAC3E,6DAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM,SAC3CC,eAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,MACrB,CACR,EACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,UAAU,CAAC,KAC3D,6DAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM,SAC3CA,eAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,MACrB,CACR,CACG,CACD,CACD,CACT,CACG,EACN,4DAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,CAAC,OAAO,EAAE,IAClG,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,KACpB,WAAK,KAAK,EAAC,UAAU,IACnB,gBAAO,KAAK,CAAQ,EACnB,CAAC,IAAI,CAAC,QAAQ,KACb,kBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,mBAAmB,EACxB,QAAQ,QACR,SAAS,EAAEA,eAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,EACpC,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EACnC,QAAQ,EAAE,CAAC,CAAC,GACA,CACf,CACG,CACP,CAAC,EACF,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,iEACM,IAAI,CAAC,gBAAgB,EACzB,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,QAAQ,IAAI,CAAC,EAAE,QAAQ,EAC3B,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,UAAU,EACf,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,kBAClC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,sBAC7B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,GAAG,OAAO,GAAG,SAAS,EAC9D,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAC9B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAChB,EACR,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,KAChE,mEACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,kBAAkB,eACb,MAAM,EAChB,IAAI,EAAC,GAAG,EACR,OAAO,EAAC,MAAM,gBACFA,eAAI,CAAC,CAAC,CAAC,aAAa,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,mCAElB,CACf,EACA,IAAI,CAAC,OAAO,IAAI,iEAAU,IAAI,EAAC,kBAAkB,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,GAAG,GAAY,CACvG,CACF,EACL,IAAI,CAAC,OAAO,KACX,EAAC,WAAW,qDACV,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,cAAc,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,EAC7D,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACH,CACI,EACP;KACH;IAED,IAAY,OAAO;QACjB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,CAAC;KAC7D;IAED,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC;KAC5E;IAEO,OAAO;QACb,MAAM,YAAY,GAAG;YACnB,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,EAAE,CAAC;SACzF,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;QAC3D,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,GAAG,YAAY,CAAC,CAAC;YACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAChC,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;aACvB;SACF;KACF;IAEO,MAAM;QACZ,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;IAEO,aAAa;QACnB,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;QAC5C,IAAI,UAAU,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,UAAU,CAAC,EAAE;YACnD,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC;YACjD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACjC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;SACvB;KACF;IAEO,KAAK;QACX,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;SACvB;KACF;IAEO,QAAQ,CAAC,KAAa;QAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,IAAI,OAAO,KAAK,KAAK,CAAC,CAAC;QAC9D,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACjC;IAEO,UAAU;QAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC;KAClC;IAGO,mBAAmB;QACzB,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QACzD,IAAI,WAAW,KAAK,IAAI,EAAE;YACxB,OAAO,IAAI,CAAC,oBAAoB,KAAK,QAAQ,IAAI,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;YAChG,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,EAAE,WAAW,CAAC,CAAC;YACpF,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;KACd;IAEO,mBAAmB;QACzB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,WAAW,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,KAAK,CAAC;QACtG,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;KACF;IAEO,gBAAgB,CAAC,UAAoB;;QAE3C,MAAM,iBAAiB,GAAG,UAAU,CAAC,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC;;QAGxG,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;;QAGrC,MAAM,YAAY,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC;QAEvD,OAAO,IAAI,MAAM,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC;KACtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatTag","i18n"],"sources":["src/components/cat-tag/cat-tag.scss?tag=cat-tag&encapsulation=shadow","src/components/cat-tag/cat-tag.tsx"],"sourcesContent":["@use '_snippets/form-label';\n@use 'variables' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n@use 'mixins' as ;\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\ninput {\n font: inherit;\n margin: 0;\n min-width: 20rem;\n padding: 0.375rem 0;\n flex: 1 1 auto;\n border: none;\n outline: none;\n background: none;\n @include cat-ellipsis;\n\n .input-disabled & {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\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.input-wrapper {\n flex: 1 1 auto;\n display: flex;\n align-items: stretch;\n gap: 0.25rem;\n padding: 0.25rem 0.75rem;\n min-height: 2rem;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n box-shadow: inset 0 0 0 1px rgb(var(--border-color));\n transition: box-shadow cat-token('time.transition.s') linear;\n --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};\n flex-wrap: wrap;\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:\n inset 0 0 0 1px rgb(var(--border-color)),\n 0 0 0 1px rgb(var(--border-color));\n }\n\n &:focus-within {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: -1px;\n\n &:has(.clearable:focus) {\n outline: none;\n }\n }\n\n &.input-invalid {\n --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};\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.tag-pill {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.25rem 0.5rem;\n background: cat-token('color.ui.background.muted');\n border-radius: cat-border-radius('s');\n white-space: nowrap;\n min-width: 0;\n\n > span {\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1 1 0;\n }\n\n > cat-button {\n margin-right: -0.25rem;\n margin-left: -0.25rem;\n }\n}\n\n.icon-suffix {\n align-self: center;\n}\n\n.input-inner-wrapper {\n flex: 1 1 auto;\n display: flex;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\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 An input that allows multiple values to be entered as tags.\n \n @part input - The native input element.\n * @part label - The native label element.\n /\n@Component({\n tag: 'cat-tag',\n styleUrl: 'cat-tag.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatTag {\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 \| true;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() tags: string[] = [];\n\n @State() errorMap?: ErrorMap \| true;\n\n /\n Whether the label need a marker to shown if the select is required or optional.\n /\n @Prop() requiredMarker?: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n Whether the select is disabled.\n /\n @Prop() disabled = false;\n\n /\n The placeholder text to display within the select.\n /\n @Prop() placeholder?: string;\n\n /\n Optional hint text(s) to be displayed with the select.\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 select.\n /\n @Prop() label = '';\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 Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n A value is required or must be checked for the form to be submittable.\n /\n @Prop() required = false;\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n The value of the control.\n /\n @Prop({ mutable: true }) value?: string[];\n\n /\n Whether the input should show a clear button.\n /\n @Prop() clearable = false;\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 change with the given delay in milliseconds or immediately on blur.\n /\n @Prop() errorUpdate: boolean \| number = 0;\n\n /\n List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`.\n * Pasted values will also be split by those chars.\n * Defaults to `[' ']`.\n /\n @Prop() tagCreationChars: string[] = [' '];\n\n /\n Whether new tag is added when the input is blurred.\n /\n @Prop() addOnBlur = false;\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter<string[]>;\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 componentWillLoad(): void {\n this.onErrorsChanged(this.errors, undefined, false);\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n }\n\n @Listen('keydown')\n onKeyDown(event: KeyboardEvent): void {\n const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;\n if (['Enter', ...this.tagCreationChars].includes(event.key) && isInputFocused) {\n event.preventDefault();\n this.addInputValue();\n } else if (\n ['Backspace'].includes(event.key) &&\n this.input?.selectionStart === 0 &&\n (this.value?.length ?? 0) > 0 &&\n isInputFocused\n ) {\n this.value = this.value?.slice(0, -1) ?? [];\n this.catChange.emit(this.value);\n }\n }\n\n @Watch('errors')\n onErrorsChanged(newValue?: boolean \| string[] \| ErrorMap, _oldValue?: unknown, update: boolean = true) {\n if (!coerceBoolean(this.errorUpdate)) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(newValue)\n ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n : newValue \|\| undefined;\n if (update) {\n this.showErrorsIfTimeout() \|\| this.showErrorsIfNoFocus();\n }\n }\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) \|\| 0;\n return (\n <Host>\n <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={`tags-${this.id}-input`} part=\"label\">\n <span class=\"label-wrapper\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n <div class=\"label-metadata\">\n {!this.required && (this.requiredMarker ?? 'optional').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 </div>\n </span>\n </label>\n )}\n </div>\n <div class={{ 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid }}>\n {this.value?.map(value => (\n <div class=\"tag-pill\">\n <span>{value}</span>\n {!this.disabled && (\n <cat-button\n size=\"xs\"\n variant=\"text\"\n icon=\"$cat:select-clear\"\n iconOnly\n a11yLabel={i18n.t('select.deselect')}\n onClick={() => this.deselect(value)}\n tabIndex={-1}\n ></cat-button>\n )}\n </div>\n ))}\n <div class=\"input-inner-wrapper\">\n <input\n {...this.nativeAttributes}\n part=\"input\"\n id={`tags-${this.id}-input`}\n class=\"tags-input\"\n role=\"combobox\"\n ref={el => (this.input = el as HTMLInputElement)}\n aria-invalid={this.invalid ? 'true' : undefined}\n aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n onInput={this.onInput.bind(this)}\n onBlur={this.onBlur.bind(this)}\n placeholder={this.placeholder}\n disabled={this.disabled}\n ></input>\n {this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (\n <cat-button\n class=\"clearable\"\n icon=\"$cat:input-close\"\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t('input.clear')}\n onClick={this.clear.bind(this)}\n data-dropdown-no-close\n ></cat-button>\n )}\n {this.invalid && <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>}\n </div>\n </div>\n {this.hasHint && (\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 </Host>\n );\n }\n\n private get hasHint() {\n return !!this.hint \|\| !!this.hasSlottedHint \|\| this.invalid;\n }\n\n private get invalid() {\n return this.errorMap === true \|\| !!Object.keys(this.errorMap \|\| {}).length;\n }\n\n private onInput() {\n const currentValue = [\n ...new Set(this.input?.value?.split(this.createSplitRegex(this.tagCreationChars)) ?? [])\n ].filter(value => !!value && !this.value?.includes(value));\n if (currentValue.length > 1) {\n this.value = [...(this.value ?? []), ...currentValue];\n this.catChange.emit(this.value);\n if (this.input) {\n this.input.value = '';\n }\n }\n }\n\n private onBlur() {\n if (this.addOnBlur) {\n this.addInputValue();\n }\n }\n\n private addInputValue() {\n const inputValue = this.input?.value.trim();\n if (inputValue && !this.value?.includes(inputValue)) {\n this.value = [...(this.value ?? []), inputValue];\n this.catChange.emit(this.value);\n }\n if (this.input) {\n this.input.value = '';\n }\n }\n\n private clear() {\n this.value = [];\n this.catChange.emit(this.value);\n if (this.input) {\n this.input.value = '';\n }\n }\n\n private deselect(value: string) {\n this.value = this.value?.filter(element => element !== value);\n this.catChange.emit(this.value);\n }\n\n private showErrors() {\n this.errorMap = this.errorMapSrc;\n }\n\n private errorUpdateTimeoutId?: number;\n private showErrorsIfTimeout() {\n const errorUpdate = coerceNumber(this.errorUpdate, null);\n if (errorUpdate !== null) {\n typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n return true;\n }\n return false;\n }\n\n private showErrorsIfNoFocus() {\n const hasFocus = document.activeElement === this.hostElement \|\| document.activeElement === this.input;\n if (!hasFocus) {\n this.showErrors();\n }\n }\n\n private createSplitRegex(delimiters: string[]): RegExp {\n // Escape special regex characters in the array\n const escapedDelimiters = delimiters.map(delimiter => delimiter.replace(/[.+?^${}()\|[\\]\\\\]/g, '\\\\$&'));\n\n // Add newline characters to the list of delimiters\n escapedDelimiters.push('\\\\n', '\\\\r');\n\n // Join the escaped delimiters to create a character class\n const regexPattern = `[${escapedDelimiters.join('')}]`;\n\n return new RegExp(regexPattern, 'g');\n }\n}\n"],"version":3}
1	+ {"file":"cat-tag.js","mappings":"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","names":["CatTag","i18n"],"sources":["src/components/cat-tag/cat-tag.scss?tag=cat-tag&encapsulation=shadow","src/components/cat-tag/cat-tag.tsx"],"sourcesContent":["@use '_snippets/form-label';\n@use 'variables' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n@use 'mixins' as ;\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\ninput {\n font: inherit;\n margin: 0;\n min-width: 20rem;\n padding: 0.375rem 0;\n flex: 1 1 auto;\n border: none;\n outline: none;\n background: none;\n @include cat-ellipsis;\n\n .input-disabled & {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\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.input-wrapper {\n flex: 1 1 auto;\n display: flex;\n align-items: stretch;\n gap: 0.25rem;\n padding: 0.25rem 0.75rem;\n min-height: 2rem;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n box-shadow: inset 0 0 0 1px rgb(var(--border-color));\n transition: box-shadow cat-token('time.transition.s') linear;\n --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};\n flex-wrap: wrap;\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:\n inset 0 0 0 1px rgb(var(--border-color)),\n 0 0 0 1px rgb(var(--border-color));\n }\n\n &:focus-within {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: -1px;\n\n &:has(.clearable:focus) {\n outline: none;\n }\n }\n\n &.input-invalid {\n --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};\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.tag-pill {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.25rem 0.5rem;\n background: cat-token('color.ui.background.muted');\n border-radius: cat-border-radius('s');\n white-space: nowrap;\n min-width: 0;\n\n > span {\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1 1 0;\n }\n\n > cat-button {\n margin-right: -0.25rem;\n margin-left: -0.25rem;\n }\n}\n\n.icon-suffix {\n align-self: center;\n}\n\n.input-inner-wrapper {\n flex: 1 1 auto;\n display: flex;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\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 An input that allows multiple values to be entered as tags.\n \n @part input - The native input element.\n * @part label - The native label element.\n /\n@Component({\n tag: 'cat-tag',\n styleUrl: 'cat-tag.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatTag {\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 \| true;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() tags: string[] = [];\n\n @State() errorMap?: ErrorMap \| true;\n\n /\n Whether the label need a marker to shown if the select is required or optional.\n /\n @Prop() requiredMarker?: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n Whether the select is disabled.\n /\n @Prop() disabled = false;\n\n /\n The placeholder text to display within the select.\n /\n @Prop() placeholder?: string;\n\n /\n Optional hint text(s) to be displayed with the select.\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 select.\n /\n @Prop() label = '';\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 Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n A value is required or must be checked for the form to be submittable.\n /\n @Prop() required = false;\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n A unique identifier for the underlying native element that is used for\n * testing purposes. The attribute is added as `data-test` attribute and acts\n * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n /\n @Prop() testId?: string;\n\n /\n The value of the control.\n /\n @Prop({ mutable: true }) value?: string[];\n\n /\n Whether the input should show a clear button.\n /\n @Prop() clearable = false;\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 change with the given delay in milliseconds or immediately on blur.\n /\n @Prop() errorUpdate: boolean \| number = 0;\n\n /\n List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`.\n * Pasted values will also be split by those chars.\n * Defaults to `[' ']`.\n /\n @Prop() tagCreationChars: string[] = [' '];\n\n /\n Whether new tag is added when the input is blurred.\n /\n @Prop() addOnBlur = false;\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter<string[]>;\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 componentWillLoad(): void {\n this.onErrorsChanged(this.errors, undefined, false);\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n }\n\n @Listen('keydown')\n onKeyDown(event: KeyboardEvent): void {\n const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;\n if (['Enter', ...this.tagCreationChars].includes(event.key) && isInputFocused) {\n event.preventDefault();\n this.addInputValue();\n } else if (\n ['Backspace'].includes(event.key) &&\n this.input?.selectionStart === 0 &&\n (this.value?.length ?? 0) > 0 &&\n isInputFocused\n ) {\n this.value = this.value?.slice(0, -1) ?? [];\n this.catChange.emit(this.value);\n }\n }\n\n @Watch('errors')\n onErrorsChanged(newValue?: boolean \| string[] \| ErrorMap, _oldValue?: unknown, update: boolean = true) {\n if (!coerceBoolean(this.errorUpdate)) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(newValue)\n ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n : newValue \|\| undefined;\n if (update) {\n this.showErrorsIfTimeout() \|\| this.showErrorsIfNoFocus();\n }\n }\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) \|\| 0;\n return (\n <Host>\n <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={`tags-${this.id}-input`} part=\"label\">\n <span class=\"label-wrapper\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n <div class=\"label-metadata\">\n {!this.required && (this.requiredMarker ?? 'optional').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 </div>\n </span>\n </label>\n )}\n </div>\n <div class={{ 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid }}>\n {this.value?.map(value => (\n <div class=\"tag-pill\">\n <span>{value}</span>\n {!this.disabled && (\n <cat-button\n size=\"xs\"\n variant=\"text\"\n icon=\"$cat:select-clear\"\n iconOnly\n a11yLabel={i18n.t('select.deselect')}\n onClick={() => this.deselect(value)}\n tabIndex={-1}\n ></cat-button>\n )}\n </div>\n ))}\n <div class=\"input-inner-wrapper\">\n <input\n data-test={this.testId}\n {...this.nativeAttributes}\n part=\"input\"\n id={`tags-${this.id}-input`}\n class=\"tags-input\"\n role=\"combobox\"\n ref={el => (this.input = el as HTMLInputElement)}\n aria-invalid={this.invalid ? 'true' : undefined}\n aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n onInput={this.onInput.bind(this)}\n onBlur={this.onBlur.bind(this)}\n placeholder={this.placeholder}\n disabled={this.disabled}\n ></input>\n {this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (\n <cat-button\n class=\"clearable\"\n icon=\"$cat:input-close\"\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t('input.clear')}\n onClick={this.clear.bind(this)}\n data-dropdown-no-close\n ></cat-button>\n )}\n {this.invalid && <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>}\n </div>\n </div>\n {this.hasHint && (\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 </Host>\n );\n }\n\n private get hasHint() {\n return !!this.hint \|\| !!this.hasSlottedHint \|\| this.invalid;\n }\n\n private get invalid() {\n return this.errorMap === true \|\| !!Object.keys(this.errorMap \|\| {}).length;\n }\n\n private onInput() {\n const currentValue = [\n ...new Set(this.input?.value?.split(this.createSplitRegex(this.tagCreationChars)) ?? [])\n ].filter(value => !!value && !this.value?.includes(value));\n if (currentValue.length > 1) {\n this.value = [...(this.value ?? []), ...currentValue];\n this.catChange.emit(this.value);\n if (this.input) {\n this.input.value = '';\n }\n }\n }\n\n private onBlur() {\n if (this.addOnBlur) {\n this.addInputValue();\n }\n }\n\n private addInputValue() {\n const inputValue = this.input?.value.trim();\n if (inputValue && !this.value?.includes(inputValue)) {\n this.value = [...(this.value ?? []), inputValue];\n this.catChange.emit(this.value);\n }\n if (this.input) {\n this.input.value = '';\n }\n }\n\n private clear() {\n this.value = [];\n this.catChange.emit(this.value);\n if (this.input) {\n this.input.value = '';\n }\n }\n\n private deselect(value: string) {\n this.value = this.value?.filter(element => element !== value);\n this.catChange.emit(this.value);\n }\n\n private showErrors() {\n this.errorMap = this.errorMapSrc;\n }\n\n private errorUpdateTimeoutId?: number;\n private showErrorsIfTimeout() {\n const errorUpdate = coerceNumber(this.errorUpdate, null);\n if (errorUpdate !== null) {\n typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n return true;\n }\n return false;\n }\n\n private showErrorsIfNoFocus() {\n const hasFocus = document.activeElement === this.hostElement \|\| document.activeElement === this.input;\n if (!hasFocus) {\n this.showErrors();\n }\n }\n\n private createSplitRegex(delimiters: string[]): RegExp {\n // Escape special regex characters in the array\n const escapedDelimiters = delimiters.map(delimiter => delimiter.replace(/[.+?^${}()\|[\\]\\\\]/g, '\\\\$&'));\n\n // Add newline characters to the list of delimiters\n escapedDelimiters.push('\\\\n', '\\\\r');\n\n // Join the escaped delimiters to create a character class\n const regexPattern = `[${escapedDelimiters.join('')}]`;\n\n return new RegExp(regexPattern, 'g');\n }\n}\n"],"version":3}

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

@@ -42,6 +42,7 @@ const CatTextarea$1 = /*@__PURE__*/ proxyCustomElement(class CatTextarea extends
         this.errors = undefined;
         this.errorUpdate = 0;
         this.nativeAttributes = undefined;
+        this.testId = undefined;
     }
     get id() {
         return this.identifier || this._id;
@@ -96,15 +97,15 @@ const CatTextarea$1 = /*@__PURE__*/ proxyCustomElement(class CatTextarea extends
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: 'c4cab207b93c4c13de6cce9f1558b2d4fce925ef' }, h("div", { key: '179e2a2dfe8740447dc6ff9824e492ee02e4d47a', class: {
+        return (h(Host, { key: '776354bbb03c8cb024d707f005cc53b11a61bc08' }, h("div", { key: '8ba766cb2681246058e7bd1082bb8b06d09c3edf', class: {
                 'textarea-field': true,
                 'textarea-horizontal': this.horizontal
-            } }, h("div", { key: '5ecc1e393465659830aba909126564e860143648', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '156179fd03e76824cf7ddf55d4570f717a5ec96f', htmlFor: this.id, part: "label" }, h("span", { key: '466b8ee054f2fa75c40b6d93dcaf6e308f499577', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'ca380dd71b02626140596777c05baa1d5f2454f1', name: "label" })) || this.label, h("div", { key: '72a97643fbbfc3335ca46aed185228703ba15f1c', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '2daf2d71efdadc2c840838e9f3b55aff31860c57', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '3d26ff6a20935bb3895df9a35ee3ed52bae4892d', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (h("div", { key: '9c2940f48e9ee33b48f0fdc800fb6c9b03e74cd3', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), h("div", { key: 'fb1fc6a8626ae38042ee7d58e309cb8552177a5a', class: "textarea-container" }, h("div", { key: 'c2bc69007aa78f3f7473d7d00d5edd096e034d82', class: {
+            } }, h("div", { key: '75345030c6d4c269f60da416c43ddaf0979f93fc', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'b0332bc73a58d3559e31620687802cf5abf5d92f', htmlFor: this.id, part: "label" }, h("span", { key: '177f5cccd3b74c85fa86acc1a9f2b4a0bc05809e', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '775fd2269ed0d8333d1a1630cc6fd4928fe851a0', name: "label" })) || this.label, h("div", { key: 'a3db8aaaae6a72789e7b1039c5ce685335f081da', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '7b80ecce688910d85b63b230085489bfdde5d833', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '0d047c9fc850c795df761d4b9d7a414861eb38be', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (h("div", { key: 'd1339f4e4df011c65c57f701d5fc861966ff918d', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), h("div", { key: '31af38f5bd63cbf2b315b072421dbbded35ee5ae', class: "textarea-container" }, h("div", { key: '5da2c1a1cbcd790a931a1444097919648f73761e', class: {
                 'textarea-wrapper': true,
                 'textarea-readonly': this.readonly,
                 'textarea-disabled': this.disabled,
                 'textarea-invalid': this.invalid
-            } }, h("textarea", { key: '33186afce9ab71467701ee679c7fd25ab15e48c0', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, autocomplete: this.autoComplete, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (h("cat-icon", { key: '19da7431db208bd34032cd22d4112b8c9b2c786f', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { key: '3f4bf8b4ac56e28ba482ef5e3883a17c3336f2b5', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
+            } }, h("textarea", { key: 'bc3f1210a9ed12884e916e050e4f0c93823d0600', "data-test": this.testId, ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, autocomplete: this.autoComplete, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (h("cat-icon", { key: '342839d1ebb8fd3fab02d6692ec26b680fb187c6', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { key: '132bfe8caf387912b7d1156e2b066aecec99ed54', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -170,6 +171,7 @@ const CatTextarea$1 = /*@__PURE__*/ proxyCustomElement(class CatTextarea extends
         "errors": [4],
         "errorUpdate": [8, "error-update"],
         "nativeAttributes": [16],
+        "testId": [1, "test-id"],
         "hasSlottedLabel": [32],
         "hasSlottedHint": [32],
         "hasSlottedCounter": [32],

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

	@@ -1 +1 @@
1	- {"file":"cat-textarea.js","mappings":"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","names":["CatTextarea","autosize","i18n"],"sources":["../node_modules/.pnpm/autosize@6.0.1/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 o=e.get(t);o&&o.destroy()}function o(t){var o=e.get(t);o&&o.update()}var r=null;\"undefined\"==typeof window?((r=function(e){return e}).destroy=function(e){return e},r.update=function(e){return e}):((r=function(t,o){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 o,r=null,n=window.getComputedStyle(t),i=(o=t.value,function(){a({testForHeightReduction:\"\"===o\|\|!t.value.startsWith(o),restoreTextAlign:null}),o=t.value}),l=function(o){t.removeEventListener(\"autosize:destroy\",l),t.removeEventListener(\"autosize:update\",s),t.removeEventListener(\"input\",i),window.removeEventListener(\"resize\",s),Object.keys(o).forEach(function(e){return t.style[e]=o[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\",l),t.addEventListener(\"autosize:update\",s),t.addEventListener(\"input\",i),window.addEventListener(\"resize\",s),t.style.overflowX=\"hidden\",t.style.wordWrap=\"break-word\",e.set(t,{destroy:l,update:s}),s()}function a(e){var o,i,l=e.restoreTextAlign,s=void 0===l?null:l,d=e.testForHeightReduction,u=void 0===d\|\|d,c=n.overflowY;if(0!==t.scrollHeight&&(\"vertical\"===n.resize?t.style.resize=\"none\":\"both\"===n.resize&&(t.style.resize=\"horizontal\"),u&&(o=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],o=e[1];t.style.scrollBehavior=\"auto\",t.scrollTop=o,t.style.scrollBehavior=null})}}(t),t.style.height=\"\"),i=\"content-box\"===n.boxSizing?t.scrollHeight-(parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)):t.scrollHeight+parseFloat(n.borderTopWidth)+parseFloat(n.borderBottomWidth),\"none\"!==n.maxHeight&&i>parseFloat(n.maxHeight)?(\"hidden\"===n.overflowY&&(t.style.overflow=\"scroll\"),i=parseFloat(n.maxHeight)):\"hidden\"!==n.overflowY&&(t.style.overflow=\"hidden\"),t.style.height=i+\"px\",s&&(t.style.textAlign=s),o&&o(),r!==i&&(t.dispatchEvent(new Event(\"autosize:resized\",{bubbles:!0})),r=i),c!==n.overflow&&!s)){var v=n.textAlign;\"hidden\"===n.overflow&&(t.style.textAlign=\"start\"===v?\"end\":\"start\"),a({restoreTextAlign:v,testForHeightReduction:!0})}}function s(){a({testForHeightReduction:!0,restoreTextAlign:null})}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},r.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e});var n=r;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}\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-readonly {\n pointer-events: none;\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 box-sizing: border-box;\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: inset 0 0 0 1px rgb(var(--border-color));\n transition: box-shadow cat-token('time.transition.s') linear;\n resize: vertical;\n --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};\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 &:not(:disabled):hover {\n box-shadow:\n inset 0 0 0 1px rgb(var(--border-color)),\n 0 0 0 1px rgb(var(--border-color));\n }\n\n &:focus {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: -1px;\n }\n\n .textarea-invalid & {\n --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};\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 { coerceBoolean, coerceNumber } from '../../utils/coerce';\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 * @slot counter - Custom counter element to be displayed in the top right corner of the label.\n * @part label - The native label element.\n * @part textarea - The native textarea element.\n /\n@Component({\n tag: 'cat-textarea',\n styleUrl: 'cat-textarea.scss',\n shadow: {\n delegatesFocus: true\n }\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 \| true;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() hasSlottedCounter = false;\n\n @State() errorMap?: ErrorMap \| true;\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 Hint for form autofill feature.\n /\n @Prop() autoComplete?: string;\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;\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 change with the given delay in milliseconds or immediately on blur.\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<string>;\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 componentWillLoad(): void {\n this.onErrorsChanged(this.errors, undefined, false);\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n this.hasSlottedCounter = !!this.hostElement.querySelector('[slot=\"counter\"]');\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 Clear the textarea.\n */\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n this.catChange.emit(this.value);\n }\n\n @Watch('errors')\n onErrorsChanged(newValue?: boolean \| string[] \| ErrorMap, _oldValue?: unknown, update: boolean = true) {\n if (!coerceBoolean(this.errorUpdate)) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(newValue)\n ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n : newValue \|\| undefined;\n if (update) {\n this.showErrorsIfTimeout() \|\| this.showErrorsIfNoFocus();\n }\n }\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) \|\| 0;\n return (\n <Host>\n <div\n class={{\n 'textarea-field': true,\n 'textarea-horizontal': this.horizontal\n }}\n >\n <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id} part=\"label\">\n <span class=\"label-wrapper\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n <div class=\"label-metadata\">\n {!this.required && (this.requiredMarker ?? 'optional').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 \|\| this.hasSlottedCounter) && (\n <div class=\"label-character-count\" aria-hidden=\"true\">\n {this.hasSlottedCounter ? (\n <slot name=\"counter\"></slot>\n ) : (\n `${this.value?.length ?? 0}/${this.maxLength}`\n )}\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-readonly': this.readonly,\n 'textarea-disabled': this.disabled,\n 'textarea-invalid': this.invalid\n }}\n >\n <textarea\n {...this.nativeAttributes}\n part=\"textarea\"\n ref={el => (this.textarea = el as HTMLTextAreaElement)}\n id={this.id}\n disabled={this.disabled}\n autocomplete={this.autoComplete}\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.hasHint ? this.id + '-hint' : undefined}\n ></textarea>\n {this.invalid && (\n <cat-icon\n icon=\"$cat:input-error\"\n class=\"icon-suffix cat-text-danger\"\n size=\"l\"\n onClick={() => this.textarea.focus()}\n ></cat-icon>\n )}\n </div>\n {this.hasHint && (\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 hasHint() {\n return !!this.hint \|\| !!this.hasSlottedHint \|\| this.invalid;\n }\n\n private get invalid() {\n return this.errorMap === true \|\| !!Object.keys(this.errorMap \|\| {}).length;\n }\n\n private onInput() {\n this.value = this.textarea.value;\n this.catChange.emit(this.value);\n this.showErrorsIfTimeout();\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 (coerceBoolean(this.errorUpdate)) {\n this.showErrors();\n }\n }\n\n private showErrors() {\n this.errorMap = this.errorMapSrc;\n }\n\n private errorUpdateTimeoutId?: number;\n private showErrorsIfTimeout() {\n const errorUpdate = coerceNumber(this.errorUpdate, null);\n if (errorUpdate !== null) {\n typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n return true;\n }\n return false;\n }\n\n private showErrorsIfNoFocus() {\n const hasFocus = document.activeElement === this.hostElement \|\| document.activeElement === this.textarea;\n if (!hasFocus) {\n this.showErrors();\n }\n }\n}\n"],"version":3}
1	+ {"file":"cat-textarea.js","mappings":"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","names":["CatTextarea","autosize","i18n"],"sources":["../node_modules/.pnpm/autosize@6.0.1/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 o=e.get(t);o&&o.destroy()}function o(t){var o=e.get(t);o&&o.update()}var r=null;\"undefined\"==typeof window?((r=function(e){return e}).destroy=function(e){return e},r.update=function(e){return e}):((r=function(t,o){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 o,r=null,n=window.getComputedStyle(t),i=(o=t.value,function(){a({testForHeightReduction:\"\"===o\|\|!t.value.startsWith(o),restoreTextAlign:null}),o=t.value}),l=function(o){t.removeEventListener(\"autosize:destroy\",l),t.removeEventListener(\"autosize:update\",s),t.removeEventListener(\"input\",i),window.removeEventListener(\"resize\",s),Object.keys(o).forEach(function(e){return t.style[e]=o[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\",l),t.addEventListener(\"autosize:update\",s),t.addEventListener(\"input\",i),window.addEventListener(\"resize\",s),t.style.overflowX=\"hidden\",t.style.wordWrap=\"break-word\",e.set(t,{destroy:l,update:s}),s()}function a(e){var o,i,l=e.restoreTextAlign,s=void 0===l?null:l,d=e.testForHeightReduction,u=void 0===d\|\|d,c=n.overflowY;if(0!==t.scrollHeight&&(\"vertical\"===n.resize?t.style.resize=\"none\":\"both\"===n.resize&&(t.style.resize=\"horizontal\"),u&&(o=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],o=e[1];t.style.scrollBehavior=\"auto\",t.scrollTop=o,t.style.scrollBehavior=null})}}(t),t.style.height=\"\"),i=\"content-box\"===n.boxSizing?t.scrollHeight-(parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)):t.scrollHeight+parseFloat(n.borderTopWidth)+parseFloat(n.borderBottomWidth),\"none\"!==n.maxHeight&&i>parseFloat(n.maxHeight)?(\"hidden\"===n.overflowY&&(t.style.overflow=\"scroll\"),i=parseFloat(n.maxHeight)):\"hidden\"!==n.overflowY&&(t.style.overflow=\"hidden\"),t.style.height=i+\"px\",s&&(t.style.textAlign=s),o&&o(),r!==i&&(t.dispatchEvent(new Event(\"autosize:resized\",{bubbles:!0})),r=i),c!==n.overflow&&!s)){var v=n.textAlign;\"hidden\"===n.overflow&&(t.style.textAlign=\"start\"===v?\"end\":\"start\"),a({restoreTextAlign:v,testForHeightReduction:!0})}}function s(){a({testForHeightReduction:!0,restoreTextAlign:null})}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},r.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e});var n=r;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}\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-readonly {\n pointer-events: none;\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 box-sizing: border-box;\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: inset 0 0 0 1px rgb(var(--border-color));\n transition: box-shadow cat-token('time.transition.s') linear;\n resize: vertical;\n --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};\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 &:not(:disabled):hover {\n box-shadow:\n inset 0 0 0 1px rgb(var(--border-color)),\n 0 0 0 1px rgb(var(--border-color));\n }\n\n &:focus {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: -1px;\n }\n\n .textarea-invalid & {\n --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};\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 { coerceBoolean, coerceNumber } from '../../utils/coerce';\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 * @slot counter - Custom counter element to be displayed in the top right corner of the label.\n * @part label - The native label element.\n * @part textarea - The native textarea element.\n /\n@Component({\n tag: 'cat-textarea',\n styleUrl: 'cat-textarea.scss',\n shadow: {\n delegatesFocus: true\n }\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 \| true;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() hasSlottedCounter = false;\n\n @State() errorMap?: ErrorMap \| true;\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 Hint for form autofill feature.\n /\n @Prop() autoComplete?: string;\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;\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 change with the given delay in milliseconds or immediately on blur.\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 A unique identifier for the underlying native element that is used for\n * testing purposes. The attribute is added as `data-test` attribute and acts\n * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n /\n @Prop() testId?: string;\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter<string>;\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 componentWillLoad(): void {\n this.onErrorsChanged(this.errors, undefined, false);\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n this.hasSlottedCounter = !!this.hostElement.querySelector('[slot=\"counter\"]');\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 Clear the textarea.\n */\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n this.catChange.emit(this.value);\n }\n\n @Watch('errors')\n onErrorsChanged(newValue?: boolean \| string[] \| ErrorMap, _oldValue?: unknown, update: boolean = true) {\n if (!coerceBoolean(this.errorUpdate)) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(newValue)\n ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n : newValue \|\| undefined;\n if (update) {\n this.showErrorsIfTimeout() \|\| this.showErrorsIfNoFocus();\n }\n }\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) \|\| 0;\n return (\n <Host>\n <div\n class={{\n 'textarea-field': true,\n 'textarea-horizontal': this.horizontal\n }}\n >\n <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id} part=\"label\">\n <span class=\"label-wrapper\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n <div class=\"label-metadata\">\n {!this.required && (this.requiredMarker ?? 'optional').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 \|\| this.hasSlottedCounter) && (\n <div class=\"label-character-count\" aria-hidden=\"true\">\n {this.hasSlottedCounter ? (\n <slot name=\"counter\"></slot>\n ) : (\n `${this.value?.length ?? 0}/${this.maxLength}`\n )}\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-readonly': this.readonly,\n 'textarea-disabled': this.disabled,\n 'textarea-invalid': this.invalid\n }}\n >\n <textarea\n data-test={this.testId}\n {...this.nativeAttributes}\n part=\"textarea\"\n ref={el => (this.textarea = el as HTMLTextAreaElement)}\n id={this.id}\n disabled={this.disabled}\n autocomplete={this.autoComplete}\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.hasHint ? this.id + '-hint' : undefined}\n ></textarea>\n {this.invalid && (\n <cat-icon\n icon=\"$cat:input-error\"\n class=\"icon-suffix cat-text-danger\"\n size=\"l\"\n onClick={() => this.textarea.focus()}\n ></cat-icon>\n )}\n </div>\n {this.hasHint && (\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 hasHint() {\n return !!this.hint \|\| !!this.hasSlottedHint \|\| this.invalid;\n }\n\n private get invalid() {\n return this.errorMap === true \|\| !!Object.keys(this.errorMap \|\| {}).length;\n }\n\n private onInput() {\n this.value = this.textarea.value;\n this.catChange.emit(this.value);\n this.showErrorsIfTimeout();\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 (coerceBoolean(this.errorUpdate)) {\n this.showErrors();\n }\n }\n\n private showErrors() {\n this.errorMap = this.errorMapSrc;\n }\n\n private errorUpdateTimeoutId?: number;\n private showErrorsIfTimeout() {\n const errorUpdate = coerceNumber(this.errorUpdate, null);\n if (errorUpdate !== null) {\n typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n return true;\n }\n return false;\n }\n\n private showErrorsIfNoFocus() {\n const hasFocus = document.activeElement === this.hostElement \|\| document.activeElement === this.textarea;\n if (!hasFocus) {\n this.showErrors();\n }\n }\n}\n"],"version":3}

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

@@ -30,6 +30,7 @@ const CatToggle$1 = /*@__PURE__*/ proxyCustomElement(class CatToggle extends HTM
         this.labelLeft = false;
         this.alignment = 'top';
         this.nativeAttributes = undefined;
+        this.testId = undefined;
     }
     get id() {
         return this.identifier || this._id;
@@ -60,13 +61,13 @@ const CatToggle$1 = /*@__PURE__*/ proxyCustomElement(class CatToggle extends HTM
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: 'fd406b8ecbbbfd82d9872a01893129e570d3b9a1' }, h("label", { key: '7159c14116061024c7388909f2dff6bb07e6ba74', htmlFor: this.id, class: {
+        return (h(Host, { key: '18e3e673ff5447b34457de423f601cc1af767c00' }, h("label", { key: '22df334a9f372ee040c3deb3165f82f8fdcef0b0', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            } }, h("input", { key: '89cbd5d08dba8b652243d6bc2ff2877421536b3c', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '405bfdd36ec78874840cd3e8d03838b20115aa00', class: "toggle" }), h("span", { key: 'd9bd13f8b2281d1b1be44c552262f69282f89bab', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'be3dc6b41973cfd3c372757632768a8f73668c50', name: "label" })) || this.label)), this.hasHint && (h("div", { key: '090ad02728fa1ace69abfcfdc0b2d31f7b00150d', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '4ade49db31fd0bae7d0efb4c5169aacd9e30b94c', class: "toggle-placeholder" }), h(CatFormHint, { key: '3859a49004b782b069673289fc5e8548eded00d5', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            } }, h("input", { key: '4472899b180f286d43c5d34aa7821a29db3ffb18', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '90e342a85fd5e80ccde346aa65aaccacaf2cb919', class: "toggle" }), h("span", { key: '138b08fbf20d83cd74d18b3a7c76ecb87d4b9eb2', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: '6753f56609e0447ec0eb5b040c74bd511f6dd4de', name: "label" })) || this.label)), this.hasHint && (h("div", { key: '4d5bda25b5e53b0ba8725b41539d08fd9c3bf5f6', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '9006cf3a82f66cf15c255bba4e2720f86b63e8c8', class: "toggle-placeholder" }), h(CatFormHint, { key: '17eebfed86f71a33629ee9ed943bcd9e0fe276c5', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -103,6 +104,7 @@ const CatToggle$1 = /*@__PURE__*/ proxyCustomElement(class CatToggle extends HTM
         "labelLeft": [4, "label-left"],
         "alignment": [1],
         "nativeAttributes": [16],
+        "testId": [1, "test-id"],
         "hasSlottedLabel": [32],
         "hasSlottedHint": [32],
         "doFocus": [64],

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

	@@ -1 +1 @@
1	- {"file":"cat-toggle.js","mappings":"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","names":["CatToggle"],"sources":["src/components/cat-toggle/cat-toggle.scss?tag=cat-toggle&encapsulation=shadow","src/components/cat-toggle/cat-toggle.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$toggle-width: 2rem;\n$toggle-height: 1.25rem;\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n:host([hidden]) {\n display: none;\n}\n\nlabel {\n flex: 0 1 auto;\n display: flex;\n gap: 0.5rem;\n @include cat-body('m');\n @include cat-select(none);\n cursor: pointer;\n}\n\n.label-left {\n flex-direction: row-reverse;\n}\n\ninput {\n position: absolute;\n margin: 0;\n width: $toggle-width;\n height: $toggle-height;\n opacity: 0;\n cursor: inherit;\n}\n\n.toggle-placeholder {\n width: calc($toggle-width + 1px);\n flex-shrink: 0;\n}\n\n.toggle {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: $toggle-width;\n height: $toggle-height;\n border-radius: 10rem;\n background-color: cat-token('color.ui.border.dark');\n transition: background-color cat-token('time.transition.s') ease;\n pointer-events: none;\n\n :checked + & {\n background-color: cat-token('color.theme.primary.bg');\n }\n\n :focus-visible + & {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 1rem;\n height: 1rem;\n background: #fff;\n border-radius: 10rem;\n transform: translateX(calc(2px - 0.5rem));\n transition: transform cat-token('time.transition.s') linear;\n @include cat-elevation(2);\n\n :checked + & {\n transform: translateX(calc(-2px + 0.5rem));\n background: cat-token('color.theme.primary.fill');\n }\n }\n\n .is-disabled & {\n background-color: cat-token('color.ui.border.dark');\n }\n}\n\n:host(.cat-error) {\n .toggle {\n background-color: cat-token('color.theme.danger.bg', 0.2);\n }\n\n :checked + .toggle {\n background-color: cat-token('color.theme.danger.bg');\n\n &::after {\n background: cat-token('color.theme.danger.fill');\n }\n }\n}\n\n.label {\n flex: 1 1 auto;\n\n .is-hidden & {\n @include cat-visually-hidden;\n }\n}\n\n.is-disabled {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n}\n\n.align-center {\n align-items: center;\n}\n\n.align-end {\n align-items: flex-end;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/*\n Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n \n @slot hint - Optional hint element to be displayed with the toggle.\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 input - The native input element.\n /\n@Component({\n tag: 'cat-toggle',\n styleUrls: ['cat-toggle.scss'],\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatToggle {\n private readonly _id = `cat-toggle-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n /\n Checked state of the toggle.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Disabled state of the toggle.\n /\n @Prop() disabled = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label of the toggle that is visible.\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 The name of the input.\n /\n @Prop() name?: string;\n\n /\n Required state of the toggle.\n /\n @Prop() required = false;\n\n /\n The value of the checked toggle.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Prop() value?: any;\n\n /\n The value of the unchecked toggle.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Prop() noValue?: any;\n\n /\n The resolved value of the toggle, based on the checked state, value and noValue.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Prop({ mutable: true }) resolvedValue: any = null;\n\n /\n Optional hint text(s) to be displayed with the toggle.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the toggle.\n /\n @Prop() labelLeft = false;\n\n /\n The alignment of the checkbox.\n /\n @Prop() alignment: 'center' \| 'top' \| 'bottom' = 'top';\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 checked status of the toggle is changed.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Event() catChange!: EventEmitter<any>;\n\n /\n Emitted when the toggle received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the toggle loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad() {\n this.updateResolved();\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n }\n\n /\n Programmatically move focus to the toggle. 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 toggle. Use this method instead of\n * `input.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) \|\| 0;\n return (\n <Host>\n <label\n htmlFor={this.id}\n class={{\n 'is-hidden': this.labelHidden,\n 'is-disabled': this.disabled,\n 'label-left': this.labelLeft,\n 'align-center': this.alignment === 'center',\n 'align-end': this.alignment === 'bottom'\n }}\n >\n <input\n {...this.nativeAttributes}\n part=\"input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n class=\"form-check-input\"\n role=\"switch\"\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n />\n <span class=\"toggle\"></span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\n {this.hasHint && (\n <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n <div class=\"toggle-placeholder\"></div>\n <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n </div>\n )}\n </Host>\n );\n }\n\n private get hasHint() {\n return !!this.hint \|\| !!this.hasSlottedHint;\n }\n\n private onInput() {\n this.checked = this.input.checked;\n this.updateResolved();\n this.catChange.emit(this.resolvedValue);\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 }\n\n private updateResolved() {\n this.resolvedValue = this.checked ? (this.value ?? true) : (this.noValue ?? false);\n }\n}\n"],"version":3}
1	+ {"file":"cat-toggle.js","mappings":"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","names":["CatToggle"],"sources":["src/components/cat-toggle/cat-toggle.scss?tag=cat-toggle&encapsulation=shadow","src/components/cat-toggle/cat-toggle.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$toggle-width: 2rem;\n$toggle-height: 1.25rem;\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n:host([hidden]) {\n display: none;\n}\n\nlabel {\n flex: 0 1 auto;\n display: flex;\n gap: 0.5rem;\n @include cat-body('m');\n @include cat-select(none);\n cursor: pointer;\n}\n\n.label-left {\n flex-direction: row-reverse;\n}\n\ninput {\n position: absolute;\n margin: 0;\n width: $toggle-width;\n height: $toggle-height;\n opacity: 0;\n cursor: inherit;\n}\n\n.toggle-placeholder {\n width: calc($toggle-width + 1px);\n flex-shrink: 0;\n}\n\n.toggle {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: $toggle-width;\n height: $toggle-height;\n border-radius: 10rem;\n background-color: cat-token('color.ui.border.dark');\n transition: background-color cat-token('time.transition.s') ease;\n pointer-events: none;\n\n :checked + & {\n background-color: cat-token('color.theme.primary.bg');\n }\n\n :focus-visible + & {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 1rem;\n height: 1rem;\n background: #fff;\n border-radius: 10rem;\n transform: translateX(calc(2px - 0.5rem));\n transition: transform cat-token('time.transition.s') linear;\n @include cat-elevation(2);\n\n :checked + & {\n transform: translateX(calc(-2px + 0.5rem));\n background: cat-token('color.theme.primary.fill');\n }\n }\n\n .is-disabled & {\n background-color: cat-token('color.ui.border.dark');\n }\n}\n\n:host(.cat-error) {\n .toggle {\n background-color: cat-token('color.theme.danger.bg', 0.2);\n }\n\n :checked + .toggle {\n background-color: cat-token('color.theme.danger.bg');\n\n &::after {\n background: cat-token('color.theme.danger.fill');\n }\n }\n}\n\n.label {\n flex: 1 1 auto;\n\n .is-hidden & {\n @include cat-visually-hidden;\n }\n}\n\n.is-disabled {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n}\n\n.align-center {\n align-items: center;\n}\n\n.align-end {\n align-items: flex-end;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/*\n Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n \n @slot hint - Optional hint element to be displayed with the toggle.\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 input - The native input element.\n /\n@Component({\n tag: 'cat-toggle',\n styleUrls: ['cat-toggle.scss'],\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatToggle {\n private readonly _id = `cat-toggle-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n /\n Checked state of the toggle.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Disabled state of the toggle.\n /\n @Prop() disabled = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label of the toggle that is visible.\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 The name of the input.\n /\n @Prop() name?: string;\n\n /\n Required state of the toggle.\n /\n @Prop() required = false;\n\n /\n The value of the checked toggle.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Prop() value?: any;\n\n /\n The value of the unchecked toggle.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Prop() noValue?: any;\n\n /\n The resolved value of the toggle, based on the checked state, value and noValue.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Prop({ mutable: true }) resolvedValue: any = null;\n\n /\n Optional hint text(s) to be displayed with the toggle.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the toggle.\n /\n @Prop() labelLeft = false;\n\n /\n The alignment of the checkbox.\n /\n @Prop() alignment: 'center' \| 'top' \| 'bottom' = 'top';\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n A unique identifier for the underlying native element that is used for\n * testing purposes. The attribute is added as `data-test` attribute and acts\n * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n /\n @Prop() testId?: string;\n\n /\n Emitted when the checked status of the toggle is changed.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Event() catChange!: EventEmitter<any>;\n\n /\n Emitted when the toggle received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the toggle loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad() {\n this.updateResolved();\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n }\n\n /\n Programmatically move focus to the toggle. 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 toggle. Use this method instead of\n * `input.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) \|\| 0;\n return (\n <Host>\n <label\n htmlFor={this.id}\n class={{\n 'is-hidden': this.labelHidden,\n 'is-disabled': this.disabled,\n 'label-left': this.labelLeft,\n 'align-center': this.alignment === 'center',\n 'align-end': this.alignment === 'bottom'\n }}\n >\n <input\n data-test={this.testId}\n {...this.nativeAttributes}\n part=\"input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n class=\"form-check-input\"\n role=\"switch\"\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n />\n <span class=\"toggle\"></span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\n {this.hasHint && (\n <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n <div class=\"toggle-placeholder\"></div>\n <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n </div>\n )}\n </Host>\n );\n }\n\n private get hasHint() {\n return !!this.hint \|\| !!this.hasSlottedHint;\n }\n\n private onInput() {\n this.checked = this.input.checked;\n this.updateResolved();\n this.catChange.emit(this.resolvedValue);\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 }\n\n private updateResolved() {\n this.resolvedValue = this.checked ? (this.value ?? true) : (this.noValue ?? false);\n }\n}\n"],"version":3}