@public-ui/components 1.6.0-rc.20 → 1.6.0-rc.22

package/dist/cjs/kol-tabs.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"kol-tabs.entry.cjs.js","mappings":"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","names":["translate","devHint","h","index","Host","validateAlign","validateLabel","featureHint","Log","setState","watchNumber","watchJsonArrayString","uiUxHintMillerscheZahl","koliBriQuerySelector"],"sources":["src/components/tabs/style.css?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\nkol-button-group-wc {\n\tdisplay: inline-flex;\n\tflex-wrap: wrap;\n}\nkol-button-group-wc button {\n\tborder-bottom-color: transparent;\n\tborder-bottom-style: solid;\n\tdisplay: block;\n}\ndiv.grid,\ndiv[role='tabpanel'] {\n\theight: 100%;\n}\n:host > .tabs-align-right {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n}\n:host > .tabs-align-right kol-button-group-wc {\n\tdisplay: grid;\n\torder: 2;\n}\n:host > .tabs-align-left {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr;\n}\n:host > .tabs-align-left kol-button-group-wc {\n\tdisplay: grid;\n\torder: 0;\n}\n:host > .tabs-align-bottom {\n\tdisplay: grid;\n\tgrid-template-rows: 1fr auto;\n}\n:host > .tabs-align-bottom kol-button-group-wc {\n\torder: 2;\n}\n:host > .tabs-align-bottom kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n\tmargin: 0 1em 0 0;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n\tmargin: 0 1em;\n}\n:host > .tabs-align-top {\n\tdisplay: grid;\n\tgrid-template-rows: auto 1fr;\n}\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-top kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n\tmargin: 0 1em 0 0;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n\tmargin: 0 1em;\n}\n:host > div {\n\tdisplay: grid;\n}\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n\torder: 1;\n}\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n\tdisplay: grid;\n}\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n\twidth: 100%;\n}\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n","import { Generic } from '@a11y-ui/core';\nimport { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { KoliBriButtonCallbacks } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { Align, validateAlign } from '../../types/props/align';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { devHint, featureHint, uiUxHintMillerscheZahl } from '../../utils/a11y.tipps';\nimport { Log } from '../../utils/dev.utils';\nimport { koliBriQuerySelector, setState, watchJsonArrayString, watchNumber } from '../../utils/prop.validators';\nimport { KoliBriTabsAPI, KoliBriTabsCallbacks, KoliBriTabsStates, TabButtonProps } from './types';\n\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements KoliBriTabsAPI {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate showCreateTab = false;\n\tprivate selectedTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step: number): number => {\n\t\tif (step > 0) {\n\t\t\tif (offset + step < tabs.length) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t} else if (step < 0) {\n\t\t\tif (offset + step >= 0) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step - 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t}\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tlet selectedIndex: number | null = null;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, 1);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, -1);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t\tif (selectedIndex !== null) {\n\t\t\t\tthis.onSelect(event, selectedIndex, true);\n\t\t\t}\n\t\t}, 250);\n\t};\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.onSelect(event, index, true);\n\t};\n\n\t// private readonly onClickClose = (event: Event, button: TabButtonProps, index: number) => {\n\t// \tevent.preventDefault();\n\t// \tevent.stopPropagation();\n\t// \tthis.onClose(button, event, index);\n\t// };\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t};\n\n\tprivate readonly callbacks: KoliBriButtonCallbacks<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t<kol-button-group-wc role=\"tablist\" aria-label={this.state._label} onKeyDown={this.onKeyDown}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icon={button._icon}\n\t\t\t\t\t\t_hideLabel={button._hideLabel || button._iconOnly}\n\t\t\t\t\t\t_label={button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as KoliBriButtonCallbacks<unknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_variant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : undefined}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`${this.state._label.replace(/\\s/g, '-')}-tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\tclass=\"create-button\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t)}\n\t\t\t</kol-button-group-wc>\n\t\t);\n\t}\n\n\tprivate tabPanelHost?: HTMLDivElement;\n\n\tprivate readonly catchTabPanelHost = (el?: HTMLDivElement) => {\n\t\tthis.tabPanelHost = el;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t\t}}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[`tabs-align-${this.state._align}`]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t\t<div ref={this.catchTabPanelHost}>{/* <slot /> */}</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the position of the tab captions.\n\t */\n\t@Prop() public _align?: Align = 'top';\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.\n\t */\n\t@Prop() public _on?: KoliBriTabsCallbacks;\n\n\t/**\n\t * Gibt an, welches Tab selektiert sein soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Setzt die Daten für die Registrierkarten.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t/**\n\t * Setzt die Position der Registrierkarten.\n\t * @deprecated Use _align.\n\t */\n\t@Prop() public _tabsAlign?: Align = 'top';\n\n\t@State() public state: KoliBriTabsStates = {\n\t\t_align: 'top',\n\t\t_label: '…', // ⚠ required\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t};\n\n\tprivate selectNextNotDisabledTab = (selected: number, tabs: TabButtonProps[], upOrDown = true, initialSelected?: number): number => {\n\t\tif (selected > tabs.length - 1) {\n\t\t\tselected = tabs.length - 1;\n\t\t}\n\t\tif (selected < 0) {\n\t\t\tselected = 0;\n\t\t}\n\t\tif (Array.isArray(tabs) && tabs[selected]) {\n\t\t\tif (tabs[selected]._disabled) {\n\t\t\t\tif (upOrDown === true) {\n\t\t\t\t\tif (selected < tabs.length - 1) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselected = initialSelected || selected;\n\t\t\t\t\t\tupOrDown = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (upOrDown === false) {\n\t\t\t\t\tif (selected > 0) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdevHint(`[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: Align) {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriTabsCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tfeatureHint('[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');\n\t\t\tconst callbacks: KoliBriTabsCallbacks = {};\n\t\t\tif (typeof value.onCreate === 'function' || typeof value.onCreate === 'object') {\n\t\t\t\tif (typeof value.onCreate === 'object') {\n\t\t\t\t\tif (typeof value.onCreate.label === 'string' && value.onCreate.label.length > 0) {\n\t\t\t\t\t\tthis.onCreateLabel = value.onCreate.label;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif (typeof value.onCreate.callback === 'function') {\n\t\t\t\t\t\tcallbacks.onCreate = value.onCreate.callback;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t\t}\n\t\t\t\tthis.showCreateTab = typeof callbacks.onCreate === 'function';\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\t@Watch('_tabsAlign')\n\tpublic validateTabsAlign(value?: Align): void {\n\t\tthis.validateAlign(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align || this._tabsAlign);\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t}\n\n\tprivate readonly handleTabPanels = () => {\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = this.tabPanelHost.children.length; i < this.state._tabs.length; i++) {\n\t\t\t\tconst div = document.createElement('div');\n\t\t\t\tdiv.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n\t\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\t\tdiv.setAttribute('hidden', '');\n\t\t\t\tconst slot = document.createElement('slot');\n\t\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\t\tdiv.appendChild(slot);\n\t\t\t\tthis.tabPanelHost.appendChild(div);\n\t\t\t\tif (this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\t\t// div.appendChild(this.host?.children[0]);\n\t\t\t\t\tthis.host?.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.handleTabPanels();\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = 0; i < this.tabPanelHost.children.length; i++) {\n\t\t\t\tif (i !== this.state._selected) {\n\t\t\t\t\tthis.tabPanelHost.children[i].setAttribute('hidden', '');\n\t\t\t\t} else {\n\t\t\t\t\tthis.tabPanelHost.children[i].removeAttribute('hidden');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number, focus = false): void {\n\t\tthis._selected = index;\n\t\tif (typeof this._on?.onSelect === 'function') {\n\t\t\tthis._on?.onSelect(event, index);\n\t\t}\n\t\tif (focus === true) {\n\t\t\t// TODO: prüfen, ob hier noch was offen ist\n\t\t\t// devHint('[KolTabs] Tab-Fokus-verschieben geht im Moment nicht.');\n\t\t\tthis.selectedTimeout = setTimeout(() => {\n\t\t\t\tclearTimeout(this.selectedTimeout);\n\t\t\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\t\t\tbutton?.focus();\n\t\t\t\t}\n\t\t\t}, 250);\n\t\t}\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onCreate === 'function') {\n\t\t\tthis.state._on?.onCreate(event);\n\t\t}\n\t};\n}\n"],"version":3}
+{"file":"kol-tabs.entry.cjs.js","mappings":"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","names":["translate","devHint","h","index","Host","validateAlign","validateLabel","featureHint","Log","setState","watchNumber","watchJsonArrayString","uiUxHintMillerscheZahl","koliBriQuerySelector"],"sources":["src/components/tabs/style.css?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\nkol-button-group-wc {\n\tdisplay: inline-flex;\n\tflex-wrap: wrap;\n}\nkol-button-group-wc button {\n\tborder-bottom-color: transparent;\n\tborder-bottom-style: solid;\n\tdisplay: block;\n}\ndiv.grid,\ndiv[role='tabpanel'] {\n\theight: 100%;\n}\n:host > .tabs-align-right {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n}\n:host > .tabs-align-right kol-button-group-wc {\n\tdisplay: grid;\n\torder: 2;\n}\n:host > .tabs-align-left {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr;\n}\n:host > .tabs-align-left kol-button-group-wc {\n\tdisplay: grid;\n\torder: 0;\n}\n:host > .tabs-align-bottom {\n\tdisplay: grid;\n\tgrid-template-rows: 1fr auto;\n}\n:host > .tabs-align-bottom kol-button-group-wc {\n\torder: 2;\n}\n:host > .tabs-align-bottom kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n\tmargin: 0 1em 0 0;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n\tmargin: 0 1em;\n}\n:host > .tabs-align-top {\n\tdisplay: grid;\n\tgrid-template-rows: auto 1fr;\n}\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-top kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n\tmargin: 0 1em 0 0;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n\tmargin: 0 1em;\n}\n:host > div {\n\tdisplay: grid;\n}\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n\torder: 1;\n}\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n\tdisplay: grid;\n}\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n\twidth: 100%;\n}\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n","import { Generic } from '@a11y-ui/core';\nimport { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { KoliBriButtonCallbacks } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { Align, validateAlign } from '../../types/props/align';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { StencilUnknown } from '../../types/unknown';\nimport { devHint, featureHint, uiUxHintMillerscheZahl } from '../../utils/a11y.tipps';\nimport { Log } from '../../utils/dev.utils';\nimport { koliBriQuerySelector, setState, watchJsonArrayString, watchNumber } from '../../utils/prop.validators';\nimport { KoliBriTabsAPI, KoliBriTabsCallbacks, KoliBriTabsStates, TabButtonProps } from './types';\n\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements KoliBriTabsAPI {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate showCreateTab = false;\n\tprivate selectedTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step: number): number => {\n\t\tif (step > 0) {\n\t\t\tif (offset + step < tabs.length) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t} else if (step < 0) {\n\t\t\tif (offset + step >= 0) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step - 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t}\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tlet selectedIndex: number | null = null;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, 1);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, -1);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t\tif (selectedIndex !== null) {\n\t\t\t\tthis.onSelect(event, selectedIndex, true);\n\t\t\t}\n\t\t}, 250);\n\t};\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.onSelect(event, index, true);\n\t};\n\n\t// private readonly onClickClose = (event: Event, button: TabButtonProps, index: number) => {\n\t// \tevent.preventDefault();\n\t// \tevent.stopPropagation();\n\t// \tthis.onClose(button, event, index);\n\t// };\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t};\n\n\tprivate readonly callbacks: KoliBriButtonCallbacks<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t<kol-button-group-wc role=\"tablist\" aria-label={this.state._label} onKeyDown={this.onKeyDown}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icon={button._icon}\n\t\t\t\t\t\t_hideLabel={button._hideLabel || button._iconOnly}\n\t\t\t\t\t\t_label={button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as KoliBriButtonCallbacks<StencilUnknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_variant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : undefined}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`${this.state._label.replace(/\\s/g, '-')}-tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\tclass=\"create-button\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t)}\n\t\t\t</kol-button-group-wc>\n\t\t);\n\t}\n\n\tprivate tabPanelHost?: HTMLDivElement;\n\n\tprivate readonly catchTabPanelHost = (el?: HTMLDivElement) => {\n\t\tthis.tabPanelHost = el;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t\t}}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[`tabs-align-${this.state._align}`]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t\t<div ref={this.catchTabPanelHost}>{/* <slot /> */}</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the position of the tab captions.\n\t */\n\t@Prop() public _align?: Align = 'top';\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.\n\t */\n\t@Prop() public _on?: KoliBriTabsCallbacks;\n\n\t/**\n\t * Gibt an, welches Tab selektiert sein soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Setzt die Daten für die Registrierkarten.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t/**\n\t * Setzt die Position der Registrierkarten.\n\t * @deprecated Use _align.\n\t */\n\t@Prop() public _tabsAlign?: Align = 'top';\n\n\t@State() public state: KoliBriTabsStates = {\n\t\t_align: 'top',\n\t\t_label: '…', // ⚠ required\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t};\n\n\tprivate selectNextNotDisabledTab = (selected: number, tabs: TabButtonProps[], upOrDown = true, initialSelected?: number): number => {\n\t\tif (selected > tabs.length - 1) {\n\t\t\tselected = tabs.length - 1;\n\t\t}\n\t\tif (selected < 0) {\n\t\t\tselected = 0;\n\t\t}\n\t\tif (Array.isArray(tabs) && tabs[selected]) {\n\t\t\tif (tabs[selected]._disabled) {\n\t\t\t\tif (upOrDown === true) {\n\t\t\t\t\tif (selected < tabs.length - 1) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselected = initialSelected || selected;\n\t\t\t\t\t\tupOrDown = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (upOrDown === false) {\n\t\t\t\t\tif (selected > 0) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdevHint(`[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: Align) {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriTabsCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tfeatureHint('[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');\n\t\t\tconst callbacks: KoliBriTabsCallbacks = {};\n\t\t\tif (typeof value.onCreate === 'function' || typeof value.onCreate === 'object') {\n\t\t\t\tif (typeof value.onCreate === 'object') {\n\t\t\t\t\tif (typeof value.onCreate.label === 'string' && value.onCreate.label.length > 0) {\n\t\t\t\t\t\tthis.onCreateLabel = value.onCreate.label;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif (typeof value.onCreate.callback === 'function') {\n\t\t\t\t\t\tcallbacks.onCreate = value.onCreate.callback;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t\t}\n\t\t\t\tthis.showCreateTab = typeof callbacks.onCreate === 'function';\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\t@Watch('_tabsAlign')\n\tpublic validateTabsAlign(value?: Align): void {\n\t\tthis.validateAlign(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align || this._tabsAlign);\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t}\n\n\tprivate readonly handleTabPanels = () => {\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = this.tabPanelHost.children.length; i < this.state._tabs.length; i++) {\n\t\t\t\tconst div = document.createElement('div');\n\t\t\t\tdiv.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n\t\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\t\tdiv.setAttribute('hidden', '');\n\t\t\t\tconst slot = document.createElement('slot');\n\t\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\t\tdiv.appendChild(slot);\n\t\t\t\tthis.tabPanelHost.appendChild(div);\n\t\t\t\tif (this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\t\t// div.appendChild(this.host?.children[0]);\n\t\t\t\t\tthis.host?.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.handleTabPanels();\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = 0; i < this.tabPanelHost.children.length; i++) {\n\t\t\t\tif (i !== this.state._selected) {\n\t\t\t\t\tthis.tabPanelHost.children[i].setAttribute('hidden', '');\n\t\t\t\t} else {\n\t\t\t\t\tthis.tabPanelHost.children[i].removeAttribute('hidden');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number, focus = false): void {\n\t\tthis._selected = index;\n\t\tif (typeof this._on?.onSelect === 'function') {\n\t\t\tthis._on?.onSelect(event, index);\n\t\t}\n\t\tif (focus === true) {\n\t\t\t// TODO: prüfen, ob hier noch was offen ist\n\t\t\t// devHint('[KolTabs] Tab-Fokus-verschieben geht im Moment nicht.');\n\t\t\tthis.selectedTimeout = setTimeout(() => {\n\t\t\t\tclearTimeout(this.selectedTimeout);\n\t\t\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\t\t\tbutton?.focus();\n\t\t\t\t}\n\t\t\t}, 250);\n\t\t}\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onCreate === 'function') {\n\t\t\tthis.state._on?.onCreate(event);\n\t\t}\n\t};\n}\n"],"version":3}

