@public-ui/components 1.4.0 → 1.4.1-rc.1

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 { Alignment } from '../../types/props/alignment';\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(['\"left\", \"right\"']);\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?: Alignment): 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 '../style.css';\n\nkol-button-group-wc {\n\tdisplay: inline-flex;\n\tgap: calc(2 * var(--kolibri-spacing));\n\tflex-wrap: wrap;\n}\nkol-button-group-wc button {\n\tborder: 0;\n\tborder-bottom-color: transparent;\n\tborder-bottom-style: solid;\n\tborder-bottom-width: var(--kolibri-spacing);\n}\n\nkol-button-group-wc button[aria-selected='true'],\nkol-button-group-wc button:focus {\n\tborder-bottom-color: var(--kolibri-color-accent);\n}\n\n.close-button {\n\tfont-size: 50%;\n\theight: fit-content;\n\tleft: -3em;\n\tposition: relative;\n\ttop: 0.25em;\n}\n\ndiv[role='tabpanel'] {\n\theight: 100%;\n}\ndiv.grid {\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: 0px 1em 0px 0px;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n\tmargin: 0px 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: 0px 1em 0px 0px;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n\tmargin: 0px 1em;\n}\n:host > div {\n\tdisplay: grid;\n}\n:host > div.tabs-align-left {\n\tgrid-template-columns: auto 1fr;\n}\n:host > div.tabs-align-right {\n\tgrid-template-columns: 1fr auto;\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 { Alignment } from '../../types/props/alignment';\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: Alignment;\n};\nexport type TabButtonProps = Generic.Element.Members<RequiredTabButtonProps, OptionalTabButtonProps>;\n\n/**\n * API\n */\ntype RequiredProps = {\n\tariaLabel: string;\n\ttabs: Stringified<TabButtonProps[]>;\n};\ntype OptionalProps = {\n\ton: KoliBriTabsCallbacks;\n\ttabsAlign: Alignment;\n\tselected: number;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\ttabsAlign: Alignment;\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 * Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\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 * Gibt die geordnete Liste der Seitenhierarchie in Links an.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t/**\n\t * Gibt an, ob die Tab-Schalter entweder oben, rechts, unten oder links angeordnet sind.\n\t */\n\t@Prop() public _tabsAlign?: Alignment = 'top';\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabsAlign')\n\tpublic validateTabsAlign(value?: Alignment): void {\n\t\tvalidateAlignment(this, '_tabsAlign', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\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":["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 { Alignment } from '../../types/props/alignment';\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(['\"left\", \"right\"']);\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?: Alignment): 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 '../style.css';\n\nkol-button-group-wc {\n\tdisplay: inline-flex;\n\tgap: calc(2 * var(--kolibri-spacing));\n\tflex-wrap: wrap;\n}\nkol-button-group-wc button {\n\tborder: 0;\n\tborder-bottom-color: transparent;\n\tborder-bottom-style: solid;\n\tborder-bottom-width: var(--kolibri-spacing);\n}\n\nkol-button-group-wc button[aria-selected='true'],\nkol-button-group-wc button:focus {\n\tborder-bottom-color: var(--kolibri-color-accent);\n}\n\n.close-button {\n\tfont-size: 50%;\n\theight: fit-content;\n\tleft: -3em;\n\tposition: relative;\n\ttop: 0.25em;\n}\n\ndiv[role='tabpanel'] {\n\theight: 100%;\n}\ndiv.grid {\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: 0px 1em 0px 0px;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n\tmargin: 0px 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: 0px 1em 0px 0px;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n\tmargin: 0px 1em;\n}\n:host > div {\n\tdisplay: grid;\n}\n:host > div.tabs-align-left {\n\tgrid-template-columns: auto 1fr;\n}\n:host > div.tabs-align-right {\n\tgrid-template-columns: 1fr auto;\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 { Alignment } from '../../types/props/alignment';\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: Alignment;\n};\nexport type TabButtonProps = Generic.Element.Members<RequiredTabButtonProps, OptionalTabButtonProps>;\n\n/**\n * API\n */\ntype RequiredProps = {\n\tariaLabel: string;\n\ttabs: Stringified<TabButtonProps[]>;\n};\ntype OptionalProps = {\n\ton: KoliBriTabsCallbacks;\n\ttabsAlign: Alignment;\n\tselected: number;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\ttabsAlign: Alignment;\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 * Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\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 * Gibt die geordnete Liste der Seitenhierarchie in Links an.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t/**\n\t * Gibt an, ob die Tab-Schalter entweder oben, rechts, unten oder links angeordnet sind.\n\t */\n\t@Prop() public _tabsAlign?: Alignment = 'top';\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabsAlign')\n\tpublic validateTabsAlign(value?: Alignment): void {\n\t\tvalidateAlignment(this, '_tabsAlign', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\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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"}

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 s,g as a}from"./index-50adf9a0.js";import{a as o}from"./i18n-e297566c.js";import{b as r,e as h,w as l,a as n,s as d}from"./prop.validators-dd337216.js";import{a as c}from"./reuse-9dd1192b.js";import{I as u,g as p}from"./controller-a23b4b6b.js";import"./index-599f5430.js";import"./a11y.tipps-a876ebb7.js";import"./dev.utils-ec1c1b88.js";import"./tab-index-0a44a354.js";class b 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){r(this.component,"_hasCounter",t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){h(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){l(this.component,"_placeholder",t)}validateReadOnly(t){r(this.component,"_readOnly",t)}validateResize(t){n(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){r(this.component,"_required",t)}validateRows(t){h(this.component,"_rows",t)}validateValue(t){l(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 f=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{font-family:inherit;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{font-family:var(--kolibri-font-family);font-size:inherit}:host *{box-sizing:border-box}:host kol-icon{color:inherit}:host kol-span-wc{display:grid;place-items:center;width:100%}:host kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}:host button{margin:0;min-height:44px;min-width:44px;padding:0}:host a,:host button,:host input,:host select,:host textarea{cursor:pointer}:host a.icon-only>kol-span-wc>span>span,:host button.icon-only>kol-span-wc>span>span{display:none}:host a{display:inline-flex;place-items:baseline}:host button{background-color:transparent;border-width:0}:host .kol-required span::after{content:'*'}:host input,:host select,:host textarea{border-color:var(--kolibri-border-color);border-style:solid;border-width:1px}:host input input.error,:host input select.error,:host input textarea.error,:host select input.error,:host select select.error,:host select textarea.error,:host textarea input.error,:host textarea select.error,:host textarea textarea.error{border-color:var(--kolibri-border-error)}:host input input:focus,:host input input:hover,:host input select:focus,:host input select:hover,:host input textarea:focus,:host input textarea:hover,:host select input:focus,:host select input:hover,:host select select:focus,:host select select:hover,:host select textarea:focus,:host select textarea:hover,:host textarea input:focus,:host textarea input:hover,:host textarea select:focus,:host textarea select:hover,:host textarea textarea:focus,:host textarea textarea:hover{border-color:#999}:host input:not([type='checkbox']),:host option,:host select,:host textarea{font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:host .kol-disabled{opacity:0.5}:host .kol-cursor-not-allowed,:host .kol-cursor-not-allowed *{cursor:not-allowed}:host input[type='color'],:host input[type='date'],:host input[type='datetime-local'],:host input[type='email'],:host input[type='file'],:host input[type='month'],:host input[type='number'],:host input[type='password'],:host input[type='search'],:host input[type='tel'],:host input[type='text'],:host input[type='time'],:host input[type='url'],:host input[type='week'],:host select,:host textarea{background-color:white;display:block;line-height:1em;padding:0.5em}:host input[type='color']{height:2.5em;padding:0.25em 0.5em}:host textarea{padding:0.5em}",v=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},x=class{render(){const{ariaDiscribedBy:a}=p(this.state);return t(i,null,t("kol-input",{_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},t("span",{slot:"label"},t("slot",null)),t("div",{slot:"input"},t("textarea",Object.assign({ref:this.catchRef,part:"textarea",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":o("kol-of"),role:"img"},"/"),this.state._maxLength)," ",t("span",null,o("kol-characters"))))))}constructor(t){s(this,t),this.catchRef=t=>{this.ref=t,c(this.host,this.ref)},this.onChange=t=>{this.ref instanceof HTMLTextAreaElement&&(d(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=v(this.ref))),"function"==typeof this.controller.onFacade.onChange&&this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._hasCounter=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._id=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,_id:"⚠",_resize:"vertical"},this.controller=new b(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)}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)}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"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};x.style={default:f};export{x as kol_textarea};
+import{h as e,F as t,H as i,r as a,g as r}from"./index-50adf9a0.js";import{a as o}from"./i18n-e297566c.js";import{b as s,e as l,w as n,a as d,s as h}from"./prop.validators-dd337216.js";import{a as c}from"./reuse-9dd1192b.js";import{I as p,g as u}from"./controller-a23b4b6b.js";import"./index-599f5430.js";import"./a11y.tipps-a876ebb7.js";import"./dev.utils-ec1c1b88.js";import"./tab-index-0a44a354.js";class b extends p{constructor(e,t,i){super(e,t,i),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){s(this.component,"_hasCounter",e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){l(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){n(this.component,"_placeholder",e)}validateReadOnly(e){s(this.component,"_readOnly",e)}validateResize(e){d(this.component,"_resize",(e=>"string"==typeof e&&("both"===e||"horizontal"===e||"none"===e||"vertical"===e)),new Set("String {both, horizontal, vertical, none}"),e)}validateRequired(e){s(this.component,"_required",e)}validateRows(e){l(this.component,"_rows",e)}validateValue(e){n(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const f=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{font-family:inherit;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{font-family:var(--kolibri-font-family);font-size:inherit}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0;margin:0;min-height:44px;min-width:44px;padding:0}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,:host button.icon-only>kol-span-wc>span>span{display:none}.kol-required span::after{content:'*'}.kol-disabled{opacity:0.5}.kol-cursor-not-allowed,.kol-cursor-not-allowed *{cursor:not-allowed}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,textarea{background-color:white;display:block;font-size:1em;line-height:1.5em;padding:0.5em}input[type='color']{height:2.5em;padding:0.25em 0.5em}textarea{padding:0.5em}input,select,textarea{border-color:var(--kolibri-border-color);border-style:solid;border-width:1px}input input.error,input select.error,input textarea.error,select input.error,select select.error,select textarea.error,textarea input.error,textarea select.error,textarea textarea.error{border-color:var(--kolibri-border-error)}input input:focus,input input:hover,input select:focus,input select:hover,input textarea:focus,input textarea:hover,select input:focus,select input:hover,select select:focus,select select:hover,select textarea:focus,select textarea:hover,textarea input:focus,textarea input:hover,textarea select:focus,textarea select:hover,textarea textarea:focus,textarea textarea:hover{border-color:#999}input:not([type='checkbox']),option,select,textarea{font-size:inherit;letter-spacing:inherit;word-spacing:inherit}kol-input{display:grid;gap:calc(2 * var(--kolibri-spacing))}input,select,textarea{background-color:white;border-color:var(--kolibri-border-color);border-radius:var(--kolibri-border-radius);border-style:solid;border-width:var(--kolibri-border-width);font-size:1em;font-family:var(--kolibri-font-family-sans);line-height:1.5em;overflow:hidden;width:100%}input,select:not([multiple]){height:2.75em}input::placeholder{color:var(--kolibri-color-normal)}input:hover{border-color:var(--kolibri-color-primary)}input:not([type='color']):read-only,input:disabled,select:read-only,select:disabled,textarea:read-only,textarea:disabled{cursor:not-allowed}.required label>span::after{content:'*';padding-left:var(--kolibri-spacing)}.icons{display:flex;justify-content:space-between;height:0}.icons>kol-icon{display:block;margin:0.75em;height:1em}.icon-left input,.icon-left select{padding-left:2em}.icon-right input,.icon-right select{padding-right:2em}kol-button-wc{position:relative;float:right;z-index:1000;margin-top:-44px}kol-button-wc button{background-color:transparent;cursor:pointer}.icon-right kol-button-wc{margin-right:44px}.disabled{opacity:0.5}select[multiple],textarea{overflow:auto}textarea{display:block}select option{margin:var(--kolibri-spacing) 0;padding:0.5em;border-radius:0.25em;cursor:pointer}select option:disabled{cursor:not-allowed}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled){background-color:var(--kolibri-color-primary);color:white}",v=e=>{e.style.overflow="hidden";const t=e.rows,i=e.clientHeight/t;e.rows=1;const a=Math.round(e.scrollHeight/i);return e.rows=t,a},m=class{render(){const{ariaDiscribedBy:a}=u(this.state);return e(i,null,e("kol-input",{_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},e("span",{slot:"label"},e("slot",null)),e("div",{slot:"input"},e("textarea",Object.assign({ref:this.catchRef,part:"textarea",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&&e("span",{"aria-atomic":"true","aria-live":"polite"},this.state._currentLength,this.state._maxLength&&e(t,null,e("span",{"aria-label":o("kol-of"),role:"img"},"/"),this.state._maxLength)," ",e("span",null,o("kol-characters"))))))}constructor(e){a(this,e),this.catchRef=e=>{this.ref=e,c(this.host,this.ref)},this.onChange=e=>{this.ref instanceof HTMLTextAreaElement&&(h(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=v(this.ref))),"function"==typeof this.controller.onFacade.onChange&&this.controller.onFacade.onChange(e)},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._hasCounter=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._id=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,_id:"⚠",_resize:"vertical"},this.controller=new b(this,"textarea",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.validateAdjustHeight(this._adjustHeight)}get host(){return r(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};m.style={default:f};export{m as kol_textarea};

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

@@ -1 +1 @@
-{"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","ariaDiscribedBy","getRenderStates","h","Host","_alert","_disabled","_error","_hideLabel","_hint","_id","_touched","slot","Object","assign","ref","catchRef","part","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoCorrect","disabled","id","maxlength","_name","readOnly","required","placeholder","spellcheck","controller","onFacade","onKeyUp","onChange","resize","Fragment","translate","role","hostRef","propergateFocus","event","HTMLTextAreaElement","setState","_adjustHeight","validateAccessKey","validateAdjustHeight","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateName","validateOn","validateTabIndex","validateTouched"],"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';\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\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateReadOnly(value?: boolean): void {\n\t\twatchBoolean(this.component, '_readOnly', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateRows(value?: number): void {\n\t\twatchNumber(this.component, '_rows', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\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 '../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 { setState } from '../../utils/prop.validators';\nimport { propergateFocus } 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@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\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDiscribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\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>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</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\tpart=\"textarea\"\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={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.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\t// aria-hidden=\"true\" // Wieso ist das hier?\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{/**\n\t\t\t\t\t\t * https://webstandardssherpa.com/reviews/improving-the-tweet-box/\n\t\t\t\t\t\t * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live\n\t\t\t\t\t\t */}\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 Input 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 die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob am unteren Rand des Eingabefeldes die Anzahl der Zeichen angezeigt werden soll.\n\t */\n\t@Prop({ reflect: true }) public _hasCounter?: boolean;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\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 * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt an, wie viele Zeichen man maximal eingeben kann.\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 * Gibt an, ob das Eingabefeld nur lesend ist.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob die Größe des Eingabefeldes 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 * Gibt an, ob das Eingabefeld ein Pflichtfeld ist.\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 dieses Input hat.\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/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_id: '⚠',\n\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: boolean): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_resize')\n\tpublic validateResize(value?: CSSResize): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_rows')\n\tpublic validateRows(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\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\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","ariaDiscribedBy","getRenderStates","h","Host","_alert","_disabled","_error","_hideLabel","_hint","_id","_touched","slot","Object","assign","ref","catchRef","part","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoCorrect","disabled","id","maxlength","_name","readOnly","required","placeholder","spellcheck","controller","onFacade","onKeyUp","onChange","resize","Fragment","translate","role","hostRef","propergateFocus","event","HTMLTextAreaElement","setState","_adjustHeight","validateAccessKey","validateAdjustHeight","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateName","validateOn","validateTabIndex","validateTouched"],"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';\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\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateReadOnly(value?: boolean): void {\n\t\twatchBoolean(this.component, '_readOnly', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateRows(value?: number): void {\n\t\twatchNumber(this.component, '_rows', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\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 '../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 { setState } from '../../utils/prop.validators';\nimport { propergateFocus } 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@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\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDiscribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\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>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</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\tpart=\"textarea\"\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={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.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\t// aria-hidden=\"true\" // Wieso ist das hier?\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{/**\n\t\t\t\t\t\t * https://webstandardssherpa.com/reviews/improving-the-tweet-box/\n\t\t\t\t\t\t * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live\n\t\t\t\t\t\t */}\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 Input 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 die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob am unteren Rand des Eingabefeldes die Anzahl der Zeichen angezeigt werden soll.\n\t */\n\t@Prop({ reflect: true }) public _hasCounter?: boolean;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\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 * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt an, wie viele Zeichen man maximal eingeben kann.\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 * Gibt an, ob das Eingabefeld nur lesend ist.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob die Größe des Eingabefeldes 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 * Gibt an, ob das Eingabefeld ein Pflichtfeld ist.\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 dieses Input hat.\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/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_id: '⚠',\n\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: boolean): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_resize')\n\tpublic validateResize(value?: CSSResize): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_rows')\n\tpublic validateRows(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\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\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 i,h as t,H as o}from"./index-50adf9a0.js";import{b as s,w as e,s as a,e as r,a as l}from"./prop.validators-dd337216.js";import{w as n}from"./validation-1165b64b.js";import{f as h}from"./a11y.tipps-a876ebb7.js";import"./index-599f5430.js";import"./dev.utils-ec1c1b88.js";import"./reuse-9dd1192b.js";const d=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{font-family:inherit;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{font-family:var(--kolibri-font-family);font-size:inherit}:host *{box-sizing:border-box}:host kol-icon{color:inherit}:host kol-span-wc{display:grid;place-items:center;width:100%}:host kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}:host button{margin:0;min-height:44px;min-width:44px;padding:0}:host a,:host button,:host input,:host select,:host textarea{cursor:pointer}:host a.icon-only>kol-span-wc>span>span,:host button.icon-only>kol-span-wc>span>span{display:none}:host a{display:inline-flex;place-items:baseline}:host button{background-color:transparent;border-width:0}:host>div{position:fixed;top:0;left:0;width:100%;height:0;z-index:200}:host>div>kol-alert{display:block;margin:auto;padding:calc(4 * var(--kolibri-spacing));max-width:750px}:host>div>kol-button-wc{top:0;position:relative;display:block;margin:auto;width:1em}",c=class{constructor(t){i(this,t),this.handleShowAndDuration=()=>{!0===this.state._show&&"number"==typeof this.state._showDuration&&this.state._showDuration>=0&&(clearTimeout(this.durationTimeout),this.durationTimeout=setTimeout((()=>{clearTimeout(this.durationTimeout),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){s(this,"_hasCloser",t)}validateHeading(t){e(this,"_heading",t)}validateLevel(t){n(this,t)}validateOn(t){if("object"==typeof t&&null!==t){h("[KolToast] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const i={};"function"!=typeof t.onClose&&!0!==t.onClose||(i.onClose=t.onClose),a(this,"_on",i)}}validateShow(t){s(this,"_show",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.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 t(o,null,this.state._show&&t("div",null,t("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},t("slot",null))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};c.style={default:d};export{c as kol_toast};
+import{r as i,h as t,H as o}from"./index-50adf9a0.js";import{b as e,w as s,s as a,e as r,a as l}from"./prop.validators-dd337216.js";import{w as n}from"./validation-1165b64b.js";import{f as h}from"./a11y.tipps-a876ebb7.js";import"./index-599f5430.js";import"./dev.utils-ec1c1b88.js";import"./reuse-9dd1192b.js";const d=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{font-family:inherit;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{font-family:var(--kolibri-font-family);font-size:inherit}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0;margin:0;min-height:44px;min-width:44px;padding:0}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,:host button.icon-only>kol-span-wc>span>span{display:none}:host>div{position:fixed;top:0;left:0;width:100%;height:0;z-index:200}:host>div>kol-alert{display:block;margin:auto;padding:calc(4 * var(--kolibri-spacing));max-width:750px}:host>div>kol-button-wc{top:0;position:relative;display:block;margin:auto;width:1em}",c=class{constructor(t){i(this,t),this.handleShowAndDuration=()=>{!0===this.state._show&&"number"==typeof this.state._showDuration&&this.state._showDuration>=0&&(clearTimeout(this.durationTimeout),this.durationTimeout=setTimeout((()=>{clearTimeout(this.durationTimeout),this.close()}),this.state._showDuration))},this.close=()=>{var i;this._show=!1,this.state=Object.assign(Object.assign({},this.state),{_show:!1}),void 0!==(null===(i=this._on)||void 0===i?void 0:i.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(i){e(this,"_alert",i)}validateHasCloser(i){e(this,"_hasCloser",i)}validateHeading(i){s(this,"_heading",i)}validateLevel(i){n(this,i)}validateOn(i){if("object"==typeof i&&null!==i){h("[KolToast] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const t={};"function"!=typeof i.onClose&&!0!==i.onClose||(t.onClose=i.onClose),a(this,"_on",t)}}validateShow(i){e(this,"_show",i,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(i){r(this,"_showDuration",i,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(i){l(this,"_type",(i=>"string"==typeof i&&("default"===i||"error"===i||"info"===i||"success"===i||"warning"===i)),new Set("String {success, info, warning, error}"),i)}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 t(o,null,this.state._show&&t("div",null,t("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},t("slot",null))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};c.style={default:d};export{c as kol_toast};

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

@@ -1 +1 @@
-{"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","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/components/toast/style.css?tag=kol-toast&mode=default&encapsulation=shadow","./src/components/toast/component.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > div {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 0;\n\tz-index: 200;\n}\n:host > div > kol-alert {\n\tdisplay: block;\n\tmargin: auto;\n\tpadding: calc(4 * var(--kolibri-spacing));\n\tmax-width: 750px;\n}\n:host > div > kol-button-wc {\n\ttop: 0;\n\tposition: relative;\n\tdisplay: block;\n\tmargin: auto;\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 '../../types/alert';\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';\n\n/**\n * API\n */\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\talert: boolean;\n\thasCloser: boolean;\n\theading: string;\n\tlevel: HeadingLevel;\n\ton: KoliBriToastEventCallbacks;\n\tshow: boolean;\n\tshowDuration: number;\n\ttype: AlertType;\n};\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-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 vorlesen soll.\n\t */\n\t@Prop({ reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob der Toast ein Schließen-Icon hat.\n\t */\n\t@Prop({ reflect: true }) public _hasCloser?: boolean = false;\n\n\t/**\n\t * Gibt den Titel der Meldung 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.\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 der Toast eingeblendet wird.\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 * Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt.\n\t */\n\t@Prop() public _type?: AlertType = 'default';\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: boolean): void {\n\t\twatchBoolean(this, '_hasCloser', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\twatchBoolean(this, '_show', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.handleShowAndDuration,\n\t\t\t},\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\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\tclearTimeout(this.durationTimeout as NodeJS.Timer);\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":";;;sTAAA,MAAMA,EAAkB,gjD,MCqCXC,EAAQ,M,yBAuJHC,KAAAC,sBAAwB,KACxC,GAAID,KAAKE,MAAMC,QAAU,aAAeH,KAAKE,MAAME,gBAAkB,UAAYJ,KAAKE,MAAME,eAAiB,EAAG,CAC/GC,aAAaL,KAAKM,iBAClBN,KAAKM,gBAAkBC,YAAW,KACjCF,aAAaL,KAAKM,iBAClBN,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,YA1KoC,K,gBAKI,M,cAKpB,G,YAKI,E,8BAU0B,K,mBAKzB,I,WAKL,U,WAKH,CAC/BS,OAAQ,KACRC,OAAQ,EACRf,MAAO,K,CAODgB,cAAcC,GACpBC,EAAarB,KAAM,SAAUoB,E,CAOvBE,kBAAkBF,GACxBC,EAAarB,KAAM,aAAcoB,E,CAO3BG,gBAAgBH,GACtBI,EAAYxB,KAAM,WAAYoB,E,CAOxBK,cAAcL,GACpBM,EAAkB1B,KAAMoB,E,CAOlBO,WAAWP,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChDQ,EAAY,4EACZ,MAAMC,EAAwC,GAC9C,UAAWT,EAAMP,UAAY,YAAcO,EAAMP,UAAY,KAAM,CAClEgB,EAAUhB,QAAUO,EAAMP,O,CAE3BiB,EAAqC9B,KAAM,MAAO6B,E,EAQ7CE,aAAaX,GACnBC,EAAarB,KAAM,QAASoB,EAAO,CAClCY,MAAO,CACNC,WAAYjC,KAAKC,wB,CASbiC,qBAAqBd,GAC3Be,EAAYnC,KAAM,gBAAiBoB,EAAO,CACzCY,MAAO,CACNC,WAAYjC,KAAKC,wB,CASbmC,aAAahB,GACnBiB,EACCrC,KACA,SACCoB,UAAiBA,IAAU,WAAaA,IAAU,WAAaA,IAAU,SAAWA,IAAU,QAAUA,IAAU,WAAaA,IAAU,YAC1I,IAAIkB,IAAI,0CACRlB,E,CAOKmB,oBACNvC,KAAKmB,cAAcnB,KAAKiB,QACxBjB,KAAKsB,kBAAkBtB,KAAKwC,YAC5BxC,KAAKuB,gBAAgBvB,KAAKyC,UAC1BzC,KAAKyB,cAAczB,KAAKkB,QACxBlB,KAAK2B,WAAW3B,KAAKY,KACrBZ,KAAK+B,aAAa/B,KAAKG,OACvBH,KAAKkC,qBAAqBlC,KAAKI,eAC/BJ,KAAKoC,aAAapC,KAAK0C,M,CA+BjBC,SACN,OACCC,EAACC,EAAI,KACH7C,KAAKE,MAAMC,OACXyC,EAAA,WACCA,EAAA,aACC3B,OAAQjB,KAAKE,MAAMe,OACnBwB,SAAUzC,KAAKE,MAAMuC,SACrBvB,OAAQlB,KAAKE,MAAMgB,OACnBsB,WAAYxC,KAAKE,MAAMsC,WACvBE,MAAO1C,KAAKE,MAAMwC,MAClBI,SAAS,OAETlC,IAAKZ,KAAKgB,IAEV4B,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","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/components/toast/style.css?tag=kol-toast&mode=default&encapsulation=shadow","./src/components/toast/component.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > div {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 0;\n\tz-index: 200;\n}\n:host > div > kol-alert {\n\tdisplay: block;\n\tmargin: auto;\n\tpadding: calc(4 * var(--kolibri-spacing));\n\tmax-width: 750px;\n}\n:host > div > kol-button-wc {\n\ttop: 0;\n\tposition: relative;\n\tdisplay: block;\n\tmargin: auto;\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 '../../types/alert';\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';\n\n/**\n * API\n */\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\talert: boolean;\n\thasCloser: boolean;\n\theading: string;\n\tlevel: HeadingLevel;\n\ton: KoliBriToastEventCallbacks;\n\tshow: boolean;\n\tshowDuration: number;\n\ttype: AlertType;\n};\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-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 vorlesen soll.\n\t */\n\t@Prop({ reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob der Toast ein Schließen-Icon hat.\n\t */\n\t@Prop({ reflect: true }) public _hasCloser?: boolean = false;\n\n\t/**\n\t * Gibt den Titel der Meldung 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.\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 der Toast eingeblendet wird.\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 * Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt.\n\t */\n\t@Prop() public _type?: AlertType = 'default';\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: boolean): void {\n\t\twatchBoolean(this, '_hasCloser', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\twatchBoolean(this, '_show', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.handleShowAndDuration,\n\t\t\t},\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\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\tclearTimeout(this.durationTimeout as NodeJS.Timer);\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":";;;sTAAA,MAAMA,EAAkB,w9C,MCqCXC,EAAQ,M,yBAuJHC,KAAAC,sBAAwB,KACxC,GAAID,KAAKE,MAAMC,QAAU,aAAeH,KAAKE,MAAME,gBAAkB,UAAYJ,KAAKE,MAAME,eAAiB,EAAG,CAC/GC,aAAaL,KAAKM,iBAClBN,KAAKM,gBAAkBC,YAAW,KACjCF,aAAaL,KAAKM,iBAClBN,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,YA1KoC,K,gBAKI,M,cAKpB,G,YAKI,E,8BAU0B,K,mBAKzB,I,WAKL,U,WAKH,CAC/BS,OAAQ,KACRC,OAAQ,EACRf,MAAO,K,CAODgB,cAAcC,GACpBC,EAAarB,KAAM,SAAUoB,E,CAOvBE,kBAAkBF,GACxBC,EAAarB,KAAM,aAAcoB,E,CAO3BG,gBAAgBH,GACtBI,EAAYxB,KAAM,WAAYoB,E,CAOxBK,cAAcL,GACpBM,EAAkB1B,KAAMoB,E,CAOlBO,WAAWP,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChDQ,EAAY,4EACZ,MAAMC,EAAwC,GAC9C,UAAWT,EAAMP,UAAY,YAAcO,EAAMP,UAAY,KAAM,CAClEgB,EAAUhB,QAAUO,EAAMP,O,CAE3BiB,EAAqC9B,KAAM,MAAO6B,E,EAQ7CE,aAAaX,GACnBC,EAAarB,KAAM,QAASoB,EAAO,CAClCY,MAAO,CACNC,WAAYjC,KAAKC,wB,CASbiC,qBAAqBd,GAC3Be,EAAYnC,KAAM,gBAAiBoB,EAAO,CACzCY,MAAO,CACNC,WAAYjC,KAAKC,wB,CASbmC,aAAahB,GACnBiB,EACCrC,KACA,SACCoB,UAAiBA,IAAU,WAAaA,IAAU,WAAaA,IAAU,SAAWA,IAAU,QAAUA,IAAU,WAAaA,IAAU,YAC1I,IAAIkB,IAAI,0CACRlB,E,CAOKmB,oBACNvC,KAAKmB,cAAcnB,KAAKiB,QACxBjB,KAAKsB,kBAAkBtB,KAAKwC,YAC5BxC,KAAKuB,gBAAgBvB,KAAKyC,UAC1BzC,KAAKyB,cAAczB,KAAKkB,QACxBlB,KAAK2B,WAAW3B,KAAKY,KACrBZ,KAAK+B,aAAa/B,KAAKG,OACvBH,KAAKkC,qBAAqBlC,KAAKI,eAC/BJ,KAAKoC,aAAapC,KAAK0C,M,CA+BjBC,SACN,OACCC,EAACC,EAAI,KACH7C,KAAKE,MAAMC,OACXyC,EAAA,WACCA,EAAA,aACC3B,OAAQjB,KAAKE,MAAMe,OACnBwB,SAAUzC,KAAKE,MAAMuC,SACrBvB,OAAQlB,KAAKE,MAAMgB,OACnBsB,WAAYxC,KAAKE,MAAMsC,WACvBE,MAAO1C,KAAKE,MAAMwC,MAClBI,SAAS,OAETlC,IAAKZ,KAAKgB,IAEV4B,EAAA,e"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as o}from"./index-50adf9a0.js";import{w as i}from"./button-link-c6783bbf.js";import{g as e,n as s}from"./dev.utils-ec1c1b88.js";import{w as r}from"./prop.validators-dd337216.js";import{s as c,p as l}from"./reuse-9dd1192b.js";import"./index-599f5430.js";import"./a11y.tipps-a876ebb7.js";function a(t){return t.split("-")[1]}function f(t){return"y"===t?"height":"width"}function u(t){return t.split("-")[0]}function d(t){return["top","bottom"].includes(u(t))?"x":"y"}function h(t,e,i){let{reference:o,floating:n}=t;const r=o.x+o.width/2-n.width/2,s=o.y+o.height/2-n.height/2,l=d(e),c=f(l),h=o[c]/2-n[c]/2,p="x"===l;let m;switch(u(e)){case"top":m={x:r,y:o.y-n.height};break;case"bottom":m={x:r,y:o.y+o.height};break;case"right":m={x:o.x+o.width,y:s};break;case"left":m={x:o.x-n.width,y:s};break;default:m={x:o.x,y:o.y}}switch(a(e)){case"start":m[l]-=h*(i&&p?-1:1);break;case"end":m[l]+=h*(i&&p?-1:1)}return m}const p=async(t,e,i)=>{const{placement:o="bottom",strategy:n="absolute",middleware:r=[],platform:s}=i,l=r.filter(Boolean),a=await(null==s.isRTL?void 0:s.isRTL(e));let c=await s.getElementRects({reference:t,floating:e,strategy:n}),{x:f,y:u}=h(c,o,a),d=o,p={},m=0;for(let i=0;i<l.length;i++){const{name:r,fn:g}=l[i],{x:y,y:b,data:v,reset:x}=await g({x:f,y:u,initialPlacement:o,placement:d,strategy:n,middlewareData:p,rects:c,platform:s,elements:{reference:t,floating:e}});f=null!=y?y:f,u=null!=b?b:u,p={...p,[r]:{...p[r],...v}},x&&m<=50&&(m++,"object"==typeof x&&(x.placement&&(d=x.placement),x.rects&&(c=!0===x.rects?await s.getElementRects({reference:t,floating:e,strategy:n}):x.rects),({x:f,y:u}=h(c,d,a))),i=-1)}return{x:f,y:u,placement:d,strategy:n,middlewareData:p}};function m(t){return{top:0,right:0,bottom:0,left:0,...t}}function b(t){return"number"!=typeof t?m(t):{top:t,right:t,bottom:t,left:t}}function y(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function g(t,e){var i;void 0===e&&(e={});const{x:o,y:n,platform:r,rects:s,elements:l,strategy:a}=t,{boundary:c="clippingAncestors",rootBoundary:f="viewport",elementContext:u="floating",altBoundary:d=!1,padding:h=0}=e,p=b(h),m=l[d?"floating"===u?"reference":"floating":u],g=y(await r.getClippingRect({element:null==(i=await(null==r.isElement?void 0:r.isElement(m)))||i?m:m.contextElement||await(null==r.getDocumentElement?void 0:r.getDocumentElement(l.floating)),boundary:c,rootBoundary:f,strategy:a})),v="floating"===u?{...s.floating,x:o,y:n}:s.reference,x=await(null==r.getOffsetParent?void 0:r.getOffsetParent(l.floating)),w=await(null==r.isElement?void 0:r.isElement(x))&&await(null==r.getScale?void 0:r.getScale(x))||{x:1,y:1},k=y(r.convertOffsetParentRelativeRectToViewportRelativeRect?await r.convertOffsetParentRelativeRectToViewportRelativeRect({rect:v,offsetParent:x,strategy:a}):v);return{top:(g.top-k.top+p.top)/w.y,bottom:(k.bottom-g.bottom+p.bottom)/w.y,left:(g.left-k.left+p.left)/w.x,right:(k.right-g.right+p.right)/w.x}}const x=Math.min,v=Math.max;function w(t,e,i){return v(t,x(e,i))}const k=t=>({name:"arrow",options:t,async fn(e){const{element:i,padding:o=0}=t||{},{x:n,y:r,placement:s,rects:l,platform:c}=e;if(null==i)return{};const u=b(o),h={x:n,y:r},p=d(s),m=f(p),g=await c.getDimensions(i),y="y"===p?"top":"left",v="y"===p?"bottom":"right",x=l.reference[m]+l.reference[p]-h[p]-l.floating[m],k=h[p]-l.reference[p],E=await(null==c.getOffsetParent?void 0:c.getOffsetParent(i));let T=E?"y"===p?E.clientHeight||0:E.clientWidth||0:0;0===T&&(T=l.floating[m]);const L=x/2-k/2,R=u[y],A=T-g[m]-u[v],C=T/2-g[m]/2+L,O=w(R,C,A),_=null!=a(s)&&C!=O&&l.reference[m]/2-(C<R?u[y]:u[v])-g[m]/2<0;return{[p]:h[p]-(_?C<R?R-C:A-C:0),data:{[p]:O,centerOffset:C-O}}}}),A={left:"right",right:"left",bottom:"top",top:"bottom"};function _(t){return t.replace(/left|right|bottom|top/g,(t=>A[t]))}function j(t,e,i){void 0===i&&(i=!1);const o=a(t),n=d(t),r=f(n);let s="x"===n?o===(i?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(s=_(s)),{main:s,cross:_(s)}}const R={start:"end",end:"start"};function T(t){return t.replace(/start|end/g,(t=>R[t]))}function z(t){const e=_(t);return[T(t),e,T(e)]}function L(t,e,i){const o=["left","right"],n=["right","left"],r=["top","bottom"],s=["bottom","top"];switch(t){case"top":case"bottom":return i?e?n:o:e?o:n;case"left":case"right":return e?r:s;default:return[]}}function O(t,e,i,o){const n=a(t);let r=L(u(t),"start"===i,o);return n&&(r=r.map((t=>t+"-"+n)),e&&(r=r.concat(r.map(T)))),r}const P=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var i;const{placement:o,middlewareData:n,rects:r,initialPlacement:s,platform:l,elements:a}=e,{mainAxis:c=!0,crossAxis:f=!0,fallbackPlacements:d,fallbackStrategy:h="bestFit",fallbackAxisSideDirection:p="none",flipAlignment:m=!0,...y}=t,b=u(o),v=u(s)===s,x=await(null==l.isRTL?void 0:l.isRTL(a.floating)),w=d||(v||!m?[_(s)]:z(s));d||"none"===p||w.push(...O(s,m,p,x));const k=[s,...w],E=await g(e,y),T=[];let L=(null==(i=n.flip)?void 0:i.overflows)||[];if(c&&T.push(E[b]),f){const{main:t,cross:e}=j(o,r,x);T.push(E[t],E[e])}if(L=[...L,{placement:o,overflows:T}],!T.every((t=>t<=0))){var R,A;const t=((null==(R=n.flip)?void 0:R.index)||0)+1,e=k[t];if(e)return{data:{index:t,overflows:L},reset:{placement:e}};let i=null==(A=L.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:A.placement;if(!i)switch(h){case"bestFit":{var C;const t=null==(C=L.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:C[0];t&&(i=t);break}case"initialPlacement":i=s}if(o!==i)return{reset:{placement:i}}}return{}}}};async function $(t,e){const{placement:i,platform:o,elements:n}=t,r=await(null==o.isRTL?void 0:o.isRTL(n.floating)),s=u(i),l=a(i),c="x"===d(i),f=["left","top"].includes(s)?-1:1,h=r&&c?-1:1,p="function"==typeof e?e(t):e;let{mainAxis:m,crossAxis:g,alignmentAxis:y}="number"==typeof p?{mainAxis:p,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...p};return l&&"number"==typeof y&&(g="end"===l?-1*y:y),c?{x:g*h,y:m*f}:{x:m*f,y:g*h}}const D=function(t){return void 0===t&&(t=0),{name:"offset",options:t,async fn(e){const{x:i,y:o}=e,n=await $(e,t);return{x:i+n.x,y:o+n.y,data:n}}}};function C(t){return"x"===t?"y":"x"}const F=function(t){return void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:i,y:o,placement:n}=e,{mainAxis:r=!0,crossAxis:s=!1,limiter:l={fn:t=>{let{x:e,y:i}=t;return{x:e,y:i}}},...a}=t,c={x:i,y:o},f=await g(e,a),h=d(u(n)),p=C(h);let m=c[h],y=c[p];if(r){const t="y"===h?"bottom":"right";m=w(m+f["y"===h?"top":"left"],m,m-f[t])}if(s){const t="y"===p?"bottom":"right";y=w(y+f["y"===p?"top":"left"],y,y-f[t])}const b=l.fn({...e,[h]:m,[p]:y});return{...b,data:{x:b.x-i,y:b.y-o}}}}};function M(t){var e;return(null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function S(t){return M(t).getComputedStyle(t)}const B=Math.min,E=Math.max,I=Math.round;function H(t){const e=S(t);let i=parseFloat(e.width),o=parseFloat(e.height);const n=t.offsetWidth,r=t.offsetHeight,s=I(i)!==n||I(o)!==r;return s&&(i=n,o=r),{width:i,height:o,fallback:s}}function N(t){return q(t)?(t.nodeName||"").toLowerCase():""}let V;function W(){if(V)return V;const t=navigator.userAgentData;return t&&Array.isArray(t.brands)?(V=t.brands.map((t=>t.brand+"/"+t.version)).join(" "),V):navigator.userAgent}function X(t){return t instanceof M(t).HTMLElement}function Y(t){return t instanceof M(t).Element}function q(t){return t instanceof M(t).Node}function G(t){if("undefined"==typeof ShadowRoot)return!1;return t instanceof M(t).ShadowRoot||t instanceof ShadowRoot}function J(t){const{overflow:e,overflowX:i,overflowY:o,display:n}=S(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+i)&&!["inline","contents"].includes(n)}function K(t){return["table","td","th"].includes(N(t))}function Q(t){const e=/firefox/i.test(W()),i=S(t),o=i.backdropFilter||i.WebkitBackdropFilter;return"none"!==i.transform||"none"!==i.perspective||!!o&&"none"!==o||e&&"filter"===i.willChange||e&&!!i.filter&&"none"!==i.filter||["transform","perspective"].some((t=>i.willChange.includes(t)))||["paint","layout","strict","content"].some((t=>{const e=i.contain;return null!=e&&e.includes(t)}))}function U(){return/^((?!chrome|android).)*safari/i.test(W())}function Z(t){return["html","body","#document"].includes(N(t))}function tt(t){return Y(t)?t:t.contextElement}const nt={x:1,y:1};function ot(t){const e=tt(t);if(!X(e))return nt;const i=e.getBoundingClientRect(),{width:o,height:n,fallback:r}=H(e);let s=(r?I(i.width):i.width)/o,l=(r?I(i.height):i.height)/n;return s&&Number.isFinite(s)||(s=1),l&&Number.isFinite(l)||(l=1),{x:s,y:l}}function it(t,e,i,o){var n,r;void 0===e&&(e=!1),void 0===i&&(i=!1);const s=t.getBoundingClientRect(),l=tt(t);let a=nt;e&&(o?Y(o)&&(a=ot(o)):a=ot(t));const c=l?M(l):window,f=U()&&i;let u=(s.left+(f&&(null==(n=c.visualViewport)?void 0:n.offsetLeft)||0))/a.x,d=(s.top+(f&&(null==(r=c.visualViewport)?void 0:r.offsetTop)||0))/a.y,h=s.width/a.x,p=s.height/a.y;if(l){const t=M(l),e=o&&Y(o)?M(o):o;let i=t.frameElement;for(;i&&o&&e!==t;){const t=ot(i),e=i.getBoundingClientRect(),o=getComputedStyle(i);e.x+=(i.clientLeft+parseFloat(o.paddingLeft))*t.x,e.y+=(i.clientTop+parseFloat(o.paddingTop))*t.y,u*=t.x,d*=t.y,h*=t.x,p*=t.y,u+=e.x,d+=e.y,i=M(i).frameElement}}return{width:h,height:p,top:d,right:u+h,bottom:d+p,left:u,x:u,y:d}}function et(t){return((q(t)?t.ownerDocument:t.document)||window.document).documentElement}function st(t){return Y(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function rt(t){let{rect:e,offsetParent:i,strategy:o}=t;const n=X(i),r=et(i);if(i===r)return e;let s={scrollLeft:0,scrollTop:0},l={x:1,y:1};const a={x:0,y:0};if((n||!n&&"fixed"!==o)&&(("body"!==N(i)||J(r))&&(s=st(i)),X(i))){const t=it(i);l=ot(i),a.x=t.x+i.clientLeft,a.y=t.y+i.clientTop}return{width:e.width*l.x,height:e.height*l.y,x:e.x*l.x-s.scrollLeft*l.x+a.x,y:e.y*l.y-s.scrollTop*l.y+a.y}}function ct(t){return it(et(t)).left+st(t).scrollLeft}function lt(t){const e=et(t),i=st(t),o=t.ownerDocument.body,n=E(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),r=E(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let s=-i.scrollLeft+ct(t);const l=-i.scrollTop;return"rtl"===S(o).direction&&(s+=E(e.clientWidth,o.clientWidth)-n),{width:n,height:r,x:s,y:l}}function at(t){if("html"===N(t))return t;const e=t.assignedSlot||t.parentNode||G(t)&&t.host||et(t);return G(e)?e.host:e}function ft(t){const e=at(t);return Z(e)?e.ownerDocument.body:X(e)&&J(e)?e:ft(e)}function ut(t,e){var i;void 0===e&&(e=[]);const o=ft(t),n=o===(null==(i=t.ownerDocument)?void 0:i.body),r=M(o);return n?e.concat(r,r.visualViewport||[],J(o)?o:[]):e.concat(o,ut(o))}function dt(t,e){const i=M(t),o=et(t),n=i.visualViewport;let r=o.clientWidth,s=o.clientHeight,l=0,a=0;if(n){r=n.width,s=n.height;const t=U();(!t||t&&"fixed"===e)&&(l=n.offsetLeft,a=n.offsetTop)}return{width:r,height:s,x:l,y:a}}function ht(t,e){const i=it(t,!0,"fixed"===e),o=i.top+t.clientTop,n=i.left+t.clientLeft,r=X(t)?ot(t):{x:1,y:1};return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:n*r.x,y:o*r.y}}function pt(t,e,i){let o;if("viewport"===e)o=dt(t,i);else if("document"===e)o=lt(et(t));else if(Y(e))o=ht(e,i);else{const i={...e};if(U()){var n,r;const e=M(t);i.x-=(null==(n=e.visualViewport)?void 0:n.offsetLeft)||0,i.y-=(null==(r=e.visualViewport)?void 0:r.offsetTop)||0}o=i}return y(o)}function mt(t,e){const i=e.get(t);if(i)return i;let o=ut(t).filter((t=>Y(t)&&"body"!==N(t))),n=null;const r="fixed"===S(t).position;let s=r?at(t):t;for(;Y(s)&&!Z(s);){const t=S(s),e=Q(s);if("fixed"===t.position)n=null;else{(r?!e&&!n:!e&&"static"===t.position&&!!n&&["absolute","fixed"].includes(n.position))?o=o.filter((t=>t!==s)):n=t}s=at(s)}return e.set(t,o),o}function bt(t){let{element:e,boundary:i,rootBoundary:o,strategy:n}=t;const r=[..."clippingAncestors"===i?mt(e,this._c):[].concat(i),o],s=r[0],l=r.reduce(((t,i)=>{const o=pt(e,i,n);return t.top=E(o.top,t.top),t.right=B(o.right,t.right),t.bottom=B(o.bottom,t.bottom),t.left=E(o.left,t.left),t}),pt(e,s,n));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}}function yt(t){return X(t)?H(t):t.getBoundingClientRect()}function gt(t,e){return X(t)&&"fixed"!==S(t).position?e?e(t):t.offsetParent:null}function xt(t){let e=at(t);for(;X(e)&&!Z(e);){if(Q(e))return e;e=at(e)}return null}function vt(t,e){const i=M(t);let o=gt(t,e);for(;o&&K(o)&&"static"===S(o).position;)o=gt(o,e);return o&&("html"===N(o)||"body"===N(o)&&"static"===S(o).position&&!Q(o))?i:o||xt(t)||i}function wt(t,e,i){const o=X(e),n=et(e),r=it(t,!0,"fixed"===i,e);let s={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if(o||!o&&"fixed"!==i)if(("body"!==N(e)||J(n))&&(s=st(e)),X(e)){const t=it(e,!0);l.x=t.x+e.clientLeft,l.y=t.y+e.clientTop}else n&&(l.x=ct(n));return{x:r.left+s.scrollLeft-l.x,y:r.top+s.scrollTop-l.y,width:r.width,height:r.height}}const kt={getClippingRect:bt,convertOffsetParentRelativeRectToViewportRelativeRect:rt,isElement:Y,getDimensions:yt,getOffsetParent:vt,getDocumentElement:et,getScale:ot,async getElementRects(t){let{reference:e,floating:i,strategy:o}=t;const n=this.getOffsetParent||vt,r=this.getDimensions;return{reference:wt(e,await n(i),o),floating:{x:0,y:0,...await r(i)}}},getClientRects:t=>Array.from(t.getClientRects()),isRTL:t=>"rtl"===S(t).direction},At=(t,e,i)=>{const o=new Map,n={platform:kt,...i},r={...n.platform,_c:o};return p(t,e,{...n,platform:r})},_t=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{font-family:inherit;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{font-family:var(--kolibri-font-family);font-size:inherit}:host *{box-sizing:border-box}:host kol-icon{color:inherit}:host kol-span-wc{display:grid;place-items:center;width:100%}:host kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}:host button{margin:0;min-height:44px;min-width:44px;padding:0}:host a,:host button,:host input,:host select,:host textarea{cursor:pointer}:host a.icon-only>kol-span-wc>span>span,:host button.icon-only>kol-span-wc>span>span{display:none}:host a{display:inline-flex;place-items:baseline}:host button{background-color:transparent;border-width:0}kol-tooltip #floating{animation-name:fadeInOpacity;animation-iteration-count:1;animation-timing-function:ease-in;animation-duration:0.5s;box-sizing:border-box;display:none;position:absolute}kol-tooltip #arrow{background:#333;height:10px;position:absolute;transform:rotate(45deg);width:10px;z-index:999}kol-tooltip kol-badge{border-radius:var(--kolibri-border-radius);font-size:calc(4 * var(--kolibri-spacing));max-width:300px;position:relative;z-index:1000}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",jt=class{constructor(i){t(this,i),this.alignTooltip=()=>{var t;if("test"!==l&&this.previousSibling){const e=this.previousSibling;if(this.tooltipElement){const i=this.tooltipElement,o=this.arrowElement,n=[D(null!==(t=null==o?void 0:o.offsetHeight)&&void 0!==t?t:10),P(),F()];o&&n.push(k({element:o})),At(e,i,{placement:this.state._align,middleware:n}).then((({x:t,y:e,middlewareData:n,placement:r})=>{var s,l;Object.assign(i.style,{left:`${t}px`,top:`${e}px`}),o&&((null===(s=n.arrow)||void 0===s?void 0:s.x)?Object.assign(o.style,{left:`${n.arrow.x}px`,top:"bottom"===r?-o.offsetHeight/2+"px":"",bottom:"top"===r?-o.offsetHeight/2+"px":""}):(null===(l=n.arrow)||void 0===l?void 0:l.y)&&Object.assign(o.style,{left:"right"===r?-o.offsetWidth/2+"px":"",right:"left"===r?-o.offsetWidth/2+"px":"",top:`${n.arrow.y}px`}))}))}}},this.showTooltip=()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("display","block"),e().body.addEventListener("keyup",this.hideTooltipByEscape),this.alignTooltip(),this.tooltipElement.style.setProperty("visibility","visible"),document.addEventListener("scroll",this.alignTooltip))},this.hideTooltip=()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),document.removeEventListener("scroll",this.alignTooltip))},this.hideTooltipByEscape=t=>{"Escape"===t.key&&(e().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:s(),_label:""}}render(){return c((()=>{this.alignTooltip(),c(this.alignTooltip,750)}),250),n(o,{ref:this.catchHostElement},""!==this.state._label&&n("div",{id:"floating",ref:this.catchTooltipElement},n("div",{id:"arrow",ref:this.catchArrowElement}),n("kol-badge",{id:this.state._id,_color:{backgroundColor:"#333",color:"#ddd"},_label:this.state._label})))}validateAlign(t){i(this,"_align",t)}validateId(t){r(this,"_id",t)}validateLabel(t){r(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"]}}};jt.style={default:_t};export{jt as kol_tooltip};
+import{r as t,h as n,H as o}from"./index-50adf9a0.js";import{w as i}from"./button-link-c6783bbf.js";import{g as e,n as s}from"./dev.utils-ec1c1b88.js";import{w as r}from"./prop.validators-dd337216.js";import{s as c,p as l}from"./reuse-9dd1192b.js";import"./index-599f5430.js";import"./a11y.tipps-a876ebb7.js";function a(t){return t.split("-")[1]}function f(t){return"y"===t?"height":"width"}function u(t){return t.split("-")[0]}function d(t){return["top","bottom"].includes(u(t))?"x":"y"}function h(t,e,i){let{reference:o,floating:n}=t;const r=o.x+o.width/2-n.width/2,l=o.y+o.height/2-n.height/2,s=d(e),c=f(s),h=o[c]/2-n[c]/2,p="x"===s;let m;switch(u(e)){case"top":m={x:r,y:o.y-n.height};break;case"bottom":m={x:r,y:o.y+o.height};break;case"right":m={x:o.x+o.width,y:l};break;case"left":m={x:o.x-n.width,y:l};break;default:m={x:o.x,y:o.y}}switch(a(e)){case"start":m[s]-=h*(i&&p?-1:1);break;case"end":m[s]+=h*(i&&p?-1:1)}return m}const p=async(t,e,i)=>{const{placement:o="bottom",strategy:n="absolute",middleware:r=[],platform:l}=i,s=r.filter(Boolean),a=await(null==l.isRTL?void 0:l.isRTL(e));let c=await l.getElementRects({reference:t,floating:e,strategy:n}),{x:f,y:u}=h(c,o,a),d=o,p={},m=0;for(let i=0;i<s.length;i++){const{name:r,fn:g}=s[i],{x:y,y:b,data:v,reset:x}=await g({x:f,y:u,initialPlacement:o,placement:d,strategy:n,middlewareData:p,rects:c,platform:l,elements:{reference:t,floating:e}});f=null!=y?y:f,u=null!=b?b:u,p={...p,[r]:{...p[r],...v}},x&&m<=50&&(m++,"object"==typeof x&&(x.placement&&(d=x.placement),x.rects&&(c=!0===x.rects?await l.getElementRects({reference:t,floating:e,strategy:n}):x.rects),({x:f,y:u}=h(c,d,a))),i=-1)}return{x:f,y:u,placement:d,strategy:n,middlewareData:p}};function m(t){return{top:0,right:0,bottom:0,left:0,...t}}function b(t){return"number"!=typeof t?m(t):{top:t,right:t,bottom:t,left:t}}function y(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function g(t,e){var i;void 0===e&&(e={});const{x:o,y:n,platform:r,rects:l,elements:s,strategy:a}=t,{boundary:c="clippingAncestors",rootBoundary:f="viewport",elementContext:u="floating",altBoundary:d=!1,padding:h=0}=e,p=b(h),m=s[d?"floating"===u?"reference":"floating":u],g=y(await r.getClippingRect({element:null==(i=await(null==r.isElement?void 0:r.isElement(m)))||i?m:m.contextElement||await(null==r.getDocumentElement?void 0:r.getDocumentElement(s.floating)),boundary:c,rootBoundary:f,strategy:a})),v="floating"===u?{...l.floating,x:o,y:n}:l.reference,x=await(null==r.getOffsetParent?void 0:r.getOffsetParent(s.floating)),w=await(null==r.isElement?void 0:r.isElement(x))&&await(null==r.getScale?void 0:r.getScale(x))||{x:1,y:1},k=y(r.convertOffsetParentRelativeRectToViewportRelativeRect?await r.convertOffsetParentRelativeRectToViewportRelativeRect({rect:v,offsetParent:x,strategy:a}):v);return{top:(g.top-k.top+p.top)/w.y,bottom:(k.bottom-g.bottom+p.bottom)/w.y,left:(g.left-k.left+p.left)/w.x,right:(k.right-g.right+p.right)/w.x}}const x=Math.min,v=Math.max;function w(t,e,i){return v(t,x(e,i))}const k=t=>({name:"arrow",options:t,async fn(e){const{element:i,padding:o=0}=t||{},{x:n,y:r,placement:l,rects:s,platform:c}=e;if(null==i)return{};const u=b(o),h={x:n,y:r},p=d(l),m=f(p),g=await c.getDimensions(i),y="y"===p?"top":"left",v="y"===p?"bottom":"right",x=s.reference[m]+s.reference[p]-h[p]-s.floating[m],k=h[p]-s.reference[p],E=await(null==c.getOffsetParent?void 0:c.getOffsetParent(i));let T=E?"y"===p?E.clientHeight||0:E.clientWidth||0:0;0===T&&(T=s.floating[m]);const L=x/2-k/2,R=u[y],A=T-g[m]-u[v],C=T/2-g[m]/2+L,O=w(R,C,A),_=null!=a(l)&&C!=O&&s.reference[m]/2-(C<R?u[y]:u[v])-g[m]/2<0;return{[p]:h[p]-(_?C<R?R-C:A-C:0),data:{[p]:O,centerOffset:C-O}}}}),A={left:"right",right:"left",bottom:"top",top:"bottom"};function _(t){return t.replace(/left|right|bottom|top/g,(t=>A[t]))}function j(t,e,i){void 0===i&&(i=!1);const o=a(t),n=d(t),r=f(n);let l="x"===n?o===(i?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(l=_(l)),{main:l,cross:_(l)}}const R={start:"end",end:"start"};function T(t){return t.replace(/start|end/g,(t=>R[t]))}function z(t){const e=_(t);return[T(t),e,T(e)]}function L(t,e,i){const o=["left","right"],n=["right","left"],r=["top","bottom"],l=["bottom","top"];switch(t){case"top":case"bottom":return i?e?n:o:e?o:n;case"left":case"right":return e?r:l;default:return[]}}function O(t,e,i,o){const n=a(t);let r=L(u(t),"start"===i,o);return n&&(r=r.map((t=>t+"-"+n)),e&&(r=r.concat(r.map(T)))),r}const P=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var i;const{placement:o,middlewareData:n,rects:r,initialPlacement:l,platform:s,elements:a}=e,{mainAxis:c=!0,crossAxis:f=!0,fallbackPlacements:d,fallbackStrategy:h="bestFit",fallbackAxisSideDirection:p="none",flipAlignment:m=!0,...y}=t,b=u(o),v=u(l)===l,x=await(null==s.isRTL?void 0:s.isRTL(a.floating)),w=d||(v||!m?[_(l)]:z(l));d||"none"===p||w.push(...O(l,m,p,x));const k=[l,...w],E=await g(e,y),T=[];let L=(null==(i=n.flip)?void 0:i.overflows)||[];if(c&&T.push(E[b]),f){const{main:t,cross:e}=j(o,r,x);T.push(E[t],E[e])}if(L=[...L,{placement:o,overflows:T}],!T.every((t=>t<=0))){var R,A;const t=((null==(R=n.flip)?void 0:R.index)||0)+1,e=k[t];if(e)return{data:{index:t,overflows:L},reset:{placement:e}};let i=null==(A=L.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:A.placement;if(!i)switch(h){case"bestFit":{var C;const t=null==(C=L.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:C[0];t&&(i=t);break}case"initialPlacement":i=l}if(o!==i)return{reset:{placement:i}}}return{}}}};async function $(t,e){const{placement:i,platform:o,elements:n}=t,r=await(null==o.isRTL?void 0:o.isRTL(n.floating)),l=u(i),s=a(i),c="x"===d(i),f=["left","top"].includes(l)?-1:1,h=r&&c?-1:1,p="function"==typeof e?e(t):e;let{mainAxis:m,crossAxis:g,alignmentAxis:y}="number"==typeof p?{mainAxis:p,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...p};return s&&"number"==typeof y&&(g="end"===s?-1*y:y),c?{x:g*h,y:m*f}:{x:m*f,y:g*h}}const D=function(t){return void 0===t&&(t=0),{name:"offset",options:t,async fn(e){const{x:i,y:o}=e,n=await $(e,t);return{x:i+n.x,y:o+n.y,data:n}}}};function C(t){return"x"===t?"y":"x"}const F=function(t){return void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:i,y:o,placement:n}=e,{mainAxis:r=!0,crossAxis:l=!1,limiter:s={fn:t=>{let{x:e,y:i}=t;return{x:e,y:i}}},...a}=t,c={x:i,y:o},f=await g(e,a),h=d(u(n)),p=C(h);let m=c[h],y=c[p];if(r){const t="y"===h?"bottom":"right";m=w(m+f["y"===h?"top":"left"],m,m-f[t])}if(l){const t="y"===p?"bottom":"right";y=w(y+f["y"===p?"top":"left"],y,y-f[t])}const b=s.fn({...e,[h]:m,[p]:y});return{...b,data:{x:b.x-i,y:b.y-o}}}}};function M(t){var e;return(null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function S(t){return M(t).getComputedStyle(t)}const B=Math.min,E=Math.max,I=Math.round;function H(t){const e=S(t);let i=parseFloat(e.width),o=parseFloat(e.height);const n=t.offsetWidth,r=t.offsetHeight,l=I(i)!==n||I(o)!==r;return l&&(i=n,o=r),{width:i,height:o,fallback:l}}function N(t){return q(t)?(t.nodeName||"").toLowerCase():""}let V;function W(){if(V)return V;const t=navigator.userAgentData;return t&&Array.isArray(t.brands)?(V=t.brands.map((t=>t.brand+"/"+t.version)).join(" "),V):navigator.userAgent}function X(t){return t instanceof M(t).HTMLElement}function Y(t){return t instanceof M(t).Element}function q(t){return t instanceof M(t).Node}function G(t){if("undefined"==typeof ShadowRoot)return!1;return t instanceof M(t).ShadowRoot||t instanceof ShadowRoot}function J(t){const{overflow:e,overflowX:i,overflowY:o,display:n}=S(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+i)&&!["inline","contents"].includes(n)}function K(t){return["table","td","th"].includes(N(t))}function Q(t){const e=/firefox/i.test(W()),i=S(t),o=i.backdropFilter||i.WebkitBackdropFilter;return"none"!==i.transform||"none"!==i.perspective||!!o&&"none"!==o||e&&"filter"===i.willChange||e&&!!i.filter&&"none"!==i.filter||["transform","perspective"].some((t=>i.willChange.includes(t)))||["paint","layout","strict","content"].some((t=>{const e=i.contain;return null!=e&&e.includes(t)}))}function U(){return/^((?!chrome|android).)*safari/i.test(W())}function Z(t){return["html","body","#document"].includes(N(t))}function tt(t){return Y(t)?t:t.contextElement}const nt={x:1,y:1};function ot(t){const e=tt(t);if(!X(e))return nt;const i=e.getBoundingClientRect(),{width:o,height:n,fallback:r}=H(e);let l=(r?I(i.width):i.width)/o,s=(r?I(i.height):i.height)/n;return l&&Number.isFinite(l)||(l=1),s&&Number.isFinite(s)||(s=1),{x:l,y:s}}function it(t,e,i,o){var n,r;void 0===e&&(e=!1),void 0===i&&(i=!1);const l=t.getBoundingClientRect(),s=tt(t);let a=nt;e&&(o?Y(o)&&(a=ot(o)):a=ot(t));const c=s?M(s):window,f=U()&&i;let u=(l.left+(f&&(null==(n=c.visualViewport)?void 0:n.offsetLeft)||0))/a.x,d=(l.top+(f&&(null==(r=c.visualViewport)?void 0:r.offsetTop)||0))/a.y,h=l.width/a.x,p=l.height/a.y;if(s){const t=M(s),e=o&&Y(o)?M(o):o;let i=t.frameElement;for(;i&&o&&e!==t;){const t=ot(i),e=i.getBoundingClientRect(),o=getComputedStyle(i);e.x+=(i.clientLeft+parseFloat(o.paddingLeft))*t.x,e.y+=(i.clientTop+parseFloat(o.paddingTop))*t.y,u*=t.x,d*=t.y,h*=t.x,p*=t.y,u+=e.x,d+=e.y,i=M(i).frameElement}}return{width:h,height:p,top:d,right:u+h,bottom:d+p,left:u,x:u,y:d}}function et(t){return((q(t)?t.ownerDocument:t.document)||window.document).documentElement}function st(t){return Y(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function rt(t){let{rect:e,offsetParent:i,strategy:o}=t;const n=X(i),r=et(i);if(i===r)return e;let l={scrollLeft:0,scrollTop:0},s={x:1,y:1};const a={x:0,y:0};if((n||!n&&"fixed"!==o)&&(("body"!==N(i)||J(r))&&(l=st(i)),X(i))){const t=it(i);s=ot(i),a.x=t.x+i.clientLeft,a.y=t.y+i.clientTop}return{width:e.width*s.x,height:e.height*s.y,x:e.x*s.x-l.scrollLeft*s.x+a.x,y:e.y*s.y-l.scrollTop*s.y+a.y}}function ct(t){return it(et(t)).left+st(t).scrollLeft}function lt(t){const e=et(t),i=st(t),o=t.ownerDocument.body,n=E(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),r=E(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let l=-i.scrollLeft+ct(t);const s=-i.scrollTop;return"rtl"===S(o).direction&&(l+=E(e.clientWidth,o.clientWidth)-n),{width:n,height:r,x:l,y:s}}function at(t){if("html"===N(t))return t;const e=t.assignedSlot||t.parentNode||G(t)&&t.host||et(t);return G(e)?e.host:e}function ft(t){const e=at(t);return Z(e)?e.ownerDocument.body:X(e)&&J(e)?e:ft(e)}function ut(t,e){var i;void 0===e&&(e=[]);const o=ft(t),n=o===(null==(i=t.ownerDocument)?void 0:i.body),r=M(o);return n?e.concat(r,r.visualViewport||[],J(o)?o:[]):e.concat(o,ut(o))}function dt(t,e){const i=M(t),o=et(t),n=i.visualViewport;let r=o.clientWidth,l=o.clientHeight,s=0,a=0;if(n){r=n.width,l=n.height;const t=U();(!t||t&&"fixed"===e)&&(s=n.offsetLeft,a=n.offsetTop)}return{width:r,height:l,x:s,y:a}}function ht(t,e){const i=it(t,!0,"fixed"===e),o=i.top+t.clientTop,n=i.left+t.clientLeft,r=X(t)?ot(t):{x:1,y:1};return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:n*r.x,y:o*r.y}}function pt(t,e,i){let o;if("viewport"===e)o=dt(t,i);else if("document"===e)o=lt(et(t));else if(Y(e))o=ht(e,i);else{const i={...e};if(U()){var n,r;const e=M(t);i.x-=(null==(n=e.visualViewport)?void 0:n.offsetLeft)||0,i.y-=(null==(r=e.visualViewport)?void 0:r.offsetTop)||0}o=i}return y(o)}function mt(t,e){const i=e.get(t);if(i)return i;let o=ut(t).filter((t=>Y(t)&&"body"!==N(t))),n=null;const r="fixed"===S(t).position;let l=r?at(t):t;for(;Y(l)&&!Z(l);){const t=S(l),e=Q(l);if("fixed"===t.position)n=null;else{(r?!e&&!n:!e&&"static"===t.position&&!!n&&["absolute","fixed"].includes(n.position))?o=o.filter((t=>t!==l)):n=t}l=at(l)}return e.set(t,o),o}function bt(t){let{element:e,boundary:i,rootBoundary:o,strategy:n}=t;const r=[..."clippingAncestors"===i?mt(e,this._c):[].concat(i),o],l=r[0],s=r.reduce(((t,i)=>{const o=pt(e,i,n);return t.top=E(o.top,t.top),t.right=B(o.right,t.right),t.bottom=B(o.bottom,t.bottom),t.left=E(o.left,t.left),t}),pt(e,l,n));return{width:s.right-s.left,height:s.bottom-s.top,x:s.left,y:s.top}}function yt(t){return X(t)?H(t):t.getBoundingClientRect()}function gt(t,e){return X(t)&&"fixed"!==S(t).position?e?e(t):t.offsetParent:null}function xt(t){let e=at(t);for(;X(e)&&!Z(e);){if(Q(e))return e;e=at(e)}return null}function vt(t,e){const i=M(t);let o=gt(t,e);for(;o&&K(o)&&"static"===S(o).position;)o=gt(o,e);return o&&("html"===N(o)||"body"===N(o)&&"static"===S(o).position&&!Q(o))?i:o||xt(t)||i}function wt(t,e,i){const o=X(e),n=et(e),r=it(t,!0,"fixed"===i,e);let l={scrollLeft:0,scrollTop:0};const s={x:0,y:0};if(o||!o&&"fixed"!==i)if(("body"!==N(e)||J(n))&&(l=st(e)),X(e)){const t=it(e,!0);s.x=t.x+e.clientLeft,s.y=t.y+e.clientTop}else n&&(s.x=ct(n));return{x:r.left+l.scrollLeft-s.x,y:r.top+l.scrollTop-s.y,width:r.width,height:r.height}}const kt={getClippingRect:bt,convertOffsetParentRelativeRectToViewportRelativeRect:rt,isElement:Y,getDimensions:yt,getOffsetParent:vt,getDocumentElement:et,getScale:ot,async getElementRects(t){let{reference:e,floating:i,strategy:o}=t;const n=this.getOffsetParent||vt,r=this.getDimensions;return{reference:wt(e,await n(i),o),floating:{x:0,y:0,...await r(i)}}},getClientRects:t=>Array.from(t.getClientRects()),isRTL:t=>"rtl"===S(t).direction},At=(t,e,i)=>{const o=new Map,n={platform:kt,...i},r={...n.platform,_c:o};return p(t,e,{...n,platform:r})},_t=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{font-family:inherit;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{font-family:var(--kolibri-font-family);font-size:inherit}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0;margin:0;min-height:44px;min-width:44px;padding:0}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,:host button.icon-only>kol-span-wc>span>span{display:none}kol-tooltip #floating{animation-name:fadeInOpacity;animation-iteration-count:1;animation-timing-function:ease-in;animation-duration:0.5s;box-sizing:border-box;display:none;position:absolute}kol-tooltip #arrow{background:#333;height:10px;position:absolute;transform:rotate(45deg);width:10px;z-index:999}kol-tooltip kol-badge{border-radius:var(--kolibri-border-radius);font-size:calc(4 * var(--kolibri-spacing));max-width:300px;position:relative;z-index:1000}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",jt=class{constructor(i){t(this,i),this.alignTooltip=()=>{var t;if("test"!==l&&this.previousSibling){const e=this.previousSibling;if(this.tooltipElement){const i=this.tooltipElement,o=this.arrowElement,n=[D(null!==(t=null==o?void 0:o.offsetHeight)&&void 0!==t?t:10),P(),F()];o&&n.push(k({element:o})),At(e,i,{placement:this.state._align,middleware:n}).then((({x:t,y:e,middlewareData:n,placement:r})=>{var l,s;Object.assign(i.style,{left:`${t}px`,top:`${e}px`}),o&&((null===(l=n.arrow)||void 0===l?void 0:l.x)?Object.assign(o.style,{left:`${n.arrow.x}px`,top:"bottom"===r?-o.offsetHeight/2+"px":"",bottom:"top"===r?-o.offsetHeight/2+"px":""}):(null===(s=n.arrow)||void 0===s?void 0:s.y)&&Object.assign(o.style,{left:"right"===r?-o.offsetWidth/2+"px":"",right:"left"===r?-o.offsetWidth/2+"px":"",top:`${n.arrow.y}px`}))}))}}},this.showTooltip=()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("display","block"),e().body.addEventListener("keyup",this.hideTooltipByEscape),this.alignTooltip(),this.tooltipElement.style.setProperty("visibility","visible"),document.addEventListener("scroll",this.alignTooltip))},this.hideTooltip=()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),document.removeEventListener("scroll",this.alignTooltip))},this.hideTooltipByEscape=t=>{"Escape"===t.key&&(e().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:s(),_label:""}}render(){return c((()=>{this.alignTooltip(),c(this.alignTooltip,750)}),250),n(o,{ref:this.catchHostElement},""!==this.state._label&&n("div",{id:"floating",ref:this.catchTooltipElement},n("div",{id:"arrow",ref:this.catchArrowElement}),n("kol-badge",{id:this.state._id,_color:{backgroundColor:"#333",color:"#ddd"},_label:this.state._label})))}validateAlign(t){i(this,"_align",t)}validateId(t){r(this,"_id",t)}validateLabel(t){r(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"]}}};jt.style={default:_t};export{jt as kol_tooltip};