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

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

@@ -1 +1 @@
-{"version":3,"names":["AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES","Set","AVAILABLE_VERTICAL_ALIGNMENT_VALUES","AVAILABLE_ALIGNMENT_VALUES","validateAlignment","component","propName","value","watchValidator","defaultStyleCss","KolTabs","this","onCreateLabel","translate","showCreateTab","nextPossibleTabIndex","tabs","offset","step","length","_disabled","onKeyDown","event","timeout","setTimeout","clearTimeout","selectedIndex","key","state","_tabs","_selected","onSelect","onClickSelect","index","onMouseDown","stopPropagation","callbacks","onClick","catchTabPanelHost","el","tabPanelHost","selectNextNotDisabledTab","selected","upOrDown","initialSelected","Array","isArray","devHint","syncSelectedAndTabs","nextValue","nextState","_component","set","handleTabPanels","HTMLDivElement","i","children","div","document","createElement","setAttribute","slot","appendChild","_a","host","HTMLCollection","_b","_c","onCreate","_on","_ariaLabel","_tabsAlign","renderButtonGroup","h","role","map","button","_icon","_iconOnly","_label","_tabIndex","_tooltipAlign","_variant","undefined","_customClass","_ariaControls","_ariaSelected","_id","_role","_value","class","render","Host","ref","tabPanelsElement","validateAriaLabel","watchString","required","a11yHintLabelingLandmarks","validateOn","featureHint","label","Log","debug","callback","setState","validateSelected","watchNumber","hooks","beforePatch","validateTabs","watchJsonArrayString","item","uiUxHintMillerscheZahl","validateTabsAlign","componentWillLoad","componentDidRender","removeAttribute","focus","selectedTimeout","koliBriQuerySelector"],"sources":["./src/utils/validators/alignment.ts","./src/components/tabs/style.css?tag=kol-tabs&mode=default&encapsulation=shadow","./src/components/tabs/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Align } from '../../types/props';\nimport { watchValidator } from '../prop.validators';\n\nconst AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES = new Set(['\"left\", \"right\"']);\n// export const validateHorizontalAlignment = (component: Generic.Element.Component, propName: string, value?: HorizontalAlignment): void => {\n// \twatchValidator(component, propName, (value) => value === 'left' || value === 'right', AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, value);\n// };\n\nconst AVAILABLE_VERTICAL_ALIGNMENT_VALUES = new Set(['\"bottom\", \"top\"']);\n// export const validateVertivalAlignment = (component: Generic.Element.Component, propName: string, value?: VerticalAlignment): void => {\n// \twatchValidator(component, propName, (value) => value === 'top' || value === 'bottom', AVAILABLE_VERTICAL_ALIGNMENT_VALUES, value);\n// };\n\nconst AVAILABLE_ALIGNMENT_VALUES = new Set([...AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, ...AVAILABLE_VERTICAL_ALIGNMENT_VALUES]);\nexport const validateAlignment = (component: Generic.Element.Component, propName: string, value?: Align): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\tpropName,\n\t\t(value) => value === 'bottom' || value === 'left' || value === 'right' || value === 'top',\n\t\tAVAILABLE_ALIGNMENT_VALUES,\n\t\tvalue\n\t);\n};\n","@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: 0;\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 { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\nimport { KoliBriIconProp } from '../../types/icon';\n\nimport { Generic } from '@a11y-ui/core';\nimport { EventCallback, EventValueOrEventCallback } from '../../types/callbacks';\nimport { Stringified } from '../../types/common';\nimport { Align } from '../../types/props';\nimport { a11yHintLabelingLandmarks, devHint, featureHint, uiUxHintMillerscheZahl } from '../../utils/a11y.tipps';\nimport { koliBriQuerySelector, setState, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { validateAlignment } from '../../utils/validators/alignment';\nimport { translate } from '../../i18n';\nimport { KoliBriButtonCallbacks } from '../../types/button-link';\nimport { Log } from '../../utils/dev.utils';\n\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\nexport type KoliBriTabsCallbacks = /* {\n\tonClose?: true | EventOrEventValueCallback<Event, number>;\n} & */ {\n\tonCreate?:\n\t\t| EventCallback<Event>\n\t\t| {\n\t\t\t\tlabel: string;\n\t\t\t\tcallback: EventCallback<Event>;\n\t\t  };\n} & {\n\t[Events.onSelect]?: EventValueOrEventCallback<CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, number>;\n};\n\ntype RequiredTabButtonProps = {\n\tlabel: string;\n};\ntype OptionalTabButtonProps = {\n\tdisabled: boolean;\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n\ttooltipAlign: Align;\n};\nexport type TabButtonProps = Generic.Element.Members<RequiredTabButtonProps, OptionalTabButtonProps>;\n\ntype RequiredProps = {\n\tariaLabel: string;\n\ttabs: Stringified<TabButtonProps[]>;\n};\ntype OptionalProps = {\n\ton: KoliBriTabsCallbacks;\n\ttabsAlign: Align;\n\tselected: number;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\ttabsAlign: Align;\n\tselected: number;\n\ttabs: TabButtonProps[];\n};\ntype OptionalStates = {\n\ton: KoliBriTabsCallbacks;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\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.stopPropagation();\n\t// \tthis.onClose(button, event, index);\n\t// };\n\n\tprivate readonly onMouseDown = (event: Event): void => {\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._ariaLabel} 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_iconOnly={button._iconOnly}\n\t\t\t\t\t\t_label={button._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={`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._tabsAlign}`]: 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 * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _ariaLabel!: string;\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 */\n\t@Prop() public _tabsAlign?: Align = 'top';\n\n\t@State() public state: States = {\n\t\t_ariaLabel: '…',\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t\t_tabsAlign: 'top',\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('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(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\tvalidateAlignment(this, '_tabsAlign', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t\tthis.validateTabsAlign(this._tabsAlign);\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', `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#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.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"],"mappings":"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"}
+{"version":3,"names":["defaultStyleCss","KolTabs","this","onCreateLabel","translate","showCreateTab","nextPossibleTabIndex","tabs","offset","step","length","_disabled","onKeyDown","event","timeout","setTimeout","clearTimeout","selectedIndex","key","state","_tabs","_selected","onSelect","onClickSelect","index","onMouseDown","preventDefault","stopPropagation","callbacks","onClick","catchTabPanelHost","el","tabPanelHost","selectNextNotDisabledTab","selected","upOrDown","initialSelected","Array","isArray","devHint","syncSelectedAndTabs","nextValue","nextState","_component","set","handleTabPanels","HTMLDivElement","i","children","div","document","createElement","setAttribute","_label","replace","slot","appendChild","_a","host","HTMLCollection","_b","_c","onCreate","_on","_align","renderButtonGroup","h","role","map","button","_icon","_hideLabel","_iconOnly","_tabIndex","_tooltipAlign","_variant","undefined","_customClass","_ariaControls","_ariaSelected","_id","_role","_value","class","render","Host","ref","tabPanelsElement","validateAlign","value","validateAriaLabel","validateLabel","validateOn","featureHint","label","Log","debug","callback","setState","validateSelected","watchNumber","hooks","beforePatch","validateTabs","watchJsonArrayString","item","uiUxHintMillerscheZahl","validateTabsAlign","componentWillLoad","_tabsAlign","_ariaLabel","componentDidRender","removeAttribute","focus","selectedTimeout","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"],"mappings":";;;ibAAA,MAAMA,EAAkB,m+E,MCsBXC,EAAO,M,yBAGXC,KAAAC,cAAgB,GAAGC,EAAU,eAC7BF,KAAAG,cAAgB,MAGhBH,KAAAI,qBAAuB,CAACC,EAAwBC,EAAgBC,KACvE,GAAIA,EAAO,EAAG,CACb,GAAID,EAASC,EAAOF,EAAKG,OAAQ,CAChC,GAAIH,EAAKC,EAASC,GAAME,UAAW,CAClC,OAAOT,KAAKI,qBAAqBC,EAAMC,EAAQC,EAAO,E,CAEvD,OAAOD,EAASC,C,OAEX,GAAIA,EAAO,EAAG,CACpB,GAAID,EAASC,GAAQ,EAAG,CACvB,GAAIF,EAAKC,EAASC,GAAME,UAAW,CAClC,OAAOT,KAAKI,qBAAqBC,EAAMC,EAAQC,EAAO,E,CAEvD,OAAOD,EAASC,C,EAGlB,OAAOD,CAAM,EAGNN,KAAAU,UAAaC,IACpB,MAAMC,EAAUC,YAAW,KAC1BC,aAAaF,GACb,IAAIG,EAA+B,KACnC,OAAQJ,EAAMK,KACb,IAAK,aACJD,EAAgBf,KAAKI,qBAAqBJ,KAAKiB,MAAMC,MAAOlB,KAAKiB,MAAME,UAAW,GAClF,MACD,IAAK,YACJJ,EAAgBf,KAAKI,qBAAqBJ,KAAKiB,MAAMC,MAAOlB,KAAKiB,MAAME,WAAY,GACnF,MAEF,GAAIJ,IAAkB,KAAM,CAC3Bf,KAAKoB,SAAST,EAAOI,EAAe,K,IAEnC,IAAI,EAGSf,KAAAqB,cAAgB,CAACV,EAAmBW,KACpDtB,KAAKoB,SAAST,EAAOW,EAAO,KAAK,EASjBtB,KAAAuB,YAAeZ,IAC/BA,EAAMa,iBACNb,EAAMc,iBAAiB,EAGPzB,KAAA0B,UAA4C,CAC5DC,QAAS3B,KAAKqB,cACdE,YAAavB,KAAKuB,aAuCFvB,KAAA4B,kBAAqBC,IACrC7B,KAAK8B,aAAeD,CAAE,EAkEf7B,KAAA+B,yBAA2B,CAACC,EAAkB3B,EAAwB4B,EAAW,KAAMC,KAC9F,GAAIF,EAAW3B,EAAKG,OAAS,EAAG,CAC/BwB,EAAW3B,EAAKG,OAAS,C,CAE1B,GAAIwB,EAAW,EAAG,CACjBA,EAAW,C,CAEZ,GAAIG,MAAMC,QAAQ/B,IAASA,EAAK2B,GAAW,CAC1C,GAAI3B,EAAK2B,GAAUvB,UAAW,CAC7B,GAAIwB,IAAa,KAAM,CACtB,GAAID,EAAW3B,EAAKG,OAAS,EAAG,CAC/B,OAAOR,KAAK+B,yBAAyBC,EAAW,EAAG3B,EAAM,KAAM6B,GAAmBF,E,KAC5E,CACNA,EAAWE,GAAmBF,EAC9BC,EAAW,K,EAGb,GAAIA,IAAa,MAAO,CACvB,GAAID,EAAW,EAAG,CACjB,OAAOhC,KAAK+B,yBAAyBC,EAAW,EAAG3B,EAAM,MAAO6B,GAAmBF,E,KAC7E,CACNK,EAAQ,iF,IAKZ,OAAOL,CAAQ,EAGRhC,KAAAsC,oBAAsB,CAACC,EAAoBC,EAAiCC,EAAuCzB,KAC1H,IAAIgB,EACJ,GAAIhB,IAAQ,YAAa,CACxBgB,EAAWO,C,KACL,CACNP,EAAWhC,KAAKiB,MAAME,S,CAEvB,IAAId,EACJ,GAAIW,IAAQ,QAAS,CACpBX,EAAOkC,C,KACD,CACNlC,EAAOL,KAAKiB,MAAMC,K,CAEnB,GAAIb,EAAKG,OAAS,EAAG,CACpBgC,EAAUE,IAAI,YAAa1C,KAAK+B,yBAAyBC,EAAU3B,G,GAwGpDL,KAAA2C,gBAAkB,K,UAClC,GAAI3C,KAAK8B,wBAAwBc,eAAgB,CAChD,IAAK,IAAIC,EAAI7C,KAAK8B,aAAagB,SAAStC,OAAQqC,EAAI7C,KAAKiB,MAAMC,MAAMV,OAAQqC,IAAK,CACjF,MAAME,EAAMC,SAASC,cAAc,OACnCF,EAAIG,aAAa,kBAAmB,GAAGlD,KAAKiB,MAAMkC,OAAOC,QAAQ,MAAO,YAAYP,KACpFE,EAAIG,aAAa,KAAM,YAAYL,KACnCE,EAAIG,aAAa,OAAQ,YACzBH,EAAIG,aAAa,SAAU,IAC3B,MAAMG,EAAOL,SAASC,cAAc,QACpCI,EAAKH,aAAa,OAAQ,iBAAiBL,KAC3CE,EAAIO,YAAYD,GAChBrD,KAAK8B,aAAawB,YAAYP,GAC9B,KAAIQ,EAAAvD,KAAKwD,QAAI,MAAAD,SAAA,SAAAA,EAAET,oBAAoBW,kBAAkBC,EAAA1D,KAAKwD,QAAI,MAAAE,SAAA,SAAAA,EAAEZ,SAASD,IAAqC,EAE7Gc,EAAA3D,KAAKwD,QAAI,MAAAG,SAAA,SAAAA,EAAEb,SAASD,GAAGK,aAAa,OAAQ,iBAAiBL,I,KAqCzD7C,KAAA4D,SAAYjD,I,QACnBA,EAAMa,iBACNb,EAAMc,kBACN,WAAW8B,EAAAvD,KAAKiB,MAAM4C,OAAG,MAAAN,SAAA,SAAAA,EAAEK,YAAa,WAAY,EACnDF,EAAA1D,KAAKiB,MAAM4C,OAAG,MAAAH,SAAA,SAAAA,EAAEE,SAASjD,E,eApPK,M,kFAsBoC,E,qCAWhC,M,WAEO,CAC1CmD,OAAQ,MACRX,OAAQ,IACRhC,UAAW,EACXD,MAAO,G,CApGA,iBAAA6C,GACP,OACCC,EAAA,uBAAqBC,KAAK,UAAS,aAAajE,KAAKiB,MAAMkC,OAAQzC,UAAWV,KAAKU,WACjFV,KAAKiB,MAAMC,MAAMgD,KAAI,CAACC,EAAwB7C,IAC9C0C,EAAA,iBACCvD,UAAW0D,EAAO1D,UAClB2D,MAAOD,EAAOC,MACdC,WAAYF,EAAOE,YAAcF,EAAOG,UACxCnB,OAAQgB,EAAOhB,OACfU,IAAK7D,KAAK0B,UACV6C,UAAWvE,KAAKiB,MAAME,YAAcG,EAAQ,GAAK,EACjDkD,cAAeL,EAAOK,cACtBC,SAAUzE,KAAKiB,MAAME,YAAcG,EAAQ,SAAWoD,UACtDC,aAAc3E,KAAKiB,MAAME,YAAcG,EAAQ,WAAaoD,UAC5DE,cAAe,YAAYtD,IAC3BuD,cAAe7E,KAAKiB,MAAME,YAAcG,EACxCwD,IAAK,GAAG9E,KAAKiB,MAAMkC,OAAOC,QAAQ,MAAO,YAAY9B,IACrDyD,MAAM,MACNC,OAAQ1D,MAGTtB,KAAKG,eACL6D,EAAA,iBACCiB,MAAM,gBACN9B,OAAQnD,KAAKC,cACb4D,IAAK,CACJlC,QAAS3B,KAAK4D,Y,CAcb,MAAAsB,GACN,OACClB,EAACmB,EAAI,KACJnB,EAAA,OACCoB,IAAMvD,IACL7B,KAAKqF,iBAAmBxD,CAAiB,EAE1CoD,MAAO,CACN,CAAC,cAAcjF,KAAKiB,MAAM6C,UAAW,OAGrC9D,KAAK+D,oBACNC,EAAA,OAAKoB,IAAKpF,KAAK4B,qB,CAmGZ,aAAA0D,CAAcC,GACpBD,EAActF,KAAMuF,E,CAOd,iBAAAC,CAAkBD,GACxBvF,KAAKyF,cAAcF,E,CAIb,aAAAE,CAAcF,GACpBE,EAAczF,KAAMuF,E,CAId,UAAAG,CAAWH,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChDI,EAAY,2EACZ,MAAMjE,EAAkC,GACxC,UAAW6D,EAAM3B,WAAa,mBAAqB2B,EAAM3B,WAAa,SAAU,CAC/E,UAAW2B,EAAM3B,WAAa,SAAU,CACvC,UAAW2B,EAAM3B,SAASgC,QAAU,UAAYL,EAAM3B,SAASgC,MAAMpF,OAAS,EAAG,CAChFR,KAAKC,cAAgBsF,EAAM3B,SAASgC,K,KAC9B,CACNC,EAAIC,MACH,0I,CAQF,UAAWP,EAAM3B,SAASmC,WAAa,WAAY,CAClDrE,EAAUkC,SAAW2B,EAAM3B,SAASmC,Q,KAC9B,CACNF,EAAIC,MACH,0J,MAQI,CACNpE,EAAUkC,SAAW2B,EAAM3B,Q,CAE5B5D,KAAKG,qBAAuBuB,EAAUkC,WAAa,U,CAEpD,UAAW2B,EAAMnE,WAAa,WAAY,CACzCM,EAAUN,SAAWmE,EAAMnE,Q,CAE5B4E,EAA+BhG,KAAM,MAAO0B,E,EAKvC,gBAAAuE,CAAiBV,GACvBW,EAAYlG,KAAM,YAAauF,EAAO,CACrCY,MAAO,CACNC,YAAapG,KAAKsC,sB,CAMd,YAAA+D,CAAad,GACnBe,EACCtG,KACA,SACCuG,UAAgCA,IAAS,UAAYA,IAAS,aAAeA,EAAKpD,SAAW,UAAYoD,EAAKpD,OAAO3C,OAAS,GAC/H+E,EACAb,UACA,CACCyB,MAAO,CACNC,YAAapG,KAAKsC,uBAIrBkE,EAAuB,UAAWxG,KAAKiB,MAAMC,MAAMV,O,CAI7C,iBAAAiG,CAAkBlB,GACxBvF,KAAKsF,cAAcC,E,CAGb,iBAAAmB,GACN1G,KAAKsF,cAActF,KAAK8D,QAAU9D,KAAK2G,YACvC3G,KAAKyF,cAAczF,KAAKmD,QAAUnD,KAAK4G,YACvC5G,KAAK0F,WAAW1F,KAAK6D,KACrB7D,KAAKiG,iBAAiBjG,KAAKmB,WAC3BnB,KAAKqG,aAAarG,KAAKkB,M,CAuBjB,kBAAA2F,GACN7G,KAAK2C,kBACL,GAAI3C,KAAK8B,wBAAwBc,eAAgB,CAChD,IAAK,IAAIC,EAAI,EAAGA,EAAI7C,KAAK8B,aAAagB,SAAStC,OAAQqC,IAAK,CAC3D,GAAIA,IAAM7C,KAAKiB,MAAME,UAAW,CAC/BnB,KAAK8B,aAAagB,SAASD,GAAGK,aAAa,SAAU,G,KAC/C,CACNlD,KAAK8B,aAAagB,SAASD,GAAGiE,gBAAgB,S,IAM1C,QAAA1F,CAAST,EAAgEW,EAAeyF,EAAQ,O,QACvG/G,KAAKmB,UAAYG,EACjB,WAAWiC,EAAAvD,KAAK6D,OAAG,MAAAN,SAAA,SAAAA,EAAEnC,YAAa,WAAY,EAC7CsC,EAAA1D,KAAK6D,OAAG,MAAAH,SAAA,SAAAA,EAAEtC,SAAST,EAAOW,E,CAE3B,GAAIyF,IAAU,KAAM,CAGnB/G,KAAKgH,gBAAkBnG,YAAW,KACjCC,aAAad,KAAKgH,iBAClB,GAAIhH,KAAKqF,iBAAmD,CAC3D,MAAMlB,EAA6B8C,EAAqB,UAAUjH,KAAKiB,MAAMkC,OAAOC,QAAQ,MAAO,YAAY9B,IAAStB,KAAKqF,kBAC7HlB,IAAM,MAANA,SAAM,SAANA,EAAQ4C,O,IAEP,I"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,F as e,H as i,r as a,g as s}from"./index-34c3d6f8.js";import{a as n}from"./i18n-87a7ecb7.js";import{n as l}from"./dev.utils-157f0499.js";import{b as h,e as r,w as o,a as d,s as p}from"./prop.validators-f81af56e.js";import{a as u}from"./reuse-3a02afb9.js";import{I as c,g as f}from"./controller-cc18d25f.js";import"./index-bacdc4cb.js";import"./index-ff788b4b.js";import"./a11y.tipps-2e27f8e6.js";import"./tab-index-ff5374b8.js";import"./label-559ca626.js";const v=(t,e)=>{h(t,"_adjustHeight",e)},m=(t,e)=>{h(t,"_hasCounter",e)};class y extends c{constructor(t,e,a){super(t,e,a),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateHasCounter(t){h(this.component,"_hasCounter",t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){r(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){o(this.component,"_placeholder",t)}validateReadOnly(t){h(this.component,"_readOnly",t)}validateResize(t){d(this.component,"_resize",(t=>"string"==typeof t&&("both"===t||"horizontal"===t||"none"===t||"vertical"===t)),new Set("String {both, horizontal, vertical, none}"),t)}validateRequired(t){h(this.component,"_required",t)}validateRows(t){r(this.component,"_rows",t)}validateValue(t){o(this.component,"_value",t,{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 b=":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]){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}",_=t=>{t.style.overflow="hidden";const e=t.rows,a=t.clientHeight/e;t.rows=1;const i=Math.round(t.scrollHeight/a);return t.rows=e,i},g=class{render(){const{ariaDescribedBy:a}=f(this.state),s=""===this.state._label,l="…"===this.state._label;return t(i,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:"textarea",_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_readOnly:this.state._readOnly,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},s?t("slot",{name:"expert"}):l?t("slot",null):this.state._label),t("div",{slot:"input"},t("textarea",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.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})),this.state._hasCounter&&t("span",{"aria-atomic":"true","aria-live":"polite"},this.state._currentLength,this.state._maxLength&&t(e,null,t("span",{"aria-label":n("kol-of"),role:"img"},"/"),this.state._maxLength)," ",t("span",null,n("kol-characters"))))))}constructor(t){a(this,t),this.catchRef=t=>{this.ref=t,u(this.host,this.ref)},this.onChange=t=>{this.ref instanceof HTMLTextAreaElement&&(p(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=_(this.ref))),"function"==typeof this.controller.onFacade.onChange&&this.controller.onFacade.onChange(t)},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._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_id:l(),_label:"…",_resize:"vertical"},this.controller=new y(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAdjustHeight(t){v(this,t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){m(this,t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateResize(t){this.controller.validateResize(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.validateAdjustHeight(this._adjustHeight),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return s(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"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};g.style={default:b};export{g as kol_textarea};
+import{h as t,H as e,r as i,g as a}from"./index-2c046ff1.js";import{n as s}from"./dev.utils-21cabf82.js";import{a as n,e as l,d as h,w as d,s as r}from"./prop.validators-2d07ec24.js";import{a as o}from"./reuse-c2156413.js";import{I as u,g as p}from"./controller-11107d10.js";import{v as c}from"./rows-97254602.js";import"./a11y.tipps-49a594cd.js";import"./index-37b5cbcf.js";import"./label-78ab78c2.js";import"./events-3762d15f.js";import"./tab-index-68b5c2de.js";class f extends u{constructor(t,e,a){super(t,e,a),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateHasCounter(t){n(this.component,"_hasCounter",t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){l(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){h(this.component,"_placeholder",t)}validateReadOnly(t){n(this.component,"_readOnly",t)}validateResize(t){d(this.component,"_resize",(t=>"string"==typeof t&&("both"===t||"horizontal"===t||"none"===t||"vertical"===t)),new Set("String {both, horizontal, vertical, none}"),t)}validateRequired(t){n(this.component,"_required",t)}validateRows(t){c(this.component,t)}validateValue(t){h(this.component,"_value",t,{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 v=":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}",y=t=>{t.style.overflow="hidden";const e=t.rows,a=t.clientHeight/e;t.rows=1;const i=Math.round(t.scrollHeight/a);return t.rows=e,i},m=class{render(){const{ariaDescribedBy:a}=p(this.state),i=!1===this.state._label;return t(e,{class:{"has-value":this.state._hasValue}},t("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 t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},i?t("slot",null):this.state._label),t("div",{slot:"input"},t("textarea",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.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})),t("kol-tooltip",{"aria-hidden":"true",hidden:i||!this.state._hideLabel,_align:this._tooltipAlign,_id:`${this.state._id}-tooltip`,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,o(this.host,this.ref)},this.onChange=t=>{this.ref instanceof HTMLTextAreaElement&&(r(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=y(this.ref))),"function"==typeof this.controller.onFacade.onChange&&this.controller.onFacade.onChange(t)},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-${s()}`,_label:!1,_resize:"vertical"},this.controller=new f(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAdjustHeight(t){this.controller.validateAdjustHeight(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateResize(t){this.controller.validateResize(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return a(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"]}}};m.style={default:v};export{m as kol_textarea};

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

@@ -1 +1 @@
-{"version":3,"names":["validateAdjustHeight","component","value","watchBoolean","validateHasCounter","TextareaController","InputController","constructor","name","host","super","this","afterSyncCharCounter","_value","length","state","_currentLength","hooks","afterPatch","validateMaxLength","watchNumber","min","validatePlaceholder","watchString","validateReadOnly","validateResize","watchValidator","Set","validateRequired","validateRows","validateValue","setFormAssociatedValue","componentWillLoad","_hasCounter","_maxLength","_placeholder","_readOnly","_resize","_required","_rows","defaultStyleCss","increaseTextareaHeight","el","style","overflow","currentRows","rows","rowHeight","clientHeight","nextRows","Math","round","scrollHeight","KolTextarea","render","ariaDescribedBy","getRenderStates","showExpertSlot","_label","showDefaultSlot","h","Host","class","_hasValue","_alert","_disabled","_error","_hideLabel","_hint","_id","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoCorrect","disabled","id","maxlength","_name","readOnly","required","placeholder","spellcheck","controller","onFacade","onKeyUp","onChange","resize","Fragment","translate","role","hostRef","propagateFocus","event","HTMLTextAreaElement","setState","_adjustHeight","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateLabel","validateName","validateOn","validateTabIndex","validateTouched","addValueChangeListener","v"],"sources":["./src/types/props/adjust-height.ts","./src/types/props/has-counter.ts","./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';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Passt die Höhe des Eingabefeldes automatisch an den Füllstand an.\n */\n/** en\n * Adjusts the height of the element to its content.\n */\nexport type PropAdjustHeight = {\n\tadjustHeight: boolean;\n};\n\n/* validator */\nexport const validateAdjustHeight = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_adjustHeight', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Zeigt die Zeichenanzahlanzeige am unteren Rand des EIngabefeldes.\n */\n/** en\n * Shows the the character count on the lower border of the input.\n */\nexport type PropHasCounter = {\n\thasCounter: boolean;\n};\n\n/* validator */\nexport const validateHasCounter = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_hasCounter', value);\n};\n","import { Generic } from '@a11y-ui/core';\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?: number): void {\n\t\twatchNumber(this.component, '_rows', 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, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { translate } from '../../i18n';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { validateAdjustHeight, validateHasCounter } from '../../types/props';\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 showExpertSlot = this.state._label === ''; // _label=\"\" or _label\n\t\tconst showDefaultSlot = this.state._label === '…'; // deprecated: default slot will be removed in v2.0.0\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass=\"textarea\"\n\t\t\t\t\t_alert={this.state._alert}\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_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_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<span slot=\"label\">{showExpertSlot ? <slot name=\"expert\"></slot> : showDefaultSlot ? <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></textarea>\n\t\t\t\t\t\t{this.state._hasCounter && (\n\t\t\t\t\t\t\t<span aria-atomic=\"true\" aria-live=\"polite\">\n\t\t\t\t\t\t\t\t{this.state._currentLength}\n\t\t\t\t\t\t\t\t{this.state._maxLength && (\n\t\t\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t\t\t<span aria-label={translate('kol-of')} role=\"img\">\n\t\t\t\t\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t{this.state._maxLength}\n\t\t\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t\t<span>{translate('kol-characters')}</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\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({ reflect: true }) 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({ reflect: true }) 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({ reflect: true }) 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({ reflect: true }) 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!: string;\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({ reflect: true }) 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({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt die Anzahl der anzuzeigenden Zeilen des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: number;\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 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: nonce(), // ⚠ required\n\t\t_label: '…', // ⚠ 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\tvalidateAdjustHeight(this, 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\tvalidateHasCounter(this, 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?: string): 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?: number): void {\n\t\tthis.controller.validateRows(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\t\tthis.validateAdjustHeight(this._adjustHeight);\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"],"mappings":"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"}
+{"version":3,"names":["TextareaController","InputController","constructor","component","name","host","super","this","afterSyncCharCounter","_value","length","state","_currentLength","validateHasCounter","value","watchBoolean","hooks","afterPatch","validateMaxLength","watchNumber","min","validatePlaceholder","watchString","validateReadOnly","validateResize","watchValidator","Set","validateRequired","validateRows","validateValue","setFormAssociatedValue","componentWillLoad","_hasCounter","_maxLength","_placeholder","_readOnly","_resize","_required","_rows","defaultStyleCss","increaseTextareaHeight","el","style","overflow","currentRows","rows","rowHeight","clientHeight","nextRows","Math","round","scrollHeight","KolTextarea","render","ariaDescribedBy","getRenderStates","hasExpertSlot","_label","h","Host","class","_hasValue","textarea","_hideLabel","_alert","_disabled","_error","_hint","_id","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoCorrect","disabled","id","maxlength","_name","readOnly","required","placeholder","spellcheck","controller","onFacade","onKeyUp","onChange","resize","hidden","_align","_tooltipAlign","hostRef","propagateFocus","event","HTMLTextAreaElement","setState","_adjustHeight","nonce","validateAccessKey","validateAdjustHeight","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","addValueChangeListener","v"],"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"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as e}from"./index-34c3d6f8.js";import{b as s,w as a,s as o,e as n,a as h}from"./prop.validators-f81af56e.js";import{w as r}from"./validation-2cc1bb89.js";import{f as l}from"./a11y.tipps-2e27f8e6.js";import{v as d}from"./show-a9e2d4c4.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";const p=(t,i)=>{s(t,"_hasCloser",i)},c=":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}",u=class{constructor(i){t(this,i),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._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){s(this,"_alert",t)}validateHasCloser(t){p(this,t)}validateHeading(t){a(this,"_heading",t)}validateLevel(t){r(this,t)}validateOn(t){if("object"==typeof t&&null!==t){l("[KolToast] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const i={};"function"!=typeof t.onClose&&!0!==t.onClose||(i.onClose=t.onClose),o(this,"_on",i)}}validateShow(t){d(this,t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(t){n(this,"_showDuration",t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(t){h(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.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateShow(this._show),this.validateShowDuration(this._showDuration),this.validateType(this._type)}render(){return i(e,null,this.state._show&&i("div",null,i("kol-alert",{_alert:this.state._alert,_heading:this.state._heading,_level:this.state._level,_hasCloser:this.state._hasCloser,_type:this.state._type,_variant:"card",_on:this.on},i("slot",null))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};u.style={default:c};export{u as kol_toast};
+import{r as t,h as i,H as s}from"./index-2c046ff1.js";import{v as e}from"./has-closer-92997664.js";import{v as a}from"./label-78ab78c2.js";import{v as o}from"./show-2d014a9e.js";import{a as h,s as n,e as r,w as l}from"./prop.validators-2d07ec24.js";import{w as d}from"./validation-4d262227.js";import"./a11y.tipps-49a594cd.js";import"./dev.utils-21cabf82.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";const p=":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}",c=class{constructor(i){t(this,i),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){h(this,"_alert",t)}validateHasCloser(t){e(this,t)}validateHeading(t){this.validateLabel(t)}validateLabel(t){a(this,t)}validateLevel(t){d(this,t)}validateOn(t){"object"!=typeof t||"function"!=typeof(null==t?void 0:t.onClose)&&!0!==t.onClose||n(this,"_on",{onClose:t.onClose})}validateShow(t){o(this,t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(t){r(this,"_showDuration",t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(t){l(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 i(s,null,this.state._show&&i("div",null,i("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},i("slot",null))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};c.style={default:p};export{c as kol_toast};

package/dist/kolibri/kol-toast.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["validateHasCloser","component","value","watchBoolean","defaultStyleCss","KolToast","this","handleShowAndDuration","state","_show","_showDuration","clearTimeout","durationTimeout","setTimeout","close","Object","assign","_a","_on","onClose","undefined","Event","on","_alert","_level","validateAlert","validateHeading","watchString","validateLevel","watchHeadingLevel","validateOn","featureHint","callbacks","setState","validateShow","hooks","afterPatch","validateShowDuration","watchNumber","validateType","watchValidator","Set","componentWillLoad","_hasCloser","_heading","_type","render","h","Host","_variant"],"sources":["./src/types/props/has-closer.ts","./src/components/toast/style.css?tag=kol-toast&mode=default&encapsulation=shadow","./src/components/toast/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Markiert dieses Element als geöffnet, oder dass das verknüpfte Element (aria-controls/aria-owns) geöffnet ist.\n */\n/** en\n * Marks this element as open/expanded, or that the connected element (aria-controls/aria-owns) is open/expanded.\n */\nexport type PropHasCloser = {\n\thasCloser: boolean;\n};\n\n/* validator */\nexport const validateHasCloser = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_hasCloser', value);\n};\n","@import url(../style.css);\n@import url(../host-display-block.css);\n:host > div {\n\tbackground-color: #fff;\n\t/* needed for overlay situations */\n\theight: 0;\n\tleft: 0;\n\tposition: fixed;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 200;\n}\n:host > div > kol-alert {\n\tdisplay: block;\n\tmargin: auto;\n\tmax-width: 750px;\n}\n:host > div > kol-button-wc {\n\tdisplay: block;\n\tmargin: auto;\n\tposition: relative;\n\ttop: 0;\n\twidth: 1em;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { AlertType } from '../alert/types';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { setState, watchBoolean, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { KoliBriToastEventCallbacks } from '../../types/toast';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { PropHasCloser, PropShow, validateHasCloser, validateShow } from '../../types/props';\n\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\talert: boolean;\n\theading: string;\n\tlevel: HeadingLevel;\n\ton: KoliBriToastEventCallbacks;\n\tshowDuration: number;\n\ttype: AlertType;\n} & PropHasCloser &\n\tPropShow;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-toast',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolToast implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t */\n\t@Prop({ reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob die Komponente einen Schließen-Schalter hat.\n\t */\n\t@Prop({ reflect: true }) public _hasCloser?: boolean = false;\n\n\t/**\n\t * Gibt die Beschriftung der Komponente an.\n\t */\n\t@Prop() public _heading?: string = '';\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Toasts an.\n\t */\n\t@Prop() public _on?: KoliBriToastEventCallbacks;\n\n\t/**\n\t * Gibt an, ob die Komponente entweder ein- oder ausgeblendet ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = true;\n\n\t/**\n\t * Gibt an, wie viele Millisekunden der Toast eingeblendet werden soll.\n\t */\n\t@Prop() public _showDuration?: number = 10000;\n\n\t/**\n\t * Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.\n\t */\n\t@Prop() public _type?: AlertType = 'default';\n\n\t@State() public state: States = {\n\t\t_alert: true,\n\t\t_level: 1,\n\t\t_show: true,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: boolean): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriToastEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tfeatureHint('[KolToast] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');\n\t\t\tconst callbacks: KoliBriToastEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' || value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriToastEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tvalidateShow(this, value, { hooks: { afterPatch: this.handleShowAndDuration } });\n\t}\n\n\t@Watch('_showDuration')\n\tpublic validateShowDuration(value?: number): void {\n\t\twatchNumber(this, '_showDuration', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.handleShowAndDuration,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'),\n\t\t\tnew Set('String {success, info, warning, error}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateShow(this._show);\n\t\tthis.validateShowDuration(this._showDuration);\n\t\tthis.validateType(this._type);\n\t}\n\n\tprivate durationTimeout?: NodeJS.Timer;\n\n\tprivate readonly handleShowAndDuration = () => {\n\t\tif (this.state._show === true && typeof this.state._showDuration === 'number' && this.state._showDuration >= 0) {\n\t\t\tclearTimeout(this.durationTimeout as NodeJS.Timer);\n\t\t\tthis.durationTimeout = setTimeout(() => {\n\t\t\t\tthis.close();\n\t\t\t}, this.state._showDuration);\n\t\t}\n\t};\n\n\tprivate readonly close = () => {\n\t\tthis._show = false;\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_show: false,\n\t\t};\n\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClose: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<kol-alert\n\t\t\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t\t\t_heading={this.state._heading}\n\t\t\t\t\t\t\t_level={this.state._level}\n\t\t\t\t\t\t\t_hasCloser={this.state._hasCloser}\n\t\t\t\t\t\t\t_type={this.state._type}\n\t\t\t\t\t\t\t_variant=\"card\"\n\t\t\t\t\t\t\t// tabindex=\"0\"\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</kol-alert>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;6VAeO,MAAMA,EAAoB,CAACC,EAAsCC,KACvEC,EAAaF,EAAW,aAAcC,EAAM,EChB7C,MAAME,EAAkB,y7B,MCqCXC,EAAQ,M,yBAqHHC,KAAAC,sBAAwB,KACxC,GAAID,KAAKE,MAAMC,QAAU,aAAeH,KAAKE,MAAME,gBAAkB,UAAYJ,KAAKE,MAAME,eAAiB,EAAG,CAC/GC,aAAaL,KAAKM,iBAClBN,KAAKM,gBAAkBC,YAAW,KACjCP,KAAKQ,OAAO,GACVR,KAAKE,MAAME,c,GAICJ,KAAAQ,MAAQ,K,MACxBR,KAAKG,MAAQ,MACbH,KAAKE,MAAKO,OAAAC,OAAAD,OAAAC,OAAA,GACNV,KAAKE,OAAK,CACbC,MAAO,QAGR,KAAIQ,EAAAX,KAAKY,OAAG,MAAAD,SAAA,SAAAA,EAAEE,WAAYC,UAAW,CACpCd,KAAKY,IAAIC,QAAQ,IAAIE,MAAM,S,GAIZf,KAAAgB,GAAK,CACrBH,QAASb,KAAKQ,O,YAvIoC,K,gBAKI,M,cAKpB,G,YAKI,E,8BAU0B,K,mBAKzB,I,WAKL,U,WAEH,CAC/BS,OAAQ,KACRC,OAAQ,EACRf,MAAO,K,CAIDgB,cAAcvB,GACpBC,EAAaG,KAAM,SAAUJ,E,CAIvBF,kBAAkBE,GACxBF,EAAkBM,KAAMJ,E,CAIlBwB,gBAAgBxB,GACtByB,EAAYrB,KAAM,WAAYJ,E,CAIxB0B,cAAc1B,GACpB2B,EAAkBvB,KAAMJ,E,CAIlB4B,WAAW5B,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChD6B,EAAY,4EACZ,MAAMC,EAAwC,GAC9C,UAAW9B,EAAMiB,UAAY,YAAcjB,EAAMiB,UAAY,KAAM,CAClEa,EAAUb,QAAUjB,EAAMiB,O,CAE3Bc,EAAqC3B,KAAM,MAAO0B,E,EAK7CE,aAAahC,GACnBgC,EAAa5B,KAAMJ,EAAO,CAAEiC,MAAO,CAAEC,WAAY9B,KAAKC,wB,CAIhD8B,qBAAqBnC,GAC3BoC,EAAYhC,KAAM,gBAAiBJ,EAAO,CACzCiC,MAAO,CACNC,WAAY9B,KAAKC,wB,CAMbgC,aAAarC,GACnBsC,EACClC,KACA,SACCJ,UAAiBA,IAAU,WAAaA,IAAU,WAAaA,IAAU,SAAWA,IAAU,QAAUA,IAAU,WAAaA,IAAU,YAC1I,IAAIuC,IAAI,0CACRvC,E,CAIKwC,oBACNpC,KAAKmB,cAAcnB,KAAKiB,QACxBjB,KAAKN,kBAAkBM,KAAKqC,YAC5BrC,KAAKoB,gBAAgBpB,KAAKsC,UAC1BtC,KAAKsB,cAActB,KAAKkB,QACxBlB,KAAKwB,WAAWxB,KAAKY,KACrBZ,KAAK4B,aAAa5B,KAAKG,OACvBH,KAAK+B,qBAAqB/B,KAAKI,eAC/BJ,KAAKiC,aAAajC,KAAKuC,M,CA8BjBC,SACN,OACCC,EAACC,EAAI,KACH1C,KAAKE,MAAMC,OACXsC,EAAA,WACCA,EAAA,aACCxB,OAAQjB,KAAKE,MAAMe,OACnBqB,SAAUtC,KAAKE,MAAMoC,SACrBpB,OAAQlB,KAAKE,MAAMgB,OACnBmB,WAAYrC,KAAKE,MAAMmC,WACvBE,MAAOvC,KAAKE,MAAMqC,MAClBI,SAAS,OAET/B,IAAKZ,KAAKgB,IAEVyB,EAAA,e"}
+{"version":3,"names":["defaultStyleCss","KolToast","this","handleShowAndDuration","state","_show","_showDuration","clearTimeout","durationTimeout","setTimeout","close","Object","assign","_a","_on","onClose","undefined","Event","on","_alert","_level","validateAlert","value","watchBoolean","validateHasCloser","validateHeading","validateLabel","validateLevel","watchHeadingLevel","validateOn","setState","validateShow","hooks","afterPatch","validateShowDuration","watchNumber","validateType","watchValidator","Set","componentWillLoad","_hasCloser","_label","_heading","_type","render","h","Host","_variant"],"sources":["src/components/toast/style.css?tag=kol-toast&mode=default&encapsulation=shadow","src/components/toast/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n:host > div {\n\tbackground-color: #fff;\n\t/* needed for overlay situations */\n\theight: 0;\n\tleft: 0;\n\tposition: fixed;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 200;\n}\n:host > div > kol-alert {\n\tdisplay: block;\n\tmargin: auto;\n\tmax-width: 750px;\n}\n:host > div > kol-button-wc {\n\tdisplay: block;\n\tmargin: auto;\n\tposition: relative;\n\ttop: 0;\n\twidth: 1em;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { validateHasCloser } from '../../types/props/has-closer';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { validateShow } from '../../types/props/show';\nimport { KoliBriToastEventCallbacks } from '../../types/toast';\nimport { setState, watchBoolean, watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { AlertType } from '../alert/types';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { KoliBriToastAPI, KoliBriToastStates } from './types';\n\n/**\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-toast',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolToast implements KoliBriToastAPI {\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t */\n\t@Prop() public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob die Komponente einen Schließen-Schalter hat.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _heading?: string = '';\n\n\t/**\n\t * Defines the text to show in the Toast.\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Toasts an.\n\t */\n\t@Prop() public _on?: KoliBriToastEventCallbacks;\n\n\t/**\n\t * Gibt an, ob die Komponente entweder ein- oder ausgeblendet ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = true;\n\n\t/**\n\t * Gibt an, wie viele Millisekunden der Toast eingeblendet werden soll.\n\t */\n\t@Prop() public _showDuration?: number = 10000;\n\n\t/**\n\t * Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.\n\t */\n\t@Prop() public _type?: AlertType = 'default';\n\n\t@State() public state: KoliBriToastStates = {\n\t\t_alert: true,\n\t\t_level: 1,\n\t\t_show: true,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: boolean): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(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('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriToastEventCallbacks): void {\n\t\tif (typeof value === 'object' && (typeof value?.onClose === 'function' || value.onClose === true)) {\n\t\t\tsetState<KoliBriToastEventCallbacks>(this, '_on', { onClose: value.onClose });\n\t\t}\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tvalidateShow(this, value, { hooks: { afterPatch: this.handleShowAndDuration } });\n\t}\n\n\t@Watch('_showDuration')\n\tpublic validateShowDuration(value?: number): void {\n\t\twatchNumber(this, '_showDuration', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.handleShowAndDuration,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'),\n\t\t\tnew Set('String {success, info, warning, error}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label || this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateShow(this._show);\n\t\tthis.validateShowDuration(this._showDuration);\n\t\tthis.validateType(this._type);\n\t}\n\n\tprivate durationTimeout?: NodeJS.Timer;\n\n\tprivate readonly handleShowAndDuration = () => {\n\t\tif (this.state._show === true && typeof this.state._showDuration === 'number' && this.state._showDuration >= 0) {\n\t\t\tclearTimeout(this.durationTimeout as NodeJS.Timer);\n\t\t\tthis.durationTimeout = setTimeout(() => {\n\t\t\t\tthis.close();\n\t\t\t}, this.state._showDuration);\n\t\t}\n\t};\n\n\tprivate readonly close = () => {\n\t\tthis._show = false;\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_show: false,\n\t\t};\n\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClose: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<kol-alert\n\t\t\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t\t\t_level={this.state._level}\n\t\t\t\t\t\t\t_hasCloser={this.state._hasCloser}\n\t\t\t\t\t\t\t_type={this.state._type}\n\t\t\t\t\t\t\t_variant=\"card\"\n\t\t\t\t\t\t\t// tabindex=\"0\"\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</kol-alert>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;+ZAAA,MAAMA,EAAkB,y7B,MCsBXC,EAAQ,M,yBA2HHC,KAAAC,sBAAwB,KACxC,GAAID,KAAKE,MAAMC,QAAU,aAAeH,KAAKE,MAAME,gBAAkB,UAAYJ,KAAKE,MAAME,eAAiB,EAAG,CAC/GC,aAAaL,KAAKM,iBAClBN,KAAKM,gBAAkBC,YAAW,KACjCP,KAAKQ,OAAO,GACVR,KAAKE,MAAME,c,GAICJ,KAAAQ,MAAQ,K,MACxBR,KAAKG,MAAQ,MACbH,KAAKE,MAAKO,OAAAC,OAAAD,OAAAC,OAAA,GACNV,KAAKE,OAAK,CACbC,MAAO,QAGR,KAAIQ,EAAAX,KAAKY,OAAG,MAAAD,SAAA,SAAAA,EAAEE,WAAYC,UAAW,CACpCd,KAAKY,IAAIC,QAAQ,IAAIE,MAAM,S,GAIZf,KAAAgB,GAAK,CACrBH,QAASb,KAAKQ,O,YA7ImB,K,gBAKI,M,cAMH,G,kCAUI,E,8BAU0B,K,mBAKzB,I,WAKL,U,WAES,CAC3CS,OAAQ,KACRC,OAAQ,EACRf,MAAO,K,CAID,aAAAgB,CAAcC,GACpBC,EAAarB,KAAM,SAAUoB,E,CAIvB,iBAAAE,CAAkBF,GACxBE,EAAkBtB,KAAMoB,E,CAIlB,eAAAG,CAAgBH,GACtBpB,KAAKwB,cAAcJ,E,CAIb,aAAAI,CAAcJ,GACpBI,EAAcxB,KAAMoB,E,CAId,aAAAK,CAAcL,GACpBM,EAAkB1B,KAAMoB,E,CAIlB,UAAAO,CAAWP,GACjB,UAAWA,IAAU,kBAAoBA,IAAK,MAALA,SAAK,SAALA,EAAOP,WAAY,YAAcO,EAAMP,UAAY,MAAO,CAClGe,EAAqC5B,KAAM,MAAO,CAAEa,QAASO,EAAMP,S,EAK9D,YAAAgB,CAAaT,GACnBS,EAAa7B,KAAMoB,EAAO,CAAEU,MAAO,CAAEC,WAAY/B,KAAKC,wB,CAIhD,oBAAA+B,CAAqBZ,GAC3Ba,EAAYjC,KAAM,gBAAiBoB,EAAO,CACzCU,MAAO,CACNC,WAAY/B,KAAKC,wB,CAMb,YAAAiC,CAAad,GACnBe,EACCnC,KACA,SACCoB,UAAiBA,IAAU,WAAaA,IAAU,WAAaA,IAAU,SAAWA,IAAU,QAAUA,IAAU,WAAaA,IAAU,YAC1I,IAAIgB,IAAI,0CACRhB,E,CAIK,iBAAAiB,GACNrC,KAAKmB,cAAcnB,KAAKiB,QACxBjB,KAAKsB,kBAAkBtB,KAAKsC,YAC5BtC,KAAKwB,cAAcxB,KAAKuC,QAAUvC,KAAKwC,UACvCxC,KAAKyB,cAAczB,KAAKkB,QACxBlB,KAAK2B,WAAW3B,KAAKY,KACrBZ,KAAK6B,aAAa7B,KAAKG,OACvBH,KAAKgC,qBAAqBhC,KAAKI,eAC/BJ,KAAKkC,aAAalC,KAAKyC,M,CA8BjB,MAAAC,GACN,OACCC,EAACC,EAAI,KACH5C,KAAKE,MAAMC,OACXwC,EAAA,WACCA,EAAA,aACC1B,OAAQjB,KAAKE,MAAMe,OACnBsB,OAAQvC,KAAKE,MAAMqC,OACnBrB,OAAQlB,KAAKE,MAAMgB,OACnBoB,WAAYtC,KAAKE,MAAMoC,WACvBG,MAAOzC,KAAKE,MAAMuC,MAClBI,SAAS,OAETjC,IAAKZ,KAAKgB,IAEV2B,EAAA,e"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as s}from"./index-34c3d6f8.js";import{c as o,o as e,f as n,s as a,a as h}from"./floating-ui.dom.esm-74010e65.js";import{w as l}from"./button-link-283b2d32.js";import{g as r,n as d}from"./dev.utils-157f0499.js";import{w as p}from"./prop.validators-f81af56e.js";import{p as f}from"./reuse-3a02afb9.js";import"./a11y.tipps-2e27f8e6.js";import"./index-ff788b4b.js";const c=new Set;function m(t){c.forEach((t=>{t.style.setProperty("z-index","999")})),c.add(t),t.style.setProperty("z-index","1000")}function u(t){if(c.delete(t),c.size>0){const t=Array.from(c).pop();t&&t.style.setProperty("z-index","1000")}}const b=":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}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}}",v=class{constructor(t){i(this,t),this.alignTooltip=t=>{var i;if("test"!==f&&this.previousSibling&&this.tooltipElement){const s=this.previousSibling,l=this.tooltipElement,r=this.arrowElement,p=[e(null!==(i=null==r?void 0:r.offsetHeight)&&void 0!==i?i:10),n(),a()];r&&p.push(h({element:r})),o(s,l,{placement:this.state._align,middleware:p}).then((({x:e,y:i,middlewareData:o,placement:s})=>{var n,a;const h=l.style.left,p=l.style.top;Object.assign(l.style,{left:`${e}px`,top:`${i}px`}),r&&((null===(n=o.arrow)||void 0===n?void 0:n.x)?Object.assign(r.style,{left:`${o.arrow.x}px`,top:"bottom"===s?-r.offsetHeight/2+"px":"",bottom:"top"===s?-r.offsetHeight/2+"px":""}):(null===(a=o.arrow)||void 0===a?void 0:a.y)&&Object.assign(r.style,{left:"right"===s?-r.offsetWidth/2+"px":"",right:"left"===s?-r.offsetWidth/2+"px":"",top:`${o.arrow.y}px`})),h!==l.style.left||p!==l.style.top?this.alignTooltip(t):"function"==typeof t&&t()}))}},this.showTooltip=()=>{this.tooltipElement&&(m(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),r().body.addEventListener("keyup",this.hideTooltipByEscape),this.alignTooltip((()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("visibility","visible"),document.addEventListener("scroll",this.showTooltip))})))},this.hideTooltip=()=>{this.tooltipElement&&(u(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),document.removeEventListener("scroll",this.showTooltip))},this.hideTooltipByEscape=t=>{"Escape"===t.key&&(r().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:d(),_label:"…"}}render(){return t(s,{ref:this.catchHostElement},""!==this.state._label&&t("div",{id:"floating",ref:this.catchTooltipElement},t("div",{class:"area",id:"arrow",ref:this.catchArrowElement}),t("kol-span-wc",{class:"area",id:this.state._id,_label:this.state._label})))}validateAlign(t){l(this,"_align",t)}validateId(t){p(this,"_id",t)}validateLabel(t){p(this,"_label",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)}static get watchers(){return{_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};v.style=b;export{v as kol_tooltip};
+import{r as i,h as t,H as s}from"./index-2c046ff1.js";import{c as o,b as e,o as a,f as n,s as h,a as l}from"./floating-ui.dom.esm-26e61da8.js";import{w as r}from"./button-link-ec735ae4.js";import{v as d}from"./label-78ab78c2.js";import{g as p,n as c}from"./dev.utils-21cabf82.js";import{d as f}from"./prop.validators-2d07ec24.js";import{p as m}from"./reuse-c2156413.js";import"./a11y.tipps-49a594cd.js";import"./index-37b5cbcf.js";const u=new Set;function b(t){u.forEach((t=>{t.style.setProperty("z-index","999")})),u.add(t),t.style.setProperty("z-index","1000")}function v(t){if(u.delete(t),u.size>0){const t=Array.from(u).pop();t&&t.style.setProperty("z-index","1000")}}const x=":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}}",y=class{constructor(t){i(this,t),this.alignTooltip=()=>{var t;if("test"!==m&&this.previousSibling&&this.tooltipElement){const i=this.previousSibling,e=this.tooltipElement,s=this.arrowElement,r=[a(null!==(t=null==s?void 0:s.offsetHeight)&&void 0!==t?t:10),n(),h()];s&&r.push(l({element:s})),o(i,e,{placement:this.state._align,middleware:r}).then((({x:t,y:i,middlewareData:o,placement:n})=>{var l,r;Object.assign(e.style,{left:`${t}px`,top:`${i}px`,visibility:"visible"}),s&&((null===(l=o.arrow)||void 0===l?void 0:l.x)?Object.assign(s.style,{left:`${o.arrow.x}px`,top:"bottom"===n?-s.offsetHeight/2+"px":"",bottom:"top"===n?-s.offsetHeight/2+"px":""}):(null===(r=o.arrow)||void 0===r?void 0:r.y)&&Object.assign(s.style,{left:"right"===n?-s.offsetWidth/2+"px":"",right:"left"===n?-s.offsetWidth/2+"px":"",top:`${o.arrow.y}px`}))}))}},this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){b(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),p().body.addEventListener("keyup",this.hideTooltipByEscape);const t=this.previousSibling,i=this.tooltipElement;this.cleanupAutoPositioning=e(t,i,this.alignTooltip)}},this.hideTooltip=()=>{this.tooltipElement&&(v(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&&(p().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:c(),_label:"…"}}render(){return t(s,{ref:this.catchHostElement},""!==this.state._label&&t("div",{id:"floating",ref:this.catchTooltipElement},t("div",{class:"area",id:"arrow",ref:this.catchArrowElement}),t("kol-span-wc",{class:"area",id:this.state._id,_label:this.state._label})))}validateAlign(t){r(this,"_align",t)}validateId(t){f(this,"_id",t)}validateLabel(t){d(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"]}}};y.style=x;export{y as kol_tooltip};

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

@@ -1 +1 @@
-{"version":3,"names":["VISIBLE_OVERLAYS","Set","showOverlay","overlay","forEach","visibleOverlay","style","setProperty","add","hideOverlay","delete","size","last","Array","from","pop","styleCss","KolTooltip","this","alignTooltip","cb","processEnv","previousSibling","tooltipElement","target","tooltipEl","arrowEl","arrowElement","middleware","offset","_a","offsetHeight","flip","shift","push","arrow","element","computePosition","placement","state","_align","then","x","y","middlewareData","oldPos","left","top","Object","assign","bottom","_b","offsetWidth","right","showTooltip","getDocument","body","addEventListener","hideTooltipByEscape","document","hideTooltip","removeEventListener","event","key","addListeners","el","incrementOverFocusCount","decrementOverFocusCount","removeListeners","resyncListeners","catchHostElement","previousElementSibling","catchTooltipElement","catchArrowElement","overFocusCount","showOrHideTooltip","clearTimeout","overFocusTimeout","setTimeout","_id","nonce","_label","render","h","Host","ref","id","class","validateAlign","value","watchTooltipAlignment","validateId","watchString","validateLabel","componentWillLoad","disconnectedCallback"],"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}\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, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, Host, JSX, Prop, State, Watch, h } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { Align } from '../../types/props';\nimport { getDocument, nonce } from '../../utils/dev.utils';\nimport { hideOverlay, showOverlay } from '../../utils/overlay';\nimport { watchString } from '../../utils/prop.validators';\nimport { processEnv } from '../../utils/reuse';\n\ntype RequiredProps = {\n\tid: string;\n\tlabel: string;\n};\ntype OptionalProps = {\n\talign: Align;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & OptionalProps;\ntype OptionalStates = unknown;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-tooltip',\n\tstyleUrl: './style.css',\n\tshadow: false,\n})\nexport class KolTooltip implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate previousSibling?: HTMLElement | null;\n\tprivate tooltipElement?: HTMLDivElement;\n\tprivate arrowElement?: HTMLDivElement;\n\n\tprivate alignTooltip = (cb?: () => void): 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\tconst oldPos = {\n\t\t\t\t\tleft: tooltipEl.style.left,\n\t\t\t\t\ttop: tooltipEl.style.top,\n\t\t\t\t};\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});\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\tif (oldPos.left !== tooltipEl.style.left || oldPos.top !== tooltipEl.style.top) {\n\t\t\t\t\tthis.alignTooltip(cb);\n\t\t\t\t} else if (typeof cb === 'function') {\n\t\t\t\t\tcb();\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate showTooltip = (): void => {\n\t\tif (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\t\t\tthis.alignTooltip(() => {\n\t\t\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\t\t\tthis.tooltipElement.style.setProperty('visibility', 'visible');\n\t\t\t\t\tdocument.addEventListener('scroll', this.showTooltip);\n\t\t\t\t}\n\t\t\t});\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\tdocument.removeEventListener('scroll', this.showTooltip);\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!: string;\n\n\t@State() public state: States = {\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?: string): void {\n\t\twatchString(this, '_label', 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}\n}\n"],"mappings":"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"}
+{"version":3,"names":["VISIBLE_OVERLAYS","Set","showOverlay","overlay","forEach","visibleOverlay","style","setProperty","add","hideOverlay","delete","size","last","Array","from","pop","styleCss","KolTooltip","this","alignTooltip","processEnv","previousSibling","tooltipElement","target","tooltipEl","arrowEl","arrowElement","middleware","offset","_a","offsetHeight","flip","shift","push","arrow","element","computePosition","placement","state","_align","then","x","y","middlewareData","Object","assign","left","top","visibility","bottom","_b","offsetWidth","right","showTooltip","getDocument","body","addEventListener","hideTooltipByEscape","cleanupAutoPositioning","autoUpdate","hideTooltip","undefined","event","key","removeEventListener","addListeners","el","incrementOverFocusCount","decrementOverFocusCount","removeListeners","resyncListeners","catchHostElement","previousElementSibling","catchTooltipElement","catchArrowElement","overFocusCount","showOrHideTooltip","clearTimeout","overFocusTimeout","setTimeout","_id","nonce","_label","render","h","Host","ref","id","class","validateAlign","value","watchTooltipAlignment","validateId","watchString","validateLabel","componentWillLoad","disconnectedCallback"],"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"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t}from"./index-34c3d6f8.js";import{w as e}from"./prop.validators-f81af56e.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";var n;!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"}(n||(n={}));const o=":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}",r=class{constructor(e){i(this,e),this._version=void 0,this.state={_version:"0.0.0-alpha.0"}}render(){return t("kol-badge",{_color:n.Hellgrau,_icon:"codicon codicon-versions",_label:`v${this.state._version}`})}validateVersion(i){e(this,"_version",i,{required:!0})}componentWillLoad(){this.validateVersion(this._version)}static get watchers(){return{_version:["validateVersion"]}}};r.style={default:o};export{r as kol_version};
+import{r as i,h as t}from"./index-2c046ff1.js";import{v as e}from"./label-78ab78c2.js";import"./a11y.tipps-49a594cd.js";import"./dev.utils-21cabf82.js";import"./reuse-c2156413.js";import"./prop.validators-2d07ec24.js";import"./index-37b5cbcf.js";var n;!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"}(n||(n={}));const o=":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}",a=class{constructor(e){i(this,e),this._label=void 0,this._version=void 0,this.state={_label:"0.0.0-alpha.0"}}render(){return t("kol-badge",{_color:n.Hellgrau,_icon:"codicon codicon-versions",_label:`v${this.state._label}`})}validateLabel(t){e(this,t)}validateVersion(e){this.validateLabel(e)}componentWillLoad(){this.validateLabel(this._label||this._version)}static get watchers(){return{_label:["validateLabel"],_version:["validateVersion"]}}};a.style={default:o};export{a as kol_version};

package/dist/kolibri/kol-version.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["Farbspektrum","defaultStyleCss","KolVersion","_version","render","h","_color","Hellgrau","_icon","_label","this","state","validateVersion","value","watchString","required","componentWillLoad"],"sources":["./src/enums/color.ts","./src/components/version/style.css?tag=kol-version&mode=default&encapsulation=shadow","./src/components/version/component.tsx"],"sourcesContent":["/**\n * @deprecated We will remove this enum in the next major release.\n */\nexport type FarbspektrumNames =\n\t| 'Violett'\n\t| 'Dunkelrot'\n\t| 'Rot'\n\t| 'Orange'\n\t| 'Hellorange'\n\t| 'Gelb'\n\t| 'Hellgrün'\n\t| 'Oliv'\n\t| 'Dunkelgrün'\n\t| 'Grün'\n\t| 'Türkis'\n\t| 'Hellblau'\n\t| 'Blau'\n\t| 'Petrol'\n\t| 'Dunkelblau'\n\t| 'Dunkelgrau'\n\t| 'Hellgrau';\n\n/**\n * @deprecated We will remove this enum in the next major release.\n */\nexport enum Farbspektrum {\n\t'Violett' = '#5f316e',\n\t'Dunkelrot' = '#780f2d',\n\t'Rot' = '#c0003c',\n\t'Orange' = '#cd5038',\n\t'Hellorange' = '#f7bb3d',\n\t'Gelb' = '#f9e03a',\n\t'Hellgrün' = '#c1ca31',\n\t'Oliv' = '#597c39',\n\t'Dunkelgrün' = '#005c45',\n\t'Grün' = '#00854a',\n\t'Türkis' = '#00818b',\n\t'Hellblau' = '#80cdec',\n\t'Blau' = '#0077b6',\n\t'Petrol' = '#007194',\n\t'Dunkelblau' = '#004b76',\n\t'Dunkelgrau' = '#576164',\n\t'Hellgrau' = '#bec5c9',\n}\n","@import url(../style.css);\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Farbspektrum } from '../../enums/color';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchString } from '../../utils/prop.validators';\n\ntype RequiredProps = {\n\tversion: string;\n};\ntype OptionalProps = unknown;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-version',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolVersion implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn <kol-badge _color={Farbspektrum.Hellgrau} _icon=\"codicon codicon-versions\" _label={`v${this.state._version}`} />;\n\t}\n\n\t/**\n\t * Gibt die Versionsnummer als Text an.\n\t */\n\t@Prop() public _version!: string;\n\n\t@State() public state: States = {\n\t\t_version: '0.0.0-alpha.0',\n\t};\n\n\t@Watch('_version')\n\tpublic validateVersion(value?: string): void {\n\t\twatchString(this, '_version', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateVersion(this._version);\n\t}\n}\n"],"mappings":";;;0NAyBA,IAAYA,GAAZ,SAAYA,GACXA,EAAA,qBACAA,EAAA,uBACAA,EAAA,iBACAA,EAAA,oBACAA,EAAA,wBACAA,EAAA,kBACAA,EAAA,sBACAA,EAAA,kBACAA,EAAA,wBACAA,EAAA,kBACAA,EAAA,oBACAA,EAAA,sBACAA,EAAA,kBACAA,EAAA,oBACAA,EAAA,wBACAA,EAAA,wBACAA,EAAA,qBACA,EAlBD,CAAYA,MAAY,KCzBxB,MAAMC,EAAkB,urB,MCuBXC,EAAU,M,4DAUU,CAC/BC,SAAU,gB,CAVJC,SACN,OAAOC,EAAA,aAAWC,OAAQN,EAAaO,SAAUC,MAAM,2BAA2BC,OAAQ,IAAIC,KAAKC,MAAMR,Y,CAanGS,gBAAgBC,GACtBC,EAAYJ,KAAM,WAAYG,EAAO,CACpCE,SAAU,M,CAILC,oBACNN,KAAKE,gBAAgBF,KAAKP,S"}
+{"version":3,"names":["Farbspektrum","defaultStyleCss","KolVersion","_label","render","h","_color","Hellgrau","_icon","this","state","validateLabel","value","validateVersion","componentWillLoad","_version"],"sources":["src/enums/color.ts","src/components/version/style.css?tag=kol-version&mode=default&encapsulation=shadow","src/components/version/component.tsx"],"sourcesContent":["/**\n * @deprecated We will remove this enum in the next major release.\n */\nexport type FarbspektrumNames =\n\t| 'Violett'\n\t| 'Dunkelrot'\n\t| 'Rot'\n\t| 'Orange'\n\t| 'Hellorange'\n\t| 'Gelb'\n\t| 'Hellgrün'\n\t| 'Oliv'\n\t| 'Dunkelgrün'\n\t| 'Grün'\n\t| 'Türkis'\n\t| 'Hellblau'\n\t| 'Blau'\n\t| 'Petrol'\n\t| 'Dunkelblau'\n\t| 'Dunkelgrau'\n\t| 'Hellgrau';\n\n/**\n * @deprecated We will remove this enum in the next major release.\n */\nexport enum Farbspektrum {\n\t'Violett' = '#5f316e',\n\t'Dunkelrot' = '#780f2d',\n\t'Rot' = '#c0003c',\n\t'Orange' = '#cd5038',\n\t'Hellorange' = '#f7bb3d',\n\t'Gelb' = '#f9e03a',\n\t'Hellgrün' = '#c1ca31',\n\t'Oliv' = '#597c39',\n\t'Dunkelgrün' = '#005c45',\n\t'Grün' = '#00854a',\n\t'Türkis' = '#00818b',\n\t'Hellblau' = '#80cdec',\n\t'Blau' = '#0077b6',\n\t'Petrol' = '#007194',\n\t'Dunkelblau' = '#004b76',\n\t'Dunkelgrau' = '#576164',\n\t'Hellgrau' = '#bec5c9',\n}\n","@import url(../style.css);\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Farbspektrum } from '../../enums/color';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { KoliBriVersionAPI, KoliBriVersionStates } from './types';\n\n@Component({\n\ttag: 'kol-version',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolVersion implements KoliBriVersionAPI {\n\tpublic render(): JSX.Element {\n\t\treturn <kol-badge _color={Farbspektrum.Hellgrau} _icon=\"codicon codicon-versions\" _label={`v${this.state._label}`} />;\n\t}\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 Versionsnummer als Text an.\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _version?: string;\n\n\t@State() public state: KoliBriVersionStates = {\n\t\t_label: '0.0.0-alpha.0',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_version')\n\tpublic validateVersion(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._version);\n\t}\n}\n"],"mappings":";;;sPAyBA,IAAYA,GAAZ,SAAYA,GACXA,EAAA,qBACAA,EAAA,uBACAA,EAAA,iBACAA,EAAA,oBACAA,EAAA,wBACAA,EAAA,kBACAA,EAAA,sBACAA,EAAA,kBACAA,EAAA,wBACAA,EAAA,kBACAA,EAAA,oBACAA,EAAA,sBACAA,EAAA,kBACAA,EAAA,oBACAA,EAAA,wBACAA,EAAA,wBACAA,EAAA,qBACA,EAlBD,CAAYA,MAAY,KCzBxB,MAAMC,EAAkB,urB,MCaXC,EAAU,M,kFAgBwB,CAC7CC,OAAQ,gB,CAhBF,MAAAC,GACN,OAAOC,EAAA,aAAWC,OAAQN,EAAaO,SAAUC,MAAM,2BAA2BL,OAAQ,IAAIM,KAAKC,MAAMP,U,CAmBnG,aAAAQ,CAAcC,GACpBD,EAAcF,KAAMG,E,CAId,eAAAC,CAAgBD,GACtBH,KAAKE,cAAcC,E,CAGb,iBAAAE,GACNL,KAAKE,cAAcF,KAAKN,QAAUM,KAAKM,S"}