package/dist/cjs/kol-textarea.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b63c6785.js"),dev_utils=require("./dev.utils-b325e147.js"),prop_validators=require("./prop.validators-f5e03a86.js"),reuse=require("./reuse-5fad9b6e.js"),controller=require("./controller-dd3ad311.js"),rows=require("./rows-fd1985a2.js");require("./a11y.tipps-f2c86041.js"),require("./index-6a24b8dc.js"),require("./label-d3f4eaaa.js"),require("./events-b49161e2.js"),require("./tab-index-a78da43d.js");class TextareaController extends controller.InputController{constructor(e,t,a){super(e,t,a),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){prop_validators.watchBoolean(this.component,"_hasCounter",e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){prop_validators.watchNumber(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){prop_validators.watchString(this.component,"_placeholder",e)}validateReadOnly(e){prop_validators.watchBoolean(this.component,"_readOnly",e)}validateResize(e){prop_validators.watchValidator(this.component,"_resize",(e=>"string"==typeof e&&("both"===e||"horizontal"===e||"none"===e||"vertical"===e)),new Set("String {both, horizontal, vertical, none}"),e)}validateRequired(e){prop_validators.watchBoolean(this.component,"_required",e)}validateRows(e){rows.validateRows(this.component,e)}validateValue(e){prop_validators.watchString(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",increaseTextareaHeight=e=>{e.style.overflow="hidden";const t=e.rows,a=e.clientHeight/t;e.rows=1;const i=Math.round(e.scrollHeight/a);return e.rows=t,i},KolTextarea=class{render(){const{ariaDescribedBy:e}=controller.getRenderStates(this.state),t=!1===this.state._label;return index.h(index.Host,{class:{"has-value":this.state._hasValue}},index.h("kol-input",{class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_alert:this.state._alert,_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.ref)||void 0===e?void 0:e.focus()}},index.h("span",{slot:"label"},t?index.h("slot",null):this.state._label),index.h("div",{slot:"input"},index.h("textarea",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,rows:this.state._rows,placeholder:this.state._placeholder,spellcheck:"false"},this.controller.onFacade,{onKeyUp:this.onChange,style:{resize:this.state._resize},value:this.state._value})),index.h("kol-tooltip",{"aria-hidden":"true",hidden:t||!this.state._hideLabel,_align:this._tooltipAlign,_id:`${this.state._id}-tooltip`,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.ref=e,reuse.propagateFocus(this.host,this.ref)},this.onChange=e=>{this.ref instanceof HTMLTextAreaElement&&(prop_validators.setState(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=increaseTextareaHeight(this.ref))),"function"==typeof this.controller.onFacade.onChange&&this.controller.onFacade.onChange(e)},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hasCounter=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._label=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=void 0,this._resize="vertical",this._required=void 0,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_id:`id-${dev_utils.nonce()}`,_label:!1,_resize:"vertical"},this.controller=new TextareaController(this,"textarea",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolTextarea.style={default:defaultStyleCss},exports.kol_textarea=KolTextarea;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b63c6785.js"),dev_utils=require("./dev.utils-321ffc6a.js"),prop_validators=require("./prop.validators-e30f7e43.js"),reuse=require("./reuse-5fad9b6e.js"),controller=require("./controller-f7d39413.js"),rows=require("./rows-aaaf2861.js");require("./a11y.tipps-29f0cafa.js"),require("./index-6a24b8dc.js"),require("./label-3298a541.js"),require("./associated.controller-97ca9eca.js"),require("./tab-index-b47a42c0.js");class TextareaController extends controller.InputController{constructor(e,t,a){super(e,t,a),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){prop_validators.watchBoolean(this.component,"_hasCounter",e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){prop_validators.watchNumber(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){prop_validators.watchString(this.component,"_placeholder",e)}validateReadOnly(e){prop_validators.watchBoolean(this.component,"_readOnly",e)}validateResize(e){prop_validators.watchValidator(this.component,"_resize",(e=>"string"==typeof e&&("both"===e||"horizontal"===e||"none"===e||"vertical"===e)),new Set("String {both, horizontal, vertical, none}"),e)}validateRequired(e){prop_validators.watchBoolean(this.component,"_required",e)}validateRows(e){rows.validateRows(this.component,e)}validateValue(e){prop_validators.watchString(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",increaseTextareaHeight=e=>{e.style.overflow="hidden";const t=e.rows,a=e.clientHeight/t;e.rows=1;const i=Math.round(e.scrollHeight/a);return e.rows=t,i},KolTextarea=class{render(){const{ariaDescribedBy:e}=controller.getRenderStates(this.state),t=!1===this.state._label;return index.h(index.Host,{class:{"has-value":this.state._hasValue}},index.h("kol-input",{class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_alert:this.state._alert,_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.ref)||void 0===e?void 0:e.focus()}},index.h("span",{slot:"label"},t?index.h("slot",null):this.state._label),index.h("div",{slot:"input"},index.h("textarea",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,rows:this.state._rows,placeholder:this.state._placeholder,spellcheck:"false"},this.controller.onFacade,{onKeyUp:this.onKeyUp,style:{resize:this.state._resize},value:this.state._value})),index.h("kol-tooltip",{"aria-hidden":"true",hidden:t||!this.state._hideLabel,_align:this._tooltipAlign,_id:`${this.state._id}-tooltip`,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.ref=e,reuse.propagateFocus(this.host,this.ref)},this.onKeyUp=()=>{this.ref instanceof HTMLTextAreaElement&&(prop_validators.setState(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=increaseTextareaHeight(this.ref)))},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hasCounter=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._label=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=void 0,this._resize="vertical",this._required=void 0,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_id:`id-${dev_utils.nonce()}`,_label:!1,_resize:"vertical"},this.controller=new TextareaController(this,"textarea",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolTextarea.style={default:defaultStyleCss},exports.kol_textarea=KolTextarea;

package/dist/cjs/kol-textarea.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"kol-textarea.entry.cjs.js","mappings":"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","names":["InputController","watchBoolean","watchNumber","watchString","watchValidator","validateRows","getRenderStates","h","Host","propagateFocus","setState","nonce"],"sources":["src/components/textarea/controller.ts","src/components/textarea/style.css?tag=kol-textarea&mode=default&encapsulation=shadow","src/components/textarea/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { RowsPropType, validateRows } from '../../types/props/rows';\nimport { watchBoolean, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputController } from '../@deprecated/input/controller';\nimport { CSSResize, Props, Watches } from './types';\n\nexport class TextareaController extends InputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprivate afterSyncCharCounter = () => {\n\t\tif (typeof this.component._value === 'string' && this.component._value.length > 0) {\n\t\t\tthis.component.state._currentLength = this.component._value.length;\n\t\t}\n\t};\n\n\tpublic validateHasCounter(value?: boolean): void {\n\t\twatchBoolean(this.component, '_hasCounter', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMaxLength(value?: number): void {\n\t\twatchNumber(this.component, '_maxLength', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t\tmin: 0,\n\t\t});\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic validateReadOnly(value?: boolean): void {\n\t\twatchBoolean(this.component, '_readOnly', value);\n\t}\n\n\tpublic validateResize(value?: CSSResize): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_resize',\n\t\t\t(value) => typeof value === 'string' && (value === 'both' || value === 'horizontal' || value === 'none' || value === 'vertical'),\n\t\t\tnew Set('String {both, horizontal, vertical, none}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { Align } from '../../types/props/align';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { RowsPropType } from '../../types/props/rows';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { TextareaController } from './controller';\nimport { ComponentApi, CSSResize, States } from './types';\n\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\tprivate ref?: HTMLTextAreaElement;\n\n\tprivate readonly catchRef = (ref?: HTMLTextAreaElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = this.state._label === false; // _label=\"\" or _label\n\n\t\treturn (\n\t\t\t<Host class={{ 'has-value': this.state._hasValue }}>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{ textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_currentLength={this.state._currentLength}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hasCounter={this.state._hasCounter}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_maxLength={this.state._maxLength}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\trows={this.state._rows}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonKeyUp={this.onChange}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tresize: this.state._resize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<kol-tooltip\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\thidden={hasExpertSlot || !this.state._hideLabel}\n\t\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t\t_id={`${this.state._id}-tooltip`}\n\t\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t\t></kol-tooltip>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Passt die Höhe des Eingabefeldes automatisch an den Füllstand an.\n\t */\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop() public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.\n\t */\n\t@Prop() public _hasCounter?: boolean;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Gibt an, wie viele Zeichen maximal eingegeben werden können.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop() public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob die Größe des Eingabefeldes von Nutzer:innen geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t */\n\t@Prop() public _resize?: CSSResize = 'vertical';\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop() public _required?: boolean;\n\n\t/**\n\t * Defines how many rows of text should be visible at the same time.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: string;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: false, // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: boolean): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: CSSResize): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: string): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.ref instanceof HTMLTextAreaElement) {\n\t\t\tsetState(this, '_currentLength', this.ref.value.length);\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ref);\n\t\t\t}\n\t\t}\n\t\tif (typeof this.controller.onFacade.onChange === 'function') {\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n}\n"],"version":3}
+{"file":"kol-textarea.entry.cjs.js","mappings":"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","names":["InputController","watchBoolean","watchNumber","watchString","watchValidator","validateRows","getRenderStates","h","Host","propagateFocus","setState","nonce"],"sources":["src/components/textarea/controller.ts","src/components/textarea/style.css?tag=kol-textarea&mode=default&encapsulation=shadow","src/components/textarea/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { RowsPropType, validateRows } from '../../types/props/rows';\nimport { watchBoolean, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputController } from '../@deprecated/input/controller';\nimport { CSSResize, Props, Watches } from './types';\n\nexport class TextareaController extends InputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprivate afterSyncCharCounter = () => {\n\t\tif (typeof this.component._value === 'string' && this.component._value.length > 0) {\n\t\t\tthis.component.state._currentLength = this.component._value.length;\n\t\t}\n\t};\n\n\tpublic validateHasCounter(value?: boolean): void {\n\t\twatchBoolean(this.component, '_hasCounter', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMaxLength(value?: number): void {\n\t\twatchNumber(this.component, '_maxLength', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t\tmin: 0,\n\t\t});\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic validateReadOnly(value?: boolean): void {\n\t\twatchBoolean(this.component, '_readOnly', value);\n\t}\n\n\tpublic validateResize(value?: CSSResize): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_resize',\n\t\t\t(value) => typeof value === 'string' && (value === 'both' || value === 'horizontal' || value === 'none' || value === 'vertical'),\n\t\t\tnew Set('String {both, horizontal, vertical, none}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { Align } from '../../types/props/align';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { RowsPropType } from '../../types/props/rows';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { TextareaController } from './controller';\nimport { ComponentApi, CSSResize, States } from './types';\n\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\tprivate ref?: HTMLTextAreaElement;\n\n\tprivate readonly catchRef = (ref?: HTMLTextAreaElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = this.state._label === false; // _label=\"\" or _label\n\n\t\treturn (\n\t\t\t<Host class={{ 'has-value': this.state._hasValue }}>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{ textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_currentLength={this.state._currentLength}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hasCounter={this.state._hasCounter}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_maxLength={this.state._maxLength}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\trows={this.state._rows}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tresize: this.state._resize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<kol-tooltip\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\thidden={hasExpertSlot || !this.state._hideLabel}\n\t\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t\t_id={`${this.state._id}-tooltip`}\n\t\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t\t></kol-tooltip>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Passt die Höhe des Eingabefeldes automatisch an den Füllstand an.\n\t */\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop() public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.\n\t */\n\t@Prop() public _hasCounter?: boolean;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Gibt an, wie viele Zeichen maximal eingegeben werden können.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop() public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob die Größe des Eingabefeldes von Nutzer:innen geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t */\n\t@Prop() public _resize?: CSSResize = 'vertical';\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop() public _required?: boolean;\n\n\t/**\n\t * Defines how many rows of text should be visible at the same time.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: string;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: false, // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: boolean): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: CSSResize): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: string): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onKeyUp = () => {\n\t\tif (this.ref instanceof HTMLTextAreaElement) {\n\t\t\tsetState(this, '_currentLength', this.ref.value.length);\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ref);\n\t\t\t}\n\t\t}\n\t};\n}\n"],"version":3}

package/dist/cjs/kol-toast.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b63c6785.js"),hasCloser=require("./has-closer-59b85ff2.js"),label=require("./label-d3f4eaaa.js"),show=require("./show-73709d10.js"),prop_validators=require("./prop.validators-f5e03a86.js"),validation=require("./validation-65a3018b.js");require("./a11y.tipps-f2c86041.js"),require("./dev.utils-b325e147.js"),require("./reuse-5fad9b6e.js"),require("./index-6a24b8dc.js");const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}:host>div{background-color:#fff;height:0;left:0;position:fixed;top:0;width:100%;z-index:200}:host>div>kol-alert{display:block;margin:auto;max-width:750px}:host>div>kol-button-wc{display:block;margin:auto;position:relative;top:0;width:1em}",KolToast=class{constructor(t){index.registerInstance(this,t),this.handleShowAndDuration=()=>{!0===this.state._show&&"number"==typeof this.state._showDuration&&this.state._showDuration>=0&&(clearTimeout(this.durationTimeout),this.durationTimeout=setTimeout((()=>{this.close()}),this.state._showDuration))},this.close=()=>{var t;this._show=!1,this.state=Object.assign(Object.assign({},this.state),{_show:!1}),void 0!==(null===(t=this._on)||void 0===t?void 0:t.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClose:this.close},this._alert=!0,this._hasCloser=!1,this._heading="",this._label=void 0,this._level=1,this._on=void 0,this._show=!0,this._showDuration=1e4,this._type="default",this.state={_alert:!0,_level:1,_show:!0}}validateAlert(t){prop_validators.watchBoolean(this,"_alert",t)}validateHasCloser(t){hasCloser.validateHasCloser(this,t)}validateHeading(t){this.validateLabel(t)}validateLabel(t){label.validateLabel(this,t)}validateLevel(t){validation.watchHeadingLevel(this,t)}validateOn(t){"object"!=typeof t||"function"!=typeof(null==t?void 0:t.onClose)&&!0!==t.onClose||prop_validators.setState(this,"_on",{onClose:t.onClose})}validateShow(t){show.validateShow(this,t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(t){prop_validators.watchNumber(this,"_showDuration",t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(t){prop_validators.watchValidator(this,"_type",(t=>"string"==typeof t&&("default"===t||"error"===t||"info"===t||"success"===t||"warning"===t)),new Set("String {success, info, warning, error}"),t)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label||this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateShow(this._show),this.validateShowDuration(this._showDuration),this.validateType(this._type)}render(){return index.h(index.Host,null,this.state._show&&index.h("div",null,index.h("kol-alert",{_alert:this.state._alert,_label:this.state._label,_level:this.state._level,_hasCloser:this.state._hasCloser,_type:this.state._type,_variant:"card",_on:this.on},index.h("slot",null))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};KolToast.style={default:defaultStyleCss},exports.kol_toast=KolToast;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b63c6785.js"),hasCloser=require("./has-closer-2ae25325.js"),label=require("./label-3298a541.js"),show=require("./show-ccaf9fcc.js"),prop_validators=require("./prop.validators-e30f7e43.js"),validation=require("./validation-9a52f85a.js");require("./a11y.tipps-29f0cafa.js"),require("./dev.utils-321ffc6a.js"),require("./reuse-5fad9b6e.js"),require("./index-6a24b8dc.js");const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}:host>div{background-color:#fff;height:0;left:0;position:fixed;top:0;width:100%;z-index:200}:host>div>kol-alert{display:block;margin:auto;max-width:750px}:host>div>kol-button-wc{display:block;margin:auto;position:relative;top:0;width:1em}",KolToast=class{constructor(t){index.registerInstance(this,t),this.handleShowAndDuration=()=>{!0===this.state._show&&"number"==typeof this.state._showDuration&&this.state._showDuration>=0&&(clearTimeout(this.durationTimeout),this.durationTimeout=setTimeout((()=>{this.close()}),this.state._showDuration))},this.close=()=>{var t;this._show=!1,this.state=Object.assign(Object.assign({},this.state),{_show:!1}),void 0!==(null===(t=this._on)||void 0===t?void 0:t.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClose:this.close},this._alert=!0,this._hasCloser=!1,this._heading="",this._label=void 0,this._level=1,this._on=void 0,this._show=!0,this._showDuration=1e4,this._type="default",this.state={_alert:!0,_level:1,_show:!0}}validateAlert(t){prop_validators.watchBoolean(this,"_alert",t)}validateHasCloser(t){hasCloser.validateHasCloser(this,t)}validateHeading(t){this.validateLabel(t)}validateLabel(t){label.validateLabel(this,t)}validateLevel(t){validation.watchHeadingLevel(this,t)}validateOn(t){"object"!=typeof t||"function"!=typeof(null==t?void 0:t.onClose)&&!0!==t.onClose||prop_validators.setState(this,"_on",{onClose:t.onClose})}validateShow(t){show.validateShow(this,t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(t){prop_validators.watchNumber(this,"_showDuration",t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(t){prop_validators.watchValidator(this,"_type",(t=>"string"==typeof t&&("default"===t||"error"===t||"info"===t||"success"===t||"warning"===t)),new Set("String {success, info, warning, error}"),t)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label||this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateShow(this._show),this.validateShowDuration(this._showDuration),this.validateType(this._type)}render(){return index.h(index.Host,null,this.state._show&&index.h("div",null,index.h("kol-alert",{_alert:this.state._alert,_label:this.state._label,_level:this.state._level,_hasCloser:this.state._hasCloser,_type:this.state._type,_variant:"card",_on:this.on},index.h("slot",null))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};KolToast.style={default:defaultStyleCss},exports.kol_toast=KolToast;

package/dist/cjs/kol-tooltip.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b63c6785.js"),floatingUi_dom_esm=require("./floating-ui.dom.esm-09852e47.js"),buttonLink=require("./button-link-71178f84.js"),label=require("./label-d3f4eaaa.js"),dev_utils=require("./dev.utils-b325e147.js"),prop_validators=require("./prop.validators-f5e03a86.js"),reuse=require("./reuse-5fad9b6e.js");require("./a11y.tipps-f2c86041.js"),require("./index-6a24b8dc.js");const VISIBLE_OVERLAYS=new Set;function showOverlay(t){VISIBLE_OVERLAYS.forEach((t=>{t.style.setProperty("z-index","999")})),VISIBLE_OVERLAYS.add(t),t.style.setProperty("z-index","1000")}function hideOverlay(t){if(VISIBLE_OVERLAYS.delete(t),VISIBLE_OVERLAYS.size>0){const t=Array.from(VISIBLE_OVERLAYS).pop();t&&t.style.setProperty("z-index","1000")}}const styleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-tooltip #floating{animation-duration:0.5s;animation-iteration-count:1;animation-name:fadeInOpacity;animation-timing-function:ease-in;box-sizing:border-box;display:none;position:absolute;visibility:hidden;width:max-content;top:0;left:0}kol-tooltip #arrow{height:10px;position:absolute;transform:rotate(45deg);width:10px;z-index:999}kol-tooltip .area{background-color:#fff;color:#000}kol-tooltip kol-span-wc{position:relative;z-index:1000}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",KolTooltip=class{constructor(t){index.registerInstance(this,t),this.alignTooltip=()=>{var t;if("test"!==reuse.processEnv&&this.previousSibling&&this.tooltipElement){const e=this.previousSibling,i=this.tooltipElement,o=this.arrowElement,s=[floatingUi_dom_esm.offset(null!==(t=null==o?void 0:o.offsetHeight)&&void 0!==t?t:10),floatingUi_dom_esm.flip(),floatingUi_dom_esm.shift()];o&&s.push(floatingUi_dom_esm.arrow({element:o})),floatingUi_dom_esm.computePosition(e,i,{placement:this.state._align,middleware:s}).then((({x:t,y:e,middlewareData:s,placement:n})=>{var l,r;Object.assign(i.style,{left:`${t}px`,top:`${e}px`,visibility:"visible"}),o&&((null===(l=s.arrow)||void 0===l?void 0:l.x)?Object.assign(o.style,{left:`${s.arrow.x}px`,top:"bottom"===n?-o.offsetHeight/2+"px":"",bottom:"top"===n?-o.offsetHeight/2+"px":""}):(null===(r=s.arrow)||void 0===r?void 0:r.y)&&Object.assign(o.style,{left:"right"===n?-o.offsetWidth/2+"px":"",right:"left"===n?-o.offsetWidth/2+"px":"",top:`${s.arrow.y}px`}))}))}},this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){showOverlay(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),dev_utils.getDocument().body.addEventListener("keyup",this.hideTooltipByEscape);const t=this.previousSibling,e=this.tooltipElement;this.cleanupAutoPositioning=floatingUi_dom_esm.autoUpdate(t,e,this.alignTooltip)}},this.hideTooltip=()=>{this.tooltipElement&&(hideOverlay(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0))},this.hideTooltipByEscape=t=>{"Escape"===t.key&&(dev_utils.getDocument().body.removeEventListener("keyup",this.hideTooltipByEscape),this.hideTooltip())},this.addListeners=t=>{t.addEventListener("mouseover",this.incrementOverFocusCount),t.addEventListener("focus",this.incrementOverFocusCount),t.addEventListener("mouseout",this.decrementOverFocusCount),t.addEventListener("blur",this.decrementOverFocusCount)},this.removeListeners=t=>{t.removeEventListener("mouseover",this.incrementOverFocusCount),t.removeEventListener("focus",this.incrementOverFocusCount),t.removeEventListener("mouseout",this.decrementOverFocusCount),t.removeEventListener("blur",this.decrementOverFocusCount)},this.resyncListeners=t=>{this.removeListeners(t),this.addListeners(t)},this.catchHostElement=t=>{t&&(this.previousSibling=t.previousElementSibling,this.previousSibling&&this.resyncListeners(this.previousSibling))},this.catchTooltipElement=t=>{this.tooltipElement=t,this.tooltipElement&&this.resyncListeners(this.tooltipElement)},this.catchArrowElement=t=>{this.arrowElement=t},this.overFocusCount=0,this.incrementOverFocusCount=()=>{this.overFocusCount++,this.showOrHideTooltip()},this.decrementOverFocusCount=()=>{this.overFocusCount--,this.showOrHideTooltip()},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{clearTimeout(this.overFocusTimeout),this.overFocusCount>0?this.showTooltip():this.hideTooltip()}),250)},this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_id:dev_utils.nonce(),_label:"…"}}render(){return index.h(index.Host,{ref:this.catchHostElement},""!==this.state._label&&index.h("div",{id:"floating",ref:this.catchTooltipElement},index.h("div",{class:"area",id:"arrow",ref:this.catchArrowElement}),index.h("kol-span-wc",{class:"area",id:this.state._id,_label:this.state._label})))}validateAlign(t){buttonLink.watchTooltipAlignment(this,"_align",t)}validateId(t){prop_validators.watchString(this,"_id",t)}validateLabel(t){label.validateLabel(this,t)}componentWillLoad(){this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}disconnectedCallback(){this.previousSibling&&this.removeListeners(this.previousSibling),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}static get watchers(){return{_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};KolTooltip.style=styleCss,exports.kol_tooltip=KolTooltip;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b63c6785.js"),floatingUi_dom_esm=require("./floating-ui.dom.esm-09852e47.js"),buttonLink=require("./button-link-e2d7ef9a.js"),prop_validators=require("./prop.validators-e30f7e43.js"),label=require("./label-3298a541.js"),dev_utils=require("./dev.utils-321ffc6a.js"),reuse=require("./reuse-5fad9b6e.js");require("./a11y.tipps-29f0cafa.js"),require("./index-6a24b8dc.js");const validateId=(t,e)=>{prop_validators.watchString(t,"_id",e)},VISIBLE_OVERLAYS=new Set;function showOverlay(t){VISIBLE_OVERLAYS.forEach((t=>{t.style.setProperty("z-index","999")})),VISIBLE_OVERLAYS.add(t),t.style.setProperty("z-index","1000")}function hideOverlay(t){if(VISIBLE_OVERLAYS.delete(t),VISIBLE_OVERLAYS.size>0){const t=Array.from(VISIBLE_OVERLAYS).pop();t&&t.style.setProperty("z-index","1000")}}const styleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-tooltip .tooltip-floating{animation-duration:0.5s;animation-iteration-count:1;animation-name:fadeInOpacity;animation-timing-function:ease-in;box-sizing:border-box;display:none;position:absolute;visibility:hidden;width:max-content;top:0;left:0}kol-tooltip .tooltip-area{background-color:#fff;color:#000}kol-tooltip .tooltip-arrow{height:10px;position:absolute;transform:rotate(45deg);width:10px;z-index:999}kol-tooltip .tooltip-content{position:relative;z-index:1000}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",KolTooltip=class{constructor(t){index.registerInstance(this,t),this.alignTooltip=()=>{var t;if("test"!==reuse.processEnv&&this.previousSibling&&this.tooltipElement){const e=this.previousSibling,i=this.tooltipElement,o=this.arrowElement,s=[floatingUi_dom_esm.offset(null!==(t=null==o?void 0:o.offsetHeight)&&void 0!==t?t:10),floatingUi_dom_esm.flip(),floatingUi_dom_esm.shift()];o&&s.push(floatingUi_dom_esm.arrow({element:o})),floatingUi_dom_esm.computePosition(e,i,{placement:this.state._align,middleware:s}).then((({x:t,y:e,middlewareData:s,placement:n})=>{var l,r;Object.assign(i.style,{left:`${t}px`,top:`${e}px`,visibility:"visible"}),o&&((null===(l=s.arrow)||void 0===l?void 0:l.x)?Object.assign(o.style,{left:`${s.arrow.x}px`,top:"bottom"===n?-o.offsetHeight/2+"px":"",bottom:"top"===n?-o.offsetHeight/2+"px":""}):(null===(r=s.arrow)||void 0===r?void 0:r.y)&&Object.assign(o.style,{left:"right"===n?-o.offsetWidth/2+"px":"",right:"left"===n?-o.offsetWidth/2+"px":"",top:`${s.arrow.y}px`}))}))}},this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){showOverlay(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),dev_utils.getDocument().body.addEventListener("keyup",this.hideTooltipByEscape);const t=this.previousSibling,e=this.tooltipElement;this.cleanupAutoPositioning=floatingUi_dom_esm.autoUpdate(t,e,this.alignTooltip)}},this.hideTooltip=()=>{this.tooltipElement&&(hideOverlay(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0))},this.hideTooltipByEscape=t=>{"Escape"===t.key&&(dev_utils.getDocument().body.removeEventListener("keyup",this.hideTooltipByEscape),this.hideTooltip())},this.addListeners=t=>{t.addEventListener("mouseover",this.incrementOverFocusCount),t.addEventListener("focus",this.incrementOverFocusCount),t.addEventListener("mouseout",this.decrementOverFocusCount),t.addEventListener("blur",this.decrementOverFocusCount)},this.removeListeners=t=>{t.removeEventListener("mouseover",this.incrementOverFocusCount),t.removeEventListener("focus",this.incrementOverFocusCount),t.removeEventListener("mouseout",this.decrementOverFocusCount),t.removeEventListener("blur",this.decrementOverFocusCount)},this.resyncListeners=t=>{this.removeListeners(t),this.addListeners(t)},this.catchHostElement=t=>{t&&(this.previousSibling=t.previousElementSibling,this.previousSibling&&this.resyncListeners(this.previousSibling))},this.catchTooltipElement=t=>{this.tooltipElement=t,this.tooltipElement&&this.resyncListeners(this.tooltipElement)},this.catchArrowElement=t=>{this.arrowElement=t},this.overFocusCount=0,this.incrementOverFocusCount=()=>{this.overFocusCount++,this.showOrHideTooltip()},this.decrementOverFocusCount=()=>{this.overFocusCount--,this.showOrHideTooltip()},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{clearTimeout(this.overFocusTimeout),this.overFocusCount>0?this.showTooltip():this.hideTooltip()}),250)},this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_id:dev_utils.nonce(),_label:"…"}}render(){return index.h(index.Host,{ref:this.catchHostElement},""!==this.state._label&&index.h("div",{class:"tooltip-floating",ref:this.catchTooltipElement},index.h("div",{class:"tooltip-area tooltip-arrow",ref:this.catchArrowElement}),index.h("kol-span-wc",{class:"tooltip-area tooltip-content",id:this.state._id,_label:this.state._label})))}validateAlign(t){buttonLink.watchTooltipAlignment(this,"_align",t)}validateId(t){validateId(this,t)}validateLabel(t){label.validateLabel(this,t)}componentWillLoad(){this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}disconnectedCallback(){this.previousSibling&&this.removeListeners(this.previousSibling),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}static get watchers(){return{_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};KolTooltip.style=styleCss,exports.kol_tooltip=KolTooltip;

package/dist/cjs/kol-tooltip.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"kol-tooltip.entry.cjs.js","mappings":"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","names":["processEnv","offset","flip","shift","arrow","computePosition","getDocument","autoUpdate","nonce","h","Host","watchTooltipAlignment","watchString","validateLabel"],"sources":["src/utils/overlay.ts","src/components/tooltip/style.css?tag=kol-tooltip","src/components/tooltip/component.tsx"],"sourcesContent":["/**\n * This file contains the functions used to manage the visible overlays.\n */\n\n/**\n * This set contains all the visible overlays.\n */\nconst VISIBLE_OVERLAYS: Set<HTMLElement> = new Set();\n\n/**\n * This function is used to add an overlay to the visible overlay list.\n * All overlays in the list will have a z-index of 999, except the last\n * one, which will have a z-index of 1000.\n *\n * @param overlay Get the overlay element reference\n */\nexport function showOverlay(overlay: HTMLElement): void {\n\tVISIBLE_OVERLAYS.forEach((visibleOverlay) => {\n\t\tvisibleOverlay.style.setProperty('z-index', '999');\n\t});\n\tVISIBLE_OVERLAYS.add(overlay);\n\toverlay.style.setProperty('z-index', '1000');\n}\n\n/**\n * This function is used to remove an overlay from the visible overlay list.\n * All overlays in the list will have a z-index of 999, except the last\n * one, which will have a z-index of 1000.\n *\n * @param overlay Get the overlay element reference\n */\nexport function hideOverlay(overlay: HTMLElement): void {\n\tVISIBLE_OVERLAYS.delete(overlay);\n\tif (VISIBLE_OVERLAYS.size > 0) {\n\t\tconst last = Array.from(VISIBLE_OVERLAYS).pop();\n\t\tif (last) {\n\t\t\tlast.style.setProperty('z-index', '1000');\n\t\t}\n\t}\n}\n","@import url(../style.css);\nkol-tooltip #floating {\n\tanimation-duration: 0.5s;\n\tanimation-iteration-count: 1;\n\tanimation-name: fadeInOpacity;\n\tanimation-timing-function: ease-in;\n\tbox-sizing: border-box;\n\tdisplay: none;\n\tposition: absolute;\n\tvisibility: hidden;\n\t/* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n\twidth: max-content;\n\ttop: 0;\n\tleft: 0;\n}\nkol-tooltip #arrow {\n\theight: 10px;\n\tposition: absolute;\n\ttransform: rotate(45deg);\n\twidth: 10px;\n\tz-index: 999;\n}\nkol-tooltip .area {\n\tbackground-color: #fff;\n\tcolor: #000;\n}\nkol-tooltip kol-span-wc {\n\tposition: relative;\n\tz-index: 1000;\n}\n@keyframes fadeInOpacity {\n\t0% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n","import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { Align } from '../../types/props/align';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { getDocument, nonce } from '../../utils/dev.utils';\nimport { hideOverlay, showOverlay } from '../../utils/overlay';\nimport { watchString } from '../../utils/prop.validators';\nimport { processEnv } from '../../utils/reuse';\nimport { KoliBriTooltipAPI, KoliBriTooltipStates } from './types';\n\n@Component({\n\ttag: 'kol-tooltip',\n\tstyleUrl: './style.css',\n\tshadow: false,\n})\nexport class KolTooltip implements KoliBriTooltipAPI {\n\tprivate previousSibling?: HTMLElement | null;\n\tprivate tooltipElement?: HTMLDivElement;\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate cleanupAutoPositioning?: () => void;\n\n\tprivate alignTooltip = (): void => {\n\t\tif (processEnv !== 'test' && this.previousSibling /* SSR instanceof HTMLElement */ && this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst target = this.previousSibling;\n\t\t\tconst tooltipEl = this.tooltipElement;\n\t\t\tconst arrowEl = this.arrowElement;\n\n\t\t\tconst middleware = [offset(arrowEl?.offsetHeight ?? 10), flip(), shift()];\n\t\t\tif (arrowEl) {\n\t\t\t\tmiddleware.push(arrow({ element: arrowEl }));\n\t\t\t}\n\n\t\t\tvoid computePosition(target, tooltipEl, {\n\t\t\t\tplacement: this.state._align,\n\t\t\t\tmiddleware: middleware,\n\t\t\t}).then(({ x, y, middlewareData, placement }) => {\n\t\t\t\tObject.assign(tooltipEl.style, {\n\t\t\t\t\tleft: `${x}px`,\n\t\t\t\t\ttop: `${y}px`,\n\t\t\t\t\tvisibility: 'visible',\n\t\t\t\t});\n\n\t\t\t\tif (arrowEl) {\n\t\t\t\t\tif (middlewareData.arrow?.x) {\n\t\t\t\t\t\tObject.assign(arrowEl.style, {\n\t\t\t\t\t\t\tleft: `${middlewareData.arrow.x}px`,\n\t\t\t\t\t\t\ttop: placement === 'bottom' ? `${-arrowEl.offsetHeight / 2}px` : '',\n\t\t\t\t\t\t\tbottom: placement === 'top' ? `${-arrowEl.offsetHeight / 2}px` : '',\n\t\t\t\t\t\t});\n\t\t\t\t\t} else if (middlewareData.arrow?.y) {\n\t\t\t\t\t\tObject.assign(arrowEl.style, {\n\t\t\t\t\t\t\tleft: placement === 'right' ? `${-arrowEl.offsetWidth / 2}px` : '',\n\t\t\t\t\t\t\tright: placement === 'left' ? `${-arrowEl.offsetWidth / 2}px` : '',\n\t\t\t\t\t\t\ttop: `${middlewareData.arrow.y}px`,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate showTooltip = (): void => {\n\t\tif (this.previousSibling && this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tshowOverlay(this.tooltipElement);\n\t\t\tthis.tooltipElement.style.setProperty('display', 'block');\n\t\t\tgetDocument().body.addEventListener('keyup', this.hideTooltipByEscape);\n\n\t\t\tconst target = this.previousSibling;\n\t\t\tconst tooltipEl = this.tooltipElement;\n\t\t\tthis.cleanupAutoPositioning = autoUpdate(target, tooltipEl, this.alignTooltip);\n\t\t}\n\t};\n\n\tprivate hideTooltip = (): void => {\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\thideOverlay(this.tooltipElement);\n\t\t\tthis.tooltipElement.style.setProperty('display', 'none');\n\t\t\tthis.tooltipElement.style.setProperty('visibility', 'hidden');\n\t\t\tif (this.cleanupAutoPositioning) {\n\t\t\t\tthis.cleanupAutoPositioning();\n\t\t\t\tthis.cleanupAutoPositioning = undefined;\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate hideTooltipByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') {\n\t\t\tgetDocument().body.removeEventListener('keyup', this.hideTooltipByEscape);\n\t\t\tthis.hideTooltip();\n\t\t}\n\t};\n\n\tprivate addListeners = (el: Element): void => {\n\t\tel.addEventListener('mouseover', this.incrementOverFocusCount);\n\t\tel.addEventListener('focus', this.incrementOverFocusCount);\n\t\tel.addEventListener('mouseout', this.decrementOverFocusCount);\n\t\tel.addEventListener('blur', this.decrementOverFocusCount);\n\t};\n\n\tprivate removeListeners = (el: Element): void => {\n\t\tel.removeEventListener('mouseover', this.incrementOverFocusCount);\n\t\tel.removeEventListener('focus', this.incrementOverFocusCount);\n\t\tel.removeEventListener('mouseout', this.decrementOverFocusCount);\n\t\tel.removeEventListener('blur', this.decrementOverFocusCount);\n\t};\n\n\tprivate resyncListeners = (el: Element): void => {\n\t\tthis.removeListeners(el);\n\t\tthis.addListeners(el);\n\t};\n\n\tprivate catchHostElement = (el: HTMLElement | null): void => {\n\t\tif (el /* SSR instanceof HTMLElement */) {\n\t\t\tthis.previousSibling = el.previousElementSibling as HTMLElement | null;\n\t\t\tif (this.previousSibling /* SSR instanceof HTMLElement */) {\n\t\t\t\tthis.resyncListeners(this.previousSibling);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate catchTooltipElement = (el?: HTMLDivElement): void => {\n\t\tthis.tooltipElement = el;\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.resyncListeners(this.tooltipElement);\n\t\t}\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostElement}>\n\t\t\t\t{this.state._label !== '' && (\n\t\t\t\t\t<div id=\"floating\" ref={this.catchTooltipElement}>\n\t\t\t\t\t\t<div class=\"area\" id=\"arrow\" ref={this.catchArrowElement} />\n\t\t\t\t\t\t<kol-span-wc class=\"area\" id={this.state._id} _label={this.state._label}></kol-span-wc>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die Ausrichtung des Tooltips in Relation zum Elternelement.\n\t */\n\t@Prop() public _align?: Align = 'top';\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: KoliBriTooltipStates = {\n\t\t_align: 'top',\n\t\t_id: nonce(),\n\t\t_label: '…', // ⚠ required\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: Align): void {\n\t\twatchTooltipAlignment(this, '_align', value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\twatchString(this, '_id', value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\tprivate overFocusCount = 0;\n\tprivate overFocusTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate incrementOverFocusCount = (): void => {\n\t\tthis.overFocusCount++;\n\t\tthis.showOrHideTooltip();\n\t};\n\n\tprivate decrementOverFocusCount = (): void => {\n\t\tthis.overFocusCount--;\n\t\tthis.showOrHideTooltip();\n\t};\n\n\tprivate showOrHideTooltip = (): void => {\n\t\tclearTimeout(this.overFocusTimeout);\n\t\tthis.overFocusTimeout = setTimeout(() => {\n\t\t\tclearTimeout(this.overFocusTimeout);\n\t\t\tif (this.overFocusCount > 0) {\n\t\t\t\tthis.showTooltip();\n\t\t\t} else {\n\t\t\t\tthis.hideTooltip();\n\t\t\t}\n\t\t}, 250);\n\t};\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentDidLoad)\n\t */\n\tpublic disconnectedCallback(): void {\n\t\tif (this.previousSibling /* SSR instanceof HTMLElement */) {\n\t\t\tthis.removeListeners(this.previousSibling);\n\t\t}\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.removeListeners(this.tooltipElement);\n\t\t}\n\t\tif (this.cleanupAutoPositioning) {\n\t\t\tthis.cleanupAutoPositioning();\n\t\t}\n\t}\n}\n"],"version":3}
+{"file":"kol-tooltip.entry.cjs.js","mappings":"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","names":["watchString","processEnv","offset","flip","shift","arrow","computePosition","getDocument","autoUpdate","nonce","h","Host","watchTooltipAlignment","validateLabel"],"sources":["src/types/props/id.ts","src/utils/overlay.ts","src/components/tooltip/style.css?tag=kol-tooltip","src/components/tooltip/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchString } from '../../utils/prop.validators';\n\nexport type IdPropType = string;\n\nexport type PropId = {\n\tid: IdPropType;\n};\n\nexport const validateId = (component: Generic.Element.Component, value?: IdPropType): void => {\n\twatchString(component, '_id', value);\n};\n","/**\n * This file contains the functions used to manage the visible overlays.\n */\n\n/**\n * This set contains all the visible overlays.\n */\nconst VISIBLE_OVERLAYS: Set<HTMLElement> = new Set();\n\n/**\n * This function is used to add an overlay to the visible overlay list.\n * All overlays in the list will have a z-index of 999, except the last\n * one, which will have a z-index of 1000.\n *\n * @param overlay Get the overlay element reference\n */\nexport function showOverlay(overlay: HTMLElement): void {\n\tVISIBLE_OVERLAYS.forEach((visibleOverlay) => {\n\t\tvisibleOverlay.style.setProperty('z-index', '999');\n\t});\n\tVISIBLE_OVERLAYS.add(overlay);\n\toverlay.style.setProperty('z-index', '1000');\n}\n\n/**\n * This function is used to remove an overlay from the visible overlay list.\n * All overlays in the list will have a z-index of 999, except the last\n * one, which will have a z-index of 1000.\n *\n * @param overlay Get the overlay element reference\n */\nexport function hideOverlay(overlay: HTMLElement): void {\n\tVISIBLE_OVERLAYS.delete(overlay);\n\tif (VISIBLE_OVERLAYS.size > 0) {\n\t\tconst last = Array.from(VISIBLE_OVERLAYS).pop();\n\t\tif (last) {\n\t\t\tlast.style.setProperty('z-index', '1000');\n\t\t}\n\t}\n}\n","@import url(../style.css);\nkol-tooltip .tooltip-floating {\n\tanimation-duration: 0.5s;\n\tanimation-iteration-count: 1;\n\tanimation-name: fadeInOpacity;\n\tanimation-timing-function: ease-in;\n\tbox-sizing: border-box;\n\tdisplay: none;\n\tposition: absolute;\n\tvisibility: hidden;\n\t/* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n\twidth: max-content;\n\ttop: 0;\n\tleft: 0;\n}\n/* Shared between content and arrow */\nkol-tooltip .tooltip-area {\n\tbackground-color: #fff;\n\tcolor: #000;\n}\nkol-tooltip .tooltip-arrow {\n\theight: 10px;\n\tposition: absolute;\n\ttransform: rotate(45deg);\n\twidth: 10px;\n\tz-index: 999;\n}\nkol-tooltip .tooltip-content {\n\tposition: relative;\n\tz-index: 1000;\n}\n@keyframes fadeInOpacity {\n\t0% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n","import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { Align } from '../../types/props/align';\nimport { IdPropType, validateId } from '../../types/props/id';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { getDocument, nonce } from '../../utils/dev.utils';\nimport { hideOverlay, showOverlay } from '../../utils/overlay';\nimport { processEnv } from '../../utils/reuse';\nimport { KoliBriTooltipAPI, KoliBriTooltipStates } from './types';\n\n@Component({\n\ttag: 'kol-tooltip',\n\tstyleUrl: './style.css',\n\tshadow: false,\n})\nexport class KolTooltip implements KoliBriTooltipAPI {\n\tprivate previousSibling?: HTMLElement | null;\n\tprivate tooltipElement?: HTMLDivElement;\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate cleanupAutoPositioning?: () => void;\n\n\tprivate alignTooltip = (): void => {\n\t\tif (processEnv !== 'test' && this.previousSibling /* SSR instanceof HTMLElement */ && this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst target = this.previousSibling;\n\t\t\tconst tooltipEl = this.tooltipElement;\n\t\t\tconst arrowEl = this.arrowElement;\n\n\t\t\tconst middleware = [offset(arrowEl?.offsetHeight ?? 10), flip(), shift()];\n\t\t\tif (arrowEl) {\n\t\t\t\tmiddleware.push(arrow({ element: arrowEl }));\n\t\t\t}\n\n\t\t\tvoid computePosition(target, tooltipEl, {\n\t\t\t\tplacement: this.state._align,\n\t\t\t\tmiddleware: middleware,\n\t\t\t}).then(({ x, y, middlewareData, placement }) => {\n\t\t\t\tObject.assign(tooltipEl.style, {\n\t\t\t\t\tleft: `${x}px`,\n\t\t\t\t\ttop: `${y}px`,\n\t\t\t\t\tvisibility: 'visible',\n\t\t\t\t});\n\n\t\t\t\tif (arrowEl) {\n\t\t\t\t\tif (middlewareData.arrow?.x) {\n\t\t\t\t\t\tObject.assign(arrowEl.style, {\n\t\t\t\t\t\t\tleft: `${middlewareData.arrow.x}px`,\n\t\t\t\t\t\t\ttop: placement === 'bottom' ? `${-arrowEl.offsetHeight / 2}px` : '',\n\t\t\t\t\t\t\tbottom: placement === 'top' ? `${-arrowEl.offsetHeight / 2}px` : '',\n\t\t\t\t\t\t});\n\t\t\t\t\t} else if (middlewareData.arrow?.y) {\n\t\t\t\t\t\tObject.assign(arrowEl.style, {\n\t\t\t\t\t\t\tleft: placement === 'right' ? `${-arrowEl.offsetWidth / 2}px` : '',\n\t\t\t\t\t\t\tright: placement === 'left' ? `${-arrowEl.offsetWidth / 2}px` : '',\n\t\t\t\t\t\t\ttop: `${middlewareData.arrow.y}px`,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate showTooltip = (): void => {\n\t\tif (this.previousSibling && this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tshowOverlay(this.tooltipElement);\n\t\t\tthis.tooltipElement.style.setProperty('display', 'block');\n\t\t\tgetDocument().body.addEventListener('keyup', this.hideTooltipByEscape);\n\n\t\t\tconst target = this.previousSibling;\n\t\t\tconst tooltipEl = this.tooltipElement;\n\t\t\tthis.cleanupAutoPositioning = autoUpdate(target, tooltipEl, this.alignTooltip);\n\t\t}\n\t};\n\n\tprivate hideTooltip = (): void => {\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\thideOverlay(this.tooltipElement);\n\t\t\tthis.tooltipElement.style.setProperty('display', 'none');\n\t\t\tthis.tooltipElement.style.setProperty('visibility', 'hidden');\n\t\t\tif (this.cleanupAutoPositioning) {\n\t\t\t\tthis.cleanupAutoPositioning();\n\t\t\t\tthis.cleanupAutoPositioning = undefined;\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate hideTooltipByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') {\n\t\t\tgetDocument().body.removeEventListener('keyup', this.hideTooltipByEscape);\n\t\t\tthis.hideTooltip();\n\t\t}\n\t};\n\n\tprivate addListeners = (el: Element): void => {\n\t\tel.addEventListener('mouseover', this.incrementOverFocusCount);\n\t\tel.addEventListener('focus', this.incrementOverFocusCount);\n\t\tel.addEventListener('mouseout', this.decrementOverFocusCount);\n\t\tel.addEventListener('blur', this.decrementOverFocusCount);\n\t};\n\n\tprivate removeListeners = (el: Element): void => {\n\t\tel.removeEventListener('mouseover', this.incrementOverFocusCount);\n\t\tel.removeEventListener('focus', this.incrementOverFocusCount);\n\t\tel.removeEventListener('mouseout', this.decrementOverFocusCount);\n\t\tel.removeEventListener('blur', this.decrementOverFocusCount);\n\t};\n\n\tprivate resyncListeners = (el: Element): void => {\n\t\tthis.removeListeners(el);\n\t\tthis.addListeners(el);\n\t};\n\n\tprivate catchHostElement = (el: HTMLElement | null): void => {\n\t\tif (el /* SSR instanceof HTMLElement */) {\n\t\t\tthis.previousSibling = el.previousElementSibling as HTMLElement | null;\n\t\t\tif (this.previousSibling /* SSR instanceof HTMLElement */) {\n\t\t\t\tthis.resyncListeners(this.previousSibling);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate catchTooltipElement = (el?: HTMLDivElement): void => {\n\t\tthis.tooltipElement = el;\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.resyncListeners(this.tooltipElement);\n\t\t}\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostElement}>\n\t\t\t\t{this.state._label !== '' && (\n\t\t\t\t\t<div class=\"tooltip-floating\" ref={this.catchTooltipElement}>\n\t\t\t\t\t\t<div class=\"tooltip-area tooltip-arrow\" ref={this.catchArrowElement} />\n\t\t\t\t\t\t<kol-span-wc class=\"tooltip-area tooltip-content\" id={this.state._id} _label={this.state._label}></kol-span-wc>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die Ausrichtung des Tooltips in Relation zum Elternelement.\n\t */\n\t@Prop() public _align?: Align = 'top';\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: KoliBriTooltipStates = {\n\t\t_align: 'top',\n\t\t_id: nonce(),\n\t\t_label: '…', // ⚠ required\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: Align): void {\n\t\twatchTooltipAlignment(this, '_align', value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: IdPropType): void {\n\t\tvalidateId(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\tprivate overFocusCount = 0;\n\tprivate overFocusTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate incrementOverFocusCount = (): void => {\n\t\tthis.overFocusCount++;\n\t\tthis.showOrHideTooltip();\n\t};\n\n\tprivate decrementOverFocusCount = (): void => {\n\t\tthis.overFocusCount--;\n\t\tthis.showOrHideTooltip();\n\t};\n\n\tprivate showOrHideTooltip = (): void => {\n\t\tclearTimeout(this.overFocusTimeout);\n\t\tthis.overFocusTimeout = setTimeout(() => {\n\t\t\tclearTimeout(this.overFocusTimeout);\n\t\t\tif (this.overFocusCount > 0) {\n\t\t\t\tthis.showTooltip();\n\t\t\t} else {\n\t\t\t\tthis.hideTooltip();\n\t\t\t}\n\t\t}, 250);\n\t};\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentDidLoad)\n\t */\n\tpublic disconnectedCallback(): void {\n\t\tif (this.previousSibling /* SSR instanceof HTMLElement */) {\n\t\t\tthis.removeListeners(this.previousSibling);\n\t\t}\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.removeListeners(this.tooltipElement);\n\t\t}\n\t\tif (this.cleanupAutoPositioning) {\n\t\t\tthis.cleanupAutoPositioning();\n\t\t}\n\t}\n}\n"],"version":3}

package/dist/cjs/kol-version.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b63c6785.js"),label=require("./label-d3f4eaaa.js");var Farbspektrum;require("./a11y.tipps-f2c86041.js"),require("./dev.utils-b325e147.js"),require("./reuse-5fad9b6e.js"),require("./prop.validators-f5e03a86.js"),require("./index-6a24b8dc.js"),function(e){e.Violett="#5f316e",e.Dunkelrot="#780f2d",e.Rot="#c0003c",e.Orange="#cd5038",e.Hellorange="#f7bb3d",e.Gelb="#f9e03a",e["Hellgrün"]="#c1ca31",e.Oliv="#597c39",e["Dunkelgrün"]="#005c45",e["Grün"]="#00854a",e["Türkis"]="#00818b",e.Hellblau="#80cdec",e.Blau="#0077b6",e.Petrol="#007194",e.Dunkelblau="#004b76",e.Dunkelgrau="#576164",e.Hellgrau="#bec5c9"}(Farbspektrum||(Farbspektrum={}));const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}",KolVersion=class{constructor(e){index.registerInstance(this,e),this._label=void 0,this._version=void 0,this.state={_label:"0.0.0-alpha.0"}}render(){return index.h("kol-badge",{_color:Farbspektrum.Hellgrau,_icon:"codicon codicon-versions",_label:`v${this.state._label}`})}validateLabel(e){label.validateLabel(this,e)}validateVersion(e){this.validateLabel(e)}componentWillLoad(){this.validateLabel(this._label||this._version)}static get watchers(){return{_label:["validateLabel"],_version:["validateVersion"]}}};KolVersion.style={default:defaultStyleCss},exports.kol_version=KolVersion;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b63c6785.js"),label=require("./label-3298a541.js");var Farbspektrum;require("./a11y.tipps-29f0cafa.js"),require("./dev.utils-321ffc6a.js"),require("./reuse-5fad9b6e.js"),require("./prop.validators-e30f7e43.js"),require("./index-6a24b8dc.js"),function(e){e.Violett="#5f316e",e.Dunkelrot="#780f2d",e.Rot="#c0003c",e.Orange="#cd5038",e.Hellorange="#f7bb3d",e.Gelb="#f9e03a",e["Hellgrün"]="#c1ca31",e.Oliv="#597c39",e["Dunkelgrün"]="#005c45",e["Grün"]="#00854a",e["Türkis"]="#00818b",e.Hellblau="#80cdec",e.Blau="#0077b6",e.Petrol="#007194",e.Dunkelblau="#004b76",e.Dunkelgrau="#576164",e.Hellgrau="#bec5c9"}(Farbspektrum||(Farbspektrum={}));const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}",KolVersion=class{constructor(e){index.registerInstance(this,e),this._label=void 0,this._version=void 0,this.state={_label:"0.0.0-alpha.0"}}render(){return index.h("kol-badge",{_color:Farbspektrum.Hellgrau,_icon:"codicon codicon-versions",_label:`v${this.state._label}`})}validateLabel(e){label.validateLabel(this,e)}validateVersion(e){this.validateLabel(e)}componentWillLoad(){this.validateLabel(this._label||this._version)}static get watchers(){return{_label:["validateLabel"],_version:["validateVersion"]}}};KolVersion.style={default:defaultStyleCss},exports.kol_version=KolVersion;