npm - @public-ui/components - Versions diffs - 4.3.0-rc.4 → 4.3.0-rc.5 - Mend

@public-ui/components 4.3.0-rc.4 → 4.3.0-rc.5

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

package/dist/collection/components/toolbar/shadow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/toolbar/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport type {\n\tClickableElement,\n\tFocusableElement,\n\tKolFocusOptions,\n\tLabelPropType,\n\tToolbarAPI,\n\tToolbarItemPropType,\n\tToolbarItemsPropType,\n\tToolbarStates,\n} from '../../schema';\nimport { validateLabel, validateToolbarItems } from '../../schema';\nimport { KeyboardKey } from '../../schema/enums';\nimport type { OrientationPropType } from '../../schema/props/orientation';\nimport { validateOrientation } from '../../schema/props/orientation';\nimport { delegateClick, setClick } from '../../utils/element-click';\nimport { delegateFocus, setFocus } from '../../utils/element-focus';\n\n@Component({\n\ttag: 'kol-toolbar',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolToolbar implements ClickableElement, FocusableElement, ToolbarAPI {\n\t@Element() private readonly host?: HTMLElement;\n\n\t@State() public state: ToolbarStates = {\n\t\t_label: '',\n\t\t_items: [],\n\t};\n\n\t@State() private currentIndex: number = 0;\n\n\tprivate indexToElement = new Map<number, HTMLKolLinkWcElement \| HTMLKolButtonWcElement>();\n\n\t/*\n\t Sets focus on the currently active toolbar item.\n\t /\n\t@Method()\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {\n\t\tconst firstEnabledItem = this.indexToElement.get(this.currentIndex);\n\t\tif (firstEnabledItem) {\n\t\t\treturn delegateFocus(this.host!, () => setFocus(firstEnabledItem, options));\n\t\t}\n\t}\n\n\t/\n\t Triggers a click on the currently active toolbar item.\n\t /\n\t@Method()\n\tpublic async click(): Promise<void> {\n\t\tconst currentItem = this.indexToElement.get(this.currentIndex);\n\t\tif (currentItem) {\n\t\t\treturn delegateClick(this.host!, async () => setClick(currentItem));\n\t\t}\n\t}\n\n\tprivate normalizeItem(item: ToolbarItemPropType): ToolbarItemPropType {\n\t\tconst { _icons, _disabled, ...rest } = item;\n\t\treturn { ...rest, _icons, _disabled };\n\t}\n\tprivate renderItem = (raw: ToolbarItemPropType, index: number): JSX.Element => {\n\t\tconst element = this.normalizeItem(raw);\n\t\tconst tabIndex = index === this.currentIndex && !element?._disabled ? 0 : -1;\n\n\t\tconst props = {\n\t\t\tkey: index,\n\t\t\tclass: 'button normal kol-toolbar__item',\n\t\t\t_tabIndex: tabIndex,\n\t\t\t_variant: 'normal',\n\t\t};\n\t\tconst catchRef = (el?: HTMLKolLinkWcElement \| HTMLKolButtonWcElement) => {\n\t\t\tif (el) this.indexToElement.set(index, el);\n\t\t};\n\t\treturn element.type === 'link' ? (\n\t\t\t<KolLinkWcTag {...props} {...element} ref={catchRef}></KolLinkWcTag>\n\t\t) : (\n\t\t\t<KolButtonWcTag {...props} {...element} ref={catchRef}></KolButtonWcTag>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div class={`kol-toolbar kol-toolbar--orientation-${this.state._orientation}`} role=\"toolbar\" aria-label={this.state._label}>\n\t\t\t\t{this.state._items.map(this.renderItem)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Defines the functional elements of toolbar to render (e.g. kol-link, kol-button).\n\t /\n\t@Prop() public _items!: ToolbarItemsPropType;\n\n\t/\n\t Defines whether the orientation of the component is horizontal or vertical.\n\t /\n\t@Prop() public _orientation?: OrientationPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_items')\n\tpublic validateItems(value?: ToolbarItemsPropType): void {\n\t\tvalidateToolbarItems(this, value);\n\t\tthis.indexToElement.clear();\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: OrientationPropType): void {\n\t\tvalidateOrientation(this, value);\n\t}\n\n\t/\n\t Retrieves the toolbar item by index if defined.\n\t * If not it use the current index of state.\n\t \n\t @returns An array of HTMLElements representing the toolbar items.\n\t /\n\tprivate getCurrentToolbarItem(index?: number): HTMLKolLinkWcElement \| HTMLKolButtonWcElement \| undefined {\n\t\treturn typeof index === 'number' ? this.indexToElement.get(index) : undefined;\n\t}\n\n\t/\n\t Sets the index of the first enabled toolbar item.\n\t /\n\tprivate setFirstEnabledItemIndex() {\n\t\tthis.currentIndex = this.state._items?.findIndex((item) => !item._disabled);\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst pressedKey = event.code as KeyboardKey;\n\t\tconst isArrowKey = [KeyboardKey.ArrowUp, KeyboardKey.ArrowDown, KeyboardKey.ArrowRight, KeyboardKey.ArrowLeft].includes(pressedKey);\n\t\tif (!isArrowKey) return;\n\t\tevent.preventDefault();\n\n\t\tconst lastItemIndex = (this._items?.length ?? 0) - 1;\n\t\tif (lastItemIndex < 0) return;\n\t\tconst currentIndex = this.currentIndex;\n\t\tlet nextIndex = currentIndex;\n\n\t\tswitch (pressedKey) {\n\t\t\tcase KeyboardKey.ArrowUp:\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tnextIndex = currentIndex > 0 ? currentIndex - 1 : lastItemIndex;\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowDown:\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tnextIndex = currentIndex < lastItemIndex ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif (currentIndex === nextIndex) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.state._items?.[nextIndex]?._disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.currentIndex = nextIndex;\n\t\tconst item = this.getCurrentToolbarItem(nextIndex);\n\t\tif (this.host) {\n\t\t\tvoid item?.focus();\n\t\t}\n\t}\n\n\t/\n\t Resets the tabIndexes of the toolbar to default.\n\t */\n\t@Listen('focusout', { capture: true })\n\tpublic handleFocusout(event: FocusEvent) {\n\t\tif (event.target === this.host) this.setFirstEnabledItemIndex();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateItems(this._items);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n}\n"]}
1	+ {"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/toolbar/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { getFeatureFlag } from 'adopted-style-sheets';\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport type {\n\tClickableElement,\n\tFocusableElement,\n\tKolFocusOptions,\n\tLabelPropType,\n\tToolbarAPI,\n\tToolbarItemPropType,\n\tToolbarItemsPropType,\n\tToolbarStates,\n} from '../../schema';\nimport { validateLabel, validateToolbarItems } from '../../schema';\nimport { KeyboardKey } from '../../schema/enums';\nimport type { OrientationPropType } from '../../schema/props/orientation';\nimport { validateOrientation } from '../../schema/props/orientation';\nimport { delegateClick, setClick } from '../../utils/element-click';\nimport { delegateFocus, setFocus } from '../../utils/element-focus';\n\n@Component({\n\ttag: 'kol-toolbar',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolToolbar implements ClickableElement, FocusableElement, ToolbarAPI {\n\t@Element() private readonly host?: HTMLElement;\n\n\t@State() public state: ToolbarStates = {\n\t\t_label: '',\n\t\t_items: [],\n\t};\n\n\t@State() private currentIndex: number = 0;\n\n\tprivate indexToElement = new Map<number, HTMLKolLinkWcElement \| HTMLKolButtonWcElement>();\n\n\t/*\n\t Sets focus on the currently active toolbar item.\n\t /\n\t@Method()\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {\n\t\tconst firstEnabledItem = this.indexToElement.get(this.currentIndex);\n\t\tif (firstEnabledItem) {\n\t\t\treturn delegateFocus(this.host!, () => setFocus(firstEnabledItem, options));\n\t\t}\n\t}\n\n\t/\n\t Triggers a click on the currently active toolbar item.\n\t /\n\t@Method()\n\tpublic async click(): Promise<void> {\n\t\tconst currentItem = this.indexToElement.get(this.currentIndex);\n\t\tif (currentItem) {\n\t\t\treturn delegateClick(this.host!, async () => setClick(currentItem));\n\t\t}\n\t}\n\n\tprivate normalizeItem(item: ToolbarItemPropType): ToolbarItemPropType {\n\t\tconst { _icons, _disabled, ...rest } = item;\n\t\treturn { ...rest, _icons, _disabled };\n\t}\n\tprivate renderItem = (raw: ToolbarItemPropType, index: number): JSX.Element => {\n\t\tconst element = this.normalizeItem(raw);\n\t\tconst tabIndex = index === this.currentIndex && !element?._disabled ? 0 : -1;\n\n\t\tconst props = {\n\t\t\tkey: index,\n\t\t\tclass: 'kol-toolbar__item',\n\t\t\t_tabIndex: tabIndex,\n\t\t\t_inline: false,\n\t\t\t_variant: getFeatureFlag('buttonVariantDefault', this.host) ?? 'normal',\n\t\t};\n\t\tconst catchRef = (el?: HTMLKolLinkWcElement \| HTMLKolButtonWcElement) => {\n\t\t\tif (el) this.indexToElement.set(index, el);\n\t\t};\n\t\treturn element.type === 'link' ? (\n\t\t\t<KolLinkWcTag {...props} {...element} ref={catchRef}></KolLinkWcTag>\n\t\t) : (\n\t\t\t<KolButtonWcTag {...props} {...element} ref={catchRef}></KolButtonWcTag>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div class={`kol-toolbar kol-toolbar--orientation-${this.state._orientation}`} role=\"toolbar\" aria-label={this.state._label}>\n\t\t\t\t{this.state._items.map(this.renderItem)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Defines the functional elements of toolbar to render (e.g. kol-link, kol-button).\n\t /\n\t@Prop() public _items!: ToolbarItemsPropType;\n\n\t/\n\t Defines whether the orientation of the component is horizontal or vertical.\n\t /\n\t@Prop() public _orientation?: OrientationPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_items')\n\tpublic validateItems(value?: ToolbarItemsPropType): void {\n\t\tvalidateToolbarItems(this, value);\n\t\tthis.indexToElement.clear();\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: OrientationPropType): void {\n\t\tvalidateOrientation(this, value);\n\t}\n\n\t/\n\t Retrieves the toolbar item by index if defined.\n\t * If not it use the current index of state.\n\t \n\t @returns An array of HTMLElements representing the toolbar items.\n\t /\n\tprivate getCurrentToolbarItem(index?: number): HTMLKolLinkWcElement \| HTMLKolButtonWcElement \| undefined {\n\t\treturn typeof index === 'number' ? this.indexToElement.get(index) : undefined;\n\t}\n\n\t/\n\t Sets the index of the first enabled toolbar item.\n\t /\n\tprivate setFirstEnabledItemIndex() {\n\t\tthis.currentIndex = this.state._items?.findIndex((item) => !item._disabled);\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst pressedKey = event.code as KeyboardKey;\n\t\tconst isArrowKey = [KeyboardKey.ArrowUp, KeyboardKey.ArrowDown, KeyboardKey.ArrowRight, KeyboardKey.ArrowLeft].includes(pressedKey);\n\t\tif (!isArrowKey) return;\n\t\tevent.preventDefault();\n\n\t\tconst lastItemIndex = (this._items?.length ?? 0) - 1;\n\t\tif (lastItemIndex < 0) return;\n\t\tconst currentIndex = this.currentIndex;\n\t\tlet nextIndex = currentIndex;\n\n\t\tswitch (pressedKey) {\n\t\t\tcase KeyboardKey.ArrowUp:\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tnextIndex = currentIndex > 0 ? currentIndex - 1 : lastItemIndex;\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowDown:\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tnextIndex = currentIndex < lastItemIndex ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif (currentIndex === nextIndex) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.state._items?.[nextIndex]?._disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.currentIndex = nextIndex;\n\t\tconst item = this.getCurrentToolbarItem(nextIndex);\n\t\tif (this.host) {\n\t\t\tvoid item?.focus();\n\t\t}\n\t}\n\n\t/\n\t Resets the tabIndexes of the toolbar to default.\n\t */\n\t@Listen('focusout', { capture: true })\n\tpublic handleFocusout(event: FocusEvent) {\n\t\tif (event.target === this.host) this.setFirstEnabledItemIndex();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateItems(this._items);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n}\n"]}

package/dist/collection/components/toolbar/style.css CHANGED Viewed

@@ -207,8 +207,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783501930981"); /* IE9*/
-  src: url("kolicons.eot?t=1783501930981#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1783501930981") format("woff2"), url("kolicons.woff?t=1783501930981") format("woff"), url("kolicons.ttf?t=1783501930981") format("truetype"), url("kolicons.svg?t=1783501930981#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1784281062679"); /* IE9*/
+  src: url("kolicons.eot?t=1784281062679#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1784281062679") format("woff2"), url("kolicons.woff?t=1784281062679") format("woff"), url("kolicons.ttf?t=1784281062679") format("truetype"), url("kolicons.svg?t=1784281062679#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -383,6 +383,7 @@
   }
   .kol-link {
     display: flex;
+    height: 100%;
     min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
     text-decoration-line: none;
@@ -406,6 +407,7 @@
   }
   .kol-button {
     display: flex;
+    height: 100%;
     min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
     text-decoration-line: none;

package/dist/collection/components/tooltip/component.js CHANGED Viewed

@@ -49,7 +49,7 @@ export class KolTooltipWc {
         (_a = this.controller) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     render() {
-        return (h(Host, { key: 'a53a016bddcefab710ae6f44221a0e4ffe44b84a', class: "kol-tooltip" }, h(TooltipFC, { key: 'edd70a17cc202deae7ecbbc9b8ba9ebf63c1db6f', label: this.controller.getRenderProp('label'), badgeText: this._badgeText, id: this.controller.getRenderProp('id'), refFloating: (el) => { var _a; return (_a = this.controller) === null || _a === void 0 ? void 0 : _a.setTooltipElementRef(el); } })));
+        return (h(Host, { key: 'f677d58b886cdb9f1aab620608155ee412e0ef7d', class: "kol-tooltip" }, h(TooltipFC, { key: 'd86d1adc81a94fbb1116532e9f2529d96362834d', label: this.controller.getRenderProp('label'), badgeText: this._badgeText, id: this.controller.getRenderProp('id'), refFloating: (el) => { var _a; return (_a = this.controller) === null || _a === void 0 ? void 0 : _a.setTooltipElementRef(el); } })));
     }
     static get is() { return "kol-tooltip-wc"; }
     static get properties() {

package/dist/collection/components/tree/component.js CHANGED Viewed

@@ -23,7 +23,7 @@ export class KolTreeWc {
         await Promise.resolve((this.cacheValid = false));
     }
     render() {
-        return (h(Host, { key: 'ee07abb3b748443010336d2d6b2cf99e6ad10d64', onSlotchange: this.handleSlotchange.bind(this) }, h("nav", { key: 'aeb88ca3da07336fa1aa164723246bd7b69da7f3', class: "kol-tree", "aria-label": this.state._label }, h("ul", { key: '108e2ede70e08f5e77ada9961b47e57fcad50a3a', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, h("slot", { key: '0b67541fbb1e2f5eab04837fe1478296256baed2' })))));
+        return (h(Host, { key: 'e959e7567723280a3d2b977fd517a8a244da4f1d', onSlotchange: this.handleSlotchange.bind(this) }, h("nav", { key: 'b52775ce12c956296121529050946f6df7ba4297', class: "kol-tree", "aria-label": this.state._label }, h("ul", { key: '009f17ecffc6cc4548c61a16592fa72d9f6b82ec', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, h("slot", { key: '4c929606aa81ed19511e29f31c002343083114b9' })))));
     }
     static isTreeItem(element) {
         return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();

package/dist/collection/components/tree/shadow.js CHANGED Viewed

@@ -11,7 +11,7 @@ export class KolTree {
     }
     async focus(options) { }
     render() {
-        return (h(KolTreeWcTag, { key: 'c3c1ea08961facbed8b660b2b5a9af5dd6662e3a', _label: this._label, ref: this.ctaRef }, h("slot", { key: '24592c12e290cbd9be0ea4825dcf651494c0ea1a' })));
+        return (h(KolTreeWcTag, { key: 'e040898cbd1832f69a365dbcbc59b269e1ac55f7', _label: this._label, ref: this.ctaRef }, h("slot", { key: '3d3213f69ce43f884b3ef31677d69473be02bed7' })));
     }
     static get is() { return "kol-tree"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tree-item/component.js CHANGED Viewed

@@ -20,12 +20,12 @@ export class KolTreeItemWc {
     }
     render() {
         const { _href, _active, _hasChildren, _open, _label } = this.state;
-        return (h(Host, { key: '033b9e4fa4869b03c27a23e26d682040f8d15029', onSlotchange: this.handleSlotchange.bind(this) }, h("li", { key: '4627c891d1bd05d9b0d4151b54e90a3efe38b37b', class: "kol-tree-item", style: {
+        return (h(Host, { key: '5dafc8516e71c4908d468b8844b0e765d1cba71a', onSlotchange: this.handleSlotchange.bind(this) }, h("li", { key: 'b050361b08edf953c60cda62bce3c716528d19ca', class: "kol-tree-item", style: {
                 '--level': `${this.level}`,
-            } }, h(KolLinkWcTag, { key: 'aef7f99136e1edd49155ca2520d0c036159cfdf2', class: clsx('kol-tree-item__link', {
+            } }, h(KolLinkWcTag, { key: '5575f3158d9adbb566f75ec7687d83f1b84a8935', class: clsx('kol-tree-item__link', {
                 'kol-tree-item__link--first-level': this.level === 0,
                 'kol-tree-item__link--active': _active,
-            }), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, h("span", { key: 'f2fc1f85b52708c6792283a59d29954b6f4622ca', class: "kol-tree-item__link-inner", slot: "expert" }, _hasChildren ? (h("span", { class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, h(IconFC, { class: "kol-tree-item__toggle-button-icon", icons: `kolicon kolicon-${_open ? 'chevron-down' : 'chevron-right'}`, label: '' }))) : (h("span", { class: "kol-tree-item__toggle-button-placeholder" })), h("span", { key: '83cdee0ee9ff9ddff20e4d1ad9714ad80c1c6eb3', class: "kol-tree-item__text" }, _label))), h("ul", { key: 'dde87b4cbbab2833af27a1530842561fd376bd63', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, h("slot", { key: '36e347147c5c8a8f733a9aa8076d05d84f08c26b' })))));
+            }), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, h("span", { key: 'f64170d2888e773e1649252efac509108c92ebe6', class: "kol-tree-item__link-inner", slot: "expert" }, _hasChildren ? (h("span", { class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, h(IconFC, { class: "kol-tree-item__toggle-button-icon", icons: `kolicon kolicon-${_open ? 'chevron-down' : 'chevron-right'}`, label: '' }))) : (h("span", { class: "kol-tree-item__toggle-button-placeholder" })), h("span", { key: '02eeae533f9c27fb1d34856ef83dc54b0472abb4', class: "kol-tree-item__text" }, _label))), h("ul", { key: 'fdfad19b37792ed8efed76b6e9b7bf977ee7d6cb', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, h("slot", { key: 'eba7b5f9a6ee173a12d67238195d5c5fd34f38b4' })))));
     }
     validateActive(value) {
         validateActive(this, value || false);

package/dist/collection/components/tree-item/shadow.js CHANGED Viewed

@@ -21,7 +21,7 @@ export class KolTreeItem {
         return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
     }
     render() {
-        return (h(KolTreeItemWcTag, { key: '85b09f7121a7deda9d342ee60a8e8bdb4fec7465', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, h("slot", { key: '87390d0ee5088434546b925b9d3381a04eeed0b9' })));
+        return (h(KolTreeItemWcTag, { key: '25b3875f49f3f7356796ff41376b5fffda1a0231', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, h("slot", { key: '00007ca55b586bdfa89bc54585c20f2c4d89ecec' })));
     }
     static get is() { return "kol-tree-item"; }
     static get encapsulation() { return "shadow"; }
@@ -143,7 +143,7 @@ export class KolTreeItem {
         return {
             "focus": {
                 "complexType": {
-                    "signature": "(options?: KolFocusOptions) => Promise<any>",
+                    "signature": "(options?: KolFocusOptions) => Promise<void | undefined>",
                     "parameters": [{
                             "name": "options",
                             "type": "KolFocusOptions | undefined",
@@ -160,7 +160,7 @@ export class KolTreeItem {
                             "id": "src/schema/index.ts::KolFocusOptions"
                         }
                     },
-                    "return": "Promise<any>"
+                    "return": "Promise<void | undefined>"
                 },
                 "docs": {
                     "text": "Focuses the link element.",

package/dist/collection/components/tree-item/style.css CHANGED Viewed

@@ -207,8 +207,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783501930981"); /* IE9*/
-  src: url("kolicons.eot?t=1783501930981#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1783501930981") format("woff2"), url("kolicons.woff?t=1783501930981") format("woff"), url("kolicons.ttf?t=1783501930981") format("truetype"), url("kolicons.svg?t=1783501930981#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1784281062679"); /* IE9*/
+  src: url("kolicons.eot?t=1784281062679#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1784281062679") format("woff2"), url("kolicons.woff?t=1784281062679") format("woff"), url("kolicons.ttf?t=1784281062679") format("truetype"), url("kolicons.svg?t=1784281062679#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

package/dist/collection/components/version/shadow.js CHANGED Viewed

@@ -13,7 +13,7 @@ export class KolVersion {
         };
     }
     render() {
-        return (h(Host, { key: '46d6c57fec1c2bb63e60341538135f5423c4f681', class: "kol-version" }, h(KolBadgeTag, { key: '8f174591a26459975f1be7c602499bd3dd586b53', _color: "#bec5c9", _icons: {
+        return (h(Host, { key: '29ddec003958afa4877b73448f335a1d4a47c3bf', class: "kol-version" }, h(KolBadgeTag, { key: '5a4dae3a9775557e3de93cbd105e37ad122cb616', _color: "#bec5c9", _icons: {
                 left: { icon: 'kolicon-version', label: this.translateVersion },
             }, _label: this.state._label })));
     }

package/dist/collection/e2e/input-character-limit.js CHANGED Viewed

@@ -18,6 +18,44 @@ const testInputCharacterLimit = (componentName) => {
                 await expect(page.getByTestId('input-counter')).toHaveText('3/10 Zeichen');
                 await expect(page.getByTestId('input-counter-aria')).toHaveText('3 von 10 Zeichen');
             });
+            test('Should refresh the counter when _max-length changes programmatically', async ({ page }) => {
+                await page.setContent(`<${componentName} _label="Input" _value="abc" _max-length="10" _has-counter></${componentName}>`);
+                await page.waitForChanges();
+                await expect(page.getByTestId('input-counter')).toHaveText('3/10 Zeichen');
+                await page.locator(componentName).evaluate((el) => {
+                    el.setAttribute('_max-length', '5');
+                });
+                await page.waitForChanges();
+                await expect(page.getByTestId('input-counter')).toHaveText('3/5 Zeichen');
+                await expect(page.getByTestId('input-counter-aria')).toHaveText('3 von 5 Zeichen');
+            });
+            test('Should re-announce the character limit message on blocked input attempts (hard)', async ({ page }) => {
+                await page.setContent(`<${componentName} _label="Input" _value="abc" _max-length="3" _has-counter></${componentName}>`);
+                await page.waitForChanges();
+                const ariaCounter = page.getByTestId('input-counter-aria');
+                await expect(ariaCounter).toHaveText('3 von 3 Zeichen Zeichenlimit erreicht!');
+                const initialContent = await ariaCounter.textContent();
+                await page.locator('input,textarea').press('a');
+                await page.waitForTimeout(1300);
+                expect(await ariaCounter.textContent()).not.toBe(initialContent);
+                await expect(ariaCounter).toHaveText('3 von 3 Zeichen Zeichenlimit erreicht!');
+            });
+            test('Should re-trigger the live region on focus', async ({ page }) => {
+                await page.setContent(`<${componentName} _label="Input" _value="abc" _max-length="3" _has-counter></${componentName}>`);
+                await page.waitForChanges();
+                const ariaCounter = page.getByTestId('input-counter-aria');
+                await expect(ariaCounter).toHaveText('3 von 3 Zeichen Zeichenlimit erreicht! ');
+            });
+            test('Should not re-trigger the live region for control keys at the limit (hard)', async ({ page }) => {
+                await page.setContent(`<${componentName} _label="Input" _value="abc" _max-length="3" _has-counter></${componentName}>`);
+                await page.waitForChanges();
+                const ariaCounter = page.getByTestId('input-counter-aria');
+                const expectedText = '3 von 3 Zeichen Zeichenlimit erreicht! ';
+                await expect(ariaCounter).toHaveText(expectedText);
+                await page.locator('input,textarea').press('ArrowLeft');
+                await page.waitForTimeout(1300);
+                await expect(ariaCounter).toHaveText(expectedText);
+            });
             test.describe('With _maxLengthBehaviour="soft"', () => {
                 test(`should show the initial remaining characters`, async ({ page }) => {
                     await page.setContent(`<${componentName} _label="Input" _max-length="10" _has-counter _max-length-behavior="soft" _value="abc"></${componentName}>`);
@@ -29,9 +67,8 @@ const testInputCharacterLimit = (componentName) => {
                     await page.setContent(`<${componentName} _label="Input" _max-length="10" _has-counter _max-length-behavior="soft" _value="abc"></${componentName}>`);
                     await page.waitForChanges();
                     await page.locator('input,textarea').fill('abcdef');
-                    await page.waitForTimeout(500);
                     await expect(page.getByTestId('input-counter')).toHaveText('Es sind noch 4 Zeichen verfügbar.');
-                    await expect(page.getByTestId('input-counter-aria')).toHaveText('Es sind noch 4 Zeichen verfügbar.');
+                    await expect(page.getByTestId('input-counter-aria')).toHaveText('Es sind noch 4 Zeichen verfügbar.', { timeout: 1500 });
                 });
                 test('should render an alternative text and modifier class when the limit has been exceeded', async ({ page }) => {
                     await page.setContent(`<${componentName} _label="Input" _max-length="10" _has-counter _max-length-behavior="soft" _value="abc"></${componentName}>`);
@@ -39,7 +76,7 @@ const testInputCharacterLimit = (componentName) => {
                     await page.locator('input,textarea').fill('a'.repeat(12));
                     await expect(page.getByTestId('input-counter')).toHaveText('Es sind 2 Zeichen zu viel.');
                     await expect(page.getByTestId('input-counter')).toHaveClass('kol-form-field__counter kol-form-field__counter--exceeded');
-                    await expect(page.getByTestId('input-counter-aria')).toHaveText('Es sind 2 Zeichen zu viel.');
+                    await expect(page.getByTestId('input-counter-aria')).toHaveText('Es sind 2 Zeichen zu viel.', { timeout: 1500 });
                 });
                 test(`should update the remaining characters in the aria-live region with a delay`, async ({ page }) => {
                     await page.setContent(`<${componentName} _label="Input" _max-length="10" _has-counter _max-length-behavior="soft" _value="abc"></${componentName}>`);
@@ -80,6 +117,16 @@ const testInputCharacterLimit = (componentName) => {
                 const hintElement = page.locator('[id*="character-limit-hint"]');
                 await expect(hintElement).not.toBeAttached();
             });
+            test('Should not render character limit hint when a counter is shown (info is conveyed by the counter)', async ({ page }) => {
+                var _a;
+                await page.setContent(`<${componentName} _label="Input" _max-length="10" _has-counter _value="abc"></${componentName}>`);
+                await page.waitForChanges();
+                const inputElement = page.locator('input,textarea');
+                const hintElement = page.locator('[id*="character-limit-hint"]');
+                await expect(hintElement).not.toBeAttached();
+                const describedBy = (_a = (await inputElement.getAttribute('aria-describedby'))) !== null && _a !== void 0 ? _a : '';
+                expect(describedBy).not.toContain('character-limit-hint');
+            });
         });
     });
 };

package/dist/collection/e2e/input-character-limit.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-character-limit.js","sourceRoot":"","sources":["../../src/e2e/input-character-limit.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\n\nconst testInputCharacterLimit = (componentName: string) => {\n\ttest.describe('character limit', () => {\n\t\ttest.describe('With _has-counter', () => {\n\t\t\ttest('Should show current value length when no limits are applied', async ({ page }) => {\n\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _value=\"abc\" _has-counter></${componentName}>`);\n\t\t\t\tawait page.waitForChanges();\n\t\t\t\tawait expect(page.getByTestId('input-counter')).toHaveText('3 Zeichen');\n\t\t\t\tawait expect(page.getByTestId('input-counter-aria')).toHaveText('3 Zeichen');\n\t\t\t});\n\n\t\t\ttest('Should show current value and max length when theres a max length and _max-length-behavior hard', async ({ page }) => {\n\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _value=\"abc\" _max-length=\"10\" _has-counter></${componentName}>`);\n\t\t\t\tawait page.waitForChanges();\n\t\t\t\tawait expect(page.getByTestId('input-counter')).toHaveText('3/10 Zeichen');\n\t\t\t\tawait expect(page.getByTestId('input-counter-aria')).toHaveText('3 von 10 Zeichen');\n\t\t\t});\n\n\t\t\ttest.describe('With _maxLengthBehaviour=\"soft\"', () => {\n\t\t\t\ttest(`should show the initial remaining characters`, async ({ page }) => {\n\t\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _max-length=\"10\" _has-counter _max-length-behavior=\"soft\" _value=\"abc\"></${componentName}>`);\n\t\t\t\t\tawait page.waitForChanges();\n\t\t\t\t\tawait expect(page.getByTestId('input-counter')).toHaveText('Es sind noch 7 Zeichen verfügbar.');\n\t\t\t\t\tawait expect(page.getByTestId('input-counter-aria')).toHaveText('Es sind noch 7 Zeichen verfügbar.');\n\t\t\t\t});\n\n\t\t\t\ttest(`should update the remaining characters when typing`, async ({ page }) => {\n\t\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _max-length=\"10\" _has-counter _max-length-behavior=\"soft\" _value=\"abc\"></${componentName}>`);\n\t\t\t\t\tawait page.waitForChanges();\n\t\t\t\t\tawait page.locator('input,textarea').fill('abcdef');\n\t\t\t\t\tawait page.waitForTimeout(500);\n\t\t\t\t\tawait expect(page.getByTestId('input-counter')).toHaveText('Es sind noch 4 Zeichen verfügbar.');\n\t\t\t\t\tawait expect(page.getByTestId('input-counter-aria')).toHaveText('Es sind noch 4 Zeichen verfügbar.');\n\t\t\t\t});\n\n\t\t\t\ttest('should render an alternative text and modifier class when the limit has been exceeded', async ({ page }) => {\n\t\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _max-length=\"10\" _has-counter _max-length-behavior=\"soft\" _value=\"abc\"></${componentName}>`);\n\t\t\t\t\tawait page.waitForChanges();\n\t\t\t\t\tawait page.locator('input,textarea').fill('a'.repeat(12));\n\t\t\t\t\tawait expect(page.getByTestId('input-counter')).toHaveText('Es sind 2 Zeichen zu viel.');\n\t\t\t\t\tawait expect(page.getByTestId('input-counter')).toHaveClass('kol-form-field__counter kol-form-field__counter--exceeded');\n\t\t\t\t\tawait expect(page.getByTestId('input-counter-aria')).toHaveText('Es sind 2 Zeichen zu viel.');\n\t\t\t\t});\n\n\t\t\t\ttest(`should update the remaining characters in the aria-live region with a delay`, async ({ page }) => {\n\t\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _max-length=\"10\" _has-counter _max-length-behavior=\"soft\" _value=\"abc\"></${componentName}>`);\n\t\t\t\t\tawait page.waitForChanges();\n\t\t\t\t\tconst ariaCounter = page.getByTestId('input-counter-aria');\n\t\t\t\t\tconst initialText = await ariaCounter.textContent();\n\t\t\t\t\tif (initialText !== 'Es sind noch 7 Zeichen verfügbar.') {\n\t\t\t\t\t\tawait expect(ariaCounter).toHaveText('Es sind noch 10 Zeichen verfügbar.');\n\t\t\t\t\t\tawait expect(ariaCounter).toHaveText('Es sind noch 7 Zeichen verfügbar.', { timeout: 1500 });\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\n\t\ttest.describe('FormFieldCharacterLimitHint', () => {\n\t\t\ttest('Should render character limit hint when maxLength is set with soft behavior', async ({ page }) => {\n\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _max-length=\"10\" _max-length-behavior=\"soft\" _value=\"abc\"></${componentName}>`);\n\t\t\t\tawait page.waitForChanges();\n\t\t\t\tconst inputElement = page.locator('input,textarea');\n\t\t\t\tconst hintElement = page.locator('[id=\"character-limit-hint\"]');\n\n\t\t\t\tawait expect(hintElement).toBeAttached();\n\t\t\t\tawait expect(hintElement).toHaveText('Es können bis zu 10 Zeichen eingegeben werden.');\n\t\t\t\tconst hintId = await hintElement.getAttribute('id');\n\t\t\t\tawait expect(inputElement).toHaveAttribute('aria-describedby', hintId!);\n\t\t\t});\n\n\t\t\ttest('Should render character limit hint when maxLength is set with hard behavior', async ({ page }) => {\n\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _max-length=\"10\" _value=\"abc\"></${componentName}>`);\n\t\t\t\tawait page.waitForChanges();\n\t\t\t\tconst inputElement = page.locator('input,textarea');\n\t\t\t\tconst hintElement = page.locator('[id=\"character-limit-hint\"]');\n\n\t\t\t\tawait expect(hintElement).toBeAttached();\n\t\t\t\tawait expect(hintElement).toHaveText('Es können bis zu 10 Zeichen eingegeben werden.');\n\t\t\t\tconst hintId = await hintElement.getAttribute('id');\n\t\t\t\tawait expect(inputElement).toHaveAttribute('aria-describedby', hintId!);\n\t\t\t});\n\n\t\t\ttest('Should not render character limit hint when no maxLength is set', async ({ page }) => {\n\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _has-counter _value=\"abc\"></${componentName}>`);\n\t\t\t\tawait page.waitForChanges();\n\t\t\t\tconst hintElement = page.locator('[id*=\"character-limit-hint\"]');\n\t\t\t\tawait expect(hintElement).not.toBeAttached();\n\t\t\t});\n\t\t});\n\t});\n};\n\nexport { testInputCharacterLimit };\n"]}
1	+ {"version":3,"file":"input-character-limit.js","sourceRoot":"","sources":["../../src/e2e/input-character-limit.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\n\nconst testInputCharacterLimit = (componentName: string) => {\n\ttest.describe('character limit', () => {\n\t\ttest.describe('With _has-counter', () => {\n\t\t\ttest('Should show current value length when no limits are applied', async ({ page }) => {\n\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _value=\"abc\" _has-counter></${componentName}>`);\n\t\t\t\tawait page.waitForChanges();\n\t\t\t\tawait expect(page.getByTestId('input-counter')).toHaveText('3 Zeichen');\n\t\t\t\tawait expect(page.getByTestId('input-counter-aria')).toHaveText('3 Zeichen');\n\t\t\t});\n\n\t\t\ttest('Should show current value and max length when theres a max length and _max-length-behavior hard', async ({ page }) => {\n\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _value=\"abc\" _max-length=\"10\" _has-counter></${componentName}>`);\n\t\t\t\tawait page.waitForChanges();\n\t\t\t\tawait expect(page.getByTestId('input-counter')).toHaveText('3/10 Zeichen');\n\t\t\t\tawait expect(page.getByTestId('input-counter-aria')).toHaveText('3 von 10 Zeichen');\n\t\t\t});\n\n\t\t\ttest('Should refresh the counter when _max-length changes programmatically', async ({ page }) => {\n\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _value=\"abc\" _max-length=\"10\" _has-counter></${componentName}>`);\n\t\t\t\tawait page.waitForChanges();\n\t\t\t\tawait expect(page.getByTestId('input-counter')).toHaveText('3/10 Zeichen');\n\n\t\t\t\t// Shortening the max length must be reflected by the counter even though the value stays unchanged.\n\t\t\t\tawait page.locator(componentName).evaluate((el) => {\n\t\t\t\t\tel.setAttribute('_max-length', '5');\n\t\t\t\t});\n\t\t\t\tawait page.waitForChanges();\n\t\t\t\tawait expect(page.getByTestId('input-counter')).toHaveText('3/5 Zeichen');\n\t\t\t\tawait expect(page.getByTestId('input-counter-aria')).toHaveText('3 von 5 Zeichen');\n\t\t\t});\n\n\t\t\ttest('Should re-announce the character limit message on blocked input attempts (hard)', async ({ page }) => {\n\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _value=\"abc\" _max-length=\"3\" _has-counter></${componentName}>`);\n\t\t\t\tawait page.waitForChanges();\n\t\t\t\tconst ariaCounter = page.getByTestId('input-counter-aria');\n\t\t\t\tawait expect(ariaCounter).toHaveText('3 von 3 Zeichen Zeichenlimit erreicht!');\n\t\t\t\tconst initialContent = await ariaCounter.textContent();\n\n\t\t\t\t// The native maxlength blocks the input, so no input event fires; the keydown listener must\n\t\t\t\t// re-trigger the live region. To force a re-announcement of the identical message, an invisible\n\t\t\t\t// NBSP is toggled so the raw text content actually changes after the 1 s debounce.\n\t\t\t\tawait page.locator('input,textarea').press('a');\n\t\t\t\tawait page.waitForTimeout(1300);\n\t\t\t\texpect(await ariaCounter.textContent()).not.toBe(initialContent);\n\t\t\t\t// The visible message itself is unchanged (whitespace, incl. the NBSP, is normalized away).\n\t\t\t\tawait expect(ariaCounter).toHaveText('3 von 3 Zeichen Zeichenlimit erreicht!');\n\t\t\t});\n\n\t\t\ttest('Should re-trigger the live region on focus', async ({ page }) => {\n\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _value=\"abc\" _max-length=\"3\" _has-counter></${componentName}>`);\n\t\t\t\tawait page.waitForChanges();\n\t\t\t\tconst ariaCounter = page.getByTestId('input-counter-aria');\n\t\t\t\tawait expect(ariaCounter).toHaveText('3 von 3 Zeichen Zeichenlimit erreicht! ');\n\t\t\t});\n\n\t\t\ttest('Should not re-trigger the live region for control keys at the limit (hard)', async ({ page }) => {\n\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _value=\"abc\" _max-length=\"3\" _has-counter></${componentName}>`);\n\t\t\t\tawait page.waitForChanges();\n\t\t\t\tconst ariaCounter = page.getByTestId('input-counter-aria');\n\t\t\t\tconst expectedText = '3 von 3 Zeichen Zeichenlimit erreicht! ';\n\t\t\t\tawait expect(ariaCounter).toHaveText(expectedText);\n\n\t\t\t\t// Control keys are no input attempts and must not re-trigger the live region. Wait past the\n\t\t\t\t// debounce window and assert the raw content did not change (no toggled NBSP).\n\t\t\t\tawait page.locator('input,textarea').press('ArrowLeft');\n\t\t\t\tawait page.waitForTimeout(1300);\n\t\t\t\tawait expect(ariaCounter).toHaveText(expectedText);\n\t\t\t});\n\n\t\t\ttest.describe('With _maxLengthBehaviour=\"soft\"', () => {\n\t\t\t\ttest(`should show the initial remaining characters`, async ({ page }) => {\n\t\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _max-length=\"10\" _has-counter _max-length-behavior=\"soft\" _value=\"abc\"></${componentName}>`);\n\t\t\t\t\tawait page.waitForChanges();\n\t\t\t\t\tawait expect(page.getByTestId('input-counter')).toHaveText('Es sind noch 7 Zeichen verfügbar.');\n\t\t\t\t\tawait expect(page.getByTestId('input-counter-aria')).toHaveText('Es sind noch 7 Zeichen verfügbar.');\n\t\t\t\t});\n\n\t\t\t\ttest(`should update the remaining characters when typing`, async ({ page }) => {\n\t\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _max-length=\"10\" _has-counter _max-length-behavior=\"soft\" _value=\"abc\"></${componentName}>`);\n\t\t\t\t\tawait page.waitForChanges();\n\t\t\t\t\tawait page.locator('input,textarea').fill('abcdef');\n\t\t\t\t\t// Visual counter updates immediately\n\t\t\t\t\tawait expect(page.getByTestId('input-counter')).toHaveText('Es sind noch 4 Zeichen verfügbar.');\n\t\t\t\t\t// Aria counter is debounced by 1 s to avoid noisy screen-reader announcements during typing\n\t\t\t\t\tawait expect(page.getByTestId('input-counter-aria')).toHaveText('Es sind noch 4 Zeichen verfügbar.', { timeout: 1500 });\n\t\t\t\t});\n\n\t\t\t\ttest('should render an alternative text and modifier class when the limit has been exceeded', async ({ page }) => {\n\t\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _max-length=\"10\" _has-counter _max-length-behavior=\"soft\" _value=\"abc\"></${componentName}>`);\n\t\t\t\t\tawait page.waitForChanges();\n\t\t\t\t\tawait page.locator('input,textarea').fill('a'.repeat(12));\n\t\t\t\t\tawait expect(page.getByTestId('input-counter')).toHaveText('Es sind 2 Zeichen zu viel.');\n\t\t\t\t\tawait expect(page.getByTestId('input-counter')).toHaveClass('kol-form-field__counter kol-form-field__counter--exceeded');\n\t\t\t\t\t// Aria counter is debounced by 1 s to avoid noisy screen-reader announcements during typing\n\t\t\t\t\tawait expect(page.getByTestId('input-counter-aria')).toHaveText('Es sind 2 Zeichen zu viel.', { timeout: 1500 });\n\t\t\t\t});\n\n\t\t\t\ttest(`should update the remaining characters in the aria-live region with a delay`, async ({ page }) => {\n\t\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _max-length=\"10\" _has-counter _max-length-behavior=\"soft\" _value=\"abc\"></${componentName}>`);\n\t\t\t\t\tawait page.waitForChanges();\n\t\t\t\t\tconst ariaCounter = page.getByTestId('input-counter-aria');\n\t\t\t\t\tconst initialText = await ariaCounter.textContent();\n\t\t\t\t\tif (initialText !== 'Es sind noch 7 Zeichen verfügbar.') {\n\t\t\t\t\t\tawait expect(ariaCounter).toHaveText('Es sind noch 10 Zeichen verfügbar.');\n\t\t\t\t\t\tawait expect(ariaCounter).toHaveText('Es sind noch 7 Zeichen verfügbar.', { timeout: 1500 });\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\n\t\ttest.describe('FormFieldCharacterLimitHint', () => {\n\t\t\ttest('Should render character limit hint when maxLength is set with soft behavior', async ({ page }) => {\n\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _max-length=\"10\" _max-length-behavior=\"soft\" _value=\"abc\"></${componentName}>`);\n\t\t\t\tawait page.waitForChanges();\n\t\t\t\tconst inputElement = page.locator('input,textarea');\n\t\t\t\tconst hintElement = page.locator('[id=\"character-limit-hint\"]');\n\n\t\t\t\tawait expect(hintElement).toBeAttached();\n\t\t\t\tawait expect(hintElement).toHaveText('Es können bis zu 10 Zeichen eingegeben werden.');\n\t\t\t\tconst hintId = await hintElement.getAttribute('id');\n\t\t\t\tawait expect(inputElement).toHaveAttribute('aria-describedby', hintId!);\n\t\t\t});\n\n\t\t\ttest('Should render character limit hint when maxLength is set with hard behavior', async ({ page }) => {\n\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _max-length=\"10\" _value=\"abc\"></${componentName}>`);\n\t\t\t\tawait page.waitForChanges();\n\t\t\t\tconst inputElement = page.locator('input,textarea');\n\t\t\t\tconst hintElement = page.locator('[id=\"character-limit-hint\"]');\n\n\t\t\t\tawait expect(hintElement).toBeAttached();\n\t\t\t\tawait expect(hintElement).toHaveText('Es können bis zu 10 Zeichen eingegeben werden.');\n\t\t\t\tconst hintId = await hintElement.getAttribute('id');\n\t\t\t\tawait expect(inputElement).toHaveAttribute('aria-describedby', hintId!);\n\t\t\t});\n\n\t\t\ttest('Should not render character limit hint when no maxLength is set', async ({ page }) => {\n\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _has-counter _value=\"abc\"></${componentName}>`);\n\t\t\t\tawait page.waitForChanges();\n\t\t\t\tconst hintElement = page.locator('[id=\"character-limit-hint\"]');\n\t\t\t\tawait expect(hintElement).not.toBeAttached();\n\t\t\t});\n\n\t\t\ttest('Should not render character limit hint when a counter is shown (info is conveyed by the counter)', async ({ page }) => {\n\t\t\t\tawait page.setContent(`<${componentName} _label=\"Input\" _max-length=\"10\" _has-counter _value=\"abc\"></${componentName}>`);\n\t\t\t\tawait page.waitForChanges();\n\t\t\t\tconst inputElement = page.locator('input,textarea');\n\t\t\t\tconst hintElement = page.locator('[id=\"character-limit-hint\"]');\n\n\t\t\t\t// The redundant hint is not rendered, and the input must not reference its (non-existent) id.\n\t\t\t\tawait expect(hintElement).not.toBeAttached();\n\t\t\t\tconst describedBy = (await inputElement.getAttribute('aria-describedby')) ?? '';\n\t\t\t\texpect(describedBy).not.toContain('character-limit-hint');\n\t\t\t});\n\t\t});\n\t});\n};\n\nexport { testInputCharacterLimit };\n"]}

package/dist/collection/functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { __rest } from "tslib";
 import { h } from "@stencil/core";
 import KolFormFieldFc from "../../functional-components/FormField";
 import { getRenderStates } from "../_helpers/getRenderStates";
-function getFormFieldProps(state) {
+function getFormFieldProps(state, counterRefs) {
     const props = {
         id: state._id,
         disabled: state._disabled,
@@ -32,18 +32,8 @@ function getFormFieldProps(state) {
     if ('_maxLength' in state) {
         props.maxLength = state._maxLength;
     }
-    if ('_currentLength' in state &&
-        typeof state._currentLength === 'number' &&
-        '_currentLengthDebounced' in state &&
-        typeof state._currentLengthDebounced === 'number') {
-        if ('_hasCounter' in state && state._hasCounter === true) {
-            props.counter = {
-                currentLength: state._currentLength,
-                currentLengthDebounced: state._currentLengthDebounced,
-                maxLength: state._maxLength,
-                maxLengthBehavior: state._maxLengthBehavior || 'hard',
-            };
-        }
+    if ('_hasCounter' in state && state._hasCounter === true) {
+        props.counter = Object.assign({ maxLength: '_maxLength' in state ? state._maxLength : undefined, maxLengthBehavior: ('_maxLengthBehavior' in state ? state._maxLengthBehavior : undefined) || 'hard' }, counterRefs);
     }
     if ('_variant' in state) {
         props.variant = state._variant;
@@ -51,11 +41,11 @@ function getFormFieldProps(state) {
     return props;
 }
 const FormFieldStateWrapper = (_a, children) => {
-    var { state } = _a, other = __rest(_a, ["state"]);
+    var { state, counterRefs } = _a, other = __rest(_a, ["state", "counterRefs"]);
     const { ariaDescribedBy: ariaDescribedByArray } = getRenderStates(state);
     const isRadioVariant = other.component === 'fieldset' || ('_options' in state && '_orientation' in state);
     const ariaDescribedBy = isRadioVariant && ariaDescribedByArray.length > 0 ? ariaDescribedByArray.join(' ') : undefined;
-    const baseProps = getFormFieldProps(state);
+    const baseProps = getFormFieldProps(state, counterRefs);
     return (h(KolFormFieldFc, Object.assign({}, baseProps, other, { ariaDescribedBy: ariaDescribedBy }), children));
 };
 export default FormFieldStateWrapper;

package/dist/collection/functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormFieldStateWrapper.js","sourceRoot":"","sources":["../../../src/functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkC,CAAC,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,cAAuC,MAAM,uCAAuC,CAAC;AAe5F,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;~~AAmB9D~~,SAAS,iBAAiB,~~CAAC~~,KAAiB;~~IAC3C~~,MAAM,KAAK,GAAmB;QAC7B,EAAE,EAAE,KAAK,CAAC,GAAG;QACb,QAAQ,EAAE,KAAK,CAAC,SAAS;QACzB,GAAG,EAAE,KAAK,CAAC,IAAmB;QAC9B,IAAI,EAAE,KAAK,CAAC,KAAK;QACjB,KAAK,EAAE,KAAK,CAAC,MAAM;QACnB,SAAS,EAAE,KAAK,CAAC,UAAU;QAC3B,OAAO,EAAE,KAAK,CAAC,QAAQ;QACvB,OAAO,EAAE,KAAK,CAAC,QAAQ;QACvB,SAAS,EAAE,CAAC,YAAY,IAAI,KAAK,IAAI,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,KAAK,IAAI,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;KACrH,CAAC;IAEF,IAAI,WAAW,IAAI,KAAK,EAAE,CAAC;QAC1B,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,CAAC;IAED,IAAI,WAAW,IAAI,KAAK,EAAE,CAAC;QAC1B,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,CAAC;IAED,IAAI,YAAY,IAAI,KAAK,EAAE,CAAC;QAC3B,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC;IACpC,CAAC;IAED,IAAI,WAAW,IAAI,KAAK,EAAE,CAAC;QAC1B,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,CAAC;IAED,IAAI,YAAY,IAAI,KAAK,EAAE,CAAC;QAC3B,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC;IACpC,CAAC;IAED,~~IACC~~,~~gBAAgB~~,IAAI,KAAK~~;QACzB~~,~~OAAO~~,KAAK,CAAC,~~cAAc~~,KAAK,~~QAAQ;QACxC~~,~~yBAAyB~~,~~IAAI,KAAK~~;~~QAClC~~,~~OAAO,~~KAAK,CAAC,~~uBAAuB~~,~~KAAK~~,~~QAAQ~~,~~EAChD~~,~~CAAC;QACF~~,IAAI,~~aAAa,IAAI,~~KAAK,~~IAAI~~,~~KAAK~~,CAAC,~~WAAW,~~KAAK,~~IAAI~~,~~EAAE~~,CAAC~~;YAC1D~~,~~KAAK~~,CAAC,~~OAAO~~,~~GAAG;gBACf~~,~~aAAa~~,EAAE,~~KAAK,~~CAAC,~~cAAc;gBACnC~~,~~sBAAsB~~,~~EAAE,~~KAAK,CAAC,~~uBAAuB;gBACrD~~,~~SAAS~~,~~EAAE,~~KAAK,CAAC,~~UAAU;gBAC3B~~,~~iBAAiB~~,~~EAAE~~,~~KAAK~~,CAAC,~~kBAAkB,~~IAAI,MAAM~~;aACrD~~,~~CAAC;QACH~~,CAAC;~~IACF~~,CAAC;IAED,IAAI,UAAU,IAAI,KAAK,EAAE,CAAC;QACzB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC;IAChC,CAAC;IAED,OAAO,KAAK,CAAC;AACd,CAAC;AAED,MAAM,qBAAqB,GAAmC,CAAC,~~EAAmB~~,EAAE,QAAQ,EAAE,EAAE;~~QAAjC~~,EAAE,KAAK,OAAY,EAAP,KAAK,~~cAAjB~~,~~SAAmB~~,CAAF;~~IAC/E~~,MAAM,EAAE,eAAe,EAAE,oBAAoB,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IACzE,MAAM,cAAc,GAAG,KAAK,CAAC,SAAS,KAAK,UAAU,IAAI,CAAC,UAAU,IAAI,KAAK,IAAI,cAAc,IAAI,KAAK,CAAC,CAAC;IAC1G,MAAM,eAAe,GAAG,cAAc,IAAI,oBAAoB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACvH,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;~~IAE3C~~,OAAO,CACN,EAAC,cAAc,oBAAK,SAAS,EAAM,KAAK,IAAE,eAAe,EAAE,eAAe,KACxE,QAAQ,CACO,CACjB,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,qBAAqB,CAAC","sourcesContent":["import { type FunctionalComponent as FC, h } from '@stencil/core';\nimport KolFormFieldFc, { type FormFieldProps } from '../../functional-components/FormField';\nimport type { TextareaStates } from '../../schema';\nimport {\n\ttype InputCheckboxStates,\n\ttype InputColorStates,\n\ttype InputEmailStates,\n\ttype InputFileStates,\n\ttype InputNumberStates,\n\ttype InputPasswordStates,\n\ttype InputRadioStates,\n\ttype InputRangeStates,\n\ttype InputTextStates,\n\ttype MsgPropType,\n\ttype SelectStates,\n} from '../../schema';\nimport { getRenderStates } from '../_helpers/getRenderStates';\n\ntype InputState =\n\t\| InputTextStates\n\t\| InputEmailStates\n\t\| InputPasswordStates\n\t\| InputNumberStates\n\t\| InputColorStates\n\t\| InputFileStates\n\t\| InputRangeStates\n\t\| InputCheckboxStates\n\t\| InputRadioStates\n\t\| SelectStates\n\t\| TextareaStates;\n\nexport type FormFieldStateWrapperProps = Partial<FormFieldProps> & {\n\tstate: InputState;\n};\n\nfunction getFormFieldProps(~~state~~: InputState): FormFieldProps {\n\tconst props: FormFieldProps = {\n\t\tid: state._id,\n\t\tdisabled: state._disabled,\n\t\tmsg: state._msg as MsgPropType,\n\t\thint: state._hint,\n\t\tlabel: state._label,\n\t\thideLabel: state._hideLabel,\n\t\thideMsg: state._hideMsg,\n\t\ttouched: state._touched,\n\t\tshowBadge: ('_accessKey' in state && Boolean(state._accessKey)) \|\| ('_shortKey' in state && Boolean(state._shortKey)),\n\t};\n\n\tif ('_required' in state) {\n\t\tprops.required = state._required;\n\t}\n\n\tif ('_readOnly' in state) {\n\t\tprops.readOnly = state._readOnly;\n\t}\n\n\tif ('_accessKey' in state) {\n\t\tprops.accessKey = state._accessKey;\n\t}\n\n\tif ('_shortKey' in state) {\n\t\tprops.shortKey = state._shortKey;\n\t}\n\n\tif ('_maxLength' in state) {\n\t\tprops.maxLength = state._maxLength;\n\t}\n\n\tif (~~\n\t\t~~'~~_currentLength' in state &&\n\t\ttypeof state._currentLength === 'number' &&\n\t\t'_currentLengthDebounced' in state &&\n\t\ttypeof state._currentLengthDebounced === 'number'\n\t) {\n\t\tif ('~~_hasCounter' in state && state._hasCounter === true) {\n\t\t\tprops.counter = {\n\t\t\~~t\tcurrentLength~~: state~~._currentLength,\n\t\t\t\tcurrentLengthDebounced:~~ state.~~_currentLengthDebounced,\n\t\t\t\tmaxLength~~: ~~state._maxLength~~,\n\t\t\t\tmaxLengthBehavior: state._maxLengthBehavior \|\| 'hard',\n\t\t\t~~};\~~n\t\t}\n\t}\n\n\tif ('_variant' in state) {\n\t\tprops.variant = state._variant;\n\t}\n\n\treturn props;\n}\n\nconst FormFieldStateWrapper: FC<FormFieldStateWrapperProps> = ({ state, ...other }, children) => {\n\tconst { ariaDescribedBy: ariaDescribedByArray } = getRenderStates(state);\n\tconst isRadioVariant = other.component === 'fieldset' \|\| ('_options' in state && '_orientation' in state);\n\tconst ariaDescribedBy = isRadioVariant && ariaDescribedByArray.length > 0 ? ariaDescribedByArray.join(' ') : undefined;\n\tconst baseProps = getFormFieldProps(state);\n\n\treturn (\n\t\t<KolFormFieldFc {...baseProps} {...other} ariaDescribedBy={ariaDescribedBy}>\n\t\t\t{children}\n\t\t</KolFormFieldFc>\n\t);\n};\n\nexport default FormFieldStateWrapper;\n"]}
1	+ {"version":3,"file":"FormFieldStateWrapper.js","sourceRoot":"","sources":["../../../src/functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type FunctionalComponent as FC, h } from '@stencil/core';\nimport KolFormFieldFc, { type FormFieldProps } from '../../functional-components/FormField';\nimport type { TextareaStates } from '../../schema';\nimport {\n\ttype InputCheckboxStates,\n\ttype InputColorStates,\n\ttype InputEmailStates,\n\ttype InputFileStates,\n\ttype InputNumberStates,\n\ttype InputPasswordStates,\n\ttype InputRadioStates,\n\ttype InputRangeStates,\n\ttype InputTextStates,\n\ttype MsgPropType,\n\ttype SelectStates,\n} from '../../schema';\nimport { getRenderStates } from '../_helpers/getRenderStates';\n\ntype InputState =\n\t\| InputTextStates\n\t\| InputEmailStates\n\t\| InputPasswordStates\n\t\| InputNumberStates\n\t\| InputColorStates\n\t\| InputFileStates\n\t\| InputRangeStates\n\t\| InputCheckboxStates\n\t\| InputRadioStates\n\t\| SelectStates\n\t\| TextareaStates;\n\nexport type FormFieldStateWrapperProps = Partial<FormFieldProps> & {\n\tstate: InputState;\n\tcounterRefs?: {\n\t\tvisualRef?: (el?: HTMLSpanElement) => void;\n\t\tariaRef?: (el?: HTMLSpanElement) => void;\n\t};\n};\n\nfunction getFormFieldProps(\n\tstate: InputState,\n\tcounterRefs?: { visualRef?: (el?: HTMLSpanElement) => void; ariaRef?: (el?: HTMLSpanElement) => void },\n): FormFieldProps {\n\tconst props: FormFieldProps = {\n\t\tid: state._id,\n\t\tdisabled: state._disabled,\n\t\tmsg: state._msg as MsgPropType,\n\t\thint: state._hint,\n\t\tlabel: state._label,\n\t\thideLabel: state._hideLabel,\n\t\thideMsg: state._hideMsg,\n\t\ttouched: state._touched,\n\t\tshowBadge: ('_accessKey' in state && Boolean(state._accessKey)) \|\| ('_shortKey' in state && Boolean(state._shortKey)),\n\t};\n\n\tif ('_required' in state) {\n\t\tprops.required = state._required;\n\t}\n\n\tif ('_readOnly' in state) {\n\t\tprops.readOnly = state._readOnly;\n\t}\n\n\tif ('_accessKey' in state) {\n\t\tprops.accessKey = state._accessKey;\n\t}\n\n\tif ('_shortKey' in state) {\n\t\tprops.shortKey = state._shortKey;\n\t}\n\n\tif ('_maxLength' in state) {\n\t\tprops.maxLength = state._maxLength;\n\t}\n\n\tif ('_hasCounter' in state && state._hasCounter === true) {\n\t\tprops.counter = {\n\t\t\tmaxLength: '_maxLength' in state ? state._maxLength : undefined,\n\t\t\tmaxLengthBehavior: ('_maxLengthBehavior' in state ? state._maxLengthBehavior : undefined) \|\| 'hard',\n\t\t\t...counterRefs,\n\t\t};\n\t}\n\n\tif ('_variant' in state) {\n\t\tprops.variant = state._variant;\n\t}\n\n\treturn props;\n}\n\nconst FormFieldStateWrapper: FC<FormFieldStateWrapperProps> = ({ state, counterRefs, ...other }, children) => {\n\tconst { ariaDescribedBy: ariaDescribedByArray } = getRenderStates(state);\n\tconst isRadioVariant = other.component === 'fieldset' \|\| ('_options' in state && '_orientation' in state);\n\tconst ariaDescribedBy = isRadioVariant && ariaDescribedByArray.length > 0 ? ariaDescribedByArray.join(' ') : undefined;\n\tconst baseProps = getFormFieldProps(state, counterRefs);\n\n\treturn (\n\t\t<KolFormFieldFc {...baseProps} {...other} ariaDescribedBy={ariaDescribedBy}>\n\t\t\t{children}\n\t\t</KolFormFieldFc>\n\t);\n};\n\nexport default FormFieldStateWrapper;\n"]}

package/dist/collection/functional-component-wrappers/_helpers/getRenderStates.js CHANGED Viewed

@@ -18,9 +18,6 @@ export const getRenderStates = (state) => {
     if (hasHint === true) {
         ariaDescribedBy.push(createRelatedUniqueId(state._id, 'hint'));
     }
-    if (state._hasCounter) {
-        ariaDescribedBy.push(createRelatedUniqueId(state._id, 'counter'));
-    }
     if (hasError === true) {
         ariaDescribedBy.push(createRelatedUniqueId(state._id, 'error'));
     }

package/dist/collection/functional-component-wrappers/_helpers/getRenderStates.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"getRenderStates.js","sourceRoot":"","sources":["../../../src/functional-component-wrappers/_helpers/getRenderStates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4D,MAAM,cAAc,CAAC;AACpG,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAS9D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAO/B,EAIC,EAAE;IACH,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC;IACvB,MAAM,WAAW,GAAG,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,YAAY,CAAC;IACtE,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;IAC7B,MAAM,UAAU,GAAG,OAAO,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAClE,MAAM,mBAAmB,GAAG,IAAI,KAAK,OAAO,IAAI,UAAU,CAAC;IAC3D,MAAM,QAAQ,GAAG,mBAAmB,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC;IAChE,MAAM,OAAO,GAAG,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAE1E,MAAM,eAAe,GAAa,EAAE,CAAC;IACrC,IAAI,UAAU,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QACnC,eAAe,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;IAC/D,CAAC;IACD,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACtB,eAAe,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;IAChE,CAAC;IAED,IAAI,~~KAAK,CAAC,WAAW,EAAE,CAAC;QACvB,eAAe,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC;IACnE,CAAC;IAED,IAAI,~~QAAQ,KAAK,IAAI,EAAE,CAAC;QACvB,eAAe,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;IACjE,CAAC;IACD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC;AAC/C,CAAC,CAAC","sourcesContent":["import { getMsgType, type MsgPropType, type Stringified, type TouchedPropType } from '../../schema';\nimport { createRelatedUniqueId } from '../../utils/dev.utils';\n\n/*\n Berechnet in Abhängigkeit des Component-State, wie die\n * aria-describedby-Attributs gesetzt werden sollen.\n \n @param state State der Component\n * @returns Render-States\n */\nexport const getRenderStates = (state: {\n\t_msg?: Stringified<MsgPropType>;\n\t_hint?: string;\n\t_id: string;\n\t_touched?: TouchedPropType;\n\t_hideMsg?: boolean;\n\t_hasCounter?: boolean;\n}): {\n\thasError: boolean;\n\thasHint: boolean;\n\tariaDescribedBy: string[];\n} => {\n\tconst msg = state._msg;\n\tconst description = typeof msg === 'string' ? msg : msg?._description;\n\tconst type = getMsgType(msg);\n\tconst hasMessage = Boolean(description && description.length > 0);\n\tconst isMessageValidError = type === 'error' && hasMessage;\n\tconst hasError = isMessageValidError && state._touched === true;\n\tconst hasHint = typeof state._hint === 'string' && state._hint.length > 0;\n\n\tconst ariaDescribedBy: string[] = [];\n\tif (hasMessage && !state._hideMsg) {\n\t\tariaDescribedBy.push(createRelatedUniqueId(state._id, 'msg'));\n\t}\n\tif (hasHint === true) {\n\t\tariaDescribedBy.push(createRelatedUniqueId(state._id, 'hint'));\n\t}\n\n\tif (~~state._hasCounter) {\n\t\tariaDescribedBy.push(createRelatedUniqueId(state._id, 'counter'));\n\t}\n\n\tif (~~hasError === true) {\n\t\tariaDescribedBy.push(createRelatedUniqueId(state._id, 'error'));\n\t}\n\treturn { hasError, hasHint, ariaDescribedBy };\n};\n"]}
1	+ {"version":3,"file":"getRenderStates.js","sourceRoot":"","sources":["../../../src/functional-component-wrappers/_helpers/getRenderStates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4D,MAAM,cAAc,CAAC;AACpG,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAS9D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAO/B,EAIC,EAAE;IACH,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC;IACvB,MAAM,WAAW,GAAG,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,YAAY,CAAC;IACtE,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;IAC7B,MAAM,UAAU,GAAG,OAAO,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAClE,MAAM,mBAAmB,GAAG,IAAI,KAAK,OAAO,IAAI,UAAU,CAAC;IAC3D,MAAM,QAAQ,GAAG,mBAAmB,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC;IAChE,MAAM,OAAO,GAAG,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAE1E,MAAM,eAAe,GAAa,EAAE,CAAC;IACrC,IAAI,UAAU,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QACnC,eAAe,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;IAC/D,CAAC;IACD,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACtB,eAAe,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;IAChE,CAAC;IAED,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;QACvB,eAAe,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;IACjE,CAAC;IACD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC;AAC/C,CAAC,CAAC","sourcesContent":["import { getMsgType, type MsgPropType, type Stringified, type TouchedPropType } from '../../schema';\nimport { createRelatedUniqueId } from '../../utils/dev.utils';\n\n/*\n Berechnet in Abhängigkeit des Component-State, wie die\n * aria-describedby-Attributs gesetzt werden sollen.\n \n @param state State der Component\n * @returns Render-States\n */\nexport const getRenderStates = (state: {\n\t_msg?: Stringified<MsgPropType>;\n\t_hint?: string;\n\t_id: string;\n\t_touched?: TouchedPropType;\n\t_hideMsg?: boolean;\n\t_hasCounter?: boolean;\n}): {\n\thasError: boolean;\n\thasHint: boolean;\n\tariaDescribedBy: string[];\n} => {\n\tconst msg = state._msg;\n\tconst description = typeof msg === 'string' ? msg : msg?._description;\n\tconst type = getMsgType(msg);\n\tconst hasMessage = Boolean(description && description.length > 0);\n\tconst isMessageValidError = type === 'error' && hasMessage;\n\tconst hasError = isMessageValidError && state._touched === true;\n\tconst hasHint = typeof state._hint === 'string' && state._hint.length > 0;\n\n\tconst ariaDescribedBy: string[] = [];\n\tif (hasMessage && !state._hideMsg) {\n\t\tariaDescribedBy.push(createRelatedUniqueId(state._id, 'msg'));\n\t}\n\tif (hasHint === true) {\n\t\tariaDescribedBy.push(createRelatedUniqueId(state._id, 'hint'));\n\t}\n\n\tif (hasError === true) {\n\t\tariaDescribedBy.push(createRelatedUniqueId(state._id, 'error'));\n\t}\n\treturn { hasError, hasHint, ariaDescribedBy };\n};\n"]}

package/dist/collection/functional-components/FormField/FormField.js CHANGED Viewed

@@ -3,14 +3,13 @@
  */
 import { __rest } from "tslib";
 import { h } from "@stencil/core";
+import { translate } from "../../i18n";
 import { BaseWebComponent } from "../../internal/functional-components/base-web-component";
 import { TooltipFC } from "../../internal/functional-components/tooltip/component";
 import { TooltipController } from "../../internal/functional-components/tooltip/controller";
-import { buildBadgeTextString, getMsgType, isMsgDefinedAndInputTouched, showExpertSlot } from "../../schema";
+import { buildBadgeTextString, classNameFromVariant, getMsgType, isMsgDefinedAndInputTouched, showExpertSlot } from "../../schema";
 import clsx from "../../utils/clsx";
 import { createRelatedUniqueId } from "../../utils/dev.utils";
-import KolFormFieldCharacterLimitHintFc from "../FormFieldCharacterLimitHint/FormFieldCharacterLimitHint";
-import KolFormFieldCounterFc from "../FormFieldCounter";
 import KolFormFieldHintFc from "../FormFieldHint/FormFieldHint";
 import KolFormFieldLabelFc from "../FormFieldLabel";
 import KolFormFieldMsgFc from "../FormFieldMsg";
@@ -85,7 +84,7 @@ const KolFormFieldFc = (props, children) => {
         ['kol-form-field--hidden-msg']: Boolean(hideMsg),
     };
     if (variant) {
-        stateCssClasses = Object.assign(Object.assign({}, stateCssClasses), { [`kol-form-field--${variant}`]: true });
+        stateCssClasses = Object.assign(Object.assign({}, stateCssClasses), { [classNameFromVariant(variant, 'form-field')]: true });
     }
     if (showMsg) {
         const msgType = getMsgType(msg);
@@ -93,7 +92,7 @@ const KolFormFieldFc = (props, children) => {
     }
     return (h(Component, Object.assign({ class: clsx('kol-form-field', stateCssClasses, classNames), "aria-describedby": ariaDescribedBy }, other), showLabel && (h(KolFormFieldLabelFc, Object.assign({}, (formFieldLabelProps || {}), { id: id, hasExpertSlot: hasExpertSlot, hideLabel: hideLabel, label: label, accessKey: accessKey, shortKey: shortKey, readOnly: readOnly, showBadge: showBadge }))), h(InputContainer, Object.assign({}, formFieldInputProps, { ref: setInputContainerRef }), children, useTooltipInsteadOfLabel && hideLabel === true && (h("div", { class: clsx('kol-form-field__tooltip', formFieldTooltipProps === null || formFieldTooltipProps === void 0 ? void 0 : formFieldTooltipProps.class) }, h(TooltipFC, { badgeText: badgeText || '', label: label, align: tooltipAlign, id: labelId, refFloating: tooltipFloatingRef !== null && tooltipFloatingRef !== void 0 ? tooltipFloatingRef : ((el) => {
             tooltipController === null || tooltipController === void 0 ? void 0 : tooltipController.setTooltipElementRef(el);
-        }) })))), counter ? h(KolFormFieldCounterFc, Object.assign({ id: id }, counter)) : null, maxLength ? h(KolFormFieldCharacterLimitHintFc, { id: id, maxLength: maxLength }) : null, showMsg && !hideMsg && h(KolFormFieldMsgFc, Object.assign({}, (formFieldMsgProps || {}), { id: id, alert: alert, msg: msg })), showHint && h(KolFormFieldHintFc, Object.assign({}, (formFieldHintProps || {}), { id: id, hint: hint })), anotherChildren));
+        }) })))), counter && !(counter.maxLengthBehavior === 'soft' && typeof counter.maxLength !== 'number') && (h("div", { class: "kol-form-field__counter" }, h("span", { "data-testid": "input-counter", "aria-hidden": "true", class: "kol-form-field__counter", ref: counter.visualRef }), h("span", { "aria-live": "polite", class: "visually-hidden", "data-testid": "input-counter-aria", id: createRelatedUniqueId(id, 'counter'), ref: counter.ariaRef }))), showMsg && !hideMsg && h(KolFormFieldMsgFc, Object.assign({}, (formFieldMsgProps || {}), { id: id, alert: alert, msg: msg })), showHint && h(KolFormFieldHintFc, Object.assign({}, (formFieldHintProps || {}), { id: id, hint: hint })), anotherChildren, typeof maxLength === 'number' && !counter && (h("span", { id: createRelatedUniqueId(id, 'character-limit-hint'), class: "visually-hidden" }, translate('kol-character-limit-hint', { placeholders: { limit: String(maxLength) } })))));
 };
 export default KolFormFieldFc;
 //# sourceMappingURL=FormField.js.map

package/dist/collection/functional-components/FormField/FormField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/functional-components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport { TooltipFC } from '../../internal/functional-components/tooltip/component';\nimport { TooltipController } from '../../internal/functional-components/tooltip/controller';\nimport type { MaxLengthBehaviorPropType, MsgPropType, Stringified, TooltipAlignPropType, VariantClassNamePropType } from '../../schema';\nimport { buildBadgeTextString, getMsgType, isMsgDefinedAndInputTouched, showExpertSlot } from '../../schema';\nimport clsx from '../../utils/clsx';\nimport { createRelatedUniqueId } from '../../utils/dev.utils';\nimport KolFormFieldCharacterLimitHintFc from '../FormFieldCharacterLimitHint/FormFieldCharacterLimitHint';\nimport KolFormFieldCounterFc from '../FormFieldCounter';\nimport KolFormFieldHintFc from '../FormFieldHint/FormFieldHint';\nimport KolFormFieldLabelFc from '../FormFieldLabel';\nimport KolFormFieldMsgFc from '../FormFieldMsg';\n\nconst formFieldTooltipControllerById = new Map<string, TooltipController>();\n\nconst getFormFieldTooltipController = (id: string): TooltipController => {\n\tconst tooltipController = formFieldTooltipControllerById.get(id);\n\tif (tooltipController) {\n\t\treturn tooltipController;\n\t}\n\n\tconst nextTooltipController = new TooltipController(BaseWebComponent.stateLess);\n\tnextTooltipController.componentWillLoad({ label: '' });\n\tformFieldTooltipControllerById.set(id, nextTooltipController);\n\treturn nextTooltipController;\n};\n\nconst destroyFormFieldTooltipController = (id: string): void => {\n\tconst tooltipController = formFieldTooltipControllerById.get(id);\n\tif (tooltipController) {\n\t\ttooltipController.destroy();\n\t\tformFieldTooltipControllerById.delete(id);\n\t}\n};\n\nfunction getModifierClassNameByMsgType(msg?: { type?: string }): string {\n\tif (msg?.type) {\n\t\treturn (\n\t\t\t{\n\t\t\t\tdefault: 'msg-type-default',\n\t\t\t\tinfo: 'msg-type-info',\n\t\t\t\tsuccess: 'msg-type-success',\n\t\t\t\twarning: 'msg-type-warning',\n\t\t\t\terror: 'msg-type-error',\n\t\t\t}[msg?.type] \|\| ''\n\t\t);\n\t}\n\n\treturn '';\n}\n\nexport type FormFieldProps = JSXBase.HTMLAttributes<HTMLElement> & {\n\tcomponent?: 'div' \| 'fieldset';\n\tid: string;\n\talert?: boolean;\n\tdisabled?: boolean;\n\tmsg?: Stringified<MsgPropType>;\n\thint?: string;\n\tlabel: string;\n\thideLabel?: boolean;\n\thideMsg?: boolean;\n\taccessKey?: string;\n\tshortKey?: string;\n\tcounter?: { currentLength: number; currentLengthDebounced: number; maxLengthBehavior: MaxLengthBehaviorPropType; maxLength?: number; id?: string };\n\treadOnly?: boolean;\n\ttouched?: boolean;\n\trequired?: boolean;\n\trenderNoLabel?: boolean;\n\trenderNoTooltip?: boolean;\n\trenderNoHint?: boolean;\n\tanotherChildren?: JSX.Element \| JSX.Element[];\n\tmaxLength?: number;\n\tshowBadge?: boolean;\n\ttooltipAlign?: TooltipAlignPropType;\n\ttooltipFloatingRef?: (el?: HTMLDivElement) => void;\n\ttooltipArrowRef?: (el?: HTMLDivElement) => void;\n\tvariant?: VariantClassNamePropType;\n\n\tformFieldLabelProps?: JSXBase.HTMLAttributes<Omit<HTMLLabelElement \| HTMLLegendElement, 'id' \| 'hidden' \| 'htmlFor'>> & { component?: 'label' \| 'legend' };\n\tformFieldHintProps?: JSXBase.HTMLAttributes<HTMLElement>;\n\tformFieldTooltipProps?: Pick<JSXBase.HTMLAttributes<HTMLElement>, 'class'>;\n\tformFieldMsgProps?: JSXBase.HTMLAttributes<HTMLDivElement>;\n\tformFieldInputProps?: JSXBase.HTMLAttributes<HTMLDivElement>;\n};\n\nconst InputContainer: FC<JSXBase.HTMLAttributes<HTMLDivElement>> = ({ class: classNames, ...other }, children) => {\n\treturn (\n\t\t<div class={clsx('kol-form-field__input', classNames)} {...other}>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nconst KolFormFieldFc: FC<FormFieldProps> = (props, children) => {\n\tconst {\n\t\tcomponent: Component = 'div',\n\t\trenderNoLabel,\n\t\trenderNoTooltip,\n\t\trenderNoHint,\n\t\tanotherChildren,\n\t\tid,\n\t\trequired,\n\t\talert,\n\t\tdisabled,\n\t\tclass: classNames,\n\t\tmsg,\n\t\thideMsg,\n\t\thideLabel,\n\t\tlabel,\n\t\thint,\n\t\taccessKey,\n\t\tshortKey,\n\t\tcounter,\n\t\treadOnly,\n\t\ttouched,\n\t\tmaxLength,\n\t\tariaDescribedBy,\n\t\tshowBadge,\n\t\ttooltipAlign,\n\t\ttooltipFloatingRef,\n\t\tvariant,\n\t\tformFieldLabelProps,\n\t\tformFieldHintProps,\n\t\tformFieldTooltipProps,\n\t\tformFieldMsgProps,\n\t\tformFieldInputProps,\n\t\t...other\n\t} = props;\n\n\tconst showLabel = !renderNoLabel;\n\tconst showHint = !renderNoHint;\n\tconst showTooltip = !renderNoTooltip;\n\tconst hasExpertSlot = showExpertSlot(label);\n\tconst showMsg = isMsgDefinedAndInputTouched(msg, touched);\n\tconst badgeText = buildBadgeTextString(accessKey, shortKey);\n\tconst useTooltipInsteadOfLabel = showTooltip && !hasExpertSlot && hideLabel;\n\tconst labelId = createRelatedUniqueId(id, 'label');\n\tconst tooltipController = useTooltipInsteadOfLabel ? getFormFieldTooltipController(id) : undefined;\n\n\tif (tooltipController) {\n\t\ttooltipController.watchAlign(tooltipAlign);\n\t\ttooltipController.watchBadgeText(badgeText \|\| '');\n\t\ttooltipController.watchId(labelId);\n\t\ttooltipController.watchLabel(label);\n\t} else {\n\t\tdestroyFormFieldTooltipController(id);\n\t}\n\n\tconst forwardedInputRef = formFieldInputProps?.ref as ((el?: HTMLDivElement) => void) \| undefined;\n\tconst setInputContainerRef = (el?: HTMLDivElement): void => {\n\t\tforwardedInputRef?.(el);\n\t\tif (tooltipController && el) {\n\t\t\ttooltipController.initContext(el);\n\t\t\ttooltipController.syncListeners(undefined, el, true);\n\t\t}\n\t};\n\n\tlet stateCssClasses = {\n\t\t['kol-form-field--disabled']: Boolean(disabled),\n\t\t['kol-form-field--required']: Boolean(required),\n\t\t['kol-form-field--touched']: Boolean(touched),\n\t\t['kol-form-field--hide-label']: Boolean(hideLabel),\n\t\t['kol-form-field--read-only']: Boolean(readOnly),\n\t\t['kol-form-field--hidden-msg']: Boolean(hideMsg),\n\t};\n\n\tif (variant) {\n\t\tstateCssClasses = {\n\t\t\t...stateCssClasses,\n\t\t\t[`kol-form-field--${variant}`]: true,\n\t\t};\n\t}\n\n\tif (showMsg) {\n\t\tconst msgType = getMsgType(msg);\n\n\t\tstateCssClasses = {\n\t\t\t...stateCssClasses,\n\t\t\t[`kol-form-field--${msgType}`]: true,\n\t\t\t[`kol-form-field--${getModifierClassNameByMsgType({ type: msgType })}`]: true,\n\t\t};\n\t}\n\n\treturn (\n\t\t<Component class={clsx('kol-form-field', stateCssClasses, classNames)} aria-describedby={ariaDescribedBy} {...other}>\n\t\t\t{showLabel && (\n\t\t\t\t<KolFormFieldLabelFc\n\t\t\t\t\t{...(formFieldLabelProps \|\| {})}\n\t\t\t\t\tid={id}\n\t\t\t\t\thasExpertSlot={hasExpertSlot}\n\t\t\t\t\thideLabel={hideLabel}\n\t\t\t\t\tlabel={label}\n\t\t\t\t\taccessKey={accessKey}\n\t\t\t\t\tshortKey={shortKey}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\tshowBadge={showBadge}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<InputContainer {...formFieldInputProps} ref={setInputContainerRef}>\n\t\t\t\t{children}\n\t\t\t\t{useTooltipInsteadOfLabel && hideLabel === true && (\n\t\t\t\t\t<div class={clsx('kol-form-field__tooltip', formFieldTooltipProps?.class)}>\n\t\t\t\t\t\t<TooltipFC\n\t\t\t\t\t\t\tbadgeText={badgeText \|\| ''}\n\t\t\t\t\t\t\tlabel={label}\n\t\t\t\t\t\t\talign={tooltipAlign}\n\t\t\t\t\t\t\tid={labelId}\n\t\t\t\t\t\t\trefFloating={\n\t\t\t\t\t\t\t\ttooltipFloatingRef ??\n\t\t\t\t\t\t\t\t((el?: HTMLDivElement) => {\n\t\t\t\t\t\t\t\t\ttooltipController?.setTooltipElementRef(el);\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</InputContainer>\n\t\t\t{counter ? <KolFormFieldCounterFc id={id} {...counter} /> : null}\n\t\t\t{maxLength ? <KolFormFieldCharacterLimitHintFc id={id} maxLength={maxLength} /> : null}\n\t\t\t{showMsg && !hideMsg && <KolFormFieldMsgFc {...(formFieldMsgProps \|\| {})} id={id} alert={alert} msg={msg} />}\n\t\t\t{showHint && <KolFormFieldHintFc {...(formFieldHintProps \|\| {})} id={id} hint={hint} />}\n\t\t\t{anotherChildren}\n\t\t</Component>\n\t);\n};\n\nexport default KolFormFieldFc;\n"]}
1	+ {"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/functional-components/FormField/FormField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,CAAC,EAAkC,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yDAAyD,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,wDAAwD,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAE5F,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,UAAU,EAAE,2BAA2B,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnI,OAAO,IAAI,MAAM,kBAAkB,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,kBAAkB,MAAM,gCAAgC,CAAC;AAChE,OAAO,mBAAmB,MAAM,mBAAmB,CAAC;AACpD,OAAO,iBAAiB,MAAM,iBAAiB,CAAC;AAEhD,MAAM,8BAA8B,GAAG,IAAI,GAAG,EAA6B,CAAC;AAE5E,MAAM,6BAA6B,GAAG,CAAC,EAAU,EAAqB,EAAE;IACvE,MAAM,iBAAiB,GAAG,8BAA8B,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IACjE,IAAI,iBAAiB,EAAE,CAAC;QACvB,OAAO,iBAAiB,CAAC;IAC1B,CAAC;IAED,MAAM,qBAAqB,GAAG,IAAI,iBAAiB,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAChF,qBAAqB,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACvD,8BAA8B,CAAC,GAAG,CAAC,EAAE,EAAE,qBAAqB,CAAC,CAAC;IAC9D,OAAO,qBAAqB,CAAC;AAC9B,CAAC,CAAC;AAEF,MAAM,iCAAiC,GAAG,CAAC,EAAU,EAAQ,EAAE;IAC9D,MAAM,iBAAiB,GAAG,8BAA8B,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IACjE,IAAI,iBAAiB,EAAE,CAAC;QACvB,iBAAiB,CAAC,OAAO,EAAE,CAAC;QAC5B,8BAA8B,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC3C,CAAC;AACF,CAAC,CAAC;AAEF,SAAS,6BAA6B,CAAC,GAAuB;IAC7D,IAAI,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,EAAE,CAAC;QACf,OAAO,CACN;YACC,OAAO,EAAE,kBAAkB;YAC3B,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,kBAAkB;YAC3B,OAAO,EAAE,kBAAkB;YAC3B,KAAK,EAAE,gBAAgB;SACvB,CAAC,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,CAAC,IAAI,EAAE,CAClB,CAAC;IACH,CAAC;IAED,OAAO,EAAE,CAAC;AACX,CAAC;AAyCD,MAAM,cAAc,GAA+C,CAAC,EAA+B,EAAE,QAAQ,EAAE,EAAE;QAA7C,EAAE,KAAK,EAAE,UAAU,OAAY,EAAP,KAAK,cAA7B,SAA+B,CAAF;IAChG,OAAO,CACN,yBAAK,KAAK,EAAE,IAAI,CAAC,uBAAuB,EAAE,UAAU,CAAC,IAAM,KAAK,GAC9D,QAAQ,CACJ,CACN,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,cAAc,GAAuB,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;IAC9D,MAAM,EACL,SAAS,EAAE,SAAS,GAAG,KAAK,EAC5B,aAAa,EACb,eAAe,EACf,YAAY,EACZ,eAAe,EACf,EAAE,EACF,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,KAAK,EAAE,UAAU,EACjB,GAAG,EACH,OAAO,EACP,SAAS,EACT,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,EACT,eAAe,EACf,SAAS,EACT,YAAY,EACZ,kBAAkB,EAClB,OAAO,EACP,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,EACrB,iBAAiB,EACjB,mBAAmB,KAEhB,KAAK,EADL,KAAK,UACL,KAAK,EAjCH,+bAiCL,CAAQ,CAAC;IAEV,MAAM,SAAS,GAAG,CAAC,aAAa,CAAC;IACjC,MAAM,QAAQ,GAAG,CAAC,YAAY,CAAC;IAC/B,MAAM,WAAW,GAAG,CAAC,eAAe,CAAC;IACrC,MAAM,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,2BAA2B,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,oBAAoB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAC5D,MAAM,wBAAwB,GAAG,WAAW,IAAI,CAAC,aAAa,IAAI,SAAS,CAAC;IAC5E,MAAM,OAAO,GAAG,qBAAqB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IACnD,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,CAAC,CAAC,6BAA6B,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnG,IAAI,iBAAiB,EAAE,CAAC;QACvB,iBAAiB,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;QAC3C,iBAAiB,CAAC,cAAc,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC;QAClD,iBAAiB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACnC,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;SAAM,CAAC;QACP,iCAAiC,CAAC,EAAE,CAAC,CAAC;IACvC,CAAC;IAED,MAAM,iBAAiB,GAAG,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,GAAkD,CAAC;IAClG,MAAM,oBAAoB,GAAG,CAAC,EAAmB,EAAQ,EAAE;QAC1D,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,EAAE,CAAC,CAAC;QACxB,IAAI,iBAAiB,IAAI,EAAE,EAAE,CAAC;YAC7B,iBAAiB,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YAClC,iBAAiB,CAAC,aAAa,CAAC,SAAS,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC;QACtD,CAAC;IACF,CAAC,CAAC;IAEF,IAAI,eAAe,GAAG;QACrB,CAAC,0BAA0B,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC;QAC/C,CAAC,0BAA0B,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC;QAC/C,CAAC,yBAAyB,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;QAC7C,CAAC,4BAA4B,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC;QAClD,CAAC,2BAA2B,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC;QAChD,CAAC,4BAA4B,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;KAChD,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACb,eAAe,mCACX,eAAe,KAClB,CAAC,oBAAoB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,EAAE,IAAI,GACnD,CAAC;IACH,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACb,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;QAEhC,eAAe,mCACX,eAAe,KAClB,CAAC,mBAAmB,OAAO,EAAE,CAAC,EAAE,IAAI,EACpC,CAAC,mBAAmB,6BAA6B,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,GAC7E,CAAC;IACH,CAAC;IAED,OAAO,CACN,EAAC,SAAS,kBAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,eAAe,EAAE,UAAU,CAAC,sBAAoB,eAAe,IAAM,KAAK;QACjH,SAAS,IAAI,CACb,EAAC,mBAAmB,oBACf,CAAC,mBAAmB,IAAI,EAAE,CAAC,IAC/B,EAAE,EAAE,EAAE,EACN,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,IACnB,CACF;QACD,EAAC,cAAc,oBAAK,mBAAmB,IAAE,GAAG,EAAE,oBAAoB;YAChE,QAAQ;YACR,wBAAwB,IAAI,SAAS,KAAK,IAAI,IAAI,CAClD,WAAK,KAAK,EAAE,IAAI,CAAC,yBAAyB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,KAAK,CAAC;gBACxE,EAAC,SAAS,IACT,SAAS,EAAE,SAAS,IAAI,EAAE,EAC1B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,YAAY,EACnB,EAAE,EAAE,OAAO,EACX,WAAW,EACV,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAClB,CAAC,CAAC,EAAmB,EAAE,EAAE;wBACxB,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,oBAAoB,CAAC,EAAE,CAAC,CAAC;oBAC7C,CAAC,CAAC,GAEF,CACG,CACN,CACe;QAChB,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,iBAAiB,KAAK,MAAM,IAAI,OAAO,OAAO,CAAC,SAAS,KAAK,QAAQ,CAAC,IAAI,CAC/F,WAAK,KAAK,EAAC,yBAAyB;YACnC,2BAAkB,eAAe,iBAAa,MAAM,EAAC,KAAK,EAAC,yBAAyB,EAAC,GAAG,EAAE,OAAO,CAAC,SAAS,GAAI;YAC/G,yBAAgB,QAAQ,EAAC,KAAK,EAAC,iBAAiB,iBAAa,oBAAoB,EAAC,EAAE,EAAE,qBAAqB,CAAC,EAAE,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,OAAO,GAAI,CAC/I,CACN;QACA,OAAO,IAAI,CAAC,OAAO,IAAI,EAAC,iBAAiB,oBAAK,CAAC,iBAAiB,IAAI,EAAE,CAAC,IAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI;QAC3G,QAAQ,IAAI,EAAC,kBAAkB,oBAAK,CAAC,kBAAkB,IAAI,EAAE,CAAC,IAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,IAAI;QACtF,eAAe;QACf,OAAO,SAAS,KAAK,QAAQ,IAAI,CAAC,OAAO,IAAI,CAI7C,YAAM,EAAE,EAAE,qBAAqB,CAAC,EAAE,EAAE,sBAAsB,CAAC,EAAE,KAAK,EAAC,iBAAiB,IAClF,SAAS,CAAC,0BAA0B,EAAE,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAChF,CACP,CACU,CACZ,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport { translate } from '../../i18n';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport { TooltipFC } from '../../internal/functional-components/tooltip/component';\nimport { TooltipController } from '../../internal/functional-components/tooltip/controller';\nimport type { MaxLengthBehaviorPropType, MsgPropType, Stringified, TooltipAlignPropType, VariantClassNamePropType } from '../../schema';\nimport { buildBadgeTextString, classNameFromVariant, getMsgType, isMsgDefinedAndInputTouched, showExpertSlot } from '../../schema';\nimport clsx from '../../utils/clsx';\nimport { createRelatedUniqueId } from '../../utils/dev.utils';\nimport KolFormFieldHintFc from '../FormFieldHint/FormFieldHint';\nimport KolFormFieldLabelFc from '../FormFieldLabel';\nimport KolFormFieldMsgFc from '../FormFieldMsg';\n\nconst formFieldTooltipControllerById = new Map<string, TooltipController>();\n\nconst getFormFieldTooltipController = (id: string): TooltipController => {\n\tconst tooltipController = formFieldTooltipControllerById.get(id);\n\tif (tooltipController) {\n\t\treturn tooltipController;\n\t}\n\n\tconst nextTooltipController = new TooltipController(BaseWebComponent.stateLess);\n\tnextTooltipController.componentWillLoad({ label: '' });\n\tformFieldTooltipControllerById.set(id, nextTooltipController);\n\treturn nextTooltipController;\n};\n\nconst destroyFormFieldTooltipController = (id: string): void => {\n\tconst tooltipController = formFieldTooltipControllerById.get(id);\n\tif (tooltipController) {\n\t\ttooltipController.destroy();\n\t\tformFieldTooltipControllerById.delete(id);\n\t}\n};\n\nfunction getModifierClassNameByMsgType(msg?: { type?: string }): string {\n\tif (msg?.type) {\n\t\treturn (\n\t\t\t{\n\t\t\t\tdefault: 'msg-type-default',\n\t\t\t\tinfo: 'msg-type-info',\n\t\t\t\tsuccess: 'msg-type-success',\n\t\t\t\twarning: 'msg-type-warning',\n\t\t\t\terror: 'msg-type-error',\n\t\t\t}[msg?.type] \|\| ''\n\t\t);\n\t}\n\n\treturn '';\n}\n\nexport type FormFieldProps = JSXBase.HTMLAttributes<HTMLElement> & {\n\tcomponent?: 'div' \| 'fieldset';\n\tid: string;\n\talert?: boolean;\n\tdisabled?: boolean;\n\tmsg?: Stringified<MsgPropType>;\n\thint?: string;\n\tlabel: string;\n\thideLabel?: boolean;\n\thideMsg?: boolean;\n\taccessKey?: string;\n\tshortKey?: string;\n\tcounter?: {\n\t\tmaxLengthBehavior: MaxLengthBehaviorPropType;\n\t\tmaxLength?: number;\n\t\tvisualRef?: (el?: HTMLSpanElement) => void;\n\t\tariaRef?: (el?: HTMLSpanElement) => void;\n\t};\n\treadOnly?: boolean;\n\ttouched?: boolean;\n\trequired?: boolean;\n\trenderNoLabel?: boolean;\n\trenderNoTooltip?: boolean;\n\trenderNoHint?: boolean;\n\tanotherChildren?: JSX.Element \| JSX.Element[];\n\tmaxLength?: number;\n\tshowBadge?: boolean;\n\ttooltipAlign?: TooltipAlignPropType;\n\ttooltipFloatingRef?: (el?: HTMLDivElement) => void;\n\ttooltipArrowRef?: (el?: HTMLDivElement) => void;\n\tvariant?: VariantClassNamePropType;\n\n\tformFieldLabelProps?: JSXBase.HTMLAttributes<Omit<HTMLLabelElement \| HTMLLegendElement, 'id' \| 'hidden' \| 'htmlFor'>> & { component?: 'label' \| 'legend' };\n\tformFieldHintProps?: JSXBase.HTMLAttributes<HTMLElement>;\n\tformFieldTooltipProps?: Pick<JSXBase.HTMLAttributes<HTMLElement>, 'class'>;\n\tformFieldMsgProps?: JSXBase.HTMLAttributes<HTMLDivElement>;\n\tformFieldInputProps?: JSXBase.HTMLAttributes<HTMLDivElement>;\n};\n\nconst InputContainer: FC<JSXBase.HTMLAttributes<HTMLDivElement>> = ({ class: classNames, ...other }, children) => {\n\treturn (\n\t\t<div class={clsx('kol-form-field__input', classNames)} {...other}>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nconst KolFormFieldFc: FC<FormFieldProps> = (props, children) => {\n\tconst {\n\t\tcomponent: Component = 'div',\n\t\trenderNoLabel,\n\t\trenderNoTooltip,\n\t\trenderNoHint,\n\t\tanotherChildren,\n\t\tid,\n\t\trequired,\n\t\talert,\n\t\tdisabled,\n\t\tclass: classNames,\n\t\tmsg,\n\t\thideMsg,\n\t\thideLabel,\n\t\tlabel,\n\t\thint,\n\t\taccessKey,\n\t\tshortKey,\n\t\tcounter,\n\t\treadOnly,\n\t\ttouched,\n\t\tmaxLength,\n\t\tariaDescribedBy,\n\t\tshowBadge,\n\t\ttooltipAlign,\n\t\ttooltipFloatingRef,\n\t\tvariant,\n\t\tformFieldLabelProps,\n\t\tformFieldHintProps,\n\t\tformFieldTooltipProps,\n\t\tformFieldMsgProps,\n\t\tformFieldInputProps,\n\t\t...other\n\t} = props;\n\n\tconst showLabel = !renderNoLabel;\n\tconst showHint = !renderNoHint;\n\tconst showTooltip = !renderNoTooltip;\n\tconst hasExpertSlot = showExpertSlot(label);\n\tconst showMsg = isMsgDefinedAndInputTouched(msg, touched);\n\tconst badgeText = buildBadgeTextString(accessKey, shortKey);\n\tconst useTooltipInsteadOfLabel = showTooltip && !hasExpertSlot && hideLabel;\n\tconst labelId = createRelatedUniqueId(id, 'label');\n\tconst tooltipController = useTooltipInsteadOfLabel ? getFormFieldTooltipController(id) : undefined;\n\n\tif (tooltipController) {\n\t\ttooltipController.watchAlign(tooltipAlign);\n\t\ttooltipController.watchBadgeText(badgeText \|\| '');\n\t\ttooltipController.watchId(labelId);\n\t\ttooltipController.watchLabel(label);\n\t} else {\n\t\tdestroyFormFieldTooltipController(id);\n\t}\n\n\tconst forwardedInputRef = formFieldInputProps?.ref as ((el?: HTMLDivElement) => void) \| undefined;\n\tconst setInputContainerRef = (el?: HTMLDivElement): void => {\n\t\tforwardedInputRef?.(el);\n\t\tif (tooltipController && el) {\n\t\t\ttooltipController.initContext(el);\n\t\t\ttooltipController.syncListeners(undefined, el, true);\n\t\t}\n\t};\n\n\tlet stateCssClasses = {\n\t\t['kol-form-field--disabled']: Boolean(disabled),\n\t\t['kol-form-field--required']: Boolean(required),\n\t\t['kol-form-field--touched']: Boolean(touched),\n\t\t['kol-form-field--hide-label']: Boolean(hideLabel),\n\t\t['kol-form-field--read-only']: Boolean(readOnly),\n\t\t['kol-form-field--hidden-msg']: Boolean(hideMsg),\n\t};\n\n\tif (variant) {\n\t\tstateCssClasses = {\n\t\t\t...stateCssClasses,\n\t\t\t[classNameFromVariant(variant, 'form-field')]: true,\n\t\t};\n\t}\n\n\tif (showMsg) {\n\t\tconst msgType = getMsgType(msg);\n\n\t\tstateCssClasses = {\n\t\t\t...stateCssClasses,\n\t\t\t[`kol-form-field--${msgType}`]: true,\n\t\t\t[`kol-form-field--${getModifierClassNameByMsgType({ type: msgType })}`]: true,\n\t\t};\n\t}\n\n\treturn (\n\t\t<Component class={clsx('kol-form-field', stateCssClasses, classNames)} aria-describedby={ariaDescribedBy} {...other}>\n\t\t\t{showLabel && (\n\t\t\t\t<KolFormFieldLabelFc\n\t\t\t\t\t{...(formFieldLabelProps \|\| {})}\n\t\t\t\t\tid={id}\n\t\t\t\t\thasExpertSlot={hasExpertSlot}\n\t\t\t\t\thideLabel={hideLabel}\n\t\t\t\t\tlabel={label}\n\t\t\t\t\taccessKey={accessKey}\n\t\t\t\t\tshortKey={shortKey}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\tshowBadge={showBadge}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<InputContainer {...formFieldInputProps} ref={setInputContainerRef}>\n\t\t\t\t{children}\n\t\t\t\t{useTooltipInsteadOfLabel && hideLabel === true && (\n\t\t\t\t\t<div class={clsx('kol-form-field__tooltip', formFieldTooltipProps?.class)}>\n\t\t\t\t\t\t<TooltipFC\n\t\t\t\t\t\t\tbadgeText={badgeText \|\| ''}\n\t\t\t\t\t\t\tlabel={label}\n\t\t\t\t\t\t\talign={tooltipAlign}\n\t\t\t\t\t\t\tid={labelId}\n\t\t\t\t\t\t\trefFloating={\n\t\t\t\t\t\t\t\ttooltipFloatingRef ??\n\t\t\t\t\t\t\t\t((el?: HTMLDivElement) => {\n\t\t\t\t\t\t\t\t\ttooltipController?.setTooltipElementRef(el);\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</InputContainer>\n\t\t\t{counter && !(counter.maxLengthBehavior === 'soft' && typeof counter.maxLength !== 'number') && (\n\t\t\t\t<div class=\"kol-form-field__counter\">\n\t\t\t\t\t<span data-testid=\"input-counter\" aria-hidden=\"true\" class=\"kol-form-field__counter\" ref={counter.visualRef} />\n\t\t\t\t\t<span aria-live=\"polite\" class=\"visually-hidden\" data-testid=\"input-counter-aria\" id={createRelatedUniqueId(id, 'counter')} ref={counter.ariaRef} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{showMsg && !hideMsg && <KolFormFieldMsgFc {...(formFieldMsgProps \|\| {})} id={id} alert={alert} msg={msg} />}\n\t\t\t{showHint && <KolFormFieldHintFc {...(formFieldHintProps \|\| {})} id={id} hint={hint} />}\n\t\t\t{anotherChildren}\n\t\t\t{typeof maxLength === 'number' && !counter && (\n\t\t\t\t// Der visuell versteckte Zeichenlimit-Hinweis wird nur gerendert, wenn KEIN Zähler aktiv ist.\n\t\t\t\t// Ist ein Zähler vorhanden, vermitteln dessen Spans (`input-counter`/`input-counter-aria`) das\n\t\t\t\t// Maximum bereits, sodass der zusätzliche Hinweis redundant wäre.\n\t\t\t\t<span id={createRelatedUniqueId(id, 'character-limit-hint')} class=\"visually-hidden\">\n\t\t\t\t\t{translate('kol-character-limit-hint', { placeholders: { limit: String(maxLength) } })}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</Component>\n\t);\n};\n\nexport default KolFormFieldFc;\n"]}