@public-ui/components 1.5.0 → 1.5.2-rc.0

package/dist/kolibri/kol-split-button.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSplitButton","this","toggleDropdown","dropdown","dropdownContent","state","_showDropdown","style","height","clientHeight","Object","assign","catchDropdownElements","e","setTimeout","firstChild","_icon","_label","render","h","Host","class","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_iconOnly","_hideLabel","_on","_onClick","onClick","_role","_tabIndex","_tooltipAlign","_type","_value","ref","name","validateAccessKey","value","watchString","validateAriaControls","validateAriaCurrent","validateAriaExpanded","validateAriaLabel","validateAriaLabelWithLabel","validateAriaSelected","validateCustomClass","defaultValue","undefined","validateDisabled","a11yHintDisabled","validateHideLabel","validateIcon","validateIconOnly","validateLabel","validateLabelWithAriaLabel","validateOnClick","validateRole","validateShowDropdown","watchBoolean","validateTabIndex","validateTooltipAlign","watchTooltipAlignment","validateType","watchButtonType","validateValue","setState","validateVariant","watchButtonVariant","componentWillLoad"],"sources":["./src/components/split-button/style.css?tag=kol-split-button&mode=default&encapsulation=shadow","./src/components/split-button/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host {\n\tdisplay: flex;\n\tposition: relative;\n}\n.main-button {\n\tflex-grow: 1;\n\ttext-align: left;\n}\n.main-button kol-span-wc {\n\tplace-items: start;\n}\n.secondary-button button {\n\theight: 100%;\n}\n.horizontal-line {\n\tbackground-color: rgba(0, 0, 0, 0.2);\n\tborder-radius: 2px;\n\theight: 70%;\n\tmargin-block: auto;\n\twidth: 1px;\n}\n/* popover */\n.popover {\n\theight: 0;\n\tleft: 0;\n\tmin-width: 100%;\n\toverflow: hidden;\n\tposition: absolute;\n\ttop: 100%;\n\ttransition: height 0.3s ease-in-out;\n\tz-index: -1;\n}\n.popover-content {\n\tinset: 0 0 auto 0;\n\tmin-width: 100%;\n\tposition: absolute;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { API, KoliBriSplitButtonCallback, States } from './types';\nimport { Alignment, AlternativButtonLinkRole, AriaCurrent, KoliBriButtonType, KoliBriButtonVariant, Stringified } from '../../components';\nimport { setState, watchBoolean, watchString } from '../../utils/prop.validators';\nimport { validateAriaCurrent, validateAriaExpanded, validateAriaSelected, validateDisabled, validateHideLabel } from '../../types/props';\nimport { validateAriaLabelWithLabel, validateLabelWithAriaLabel } from '../../types/props/label';\nimport { a11yHintDisabled } from '../../utils/a11y.tipps';\nimport { validateTabIndex } from '../../utils/validators/tab-index';\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { watchButtonType, watchButtonVariant } from '../button/controller';\n\n/**\n * @slot popover - Ermöglicht das Einfügen beliebigen HTML's in das dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSplitButton implements API {\n\tprivate dropdown: HTMLDivElement | undefined;\n\tprivate dropdownContent: HTMLDivElement | undefined;\n\n\tprivate toggleDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tif (this.state._showDropdown) this.dropdown.style.height = '';\n\t\t\telse this.dropdown.style.height = `${this.dropdownContent.clientHeight}px`;\n\t\t}\n\t\tthis.state = { ...this.state, _showDropdown: !this.state._showDropdown };\n\t};\n\n\tprivate catchDropdownElements = (e?: HTMLDivElement | null) => {\n\t\tif (e) {\n\t\t\tthis.dropdown = e;\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.dropdownContent = e.firstChild as HTMLDivElement;\n\t\t\t}, 1);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'main-button': true,\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconOnly={this._hideLabel}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={typeof this.state._onClick === 'function' ? { onClick: this.state._onClick } : { onClick: this.toggleDropdown }}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"horizontal-line\"></div>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass=\"secondary-button\"\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon-only\n\t\t\t\t\t_icon=\"codicon codicon-triangle-down\"\n\t\t\t\t\t_label=\"dropdown öffnen\"\n\t\t\t\t\t_on={{ onClick: this.toggleDropdown }}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"popover\" ref={this.catchDropdownElements}>\n\t\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\t\t<slot name=\"popover\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Gibt an, welchen aktuellen Auswahlstatus der Button hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/**\n\t * Gibt an, ob durch den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop({ reflect: true }) public _ariaExpanded?: boolean;\n\n\t/**\n\t * Gibt einen beschreibenden Text für den Screenreader an. Damit die\n\t * Sprachsteuerung von interaktiven Elementen funktioniert, muss der\n\t * Aria-Label-Text mit dem Label-Text des Buttons beginnen.\n\t *\n\t * - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop({ reflect: true }) public _ariaSelected?: boolean;\n\n\t/**\n\t * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t */\n\t@Prop() public _customClass?: string;\n\n\t/**\n\t * Gibt an, ob der Button deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Blendet den Text aus und zeigt nur das gewählte Icon an, der Text wird in den Tooltip verschoben.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Iconklasse (z.B.: \"codicon codicon-home\")\n\t */\n\t@Prop() public _icon?: string;\n\n\t/**\n\t * Blendet den Text aus und zeigt nur das gewählte Icon an, der Text wird in den Tooltip verschoben.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Setzt den sichtbaren Text des Elements.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _label!: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _onClick?: KoliBriSplitButtonCallback;\n\n\t/**\n\t * Gibt an, welche Rolle der Schalter hat.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welche Rolle der Schalter hat.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _showDropdown?: boolean = false;\n\n\t/**\n\t * Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Setzt die gewünschte Ausrichtung des Tooltips (`_icon-only`).\n\t */\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/**\n\t * Setzt den Typ der Schaltfläche.\n\t */\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/**\n\t * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<unknown>;\n\n\t/**\n\t * Gibt an, welche Ausprägung der Button hat.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n\n\t@State() public state: States = {\n\t\t_icon: '',\n\t\t_label: '',\n\t\t_showDropdown: false,\n\t};\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\twatchString(this, '_accessKey', value);\n\t}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\twatchString(this, '_ariaControls', value);\n\t}\n\n\t@Watch('_ariaCurrent')\n\tpublic validateAriaCurrent(value?: AriaCurrent): void {\n\t\tvalidateAriaCurrent(this, value);\n\t}\n\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: boolean): void {\n\t\tvalidateAriaExpanded(this, value);\n\t}\n\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tvalidateAriaLabelWithLabel(this, value);\n\t}\n\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: boolean): void {\n\t\tvalidateAriaSelected(this, value);\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: string): void {\n\t\twatchString(this, '_customClass', value, { defaultValue: undefined });\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tvalidateDisabled(this, value);\n\t\tif (value) a11yHintDisabled();\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: string): void {\n\t\twatchString(this, '_icon', value);\n\t}\n\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tvalidateLabelWithAriaLabel(this, value);\n\t}\n\n\t@Watch('_onClick')\n\tpublic validateOnClick(value?: KoliBriSplitButtonCallback): void {\n\t\tif (typeof value === 'function') {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_onClick: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_role')\n\tpublic validateRole(value?: AlternativButtonLinkRole): void {\n\t\twatchString(this, '_role', value);\n\t}\n\n\t@Watch('_showDropdown')\n\tpublic validateShowDropdown(value?: boolean): void {\n\t\twatchBoolean(this, '_showDropdown', value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this, value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Alignment): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriButtonType): void {\n\t\twatchButtonType(this, '_type', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown>): void {\n\t\tsetState(this, '_value', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriButtonVariant): void {\n\t\twatchButtonVariant(this, '_variant', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\n\t\tthis.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaCurrent(this._ariaCurrent);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateIconOnly(this._iconOnly);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOnClick(this._onClick);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["defaultStyleCss","KolSplitButton","this","clickHandler","e","state","_on","onClick","toggleDropdown","openDropdown","dropdown","dropdownContent","style","height","clientHeight","Object","assign","_showDropdown","closeDropdown","value","openIt","forceCounter","forceOpenDropdown","_a","setTimeout","catchDropdownElements","firstChild","_icon","_label","render","h","Host","class","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_iconOnly","_hideLabel","_role","_tabIndex","_tooltipAlign","_type","_value","ref","name","validateAccessKey","watchString","validateAriaControls","validateAriaCurrent","validateAriaExpanded","validateAriaLabel","validateAriaLabelWithLabel","validateAriaSelected","validateCustomClass","defaultValue","undefined","validateDisabled","a11yHintDisabled","validateHideLabel","validateIcon","validateIconOnly","validateLabel","validateLabelWithAriaLabel","validateOn","validateRole","validateShowDropdown","watchBoolean","validateTabIndex","validateTooltipAlign","watchTooltipAlignment","validateType","watchButtonType","validateValue","setState","validateVariant","watchButtonVariant","componentWillLoad"],"sources":["./src/components/split-button/style.css?tag=kol-split-button&mode=default&encapsulation=shadow","./src/components/split-button/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host {\n\tdisplay: flex;\n\tposition: relative;\n}\n.main-button {\n\tflex-grow: 1;\n\ttext-align: left;\n}\n.main-button kol-span-wc {\n\tplace-items: start;\n}\n.secondary-button button {\n\theight: 100%;\n}\n.horizontal-line {\n\tbackground-color: rgba(0, 0, 0, 0.2);\n\tborder-radius: 2px;\n\theight: 70%;\n\tmargin-block: auto;\n\twidth: 1px;\n}\n/* popover */\n.popover {\n\theight: 0;\n\tleft: 0;\n\tmin-width: 100%;\n\toverflow: hidden;\n\tposition: absolute;\n\ttop: 100%;\n\ttransition: height 0.3s ease-in-out;\n}\n.popover-content {\n\tinset: 0 0 auto 0;\n\tmin-width: 100%;\n\tposition: absolute;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { API, KoliBriSplitButtonCallback, States } from './types';\nimport { Alignment, AlternativButtonLinkRole, AriaCurrent, KoliBriButtonType, KoliBriButtonVariant, Stringified } from '../../components';\nimport { setState, watchBoolean, watchString } from '../../utils/prop.validators';\nimport { validateAriaCurrent, validateAriaExpanded, validateAriaSelected, validateDisabled, validateHideLabel } from '../../types/props';\nimport { validateAriaLabelWithLabel, validateLabelWithAriaLabel } from '../../types/props/label';\nimport { a11yHintDisabled } from '../../utils/a11y.tipps';\nimport { validateTabIndex } from '../../utils/validators/tab-index';\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { watchButtonType, watchButtonVariant } from '../button/controller';\n\n/**\n * @slot popover - Ermöglicht das Einfügen beliebigen HTML's in das dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSplitButton implements API {\n\tprivate dropdown: HTMLDivElement | undefined;\n\tprivate dropdownContent: HTMLDivElement | undefined;\n\n\tprivate readonly clickHandler = (e: Event) => {\n\t\tif (typeof this.state._on.onClick === 'function') this.state._on.onClick(e);\n\t\telse this.toggleDropdown();\n\t};\n\n\tprivate readonly openDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = `${this.dropdownContent.clientHeight}px`;\n\t\t\tthis.state = { ...this.state, _showDropdown: true };\n\t\t}\n\t};\n\tprivate readonly closeDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = ``;\n\t\t\tthis.state = { ...this.state, _showDropdown: false };\n\t\t}\n\t};\n\tprivate readonly toggleDropdown = (value?: boolean) => {\n\t\tconst openIt = typeof value === 'boolean' ? value : !this.state._showDropdown;\n\t\tif (openIt) this.openDropdown();\n\t\telse this.closeDropdown();\n\t};\n\tprivate forceCounter = 100; // because the dropdown could be empty\n\tprivate readonly forceOpenDropdown = () => {\n\t\tif (this.forceCounter > 0) {\n\t\t\tif (this.dropdownContent?.clientHeight) this.openDropdown();\n\t\t\telse setTimeout(this.forceOpenDropdown, 10);\n\t\t\tthis.forceCounter--;\n\t\t}\n\t};\n\n\tprivate readonly catchDropdownElements = (e?: HTMLDivElement | null) => {\n\t\tif (e) {\n\t\t\tthis.dropdown = e;\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.dropdownContent = e.firstChild as HTMLDivElement;\n\t\t\t\tif (this._showDropdown) this.forceOpenDropdown();\n\t\t\t});\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'main-button': true,\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconOnly={this._hideLabel}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={{ onClick: this.clickHandler }}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"horizontal-line\"></div>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass=\"secondary-button\"\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon-only\n\t\t\t\t\t_icon=\"codicon codicon-triangle-down\"\n\t\t\t\t\t_label={`dropdown ${this.state._showDropdown ? 'schließen' : 'öffnen'}`}\n\t\t\t\t\t_on={{ onClick: () => this.toggleDropdown() }}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"popover\" ref={this.catchDropdownElements}>\n\t\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\t\t<slot name=\"popover\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Gibt an, welchen aktuellen Auswahlstatus der Button hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/**\n\t * Gibt an, ob durch den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop({ reflect: true }) public _ariaExpanded?: boolean;\n\n\t/**\n\t * Gibt einen beschreibenden Text für den Screenreader an. Damit die\n\t * Sprachsteuerung von interaktiven Elementen funktioniert, muss der\n\t * Aria-Label-Text mit dem Label-Text des Buttons beginnen.\n\t *\n\t * - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop({ reflect: true }) public _ariaSelected?: boolean;\n\n\t/**\n\t * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t */\n\t@Prop() public _customClass?: string;\n\n\t/**\n\t * Gibt an, ob der Button deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Blendet den Text aus und zeigt nur das gewählte Icon an, der Text wird in den Tooltip verschoben.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Iconklasse (z.B.: \"codicon codicon-home\")\n\t */\n\t@Prop() public _icon?: string;\n\n\t/**\n\t * Blendet den Text aus und zeigt nur das gewählte Icon an, der Text wird in den Tooltip verschoben.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Setzt den sichtbaren Text des Elements.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _label!: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: { onClick: KoliBriSplitButtonCallback };\n\n\t/**\n\t * Gibt an, welche Rolle der Schalter hat.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welche Rolle der Schalter hat.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _showDropdown?: boolean = false;\n\n\t/**\n\t * Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Setzt die gewünschte Ausrichtung des Tooltips (`_icon-only`).\n\t */\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/**\n\t * Setzt den Typ der Schaltfläche.\n\t */\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/**\n\t * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<unknown>;\n\n\t/**\n\t * Gibt an, welche Ausprägung der Button hat.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n\n\t@State() public state: States = {\n\t\t_icon: '',\n\t\t_label: '',\n\t\t_on: {},\n\t\t_showDropdown: false,\n\t};\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\twatchString(this, '_accessKey', value);\n\t}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\twatchString(this, '_ariaControls', value);\n\t}\n\n\t@Watch('_ariaCurrent')\n\tpublic validateAriaCurrent(value?: AriaCurrent): void {\n\t\tvalidateAriaCurrent(this, value);\n\t}\n\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: boolean): void {\n\t\tvalidateAriaExpanded(this, value);\n\t}\n\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tvalidateAriaLabelWithLabel(this, value);\n\t}\n\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: boolean): void {\n\t\tvalidateAriaSelected(this, value);\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: string): void {\n\t\twatchString(this, '_customClass', value, { defaultValue: undefined });\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tvalidateDisabled(this, value);\n\t\tif (value) a11yHintDisabled();\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: string): void {\n\t\twatchString(this, '_icon', value);\n\t}\n\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tvalidateLabelWithAriaLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: { onClick: KoliBriSplitButtonCallback }): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_role')\n\tpublic validateRole(value?: AlternativButtonLinkRole): void {\n\t\twatchString(this, '_role', value);\n\t}\n\n\t@Watch('_showDropdown')\n\tpublic validateShowDropdown(value?: boolean): void {\n\t\twatchBoolean(this, '_showDropdown', value);\n\t\tthis.toggleDropdown(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this, value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Alignment): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriButtonType): void {\n\t\twatchButtonType(this, '_type', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown>): void {\n\t\tsetState(this, '_value', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriButtonVariant): void {\n\t\twatchButtonVariant(this, '_variant', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\n\t\tthis.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaCurrent(this._ariaCurrent);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateIconOnly(this._iconOnly);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateShowDropdown(this._showDropdown);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as a,h as i,H as e}from"./index-0e29e47a.js";import{w as t}from"./prop.validators-e15a584f.js";import{a as r}from"./i18n-81ce19c0.js";import"./a11y.tipps-1cea9822.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-f4596895.js";import"./index-133da8ac.js";const s=class{constructor(i){a(this,i),this._ariaLabel=void 0,this._symbol=void 0,this.state={_ariaLabel:r("kol-warning"),_symbol:"…"}}render(){return i(e,null,i("span",{"aria-label":this.state._ariaLabel,role:"term"},this.state._symbol))}validateAriaLabel(a){t(this,"_ariaLabel",a,{required:!0})}validateSymbol(a){t(this,"_symbol",a,{required:!0})}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateSymbol(this._symbol)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_symbol:["validateSymbol"]}}};export{s as kol_symbol};
+import{r as a,h as i,H as t}from"./index-50adf9a0.js";import{w as r}from"./prop.validators-2c20cdf8.js";import{a as s}from"./i18n-b8589f01.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-f4596895.js";import"./index-0962b5a1.js";const e=class{constructor(i){a(this,i),this._ariaLabel=void 0,this._symbol=void 0,this.state={_ariaLabel:s("kol-warning"),_symbol:"…"}}render(){return i(t,null,i("span",{"aria-label":this.state._ariaLabel,role:"term"},this.state._symbol))}validateAriaLabel(a){r(this,"_ariaLabel",a,{required:!0})}validateSymbol(a){r(this,"_symbol",a,{required:!0})}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateSymbol(this._symbol)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_symbol:["validateSymbol"]}}};export{e as kol_symbol};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as e}from"./index-0e29e47a.js";import{s as n,w as o,g as s,p as a,a as l,o as r}from"./prop.validators-e15a584f.js";import{a as h}from"./i18n-81ce19c0.js";import"./a11y.tipps-1cea9822.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-f4596895.js";import"./index-133da8ac.js";const d=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}:host{display:grid}:host>div.table{max-width:100%;order:1;overflow-x:auto;overflow-y:hidden}:host>div.table table{width:100%}th>div{display:grid;grid-template-columns:1fr auto;place-items:center}div.pagination{order:2}div.pagination,div.pagination>div:last-child{display:grid;place-items:center}@media (min-width: 1024px){div.pagination,div.pagination>div:last-child{grid-auto-flow:column}div.pagination kol-pagination{display:flex}}",c=[10,20,50,100],f=new Map,p=class{constructor(i){t(this,i),this.horizontal=!0,this.sortDirections=new Map,this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.setSortDirection=(t,i)=>{this.sortDirections.clear(),this.sortDirections.set(t,i),this.sortFunction=t},this.handlePagination={onClick:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePage:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePageSize:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:i})),n(this,"_pageSize",i)}},this.beforePatchPagination=(t,i,e,a)=>{"_pagination"===a&&(this.showPagination=!0===t||""===t||"object"==typeof t&&null!==t)},this.updateSortedData=()=>{let t=this.state._data;if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"NOS":t=[...this.state._data];break;case"ASC":t=this.sortFunction([...this.state._data]);break;default:t=this.sortFunction([...this.state._data]).reverse()}n(this,"_sortedData",t)},this._caption=void 0,this._data=void 0,this._headers=void 0,this._minWidth=void 0,this._pagination=void 0,this.state={_caption:"…",_data:[],_headers:{horizontal:[],vertical:[]},_pagination:{_page:1,_pageSize:10,_total:0},_sortedData:[]}}validateCaption(t){o(this,"_caption",t,{required:!0})}validateData(t){s(t,(()=>{r(t,(()=>{void 0===t&&(t=[]);try{t=a(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&n(this,"_data",t,{afterPatch:()=>{const t=setTimeout((()=>{clearTimeout(t),this.updateSortedData()}))}})}))}))}validateHeaders(t){s(t,(()=>{r(t,(()=>{try{t=a(t)}catch(t){}l(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var i,e;const a=t;null===(i=a.horizontal)||void 0===i||i.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))})),null===(e=a.vertical)||void 0===e||e.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))}))}}})}))}))}validateMinWidth(t){o(this,"_minWidth",t,{defaultValue:void 0})}validatePagination(t){try{t=a(t)}catch(t){}l(this,"_pagination",(()=>!0),new Set(["boolean","KoliBriTablePagination"]),t,{hooks:{beforePatch:this.beforePatchPagination}})}componentWillLoad(){this.validateCaption(this._caption),this.validateData(this._data),this.validateHeaders(this._headers),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination)}getNumberOfCols(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.colSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}getNumberOfRows(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.rowSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}filterHeaderKeys(t){const i=[];return t.forEach((t=>{t.forEach((t=>{"string"==typeof t.key&&i.push(t)}))})),i}getPrimaryHeader(t){var i,e;let a=this.filterHeaderKeys(null!==(i=t.horizontal)&&void 0!==i?i:[]);return this.horizontal=!0,0===a.length&&(a=this.filterHeaderKeys(null!==(e=t.vertical)&&void 0!==e?e:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(t,i){i.horizontal=Array.isArray(null==i?void 0:i.horizontal)?i.horizontal:[],i.vertical=Array.isArray(null==i?void 0:i.vertical)?i.vertical:[];const e=this.getPrimaryHeader(i),a=this.getNumberOfCols(i.horizontal,t),o=this.getNumberOfRows(i.vertical,t),n=[],s=[],r=[];i.vertical.forEach(((t,i)=>{s[i]=0,r[i]=[]}));for(let l=0;l<o;l++){const o=[];i.vertical.forEach(((t,i)=>{let e=0;if(r[i].forEach((t=>e+=t)),e<=l){const a=t[l-e+s[i]];if("object"==typeof a){o.push(Object.assign(Object.assign({},a),{asTd:!1,data:{}}));let t=1;if("number"==typeof a.rowSpan&&a.rowSpan>1&&(t=a.rowSpan),r[i].push(t),"number"==typeof a.colSpan&&a.colSpan>1)for(let e=1;e<a.colSpan;e++)r[i+e].push(t);s[i]++}}}));for(let i=0;i<a;i++)!0===this.horizontal?"object"==typeof e[i]&&null!==e[i]&&"string"==typeof e[i].key&&"object"==typeof t[l]&&null!==t[l]&&o.push(Object.assign(Object.assign({},e[i]),{colSpan:void 0,data:t[l],label:t[l][e[i].key],rowSpan:void 0})):"object"==typeof e[l]&&null!==e[l]&&"string"==typeof e[l].key&&"object"==typeof t[i]&&null!==t[i]&&o.push(Object.assign(Object.assign({},e[l]),{colSpan:void 0,data:t[i],label:t[i][e[l].key],rowSpan:void 0}));n.push(o)}if(0===t.length){let t=0,e=0;Array.isArray(i.horizontal)&&i.horizontal.length>0&&i.horizontal[0].forEach((i=>{t+=i.colSpan||1})),Array.isArray(i.vertical)&&i.vertical.length>0&&(t-=i.vertical.length,i.vertical[0].forEach((t=>{e+=t.rowSpan||1})));const a={colSpan:t,label:h("kol-no-entries"),render:void 0,rowSpan:Math.max(e,1)};0===n.length?n.push([a]):n[0].push(a)}return n}selectDisplayedData(t,i,e){return"number"==typeof i&&i>0&&"number"==typeof e&&e>0?(this.pageStartSlice=i*(e-1),this.pageEndSlice=i*e>t.length?t.length:i*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}cellRender(t,i){i&&(clearTimeout(f.get(i)),f.set(i,setTimeout((()=>{if(clearTimeout(f.get(i)),"function"==typeof t.render){const e=t.render(i,{asTd:t.asTd,label:t.label,textAlign:t.textAlign,width:t.width},t.data,this.state._data);"string"==typeof e&&(i.innerHTML=e)}}))))}render(){var t,a;const o=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(a=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==a?a:10:this.state._sortedData.length,this.state._pagination._page||1),n=this.createDataField(o,this.state._headers);return i(e,null,this.pageEndSlice>0&&this.showPagination&&i("div",{class:"pagination"},i("span",null,"Einträge ",this.pageEndSlice>0?this.pageStartSlice+1:0," bis ",this.pageEndSlice," von"," ",this.state._pagination._total||(Array.isArray(this.state._data)?this.state._data.length:0)," angezeigt"),i("div",null,i("kol-pagination",{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||c,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_total:this.state._pagination._total||this.state._data.length}))),i("div",{class:"table",tabindex:"0"},i("table",{style:{minWidth:this.state._minWidth}},i("caption",null,this.state._caption),Array.isArray(this.state._headers.horizontal)&&i("thead",null,this.state._headers.horizontal.map(((t,e)=>i("tr",{key:`thead-${e}`},t.map(((t,a)=>!0===t.asTd?i("td",{key:`thead-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}):i("th",{key:`thead-${e}-${a}-${t.label}`,scope:"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&i("kol-button",{exportparts:"icon",_ariaLabel:h("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"codicon codicon-fold":"ASC"===this.sortDirections.get(t.sort)?"codicon codicon-chevron-up":"codicon codicon-chevron-down",_iconOnly:!0,_label:h("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))))))))),i("tbody",null,n.map(((t,e)=>i("tr",{key:`tbody-${e}`},t.map(((t,a)=>!1===t.asTd?i("th",{key:`tbody-${e}-${a}-${t.label}`,scope:"number"==typeof t.rowSpan&&t.rowSpan>1?"rowgroup":"row",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&i("kol-button",{exportparts:"icon",_ariaLabel:h("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"codicon codicon-fold":"ASC"===this.sortDirections.get(t.sort)?"codicon codicon-chevron-up":"codicon codicon-chevron-down",_iconOnly:!0,_label:h("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))):i("td",{key:`tbody-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}))))))))))}static get watchers(){return{_caption:["validateCaption"],_data:["validateData"],_headers:["validateHeaders"],_minWidth:["validateMinWidth"],_pagination:["validatePagination"]}}};p.style={default:d};export{p as kol_table};
+import{r as t,h as i,H as e}from"./index-50adf9a0.js";import{s as n,w as o,g as s,p as a,a as l,o as r}from"./prop.validators-2c20cdf8.js";import{a as h}from"./i18n-b8589f01.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-f4596895.js";import"./index-0962b5a1.js";const d=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}:host{display:grid}:host>div.table{max-width:100%;order:1;overflow-x:auto;overflow-y:hidden}:host>div.table table{width:100%}th>div{display:grid;grid-template-columns:1fr auto;place-items:center}div.pagination{order:2}div.pagination,div.pagination>div:last-child{display:grid;place-items:center}@media (min-width: 1024px){div.pagination,div.pagination>div:last-child{grid-auto-flow:column}div.pagination kol-pagination{display:flex}}",c=[10,20,50,100],f=new Map,p=class{constructor(i){t(this,i),this.horizontal=!0,this.sortDirections=new Map,this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.setSortDirection=(t,i)=>{this.sortDirections.clear(),this.sortDirections.set(t,i),this.sortFunction=t},this.handlePagination={onClick:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePage:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePageSize:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:i})),n(this,"_pageSize",i)}},this.beforePatchPagination=(t,i,e,a)=>{"_pagination"===a&&(this.showPagination=!0===t||""===t||"object"==typeof t&&null!==t)},this.updateSortedData=()=>{let t=this.state._data;if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"NOS":t=[...this.state._data];break;case"ASC":t=this.sortFunction([...this.state._data]);break;default:t=this.sortFunction([...this.state._data]).reverse()}n(this,"_sortedData",t)},this._caption=void 0,this._data=void 0,this._headers=void 0,this._minWidth=void 0,this._pagination=void 0,this.state={_caption:"…",_data:[],_headers:{horizontal:[],vertical:[]},_pagination:{_page:1,_pageSize:10,_total:0},_sortedData:[]}}validateCaption(t){o(this,"_caption",t,{required:!0})}validateData(t){s(t,(()=>{r(t,(()=>{void 0===t&&(t=[]);try{t=a(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&n(this,"_data",t,{afterPatch:()=>{const t=setTimeout((()=>{clearTimeout(t),this.updateSortedData()}))}})}))}))}validateHeaders(t){s(t,(()=>{r(t,(()=>{try{t=a(t)}catch(t){}l(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var i,e;const a=t;null===(i=a.horizontal)||void 0===i||i.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))})),null===(e=a.vertical)||void 0===e||e.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))}))}}})}))}))}validateMinWidth(t){o(this,"_minWidth",t,{defaultValue:void 0})}validatePagination(t){try{t=a(t)}catch(t){}l(this,"_pagination",(()=>!0),new Set(["boolean","KoliBriTablePagination"]),t,{hooks:{beforePatch:this.beforePatchPagination}})}componentWillLoad(){this.validateCaption(this._caption),this.validateData(this._data),this.validateHeaders(this._headers),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination)}getNumberOfCols(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.colSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}getNumberOfRows(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.rowSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}filterHeaderKeys(t){const i=[];return t.forEach((t=>{t.forEach((t=>{"string"==typeof t.key&&i.push(t)}))})),i}getPrimaryHeader(t){var i,e;let a=this.filterHeaderKeys(null!==(i=t.horizontal)&&void 0!==i?i:[]);return this.horizontal=!0,0===a.length&&(a=this.filterHeaderKeys(null!==(e=t.vertical)&&void 0!==e?e:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(t,i){i.horizontal=Array.isArray(null==i?void 0:i.horizontal)?i.horizontal:[],i.vertical=Array.isArray(null==i?void 0:i.vertical)?i.vertical:[];const e=this.getPrimaryHeader(i),a=this.getNumberOfCols(i.horizontal,t),o=this.getNumberOfRows(i.vertical,t),n=[],s=[],r=[];i.vertical.forEach(((t,i)=>{s[i]=0,r[i]=[]}));for(let l=0;l<o;l++){const o=[];i.vertical.forEach(((t,i)=>{let e=0;if(r[i].forEach((t=>e+=t)),e<=l){const a=t[l-e+s[i]];if("object"==typeof a){o.push(Object.assign(Object.assign({},a),{asTd:!1,data:{}}));let t=1;if("number"==typeof a.rowSpan&&a.rowSpan>1&&(t=a.rowSpan),r[i].push(t),"number"==typeof a.colSpan&&a.colSpan>1)for(let e=1;e<a.colSpan;e++)r[i+e].push(t);s[i]++}}}));for(let i=0;i<a;i++)!0===this.horizontal?"object"==typeof e[i]&&null!==e[i]&&"string"==typeof e[i].key&&"object"==typeof t[l]&&null!==t[l]&&o.push(Object.assign(Object.assign({},e[i]),{colSpan:void 0,data:t[l],label:t[l][e[i].key],rowSpan:void 0})):"object"==typeof e[l]&&null!==e[l]&&"string"==typeof e[l].key&&"object"==typeof t[i]&&null!==t[i]&&o.push(Object.assign(Object.assign({},e[l]),{colSpan:void 0,data:t[i],label:t[i][e[l].key],rowSpan:void 0}));n.push(o)}if(0===t.length){let t=0,e=0;Array.isArray(i.horizontal)&&i.horizontal.length>0&&i.horizontal[0].forEach((i=>{t+=i.colSpan||1})),Array.isArray(i.vertical)&&i.vertical.length>0&&(t-=i.vertical.length,i.vertical[0].forEach((t=>{e+=t.rowSpan||1})));const a={colSpan:t,label:h("kol-no-entries"),render:void 0,rowSpan:Math.max(e,1)};0===n.length?n.push([a]):n[0].push(a)}return n}selectDisplayedData(t,i,e){return"number"==typeof i&&i>0&&"number"==typeof e&&e>0?(this.pageStartSlice=i*(e-1),this.pageEndSlice=i*e>t.length?t.length:i*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}cellRender(t,i){i&&(clearTimeout(f.get(i)),f.set(i,setTimeout((()=>{if(clearTimeout(f.get(i)),"function"==typeof t.render){const e=t.render(i,{asTd:t.asTd,label:t.label,textAlign:t.textAlign,width:t.width},t.data,this.state._data);"string"==typeof e&&(i.innerHTML=e)}}))))}render(){var t,a;const o=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(a=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==a?a:10:this.state._sortedData.length,this.state._pagination._page||1),n=this.createDataField(o,this.state._headers);return i(e,null,this.pageEndSlice>0&&this.showPagination&&i("div",{class:"pagination"},i("span",null,"Einträge ",this.pageEndSlice>0?this.pageStartSlice+1:0," bis ",this.pageEndSlice," von"," ",this.state._pagination._total||(Array.isArray(this.state._data)?this.state._data.length:0)," angezeigt"),i("div",null,i("kol-pagination",{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||c,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_total:this.state._pagination._total||this.state._data.length}))),i("div",{class:"table",tabindex:"0"},i("table",{style:{minWidth:this.state._minWidth}},i("caption",null,this.state._caption),Array.isArray(this.state._headers.horizontal)&&i("thead",null,this.state._headers.horizontal.map(((t,e)=>i("tr",{key:`thead-${e}`},t.map(((t,a)=>!0===t.asTd?i("td",{key:`thead-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}):i("th",{key:`thead-${e}-${a}-${t.label}`,scope:"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&i("kol-button",{exportparts:"icon",_ariaLabel:h("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"codicon codicon-fold":"ASC"===this.sortDirections.get(t.sort)?"codicon codicon-chevron-up":"codicon codicon-chevron-down",_iconOnly:!0,_label:h("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))))))))),i("tbody",null,n.map(((t,e)=>i("tr",{key:`tbody-${e}`},t.map(((t,a)=>!1===t.asTd?i("th",{key:`tbody-${e}-${a}-${t.label}`,scope:"number"==typeof t.rowSpan&&t.rowSpan>1?"rowgroup":"row",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&i("kol-button",{exportparts:"icon",_ariaLabel:h("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"codicon codicon-fold":"ASC"===this.sortDirections.get(t.sort)?"codicon codicon-chevron-up":"codicon codicon-chevron-down",_iconOnly:!0,_label:h("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))):i("td",{key:`tbody-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}))))))))))}static get watchers(){return{_caption:["validateCaption"],_data:["validateData"],_headers:["validateHeaders"],_minWidth:["validateMinWidth"],_pagination:["validatePagination"]}}};p.style={default:d};export{p as kol_table};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as o,g as e}from"./index-0e29e47a.js";import{d as s,b as n,f as a,u as l}from"./a11y.tipps-1cea9822.js";import{a as r,w as d,s as h,e as b,d as u,k as c}from"./prop.validators-e15a584f.js";import{a as p}from"./i18n-81ce19c0.js";import{L as f}from"./dev.utils-157f0499.js";import"./index-f4596895.js";import"./index-133da8ac.js";import"./reuse-3a02afb9.js";const g=new Set(['"left", "right"']),v=new Set(['"bottom", "top"']),m=new Set([...g,...v]),k=(t,e,a)=>{r(t,e,(t=>"bottom"===t||"left"===t||"right"===t||"top"===t),m,a)},w=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}kol-button-group-wc{display:inline-flex;flex-wrap:wrap}kol-button-group-wc button{border:0;border-bottom-color:transparent;border-bottom-style:solid;display:block}div.grid,div[role='tabpanel']{height:100%}:host>.tabs-align-right{display:grid;grid-template-columns:1fr auto}:host>.tabs-align-right kol-button-group-wc{display:grid;order:2}:host>.tabs-align-left{display:grid;grid-template-columns:auto 1fr}:host>.tabs-align-left kol-button-group-wc{display:grid;order:0}:host>.tabs-align-bottom{display:grid;grid-template-rows:1fr auto}:host>.tabs-align-bottom kol-button-group-wc{order:2}:host>.tabs-align-bottom kol-button-group-wc>div{display:flex}:host>.tabs-align-bottom>kol-button-group-wc>div>div:first-child{margin:0 1em 0 0}:host>.tabs-align-bottom>kol-button-group-wc>div>div{margin:0 1em}:host>.tabs-align-top{display:grid;grid-template-rows:auto 1fr}:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-top kol-button-group-wc>div{display:flex}:host>.tabs-align-top>kol-button-group-wc>div>div:first-child{margin:0 1em 0 0}:host>.tabs-align-top>kol-button-group-wc>div>div{margin:0 1em}:host>div{display:grid}:host>.tabs-align-left kol-button-group-wc,:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-bottom kol-button-group-wc,:host>.tabs-align-right kol-button-group-wc{order:1}:host>div.tabs-align-left kol-button-group-wc>div,:host>div.tabs-align-left kol-button-group-wc>div>div,:host>div.tabs-align-right kol-button-group-wc>div,:host>div.tabs-align-right kol-button-group-wc>div>div{display:grid}:host>div.tabs-align-left kol-button-group-wc>div>div kol-button-wc,:host>div.tabs-align-right kol-button-group-wc>div>div kol-button-wc{width:100%}:host>div.tabs-align-bottom kol-button-group-wc div,:host>div.tabs-align-top kol-button-group-wc div{display:flex;flex-wrap:wrap}",y=class{constructor(e){t(this,e),this.onCreateLabel=`${p("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,a)=>{if(a>0){if(e+a<t.length)return t[e+a]._disabled?this.nextPossibleTabIndex(t,e,a+1):e+a}else if(a<0&&e+a>=0)return t[e+a]._disabled?this.nextPossibleTabIndex(t,e,a-1):e+a;return e},this.onKeyDown=t=>{const e=setTimeout((()=>{clearTimeout(e);let a=null;switch(t.key){case"ArrowRight":a=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":a=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==a&&this.onSelect(t,a,!0)}),250)},this.onClickSelect=(t,e)=>{this.onSelect(t,e,!0)},this.onMouseDown=t=>{t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,a=!0,i)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===a){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,i||t);t=i||t,a=!1}if(!1===a){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,i||t);s("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,a,i)=>{let o,s;o="_selected"===i?t:this.state._selected,s="_tabs"===i?t:this.state._tabs,s.length>0&&e.set("_selected",this.selectNextNotDisabledTab(o,s))},this.handleTabPanels=()=>{var t,e,a;if(this.tabPanelHost instanceof HTMLDivElement)for(let i=this.tabPanelHost.children.length;i<this.state._tabs.length;i++){const o=document.createElement("div");o.setAttribute("aria-labelledby",`tab-${i}`),o.setAttribute("id",`tabpanel-${i}`),o.setAttribute("role","tabpanel"),o.setAttribute("hidden","");const s=document.createElement("slot");s.setAttribute("name",`tabpanel-slot-${i}`),o.appendChild(s),this.tabPanelHost.appendChild(o),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[i])&&(null===(a=this.host)||void 0===a||a.children[i].setAttribute("slot",`tabpanel-slot-${i}`))}},this.onCreate=t=>{var e,a;t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(a=this.state._on)||void 0===a||a.onCreate(t))},this._ariaLabel=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this._tabsAlign="top",this.state={_ariaLabel:"…",_selected:0,_tabs:[],_tabsAlign:"top"}}renderButtonGroup(){return i("kol-button-group-wc",{role:"tablist","aria-label":this.state._ariaLabel,onKeyDown:this.onKeyDown},this.state._tabs.map(((t,e)=>i("kol-button-wc",{_disabled:t._disabled,_icon:t._icon,_iconOnly:t._iconOnly,_label:t._label&&t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_variant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&i("kol-button-wc",{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return i(o,null,i("div",{ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._tabsAlign}`]:!0}},this.renderButtonGroup(),i("div",{ref:this.catchTabPanelHost})))}validateAriaLabel(t){d(this,"_ariaLabel",t,{required:!0}),n(t)}validateOn(t){if("object"==typeof t&&null!==t){a("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:f.debug("[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:f.debug("[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),h(this,"_on",e)}}validateSelected(t){b(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){u(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),l("KolTabs",this.state._tabs.length)}validateTabsAlign(t){k(this,"_tabsAlign",t)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateTabsAlign(this._tabsAlign)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}onSelect(t,e,a=!1){var i,o;this._selected=e,"function"==typeof(null===(i=this._on)||void 0===i?void 0:i.onSelect)&&(null===(o=this._on)||void 0===o||o.onSelect(t,e)),!0===a&&(this.selectedTimeout=setTimeout((()=>{if(clearTimeout(this.selectedTimeout),this.tabPanelsElement){const t=c(`button#tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}),250))}get host(){return e(this)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"],_tabsAlign:["validateTabsAlign"]}}};y.style={default:w};export{y as kol_tabs};
+import{r as t,h as i,H as o,g as e}from"./index-50adf9a0.js";import{d as s,b as n,f as a,c as l}from"./a11y.tipps-2e27f8e6.js";import{a as r,w as d,s as h,e as b,d as u,k as c}from"./prop.validators-2c20cdf8.js";import{a as p}from"./i18n-b8589f01.js";import{L as f}from"./dev.utils-157f0499.js";import"./index-f4596895.js";import"./index-0962b5a1.js";import"./reuse-3a02afb9.js";const g=new Set(['"left", "right"']),v=new Set(['"bottom", "top"']),m=new Set([...g,...v]),k=(t,e,a)=>{r(t,e,(t=>"bottom"===t||"left"===t||"right"===t||"top"===t),m,a)},w=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}kol-button-group-wc{display:inline-flex;flex-wrap:wrap}kol-button-group-wc button{border:0;border-bottom-color:transparent;border-bottom-style:solid;display:block}div.grid,div[role='tabpanel']{height:100%}:host>.tabs-align-right{display:grid;grid-template-columns:1fr auto}:host>.tabs-align-right kol-button-group-wc{display:grid;order:2}:host>.tabs-align-left{display:grid;grid-template-columns:auto 1fr}:host>.tabs-align-left kol-button-group-wc{display:grid;order:0}:host>.tabs-align-bottom{display:grid;grid-template-rows:1fr auto}:host>.tabs-align-bottom kol-button-group-wc{order:2}:host>.tabs-align-bottom kol-button-group-wc>div{display:flex}:host>.tabs-align-bottom>kol-button-group-wc>div>div:first-child{margin:0 1em 0 0}:host>.tabs-align-bottom>kol-button-group-wc>div>div{margin:0 1em}:host>.tabs-align-top{display:grid;grid-template-rows:auto 1fr}:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-top kol-button-group-wc>div{display:flex}:host>.tabs-align-top>kol-button-group-wc>div>div:first-child{margin:0 1em 0 0}:host>.tabs-align-top>kol-button-group-wc>div>div{margin:0 1em}:host>div{display:grid}:host>.tabs-align-left kol-button-group-wc,:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-bottom kol-button-group-wc,:host>.tabs-align-right kol-button-group-wc{order:1}:host>div.tabs-align-left kol-button-group-wc>div,:host>div.tabs-align-left kol-button-group-wc>div>div,:host>div.tabs-align-right kol-button-group-wc>div,:host>div.tabs-align-right kol-button-group-wc>div>div{display:grid}:host>div.tabs-align-left kol-button-group-wc>div>div kol-button-wc,:host>div.tabs-align-right kol-button-group-wc>div>div kol-button-wc{width:100%}:host>div.tabs-align-bottom kol-button-group-wc div,:host>div.tabs-align-top kol-button-group-wc div{display:flex;flex-wrap:wrap}",y=class{constructor(e){t(this,e),this.onCreateLabel=`${p("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,a)=>{if(a>0){if(e+a<t.length)return t[e+a]._disabled?this.nextPossibleTabIndex(t,e,a+1):e+a}else if(a<0&&e+a>=0)return t[e+a]._disabled?this.nextPossibleTabIndex(t,e,a-1):e+a;return e},this.onKeyDown=t=>{const e=setTimeout((()=>{clearTimeout(e);let a=null;switch(t.key){case"ArrowRight":a=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":a=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==a&&this.onSelect(t,a,!0)}),250)},this.onClickSelect=(t,e)=>{this.onSelect(t,e,!0)},this.onMouseDown=t=>{t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,a=!0,i)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===a){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,i||t);t=i||t,a=!1}if(!1===a){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,i||t);s("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,a,i)=>{let o,s;o="_selected"===i?t:this.state._selected,s="_tabs"===i?t:this.state._tabs,s.length>0&&e.set("_selected",this.selectNextNotDisabledTab(o,s))},this.handleTabPanels=()=>{var t,e,a;if(this.tabPanelHost instanceof HTMLDivElement)for(let i=this.tabPanelHost.children.length;i<this.state._tabs.length;i++){const o=document.createElement("div");o.setAttribute("aria-labelledby",`tab-${i}`),o.setAttribute("id",`tabpanel-${i}`),o.setAttribute("role","tabpanel"),o.setAttribute("hidden","");const s=document.createElement("slot");s.setAttribute("name",`tabpanel-slot-${i}`),o.appendChild(s),this.tabPanelHost.appendChild(o),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[i])&&(null===(a=this.host)||void 0===a||a.children[i].setAttribute("slot",`tabpanel-slot-${i}`))}},this.onCreate=t=>{var e,a;t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(a=this.state._on)||void 0===a||a.onCreate(t))},this._ariaLabel=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this._tabsAlign="top",this.state={_ariaLabel:"…",_selected:0,_tabs:[],_tabsAlign:"top"}}renderButtonGroup(){return i("kol-button-group-wc",{role:"tablist","aria-label":this.state._ariaLabel,onKeyDown:this.onKeyDown},this.state._tabs.map(((t,e)=>i("kol-button-wc",{_disabled:t._disabled,_icon:t._icon,_iconOnly:t._iconOnly,_label:t._label&&t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_variant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&i("kol-button-wc",{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return i(o,null,i("div",{ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._tabsAlign}`]:!0}},this.renderButtonGroup(),i("div",{ref:this.catchTabPanelHost})))}validateAriaLabel(t){d(this,"_ariaLabel",t,{required:!0}),n(t)}validateOn(t){if("object"==typeof t&&null!==t){a("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:f.debug("[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:f.debug("[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),h(this,"_on",e)}}validateSelected(t){b(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){u(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),l("KolTabs",this.state._tabs.length)}validateTabsAlign(t){k(this,"_tabsAlign",t)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateTabsAlign(this._tabsAlign)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}onSelect(t,e,a=!1){var i,o;this._selected=e,"function"==typeof(null===(i=this._on)||void 0===i?void 0:i.onSelect)&&(null===(o=this._on)||void 0===o||o.onSelect(t,e)),!0===a&&(this.selectedTimeout=setTimeout((()=>{if(clearTimeout(this.selectedTimeout),this.tabPanelsElement){const t=c(`button#tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}),250))}get host(){return e(this)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"],_tabsAlign:["validateTabsAlign"]}}};y.style={default:w};export{y as kol_tabs};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,F as e,H as i,r as a,g as s}from"./index-0e29e47a.js";import{a as n}from"./i18n-81ce19c0.js";import{b as l,e as h,w as r,a as o,s as d}from"./prop.validators-e15a584f.js";import{a as u}from"./reuse-3a02afb9.js";import{I as p,g as c}from"./controller-53ddde7c.js";import{n as f}from"./dev.utils-157f0499.js";import"./index-133da8ac.js";import"./index-f4596895.js";import"./a11y.tipps-1cea9822.js";import"./tab-index-eff012a1.js";const v=(t,e)=>{l(t,"_adjustHeight",e)},m=(t,e)=>{l(t,"_hasCounter",e)};class y extends p{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){l(this.component,"_hasCounter",t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){h(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){r(this.component,"_placeholder",t)}validateReadOnly(t){l(this.component,"_readOnly",t)}validateResize(t){o(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){l(this.component,"_required",t)}validateRows(t){h(this.component,"_rows",t)}validateValue(t){r(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const b=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}textarea{width:100%}div.input{cursor:text}",_=t=>{t.style.overflow="hidden";const e=t.rows,a=t.clientHeight/e;t.rows=1;const i=Math.round(t.scrollHeight/a);return t.rows=e,i},g=class{render(){const{ariaDescribedBy:a}=c(this.state);return t(i,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{textarea:!0},_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_readOnly:this.state._readOnly,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("div",{slot:"input"},t("textarea",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,rows:this.state._rows,placeholder:this.state._placeholder,spellcheck:"false"},this.controller.onFacade,{onKeyUp:this.onChange,style:{resize:this.state._resize},value:this.state._value})),this.state._hasCounter&&t("span",{"aria-atomic":"true","aria-live":"polite"},this.state._currentLength,this.state._maxLength&&t(e,null,t("span",{"aria-label":n("kol-of"),role:"img"},"/"),this.state._maxLength)," ",t("span",null,n("kol-characters"))))))}constructor(t){a(this,t),this.catchRef=t=>{this.ref=t,u(this.host,this.ref)},this.onChange=t=>{this.ref instanceof HTMLTextAreaElement&&(d(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=_(this.ref))),"function"==typeof this.controller.onFacade.onChange&&this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._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,_hasValue:!1,_id:f(),_resize:"vertical"},this.controller=new y(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAdjustHeight(t){v(this,t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){m(this,t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateResize(t){this.controller.validateResize(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.validateAdjustHeight(this._adjustHeight),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};g.style={default:b};export{g as kol_textarea};
+import{h as t,F as e,H as i,r as a,g as s}from"./index-50adf9a0.js";import{a as n}from"./i18n-b8589f01.js";import{b as l,e as h,w as r,a as o,s as d}from"./prop.validators-2c20cdf8.js";import{a as u}from"./reuse-3a02afb9.js";import{I as p,g as c}from"./controller-ca91917c.js";import{n as f}from"./dev.utils-157f0499.js";import"./index-0962b5a1.js";import"./index-f4596895.js";import"./a11y.tipps-2e27f8e6.js";import"./tab-index-2de507bb.js";const v=(t,e)=>{l(t,"_adjustHeight",e)},m=(t,e)=>{l(t,"_hasCounter",e)};class y extends p{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){l(this.component,"_hasCounter",t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){h(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){r(this.component,"_placeholder",t)}validateReadOnly(t){l(this.component,"_readOnly",t)}validateResize(t){o(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){l(this.component,"_required",t)}validateRows(t){h(this.component,"_rows",t)}validateValue(t){r(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const b=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",_=t=>{t.style.overflow="hidden";const e=t.rows,a=t.clientHeight/e;t.rows=1;const i=Math.round(t.scrollHeight/a);return t.rows=e,i},g=class{render(){const{ariaDescribedBy:a}=c(this.state);return t(i,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{textarea:!0},_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_readOnly:this.state._readOnly,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("div",{slot:"input"},t("textarea",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,rows:this.state._rows,placeholder:this.state._placeholder,spellcheck:"false"},this.controller.onFacade,{onKeyUp:this.onChange,style:{resize:this.state._resize},value:this.state._value})),this.state._hasCounter&&t("span",{"aria-atomic":"true","aria-live":"polite"},this.state._currentLength,this.state._maxLength&&t(e,null,t("span",{"aria-label":n("kol-of"),role:"img"},"/"),this.state._maxLength)," ",t("span",null,n("kol-characters"))))))}constructor(t){a(this,t),this.catchRef=t=>{this.ref=t,u(this.host,this.ref)},this.onChange=t=>{this.ref instanceof HTMLTextAreaElement&&(d(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=_(this.ref))),"function"==typeof this.controller.onFacade.onChange&&this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._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,_hasValue:!1,_id:f(),_resize:"vertical"},this.controller=new y(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAdjustHeight(t){v(this,t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){m(this,t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateResize(t){this.controller.validateResize(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.validateAdjustHeight(this._adjustHeight),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};g.style={default:b};export{g as kol_textarea};

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

@@ -1 +1 @@
-{"version":3,"names":["validateAdjustHeight","component","value","watchBoolean","validateHasCounter","TextareaController","InputController","constructor","name","host","super","this","afterSyncCharCounter","_value","length","state","_currentLength","hooks","afterPatch","validateMaxLength","watchNumber","min","validatePlaceholder","watchString","validateReadOnly","validateResize","watchValidator","Set","validateRequired","validateRows","validateValue","setFormAssociatedValue","componentWillLoad","_hasCounter","_maxLength","_placeholder","_readOnly","_resize","_required","_rows","defaultStyleCss","increaseTextareaHeight","el","style","overflow","currentRows","rows","rowHeight","clientHeight","nextRows","Math","round","scrollHeight","KolTextarea","render","ariaDescribedBy","getRenderStates","h","Host","class","_hasValue","textarea","_alert","_disabled","_error","_hideLabel","_hint","_id","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoCorrect","disabled","id","maxlength","_name","readOnly","required","placeholder","spellcheck","controller","onFacade","onKeyUp","onChange","resize","Fragment","translate","role","hostRef","propagateFocus","event","HTMLTextAreaElement","setState","_adjustHeight","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateName","validateOn","validateTabIndex","validateTouched","addValueChangeListener","v"],"sources":["./src/types/props/adjust-height.ts","./src/types/props/has-counter.ts","./src/components/textarea/controller.ts","./src/components/textarea/style.css?tag=kol-textarea&mode=default&encapsulation=shadow","./src/components/textarea/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Passt die Höhe des Eingabefeldes automatisch an den Füllstand an.\n */\n/** en\n * Adjusts the height of the element to its content.\n */\nexport type PropAdjustHeight = {\n\tadjustHeight: boolean;\n};\n\n/* validator */\nexport const validateAdjustHeight = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_adjustHeight', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Zeigt die Zeichenanzahlanzeige am unteren Rand des EIngabefeldes.\n */\n/** en\n * Shows the the character count on the lower border of the input.\n */\nexport type PropHasCounter = {\n\thasCounter: boolean;\n};\n\n/* validator */\nexport const validateHasCounter = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_hasCounter', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputController } from '../@deprecated/input/controller';\nimport { CSSResize, Props, Watches } from './types';\n\nexport class TextareaController extends InputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprivate afterSyncCharCounter = () => {\n\t\tif (typeof this.component._value === 'string' && this.component._value.length > 0) {\n\t\t\tthis.component.state._currentLength = this.component._value.length;\n\t\t}\n\t};\n\n\tpublic validateHasCounter(value?: boolean): void {\n\t\twatchBoolean(this.component, '_hasCounter', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMaxLength(value?: number): void {\n\t\twatchNumber(this.component, '_maxLength', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t\tmin: 0,\n\t\t});\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic validateReadOnly(value?: boolean): void {\n\t\twatchBoolean(this.component, '_readOnly', value);\n\t}\n\n\tpublic validateResize(value?: CSSResize): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_resize',\n\t\t\t(value) => typeof value === 'string' && (value === 'both' || value === 'horizontal' || value === 'none' || value === 'vertical'),\n\t\t\tnew Set('String {both, horizontal, vertical, none}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: number): void {\n\t\twatchNumber(this.component, '_rows', value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\ntextarea {\n\twidth: 100%;\n}\ndiv.input {\n\tcursor: text;\n}\n","import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { translate } from '../../i18n';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { validateAdjustHeight, validateHasCounter } from '../../types/props';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { TextareaController } from './controller';\nimport { ComponentApi, CSSResize, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\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\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\ttextarea: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\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\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\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 * Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.\n\t */\n\t@Prop({ reflect: true }) public _hasCounter?: boolean;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\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 * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die maximale Zeichenanzahl.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob die Größe des Eingabefeldes von Nutzer:innen geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t */\n\t@Prop() public _resize?: CSSResize = 'vertical';\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt die Anzahl der anzuzeigenden Zeilen des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: number;\n\n\t/**\n\t * Gibt an, welchen Tab-Index 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@State() public state: States = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_id: nonce(), // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: boolean): void {\n\t\tvalidateAdjustHeight(this, value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tvalidateHasCounter(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: CSSResize): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.validateAdjustHeight(this._adjustHeight);\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.ref instanceof HTMLTextAreaElement) {\n\t\t\tsetState(this, '_currentLength', this.ref.value.length);\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ref);\n\t\t\t}\n\t\t}\n\t\tif (typeof this.controller.onFacade.onChange === 'function') {\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n}\n"],"mappings":";;;0bAeO,MAAMA,EAAuB,CAACC,EAAsCC,KAC1EC,EAAaF,EAAW,gBAAiBC,EAAM,ECDzC,MAAME,EAAqB,CAACH,EAAsCC,KACxEC,EAAaF,EAAW,cAAeC,EAAM,E,MCXjCG,UAA2BC,EAGvCC,YAAmBN,EAA8CO,EAAcC,GAC9EC,MAAMT,EAAWO,EAAMC,GAIhBE,KAAAC,qBAAuB,KAC9B,UAAWD,KAAKV,UAAUY,SAAW,UAAYF,KAAKV,UAAUY,OAAOC,OAAS,EAAG,CAClFH,KAAKV,UAAUc,MAAMC,eAAiBL,KAAKV,UAAUY,OAAOC,M,GAL7DH,KAAKV,UAAYA,C,CASXG,mBAAmBF,GACzBC,EAAaQ,KAAKV,UAAW,cAAeC,EAAO,CAClDe,MAAO,CACNC,WAAYP,KAAKC,uB,CAKbO,kBAAkBjB,GACxBkB,EAAYT,KAAKV,UAAW,aAAcC,EAAO,CAChDe,MAAO,CACNC,WAAYP,KAAKC,sBAElBS,IAAK,G,CAIAC,oBAAoBpB,GAC1BqB,EAAYZ,KAAKV,UAAW,eAAgBC,E,CAGtCsB,iBAAiBtB,GACvBC,EAAaQ,KAAKV,UAAW,YAAaC,E,CAGpCuB,eAAevB,GACrBwB,EACCf,KAAKV,UACL,WACCC,UAAiBA,IAAU,WAAaA,IAAU,QAAUA,IAAU,cAAgBA,IAAU,QAAUA,IAAU,aACrH,IAAIyB,IAAI,6CACRzB,E,CAIK0B,iBAAiB1B,GACvBC,EAAaQ,KAAKV,UAAW,YAAaC,E,CAGpC2B,aAAa3B,GACnBkB,EAAYT,KAAKV,UAAW,QAASC,E,CAG/B4B,cAAc5B,GACpBqB,EAAYZ,KAAKV,UAAW,SAAUC,EAAO,CAC5Ce,MAAO,CACNC,WAAYP,KAAKC,wBAGnBD,KAAKoB,uBAAuBpB,KAAKV,UAAUY,O,CAGrCmB,oBACNtB,MAAMsB,oBACNrB,KAAKP,mBAAmBO,KAAKV,UAAUgC,aACvCtB,KAAKQ,kBAAkBR,KAAKV,UAAUiC,YACtCvB,KAAKW,oBAAoBX,KAAKV,UAAUkC,cACxCxB,KAAKa,iBAAiBb,KAAKV,UAAUmC,WACrCzB,KAAKc,eAAed,KAAKV,UAAUoC,SACnC1B,KAAKiB,iBAAiBjB,KAAKV,UAAUqC,WACrC3B,KAAKkB,aAAalB,KAAKV,UAAUsC,OACjC5B,KAAKmB,cAAcnB,KAAKV,UAAUY,O,EChFpC,MAAM2B,EAAkB,w2DCexB,MAAMC,EAA0BC,IAC/BA,EAAGC,MAAMC,SAAW,SACpB,MAAMC,EAAcH,EAAGI,KACvB,MAAMC,EAAYL,EAAGM,aAAeH,EACpCH,EAAGI,KAAO,EACV,MAAMG,EAAWC,KAAKC,MAAMT,EAAGU,aAAeL,GAC9CL,EAAGI,KAAOD,EACV,OAAOI,CAAQ,E,MAUHI,EAAW,MAShBC,SACN,MAAMC,gBAAEA,GAAoBC,EAAgB7C,KAAKI,OACjD,OACC0C,EAACC,EAAI,CACJC,MAAO,CACN,YAAahD,KAAKI,MAAM6C,YAGzBH,EAAA,aACCE,MAAO,CACNE,SAAU,MAEXC,OAAQnD,KAAKI,MAAM+C,OACnBC,UAAWpD,KAAKI,MAAMgD,UACtBC,OAAQrD,KAAKI,MAAMiD,OACnBC,WAAYtD,KAAKI,MAAMkD,WACvBC,MAAOvD,KAAKI,MAAMmD,MAClBC,IAAKxD,KAAKI,MAAMoD,IAChB/B,UAAWzB,KAAKI,MAAMqB,UACtBE,UAAW3B,KAAKI,MAAMuB,UACtB8B,SAAUzD,KAAKI,MAAMqD,SACrBC,QAAS,SAAAC,EAAM,OAAAA,EAAA3D,KAAK4D,OAAG,MAAAD,SAAA,SAAAA,EAAEE,OAAO,GAEhCf,EAAA,QAAMgB,KAAK,SACVhB,EAAA,cAEDA,EAAA,OAAKgB,KAAK,SACThB,EAAA,WAAAiB,OAAAC,OAAA,CACCJ,IAAK5D,KAAKiE,SACVC,MAAM,GACNC,UAAWnE,KAAKI,MAAMgE,WAAU,mBACdxB,EAAgBzC,OAAS,EAAIyC,EAAgByB,KAAK,KAAOC,UAAS,kBACnE,GAAGtE,KAAKI,MAAMoD,YAC/Be,eAAe,MAEfC,YAAY,MACZC,SAAUzE,KAAKI,MAAMgD,UACrBsB,GAAI1E,KAAKI,MAAMoD,IACfmB,UAAW3E,KAAKI,MAAMmB,WACtB1B,KAAMG,KAAKI,MAAMwE,MACjBC,SAAU7E,KAAKI,MAAMqB,UACrBqD,SAAU9E,KAAKI,MAAMuB,UACrBQ,KAAMnC,KAAKI,MAAMwB,MACjBmD,YAAa/E,KAAKI,MAAMoB,aACxBwD,WAAW,SACPhF,KAAKiF,WAAWC,SAAQ,CAC5BC,QAASnF,KAAKoF,SACdpD,MAAO,CACNqD,OAAQrF,KAAKI,MAAMsB,SAEpBnC,MAAOS,KAAKI,MAAMF,UAMlBF,KAAKI,MAAMkB,aACXwB,EAAA,sBAAkB,OAAM,YAAW,UACjC9C,KAAKI,MAAMC,eACXL,KAAKI,MAAMmB,YACXuB,EAACwC,EAAQ,KACRxC,EAAA,qBAAkByC,EAAU,UAAWC,KAAK,OAAK,KAGhDxF,KAAKI,MAAMmB,YAEX,IACHuB,EAAA,YAAOyC,EAAU,sB,CAuHxB3F,YAAA6F,G,UA/LiBzF,KAAAiE,SAAYL,IAC5B5D,KAAK4D,IAAMA,EACX8B,EAAe1F,KAAKF,KAAME,KAAK4D,IAAI,EA+SnB5D,KAAAoF,SAAYO,IAC5B,GAAI3F,KAAK4D,eAAegC,oBAAqB,CAC5CC,EAAS7F,KAAM,iBAAkBA,KAAK4D,IAAIrE,MAAMY,QAChD,GAAIH,KAAKI,MAAM0F,cAAe,CAC7B9F,KAAK4B,MAAQE,EAAuB9B,KAAK4D,I,EAG3C,UAAW5D,KAAKiF,WAAWC,SAASE,WAAa,WAAY,CAC5DpF,KAAKiF,WAAWC,SAASE,SAASO,E,gDA9NsB,M,YAKQ,K,+GAyBlC,G,uJAmCK,W,qFAoB+B,M,iCAOpC,CAC/BG,cAAe,MACfzF,eAAgB,EAChB4C,UAAW,MACXO,IAAKuC,IACLrE,QAAS,YAIT1B,KAAKiF,WAAa,IAAIvF,EAAmBM,KAAM,WAAYA,KAAKF,K,CAI1DkG,kBAAkBzG,GACxBS,KAAKiF,WAAWe,kBAAkBzG,E,CAI5BF,qBAAqBE,GAC3BF,EAAqBW,KAAMT,E,CAIrB0G,cAAc1G,GACpBS,KAAKiF,WAAWgB,cAAc1G,E,CAIxB2G,iBAAiB3G,GACvBS,KAAKiF,WAAWiB,iBAAiB3G,E,CAI3B4G,cAAc5G,GACpBS,KAAKiF,WAAWkB,cAAc5G,E,CAIxBE,mBAAmBF,GACzBE,EAAmBO,KAAMT,E,CAInB6G,kBAAkB7G,GACxBS,KAAKiF,WAAWmB,kBAAkB7G,E,CAI5B8G,aAAa9G,GACnBS,KAAKiF,WAAWoB,aAAa9G,E,CAIvB+G,WAAW/G,GACjBS,KAAKiF,WAAWqB,WAAW/G,E,CAIrBiB,kBAAkBjB,GACxBS,KAAKiF,WAAWzE,kBAAkBjB,E,CAI5BgH,aAAahH,GACnBS,KAAKiF,WAAWsB,aAAahH,E,CAIvBiH,WAAWjH,GACjBS,KAAKiF,WAAWuB,WAAWjH,E,CAIrBoB,oBAAoBpB,GAC1BS,KAAKiF,WAAWtE,oBAAoBpB,E,CAI9BsB,iBAAiBtB,GACvBS,KAAKiF,WAAWpE,iBAAiBtB,E,CAI3BuB,eAAevB,GACrBS,KAAKiF,WAAWnE,eAAevB,E,CAIzB0B,iBAAiB1B,GACvBS,KAAKiF,WAAWhE,iBAAiB1B,E,CAI3B2B,aAAa3B,GACnBS,KAAKiF,WAAW/D,aAAa3B,E,CAIvBkH,iBAAiBlH,GACvBS,KAAKiF,WAAWwB,iBAAiBlH,E,CAI3BmH,gBAAgBnH,GACtBS,KAAKiF,WAAWyB,gBAAgBnH,E,CAI1B4B,cAAc5B,GACpBS,KAAKiF,WAAW9D,cAAc5B,E,CAGxB8B,oBACNrB,KAAKmD,OAASnD,KAAKmD,SAAW,KAC9BnD,KAAKyD,SAAWzD,KAAKyD,WAAa,KAClCzD,KAAKiF,WAAW5D,oBAChBrB,KAAKX,qBAAqBW,KAAK8F,eAE/B9F,KAAKI,MAAM6C,YAAcjD,KAAKI,MAAMF,OACpCF,KAAKiF,WAAW0B,wBAAwBC,GAAO5G,KAAKI,MAAM6C,YAAc2D,G"}
+{"version":3,"names":["validateAdjustHeight","component","value","watchBoolean","validateHasCounter","TextareaController","InputController","constructor","name","host","super","this","afterSyncCharCounter","_value","length","state","_currentLength","hooks","afterPatch","validateMaxLength","watchNumber","min","validatePlaceholder","watchString","validateReadOnly","validateResize","watchValidator","Set","validateRequired","validateRows","validateValue","setFormAssociatedValue","componentWillLoad","_hasCounter","_maxLength","_placeholder","_readOnly","_resize","_required","_rows","defaultStyleCss","increaseTextareaHeight","el","style","overflow","currentRows","rows","rowHeight","clientHeight","nextRows","Math","round","scrollHeight","KolTextarea","render","ariaDescribedBy","getRenderStates","h","Host","class","_hasValue","textarea","_alert","_disabled","_error","_hideLabel","_hint","_id","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoCorrect","disabled","id","maxlength","_name","readOnly","required","placeholder","spellcheck","controller","onFacade","onKeyUp","onChange","resize","Fragment","translate","role","hostRef","propagateFocus","event","HTMLTextAreaElement","setState","_adjustHeight","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateName","validateOn","validateTabIndex","validateTouched","addValueChangeListener","v"],"sources":["./src/types/props/adjust-height.ts","./src/types/props/has-counter.ts","./src/components/textarea/controller.ts","./src/components/textarea/style.css?tag=kol-textarea&mode=default&encapsulation=shadow","./src/components/textarea/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Passt die Höhe des Eingabefeldes automatisch an den Füllstand an.\n */\n/** en\n * Adjusts the height of the element to its content.\n */\nexport type PropAdjustHeight = {\n\tadjustHeight: boolean;\n};\n\n/* validator */\nexport const validateAdjustHeight = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_adjustHeight', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Zeigt die Zeichenanzahlanzeige am unteren Rand des EIngabefeldes.\n */\n/** en\n * Shows the the character count on the lower border of the input.\n */\nexport type PropHasCounter = {\n\thasCounter: boolean;\n};\n\n/* validator */\nexport const validateHasCounter = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_hasCounter', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputController } from '../@deprecated/input/controller';\nimport { CSSResize, Props, Watches } from './types';\n\nexport class TextareaController extends InputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprivate afterSyncCharCounter = () => {\n\t\tif (typeof this.component._value === 'string' && this.component._value.length > 0) {\n\t\t\tthis.component.state._currentLength = this.component._value.length;\n\t\t}\n\t};\n\n\tpublic validateHasCounter(value?: boolean): void {\n\t\twatchBoolean(this.component, '_hasCounter', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMaxLength(value?: number): void {\n\t\twatchNumber(this.component, '_maxLength', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t\tmin: 0,\n\t\t});\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic validateReadOnly(value?: boolean): void {\n\t\twatchBoolean(this.component, '_readOnly', value);\n\t}\n\n\tpublic validateResize(value?: CSSResize): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_resize',\n\t\t\t(value) => typeof value === 'string' && (value === 'both' || value === 'horizontal' || value === 'none' || value === 'vertical'),\n\t\t\tnew Set('String {both, horizontal, vertical, none}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: number): void {\n\t\twatchNumber(this.component, '_rows', value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n","import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { translate } from '../../i18n';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { validateAdjustHeight, validateHasCounter } from '../../types/props';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { TextareaController } from './controller';\nimport { ComponentApi, CSSResize, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * @slot default Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\tprivate ref?: HTMLTextAreaElement;\n\n\tprivate readonly catchRef = (ref?: HTMLTextAreaElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\ttextarea: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\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\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\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 * Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.\n\t */\n\t@Prop({ reflect: true }) public _hasCounter?: boolean;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\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 * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die maximale Zeichenanzahl.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob die Größe des Eingabefeldes von Nutzer:innen geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t */\n\t@Prop() public _resize?: CSSResize = 'vertical';\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt die Anzahl der anzuzeigenden Zeilen des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: number;\n\n\t/**\n\t * Gibt an, welchen Tab-Index 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@State() public state: States = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_id: nonce(), // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: boolean): void {\n\t\tvalidateAdjustHeight(this, value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tvalidateHasCounter(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: CSSResize): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.validateAdjustHeight(this._adjustHeight);\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.ref instanceof HTMLTextAreaElement) {\n\t\t\tsetState(this, '_currentLength', this.ref.value.length);\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ref);\n\t\t\t}\n\t\t}\n\t\tif (typeof this.controller.onFacade.onChange === 'function') {\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as e}from"./index-0e29e47a.js";import{b as s,w as a,s as o,e as n,a as h}from"./prop.validators-e15a584f.js";import{w as r}from"./validation-d4aeea71.js";import{f as l}from"./a11y.tipps-1cea9822.js";import{v as d}from"./show-f85eb6d8.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-f4596895.js";const p=(t,i)=>{s(t,"_hasCloser",i)},u=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}:host>div{background-color:#fff;height:0;left:0;position:fixed;top:0;width:100%;z-index:200}:host>div>kol-alert{display:block;margin:auto;max-width:750px}:host>div>kol-button-wc{display:block;margin:auto;position:relative;top:0;width:1em}",c=class{constructor(i){t(this,i),this.handleShowAndDuration=()=>{!0===this.state._show&&"number"==typeof this.state._showDuration&&this.state._showDuration>=0&&(clearTimeout(this.durationTimeout),this.durationTimeout=setTimeout((()=>{this.close()}),this.state._showDuration))},this.close=()=>{var t;this._show=!1,this.state=Object.assign(Object.assign({},this.state),{_show:!1}),void 0!==(null===(t=this._on)||void 0===t?void 0:t.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClose:this.close},this._alert=!0,this._hasCloser=!1,this._heading="",this._level=1,this._on=void 0,this._show=!0,this._showDuration=1e4,this._type="default",this.state={_alert:!0,_level:1,_show:!0}}validateAlert(t){s(this,"_alert",t)}validateHasCloser(t){p(this,t)}validateHeading(t){a(this,"_heading",t)}validateLevel(t){r(this,t)}validateOn(t){if("object"==typeof t&&null!==t){l("[KolToast] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const i={};"function"!=typeof t.onClose&&!0!==t.onClose||(i.onClose=t.onClose),o(this,"_on",i)}}validateShow(t){d(this,t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(t){n(this,"_showDuration",t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(t){h(this,"_type",(t=>"string"==typeof t&&("default"===t||"error"===t||"info"===t||"success"===t||"warning"===t)),new Set("String {success, info, warning, error}"),t)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateShow(this._show),this.validateShowDuration(this._showDuration),this.validateType(this._type)}render(){return i(e,null,this.state._show&&i("div",null,i("kol-alert",{_alert:this.state._alert,_heading:this.state._heading,_level:this.state._level,_hasCloser:this.state._hasCloser,_type:this.state._type,_variant:"card",_on:this.on},i("slot",null))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};c.style={default:u};export{c as kol_toast};
+import{r as t,h as i,H as e}from"./index-50adf9a0.js";import{b as s,w as a,s as o,e as n,a as h}from"./prop.validators-2c20cdf8.js";import{w as r}from"./validation-9c8695ca.js";import{f as l}from"./a11y.tipps-2e27f8e6.js";import{v as d}from"./show-5a4bfd71.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-f4596895.js";const p=(t,i)=>{s(t,"_hasCloser",i)},c=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}:host>div{background-color:#fff;height:0;left:0;position:fixed;top:0;width:100%;z-index:200}:host>div>kol-alert{display:block;margin:auto;max-width:750px}:host>div>kol-button-wc{display:block;margin:auto;position:relative;top:0;width:1em}",u=class{constructor(i){t(this,i),this.handleShowAndDuration=()=>{!0===this.state._show&&"number"==typeof this.state._showDuration&&this.state._showDuration>=0&&(clearTimeout(this.durationTimeout),this.durationTimeout=setTimeout((()=>{this.close()}),this.state._showDuration))},this.close=()=>{var t;this._show=!1,this.state=Object.assign(Object.assign({},this.state),{_show:!1}),void 0!==(null===(t=this._on)||void 0===t?void 0:t.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClose:this.close},this._alert=!0,this._hasCloser=!1,this._heading="",this._level=1,this._on=void 0,this._show=!0,this._showDuration=1e4,this._type="default",this.state={_alert:!0,_level:1,_show:!0}}validateAlert(t){s(this,"_alert",t)}validateHasCloser(t){p(this,t)}validateHeading(t){a(this,"_heading",t)}validateLevel(t){r(this,t)}validateOn(t){if("object"==typeof t&&null!==t){l("[KolToast] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const i={};"function"!=typeof t.onClose&&!0!==t.onClose||(i.onClose=t.onClose),o(this,"_on",i)}}validateShow(t){d(this,t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(t){n(this,"_showDuration",t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(t){h(this,"_type",(t=>"string"==typeof t&&("default"===t||"error"===t||"info"===t||"success"===t||"warning"===t)),new Set("String {success, info, warning, error}"),t)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateShow(this._show),this.validateShowDuration(this._showDuration),this.validateType(this._type)}render(){return i(e,null,this.state._show&&i("div",null,i("kol-alert",{_alert:this.state._alert,_heading:this.state._heading,_level:this.state._level,_hasCloser:this.state._hasCloser,_type:this.state._type,_variant:"card",_on:this.on},i("slot",null))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};u.style={default:c};export{u as kol_toast};

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

@@ -1 +1 @@
-{"version":3,"names":["validateHasCloser","component","value","watchBoolean","defaultStyleCss","KolToast","this","handleShowAndDuration","state","_show","_showDuration","clearTimeout","durationTimeout","setTimeout","close","Object","assign","_a","_on","onClose","undefined","Event","on","_alert","_level","validateAlert","validateHeading","watchString","validateLevel","watchHeadingLevel","validateOn","featureHint","callbacks","setState","validateShow","hooks","afterPatch","validateShowDuration","watchNumber","validateType","watchValidator","Set","componentWillLoad","_hasCloser","_heading","_type","render","h","Host","_variant"],"sources":["./src/types/props/has-closer.ts","./src/components/toast/style.css?tag=kol-toast&mode=default&encapsulation=shadow","./src/components/toast/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Markiert dieses Element als geöffnet, oder dass das verknüpfte Element (aria-controls/aria-owns) geöffnet ist.\n */\n/** en\n * Marks this element as open/expanded, or that the connected element (aria-controls/aria-owns) is open/expanded.\n */\nexport type PropHasCloser = {\n\thasCloser: boolean;\n};\n\n/* validator */\nexport const validateHasCloser = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_hasCloser', value);\n};\n","@import url(../style.css);\n@import url(../host-display-block.css);\n:host > div {\n\tbackground-color: #fff;\n\t/* needed for overlay situations */\n\theight: 0;\n\tleft: 0;\n\tposition: fixed;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 200;\n}\n:host > div > kol-alert {\n\tdisplay: block;\n\tmargin: auto;\n\tmax-width: 750px;\n}\n:host > div > kol-button-wc {\n\tdisplay: block;\n\tmargin: auto;\n\tposition: relative;\n\ttop: 0;\n\twidth: 1em;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { AlertType } from '../alert/types';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { setState, watchBoolean, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { KoliBriToastEventCallbacks } from '../../types/toast';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { PropHasCloser, PropShow, validateHasCloser, validateShow } from '../../types/props';\n\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\talert: boolean;\n\theading: string;\n\tlevel: HeadingLevel;\n\ton: KoliBriToastEventCallbacks;\n\tshowDuration: number;\n\ttype: AlertType;\n} & PropHasCloser &\n\tPropShow;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@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 * Aktiviert das Schließen-Icon.\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@State() public state: States = {\n\t\t_alert: true,\n\t\t_level: 1,\n\t\t_show: true,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: boolean): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriToastEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tfeatureHint('[KolToast] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');\n\t\t\tconst callbacks: KoliBriToastEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' || value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriToastEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tvalidateShow(this, value, { hooks: { afterPatch: this.handleShowAndDuration } });\n\t}\n\n\t@Watch('_showDuration')\n\tpublic validateShowDuration(value?: number): void {\n\t\twatchNumber(this, '_showDuration', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.handleShowAndDuration,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'),\n\t\t\tnew Set('String {success, info, warning, error}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateShow(this._show);\n\t\tthis.validateShowDuration(this._showDuration);\n\t\tthis.validateType(this._type);\n\t}\n\n\tprivate durationTimeout?: NodeJS.Timer;\n\n\tprivate readonly handleShowAndDuration = () => {\n\t\tif (this.state._show === true && typeof this.state._showDuration === 'number' && this.state._showDuration >= 0) {\n\t\t\tclearTimeout(this.durationTimeout as NodeJS.Timer);\n\t\t\tthis.durationTimeout = setTimeout(() => {\n\t\t\t\tthis.close();\n\t\t\t}, this.state._showDuration);\n\t\t}\n\t};\n\n\tprivate readonly close = () => {\n\t\tthis._show = false;\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_show: false,\n\t\t};\n\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClose: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<kol-alert\n\t\t\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t\t\t_heading={this.state._heading}\n\t\t\t\t\t\t\t_level={this.state._level}\n\t\t\t\t\t\t\t_hasCloser={this.state._hasCloser}\n\t\t\t\t\t\t\t_type={this.state._type}\n\t\t\t\t\t\t\t_variant=\"card\"\n\t\t\t\t\t\t\t// tabindex=\"0\"\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</kol-alert>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;6VAeO,MAAMA,EAAoB,CAACC,EAAsCC,KACvEC,EAAaF,EAAW,aAAcC,EAAM,EChB7C,MAAME,EAAkB,u6B,MCkCXC,EAAQ,M,yBAqHHC,KAAAC,sBAAwB,KACxC,GAAID,KAAKE,MAAMC,QAAU,aAAeH,KAAKE,MAAME,gBAAkB,UAAYJ,KAAKE,MAAME,eAAiB,EAAG,CAC/GC,aAAaL,KAAKM,iBAClBN,KAAKM,gBAAkBC,YAAW,KACjCP,KAAKQ,OAAO,GACVR,KAAKE,MAAME,c,GAICJ,KAAAQ,MAAQ,K,MACxBR,KAAKG,MAAQ,MACbH,KAAKE,MAAKO,OAAAC,OAAAD,OAAAC,OAAA,GACNV,KAAKE,OAAK,CACbC,MAAO,QAGR,KAAIQ,EAAAX,KAAKY,OAAG,MAAAD,SAAA,SAAAA,EAAEE,WAAYC,UAAW,CACpCd,KAAKY,IAAIC,QAAQ,IAAIE,MAAM,S,GAIZf,KAAAgB,GAAK,CACrBH,QAASb,KAAKQ,O,YAvIoC,K,gBAKI,M,cAKpB,G,YAKI,E,8BAU0B,K,mBAKzB,I,WAKL,U,WAEH,CAC/BS,OAAQ,KACRC,OAAQ,EACRf,MAAO,K,CAIDgB,cAAcvB,GACpBC,EAAaG,KAAM,SAAUJ,E,CAIvBF,kBAAkBE,GACxBF,EAAkBM,KAAMJ,E,CAIlBwB,gBAAgBxB,GACtByB,EAAYrB,KAAM,WAAYJ,E,CAIxB0B,cAAc1B,GACpB2B,EAAkBvB,KAAMJ,E,CAIlB4B,WAAW5B,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChD6B,EAAY,4EACZ,MAAMC,EAAwC,GAC9C,UAAW9B,EAAMiB,UAAY,YAAcjB,EAAMiB,UAAY,KAAM,CAClEa,EAAUb,QAAUjB,EAAMiB,O,CAE3Bc,EAAqC3B,KAAM,MAAO0B,E,EAK7CE,aAAahC,GACnBgC,EAAa5B,KAAMJ,EAAO,CAAEiC,MAAO,CAAEC,WAAY9B,KAAKC,wB,CAIhD8B,qBAAqBnC,GAC3BoC,EAAYhC,KAAM,gBAAiBJ,EAAO,CACzCiC,MAAO,CACNC,WAAY9B,KAAKC,wB,CAMbgC,aAAarC,GACnBsC,EACClC,KACA,SACCJ,UAAiBA,IAAU,WAAaA,IAAU,WAAaA,IAAU,SAAWA,IAAU,QAAUA,IAAU,WAAaA,IAAU,YAC1I,IAAIuC,IAAI,0CACRvC,E,CAIKwC,oBACNpC,KAAKmB,cAAcnB,KAAKiB,QACxBjB,KAAKN,kBAAkBM,KAAKqC,YAC5BrC,KAAKoB,gBAAgBpB,KAAKsC,UAC1BtC,KAAKsB,cAActB,KAAKkB,QACxBlB,KAAKwB,WAAWxB,KAAKY,KACrBZ,KAAK4B,aAAa5B,KAAKG,OACvBH,KAAK+B,qBAAqB/B,KAAKI,eAC/BJ,KAAKiC,aAAajC,KAAKuC,M,CA8BjBC,SACN,OACCC,EAACC,EAAI,KACH1C,KAAKE,MAAMC,OACXsC,EAAA,WACCA,EAAA,aACCxB,OAAQjB,KAAKE,MAAMe,OACnBqB,SAAUtC,KAAKE,MAAMoC,SACrBpB,OAAQlB,KAAKE,MAAMgB,OACnBmB,WAAYrC,KAAKE,MAAMmC,WACvBE,MAAOvC,KAAKE,MAAMqC,MAClBI,SAAS,OAET/B,IAAKZ,KAAKgB,IAEVyB,EAAA,e"}
+{"version":3,"names":["validateHasCloser","component","value","watchBoolean","defaultStyleCss","KolToast","this","handleShowAndDuration","state","_show","_showDuration","clearTimeout","durationTimeout","setTimeout","close","Object","assign","_a","_on","onClose","undefined","Event","on","_alert","_level","validateAlert","validateHeading","watchString","validateLevel","watchHeadingLevel","validateOn","featureHint","callbacks","setState","validateShow","hooks","afterPatch","validateShowDuration","watchNumber","validateType","watchValidator","Set","componentWillLoad","_hasCloser","_heading","_type","render","h","Host","_variant"],"sources":["./src/types/props/has-closer.ts","./src/components/toast/style.css?tag=kol-toast&mode=default&encapsulation=shadow","./src/components/toast/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Markiert dieses Element als geöffnet, oder dass das verknüpfte Element (aria-controls/aria-owns) geöffnet ist.\n */\n/** en\n * Marks this element as open/expanded, or that the connected element (aria-controls/aria-owns) is open/expanded.\n */\nexport type PropHasCloser = {\n\thasCloser: boolean;\n};\n\n/* validator */\nexport const validateHasCloser = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_hasCloser', value);\n};\n","@import url(../style.css);\n@import url(../host-display-block.css);\n:host > div {\n\tbackground-color: #fff;\n\t/* needed for overlay situations */\n\theight: 0;\n\tleft: 0;\n\tposition: fixed;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 200;\n}\n:host > div > kol-alert {\n\tdisplay: block;\n\tmargin: auto;\n\tmax-width: 750px;\n}\n:host > div > kol-button-wc {\n\tdisplay: block;\n\tmargin: auto;\n\tposition: relative;\n\ttop: 0;\n\twidth: 1em;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { AlertType } from '../alert/types';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { setState, watchBoolean, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { KoliBriToastEventCallbacks } from '../../types/toast';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { PropHasCloser, PropShow, validateHasCloser, validateShow } from '../../types/props';\n\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\talert: boolean;\n\theading: string;\n\tlevel: HeadingLevel;\n\ton: KoliBriToastEventCallbacks;\n\tshowDuration: number;\n\ttype: AlertType;\n} & PropHasCloser &\n\tPropShow;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @slot default Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-toast',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolToast implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung vorlesen soll.\n\t */\n\t@Prop({ reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Aktiviert das Schließen-Icon.\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@State() public state: States = {\n\t\t_alert: true,\n\t\t_level: 1,\n\t\t_show: true,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: boolean): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriToastEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tfeatureHint('[KolToast] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');\n\t\t\tconst callbacks: KoliBriToastEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' || value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriToastEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tvalidateShow(this, value, { hooks: { afterPatch: this.handleShowAndDuration } });\n\t}\n\n\t@Watch('_showDuration')\n\tpublic validateShowDuration(value?: number): void {\n\t\twatchNumber(this, '_showDuration', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.handleShowAndDuration,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'),\n\t\t\tnew Set('String {success, info, warning, error}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateShow(this._show);\n\t\tthis.validateShowDuration(this._showDuration);\n\t\tthis.validateType(this._type);\n\t}\n\n\tprivate durationTimeout?: NodeJS.Timer;\n\n\tprivate readonly handleShowAndDuration = () => {\n\t\tif (this.state._show === true && typeof this.state._showDuration === 'number' && this.state._showDuration >= 0) {\n\t\t\tclearTimeout(this.durationTimeout as NodeJS.Timer);\n\t\t\tthis.durationTimeout = setTimeout(() => {\n\t\t\t\tthis.close();\n\t\t\t}, this.state._showDuration);\n\t\t}\n\t};\n\n\tprivate readonly close = () => {\n\t\tthis._show = false;\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_show: false,\n\t\t};\n\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClose: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<kol-alert\n\t\t\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t\t\t_heading={this.state._heading}\n\t\t\t\t\t\t\t_level={this.state._level}\n\t\t\t\t\t\t\t_hasCloser={this.state._hasCloser}\n\t\t\t\t\t\t\t_type={this.state._type}\n\t\t\t\t\t\t\t_variant=\"card\"\n\t\t\t\t\t\t\t// tabindex=\"0\"\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</kol-alert>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;6VAeO,MAAMA,EAAoB,CAACC,EAAsCC,KACvEC,EAAaF,EAAW,aAAcC,EAAM,EChB7C,MAAME,EAAkB,u6B,MCqCXC,EAAQ,M,yBAqHHC,KAAAC,sBAAwB,KACxC,GAAID,KAAKE,MAAMC,QAAU,aAAeH,KAAKE,MAAME,gBAAkB,UAAYJ,KAAKE,MAAME,eAAiB,EAAG,CAC/GC,aAAaL,KAAKM,iBAClBN,KAAKM,gBAAkBC,YAAW,KACjCP,KAAKQ,OAAO,GACVR,KAAKE,MAAME,c,GAICJ,KAAAQ,MAAQ,K,MACxBR,KAAKG,MAAQ,MACbH,KAAKE,MAAKO,OAAAC,OAAAD,OAAAC,OAAA,GACNV,KAAKE,OAAK,CACbC,MAAO,QAGR,KAAIQ,EAAAX,KAAKY,OAAG,MAAAD,SAAA,SAAAA,EAAEE,WAAYC,UAAW,CACpCd,KAAKY,IAAIC,QAAQ,IAAIE,MAAM,S,GAIZf,KAAAgB,GAAK,CACrBH,QAASb,KAAKQ,O,YAvIoC,K,gBAKI,M,cAKpB,G,YAKI,E,8BAU0B,K,mBAKzB,I,WAKL,U,WAEH,CAC/BS,OAAQ,KACRC,OAAQ,EACRf,MAAO,K,CAIDgB,cAAcvB,GACpBC,EAAaG,KAAM,SAAUJ,E,CAIvBF,kBAAkBE,GACxBF,EAAkBM,KAAMJ,E,CAIlBwB,gBAAgBxB,GACtByB,EAAYrB,KAAM,WAAYJ,E,CAIxB0B,cAAc1B,GACpB2B,EAAkBvB,KAAMJ,E,CAIlB4B,WAAW5B,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChD6B,EAAY,4EACZ,MAAMC,EAAwC,GAC9C,UAAW9B,EAAMiB,UAAY,YAAcjB,EAAMiB,UAAY,KAAM,CAClEa,EAAUb,QAAUjB,EAAMiB,O,CAE3Bc,EAAqC3B,KAAM,MAAO0B,E,EAK7CE,aAAahC,GACnBgC,EAAa5B,KAAMJ,EAAO,CAAEiC,MAAO,CAAEC,WAAY9B,KAAKC,wB,CAIhD8B,qBAAqBnC,GAC3BoC,EAAYhC,KAAM,gBAAiBJ,EAAO,CACzCiC,MAAO,CACNC,WAAY9B,KAAKC,wB,CAMbgC,aAAarC,GACnBsC,EACClC,KACA,SACCJ,UAAiBA,IAAU,WAAaA,IAAU,WAAaA,IAAU,SAAWA,IAAU,QAAUA,IAAU,WAAaA,IAAU,YAC1I,IAAIuC,IAAI,0CACRvC,E,CAIKwC,oBACNpC,KAAKmB,cAAcnB,KAAKiB,QACxBjB,KAAKN,kBAAkBM,KAAKqC,YAC5BrC,KAAKoB,gBAAgBpB,KAAKsC,UAC1BtC,KAAKsB,cAActB,KAAKkB,QACxBlB,KAAKwB,WAAWxB,KAAKY,KACrBZ,KAAK4B,aAAa5B,KAAKG,OACvBH,KAAK+B,qBAAqB/B,KAAKI,eAC/BJ,KAAKiC,aAAajC,KAAKuC,M,CA8BjBC,SACN,OACCC,EAACC,EAAI,KACH1C,KAAKE,MAAMC,OACXsC,EAAA,WACCA,EAAA,aACCxB,OAAQjB,KAAKE,MAAMe,OACnBqB,SAAUtC,KAAKE,MAAMoC,SACrBpB,OAAQlB,KAAKE,MAAMgB,OACnBmB,WAAYrC,KAAKE,MAAMmC,WACvBE,MAAOvC,KAAKE,MAAMqC,MAClBI,SAAS,OAET/B,IAAKZ,KAAKgB,IAEVyB,EAAA,e"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as s}from"./index-0e29e47a.js";import{c as o,o as e,f as a,s as n,a as h}from"./floating-ui.dom.esm-735f9fad.js";import{w as l}from"./button-link-4a7e6a2e.js";import{g as r,n as p}from"./dev.utils-157f0499.js";import{w as d}from"./prop.validators-e15a584f.js";import{p as c}from"./reuse-3a02afb9.js";import"./a11y.tipps-1cea9822.js";import"./index-f4596895.js";const f=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-tooltip #floating{animation-duration:0.5s;animation-iteration-count:1;animation-name:fadeInOpacity;animation-timing-function:ease-in;box-sizing:border-box;display:none;position:absolute;visibility:hidden}kol-tooltip #arrow{height:10px;position:absolute;transform:rotate(45deg);width:10px;z-index:999}kol-tooltip .area{background-color:#fff;color:#000}kol-tooltip kol-span-wc{position:relative;z-index:1000}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",m=class{constructor(t){i(this,t),this.alignTooltip=t=>{var i;if("test"!==c&&this.previousSibling&&this.tooltipElement){const s=this.previousSibling,l=this.tooltipElement,r=this.arrowElement,p=[e(null!==(i=null==r?void 0:r.offsetHeight)&&void 0!==i?i:10),a(),n()];r&&p.push(h({element:r})),o(s,l,{placement:this.state._align,middleware:p}).then((({x:e,y:i,middlewareData:o,placement:s})=>{var n,a;const h=l.style.left,p=l.style.top;Object.assign(l.style,{left:`${e}px`,top:`${i}px`}),r&&((null===(n=o.arrow)||void 0===n?void 0:n.x)?Object.assign(r.style,{left:`${o.arrow.x}px`,top:"bottom"===s?-r.offsetHeight/2+"px":"",bottom:"top"===s?-r.offsetHeight/2+"px":""}):(null===(a=o.arrow)||void 0===a?void 0:a.y)&&Object.assign(r.style,{left:"right"===s?-r.offsetWidth/2+"px":"",right:"left"===s?-r.offsetWidth/2+"px":"",top:`${o.arrow.y}px`})),h!==l.style.left||p!==l.style.top?this.alignTooltip(t):"function"==typeof t&&t()}))}},this.showTooltip=()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("display","block"),r().body.addEventListener("keyup",this.hideTooltipByEscape),this.alignTooltip((()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("visibility","visible"),document.addEventListener("scroll",this.showTooltip))})))},this.hideTooltip=()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),document.removeEventListener("scroll",this.showTooltip))},this.hideTooltipByEscape=t=>{"Escape"===t.key&&(r().body.removeEventListener("keyup",this.hideTooltipByEscape),this.hideTooltip())},this.addListeners=t=>{t.addEventListener("mouseover",this.incrementOverFocusCount),t.addEventListener("focus",this.incrementOverFocusCount),t.addEventListener("mouseout",this.decrementOverFocusCount),t.addEventListener("blur",this.decrementOverFocusCount)},this.removeListeners=t=>{t.removeEventListener("mouseover",this.incrementOverFocusCount),t.removeEventListener("focus",this.incrementOverFocusCount),t.removeEventListener("mouseout",this.decrementOverFocusCount),t.removeEventListener("blur",this.decrementOverFocusCount)},this.resyncListeners=t=>{this.removeListeners(t),this.addListeners(t)},this.catchHostElement=t=>{t&&(this.previousSibling=t.previousElementSibling,this.previousSibling&&this.resyncListeners(this.previousSibling))},this.catchTooltipElement=t=>{this.tooltipElement=t,this.tooltipElement&&this.resyncListeners(this.tooltipElement)},this.catchArrowElement=t=>{this.arrowElement=t},this.overFocusCount=0,this.incrementOverFocusCount=()=>{this.overFocusCount++,this.showOrHideTooltip()},this.decrementOverFocusCount=()=>{this.overFocusCount--,this.showOrHideTooltip()},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{clearTimeout(this.overFocusTimeout),this.overFocusCount>0?this.showTooltip():this.hideTooltip()}),250)},this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_id:p(),_label:"…"}}render(){return t(s,{ref:this.catchHostElement},""!==this.state._label&&t("div",{id:"floating",ref:this.catchTooltipElement},t("div",{class:"area",id:"arrow",ref:this.catchArrowElement}),t("kol-span-wc",{class:"area",id:this.state._id,_label:this.state._label})))}validateAlign(t){l(this,"_align",t)}validateId(t){d(this,"_id",t)}validateLabel(t){d(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"]}}};m.style={default:f};export{m as kol_tooltip};
+import{r as i,h as t,H as s}from"./index-50adf9a0.js";import{c as o,o as e,f as a,s as n,a as h}from"./floating-ui.dom.esm-706cb72a.js";import{w as l}from"./button-link-abc9999d.js";import{g as r,n as d}from"./dev.utils-157f0499.js";import{w as p}from"./prop.validators-2c20cdf8.js";import{p as c}from"./reuse-3a02afb9.js";import"./a11y.tipps-2e27f8e6.js";import"./index-f4596895.js";const f=new Set;function m(t){f.forEach((t=>{t.style.setProperty("z-index","999")})),f.add(t),t.style.setProperty("z-index","1000")}function u(t){if(f.delete(t),f.size>0){const t=Array.from(f).pop();t&&t.style.setProperty("z-index","1000")}}const b=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-tooltip #floating{animation-duration:0.5s;animation-iteration-count:1;animation-name:fadeInOpacity;animation-timing-function:ease-in;box-sizing:border-box;display:none;position:absolute;visibility:hidden}kol-tooltip #arrow{height:10px;position:absolute;transform:rotate(45deg);width:10px;z-index:999}kol-tooltip .area{background-color:#fff;color:#000}kol-tooltip kol-span-wc{position:relative;z-index:1000}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",v=class{constructor(t){i(this,t),this.alignTooltip=t=>{var i;if("test"!==c&&this.previousSibling&&this.tooltipElement){const s=this.previousSibling,l=this.tooltipElement,r=this.arrowElement,p=[e(null!==(i=null==r?void 0:r.offsetHeight)&&void 0!==i?i:10),a(),n()];r&&p.push(h({element:r})),o(s,l,{placement:this.state._align,middleware:p}).then((({x:e,y:i,middlewareData:o,placement:s})=>{var n,a;const h=l.style.left,p=l.style.top;Object.assign(l.style,{left:`${e}px`,top:`${i}px`}),r&&((null===(n=o.arrow)||void 0===n?void 0:n.x)?Object.assign(r.style,{left:`${o.arrow.x}px`,top:"bottom"===s?-r.offsetHeight/2+"px":"",bottom:"top"===s?-r.offsetHeight/2+"px":""}):(null===(a=o.arrow)||void 0===a?void 0:a.y)&&Object.assign(r.style,{left:"right"===s?-r.offsetWidth/2+"px":"",right:"left"===s?-r.offsetWidth/2+"px":"",top:`${o.arrow.y}px`})),h!==l.style.left||p!==l.style.top?this.alignTooltip(t):"function"==typeof t&&t()}))}},this.showTooltip=()=>{this.tooltipElement&&(m(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),r().body.addEventListener("keyup",this.hideTooltipByEscape),this.alignTooltip((()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("visibility","visible"),document.addEventListener("scroll",this.showTooltip))})))},this.hideTooltip=()=>{this.tooltipElement&&(u(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),document.removeEventListener("scroll",this.showTooltip))},this.hideTooltipByEscape=t=>{"Escape"===t.key&&(r().body.removeEventListener("keyup",this.hideTooltipByEscape),this.hideTooltip())},this.addListeners=t=>{t.addEventListener("mouseover",this.incrementOverFocusCount),t.addEventListener("focus",this.incrementOverFocusCount),t.addEventListener("mouseout",this.decrementOverFocusCount),t.addEventListener("blur",this.decrementOverFocusCount)},this.removeListeners=t=>{t.removeEventListener("mouseover",this.incrementOverFocusCount),t.removeEventListener("focus",this.incrementOverFocusCount),t.removeEventListener("mouseout",this.decrementOverFocusCount),t.removeEventListener("blur",this.decrementOverFocusCount)},this.resyncListeners=t=>{this.removeListeners(t),this.addListeners(t)},this.catchHostElement=t=>{t&&(this.previousSibling=t.previousElementSibling,this.previousSibling&&this.resyncListeners(this.previousSibling))},this.catchTooltipElement=t=>{this.tooltipElement=t,this.tooltipElement&&this.resyncListeners(this.tooltipElement)},this.catchArrowElement=t=>{this.arrowElement=t},this.overFocusCount=0,this.incrementOverFocusCount=()=>{this.overFocusCount++,this.showOrHideTooltip()},this.decrementOverFocusCount=()=>{this.overFocusCount--,this.showOrHideTooltip()},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{clearTimeout(this.overFocusTimeout),this.overFocusCount>0?this.showTooltip():this.hideTooltip()}),250)},this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_id:d(),_label:"…"}}render(){return t(s,{ref:this.catchHostElement},""!==this.state._label&&t("div",{id:"floating",ref:this.catchTooltipElement},t("div",{class:"area",id:"arrow",ref:this.catchArrowElement}),t("kol-span-wc",{class:"area",id:this.state._id,_label:this.state._label})))}validateAlign(t){l(this,"_align",t)}validateId(t){p(this,"_id",t)}validateLabel(t){p(this,"_label",t)}componentWillLoad(){this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}disconnectedCallback(){this.previousSibling&&this.removeListeners(this.previousSibling),this.tooltipElement&&this.removeListeners(this.tooltipElement)}static get watchers(){return{_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};v.style=b;export{v as kol_tooltip};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolTooltip","this","alignTooltip","cb","processEnv","previousSibling","tooltipElement","target","tooltipEl","arrowEl","arrowElement","middleware","offset","_a","offsetHeight","flip","shift","push","arrow","element","computePosition","placement","state","_align","then","x","y","middlewareData","oldPos","left","style","top","Object","assign","bottom","_b","offsetWidth","right","showTooltip","setProperty","getDocument","body","addEventListener","hideTooltipByEscape","document","hideTooltip","removeEventListener","event","key","addListeners","el","incrementOverFocusCount","decrementOverFocusCount","removeListeners","resyncListeners","catchHostElement","previousElementSibling","catchTooltipElement","catchArrowElement","overFocusCount","showOrHideTooltip","clearTimeout","overFocusTimeout","setTimeout","_id","nonce","_label","render","h","Host","ref","id","class","validateAlign","value","watchTooltipAlignment","validateId","watchString","validateLabel","componentWillLoad","disconnectedCallback"],"sources":["./src/components/tooltip/style.css?tag=kol-tooltip&mode=default","./src/components/tooltip/component.tsx"],"sourcesContent":["@import url(../style.css);\nkol-tooltip #floating {\n\tanimation-duration: 0.5s;\n\tanimation-iteration-count: 1;\n\tanimation-name: fadeInOpacity;\n\tanimation-timing-function: ease-in;\n\tbox-sizing: border-box;\n\tdisplay: none;\n\tposition: absolute;\n\tvisibility: hidden;\n}\nkol-tooltip #arrow {\n\theight: 10px;\n\tposition: absolute;\n\ttransform: rotate(45deg);\n\twidth: 10px;\n\tz-index: 999;\n}\nkol-tooltip .area {\n\tbackground-color: #fff;\n\tcolor: #000;\n}\nkol-tooltip kol-span-wc {\n\tposition: relative;\n\tz-index: 1000;\n}\n@keyframes fadeInOpacity {\n\t0% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n","import { arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { Alignment } from '../../types/props';\nimport { getDocument, nonce } from '../../utils/dev.utils';\nimport { watchString } from '../../utils/prop.validators';\nimport { processEnv } from '../../utils/reuse';\n\ntype RequiredProps = {\n\tid: string;\n\tlabel: string;\n};\ntype OptionalProps = {\n\talign: Alignment;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & OptionalProps;\ntype OptionalStates = unknown;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-tooltip',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: false,\n})\nexport class KolTooltip implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate previousSibling?: HTMLElement | null;\n\tprivate tooltipElement?: HTMLDivElement;\n\tprivate arrowElement?: HTMLDivElement;\n\n\tprivate alignTooltip = (cb?: () => void): void => {\n\t\tif (processEnv !== 'test' && this.previousSibling /* SSR instanceof HTMLElement */ && this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst target = this.previousSibling;\n\t\t\tconst tooltipEl = this.tooltipElement;\n\t\t\tconst arrowEl = this.arrowElement;\n\n\t\t\tconst middleware = [offset(arrowEl?.offsetHeight ?? 10), flip(), shift()];\n\t\t\tif (arrowEl) {\n\t\t\t\tmiddleware.push(arrow({ element: arrowEl }));\n\t\t\t}\n\n\t\t\tvoid computePosition(target, tooltipEl, {\n\t\t\t\tplacement: this.state._align,\n\t\t\t\tmiddleware: middleware,\n\t\t\t}).then(({ x, y, middlewareData, placement }) => {\n\t\t\t\tconst oldPos = {\n\t\t\t\t\tleft: tooltipEl.style.left,\n\t\t\t\t\ttop: tooltipEl.style.top,\n\t\t\t\t};\n\t\t\t\tObject.assign(tooltipEl.style, {\n\t\t\t\t\tleft: `${x}px`,\n\t\t\t\t\ttop: `${y}px`,\n\t\t\t\t});\n\n\t\t\t\tif (arrowEl) {\n\t\t\t\t\tif (middlewareData.arrow?.x) {\n\t\t\t\t\t\tObject.assign(arrowEl.style, {\n\t\t\t\t\t\t\tleft: `${middlewareData.arrow.x}px`,\n\t\t\t\t\t\t\ttop: placement === 'bottom' ? `${-arrowEl.offsetHeight / 2}px` : '',\n\t\t\t\t\t\t\tbottom: placement === 'top' ? `${-arrowEl.offsetHeight / 2}px` : '',\n\t\t\t\t\t\t});\n\t\t\t\t\t} else if (middlewareData.arrow?.y) {\n\t\t\t\t\t\tObject.assign(arrowEl.style, {\n\t\t\t\t\t\t\tleft: placement === 'right' ? `${-arrowEl.offsetWidth / 2}px` : '',\n\t\t\t\t\t\t\tright: placement === 'left' ? `${-arrowEl.offsetWidth / 2}px` : '',\n\t\t\t\t\t\t\ttop: `${middlewareData.arrow.y}px`,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (oldPos.left !== tooltipEl.style.left || oldPos.top !== tooltipEl.style.top) {\n\t\t\t\t\tthis.alignTooltip(cb);\n\t\t\t\t} else if (typeof cb === 'function') {\n\t\t\t\t\tcb();\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate showTooltip = (): void => {\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.tooltipElement.style.setProperty('display', 'block');\n\t\t\tgetDocument().body.addEventListener('keyup', this.hideTooltipByEscape);\n\t\t\tthis.alignTooltip(() => {\n\t\t\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\t\t\tthis.tooltipElement.style.setProperty('visibility', 'visible');\n\t\t\t\t\tdocument.addEventListener('scroll', this.showTooltip);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate hideTooltip = (): void => {\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.tooltipElement.style.setProperty('display', 'none');\n\t\t\tthis.tooltipElement.style.setProperty('visibility', 'hidden');\n\t\t\tdocument.removeEventListener('scroll', this.showTooltip);\n\t\t}\n\t};\n\n\tprivate hideTooltipByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') {\n\t\t\tgetDocument().body.removeEventListener('keyup', this.hideTooltipByEscape);\n\t\t\tthis.hideTooltip();\n\t\t}\n\t};\n\n\tprivate addListeners = (el: Element): void => {\n\t\tel.addEventListener('mouseover', this.incrementOverFocusCount);\n\t\tel.addEventListener('focus', this.incrementOverFocusCount);\n\t\tel.addEventListener('mouseout', this.decrementOverFocusCount);\n\t\tel.addEventListener('blur', this.decrementOverFocusCount);\n\t};\n\n\tprivate removeListeners = (el: Element): void => {\n\t\tel.removeEventListener('mouseover', this.incrementOverFocusCount);\n\t\tel.removeEventListener('focus', this.incrementOverFocusCount);\n\t\tel.removeEventListener('mouseout', this.decrementOverFocusCount);\n\t\tel.removeEventListener('blur', this.decrementOverFocusCount);\n\t};\n\n\tprivate resyncListeners = (el: Element): void => {\n\t\tthis.removeListeners(el);\n\t\tthis.addListeners(el);\n\t};\n\n\tprivate catchHostElement = (el: HTMLElement | null): void => {\n\t\tif (el /* SSR instanceof HTMLElement */) {\n\t\t\tthis.previousSibling = el.previousElementSibling as HTMLElement | null;\n\t\t\tif (this.previousSibling /* SSR instanceof HTMLElement */) {\n\t\t\t\tthis.resyncListeners(this.previousSibling);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate catchTooltipElement = (el?: HTMLDivElement): void => {\n\t\tthis.tooltipElement = el;\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.resyncListeners(this.tooltipElement);\n\t\t}\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostElement}>\n\t\t\t\t{this.state._label !== '' && (\n\t\t\t\t\t<div id=\"floating\" ref={this.catchTooltipElement}>\n\t\t\t\t\t\t<div class=\"area\" id=\"arrow\" ref={this.catchArrowElement} />\n\t\t\t\t\t\t<kol-span-wc class=\"area\" id={this.state._id} _label={this.state._label}></kol-span-wc>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die Ausrichtung des Tooltips in Relation zum Elternelement.\n\t */\n\t@Prop() public _align?: Alignment = 'top';\n\n\t/**\n\t * Gibt die ID an, wenn z.B. Aria-Labelledby (Link) verwendet wird.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Setzt den Text in dem Tooltip beim Fokussieren oder Maus-drüberfahren angezeigt wird.\n\t */\n\t@Prop() public _label!: string;\n\n\t@State() public state: States = {\n\t\t_align: 'top',\n\t\t_id: nonce(),\n\t\t_label: '…', // ⚠ required\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: Alignment): void {\n\t\twatchTooltipAlignment(this, '_align', value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\twatchString(this, '_id', value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\twatchString(this, '_label', value);\n\t}\n\n\tprivate overFocusCount = 0;\n\tprivate overFocusTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate incrementOverFocusCount = (): void => {\n\t\tthis.overFocusCount++;\n\t\tthis.showOrHideTooltip();\n\t};\n\n\tprivate decrementOverFocusCount = (): void => {\n\t\tthis.overFocusCount--;\n\t\tthis.showOrHideTooltip();\n\t};\n\n\tprivate showOrHideTooltip = (): void => {\n\t\tclearTimeout(this.overFocusTimeout);\n\t\tthis.overFocusTimeout = setTimeout(() => {\n\t\t\tclearTimeout(this.overFocusTimeout);\n\t\t\tif (this.overFocusCount > 0) {\n\t\t\t\tthis.showTooltip();\n\t\t\t} else {\n\t\t\t\tthis.hideTooltip();\n\t\t\t}\n\t\t}, 250);\n\t};\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentDidLoad)\n\t */\n\tpublic disconnectedCallback(): void {\n\t\tif (this.previousSibling /* SSR instanceof HTMLElement */) {\n\t\t\tthis.removeListeners(this.previousSibling);\n\t\t}\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.removeListeners(this.tooltipElement);\n\t\t}\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["VISIBLE_OVERLAYS","Set","showOverlay","overlay","forEach","visibleOverlay","style","setProperty","add","hideOverlay","delete","size","last","Array","from","pop","styleCss","KolTooltip","this","alignTooltip","cb","processEnv","previousSibling","tooltipElement","target","tooltipEl","arrowEl","arrowElement","middleware","offset","_a","offsetHeight","flip","shift","push","arrow","element","computePosition","placement","state","_align","then","x","y","middlewareData","oldPos","left","top","Object","assign","bottom","_b","offsetWidth","right","showTooltip","getDocument","body","addEventListener","hideTooltipByEscape","document","hideTooltip","removeEventListener","event","key","addListeners","el","incrementOverFocusCount","decrementOverFocusCount","removeListeners","resyncListeners","catchHostElement","previousElementSibling","catchTooltipElement","catchArrowElement","overFocusCount","showOrHideTooltip","clearTimeout","overFocusTimeout","setTimeout","_id","nonce","_label","render","h","Host","ref","id","class","validateAlign","value","watchTooltipAlignment","validateId","watchString","validateLabel","componentWillLoad","disconnectedCallback"],"sources":["./src/utils/overlay.ts","./src/components/tooltip/style.css?tag=kol-tooltip","./src/components/tooltip/component.tsx"],"sourcesContent":["/**\n * This file contains the functions used to manage the visible overlays.\n */\n\n/**\n * This set contains all the visible overlays.\n */\nconst VISIBLE_OVERLAYS: Set<HTMLElement> = new Set();\n\n/**\n * This function is used to add an overlay to the visible overlay list.\n * All overlays in the list will have a z-index of 999, except the last\n * one, which will have a z-index of 1000.\n *\n * @param overlay Get the overlay element reference\n */\nexport function showOverlay(overlay: HTMLElement): void {\n\tVISIBLE_OVERLAYS.forEach((visibleOverlay) => {\n\t\tvisibleOverlay.style.setProperty('z-index', '999');\n\t});\n\tVISIBLE_OVERLAYS.add(overlay);\n\toverlay.style.setProperty('z-index', '1000');\n}\n\n/**\n * This function is used to remove an overlay from the visible overlay list.\n * All overlays in the list will have a z-index of 999, except the last\n * one, which will have a z-index of 1000.\n *\n * @param overlay Get the overlay element reference\n */\nexport function hideOverlay(overlay: HTMLElement): void {\n\tVISIBLE_OVERLAYS.delete(overlay);\n\tif (VISIBLE_OVERLAYS.size > 0) {\n\t\tconst last = Array.from(VISIBLE_OVERLAYS).pop();\n\t\tif (last) {\n\t\t\tlast.style.setProperty('z-index', '1000');\n\t\t}\n\t}\n}\n","@import url(../style.css);\nkol-tooltip #floating {\n\tanimation-duration: 0.5s;\n\tanimation-iteration-count: 1;\n\tanimation-name: fadeInOpacity;\n\tanimation-timing-function: ease-in;\n\tbox-sizing: border-box;\n\tdisplay: none;\n\tposition: absolute;\n\tvisibility: hidden;\n}\nkol-tooltip #arrow {\n\theight: 10px;\n\tposition: absolute;\n\ttransform: rotate(45deg);\n\twidth: 10px;\n\tz-index: 999;\n}\nkol-tooltip .area {\n\tbackground-color: #fff;\n\tcolor: #000;\n}\nkol-tooltip kol-span-wc {\n\tposition: relative;\n\tz-index: 1000;\n}\n@keyframes fadeInOpacity {\n\t0% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n","import { arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, Host, JSX, Prop, State, Watch, h } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { Alignment } from '../../types/props';\nimport { getDocument, nonce } from '../../utils/dev.utils';\nimport { hideOverlay, showOverlay } from '../../utils/overlay';\nimport { watchString } from '../../utils/prop.validators';\nimport { processEnv } from '../../utils/reuse';\n\ntype RequiredProps = {\n\tid: string;\n\tlabel: string;\n};\ntype OptionalProps = {\n\talign: Alignment;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & OptionalProps;\ntype OptionalStates = unknown;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-tooltip',\n\tstyleUrl: './style.css',\n\tshadow: false,\n})\nexport class KolTooltip implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate previousSibling?: HTMLElement | null;\n\tprivate tooltipElement?: HTMLDivElement;\n\tprivate arrowElement?: HTMLDivElement;\n\n\tprivate alignTooltip = (cb?: () => void): void => {\n\t\tif (processEnv !== 'test' && this.previousSibling /* SSR instanceof HTMLElement */ && this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst target = this.previousSibling;\n\t\t\tconst tooltipEl = this.tooltipElement;\n\t\t\tconst arrowEl = this.arrowElement;\n\n\t\t\tconst middleware = [offset(arrowEl?.offsetHeight ?? 10), flip(), shift()];\n\t\t\tif (arrowEl) {\n\t\t\t\tmiddleware.push(arrow({ element: arrowEl }));\n\t\t\t}\n\n\t\t\tvoid computePosition(target, tooltipEl, {\n\t\t\t\tplacement: this.state._align,\n\t\t\t\tmiddleware: middleware,\n\t\t\t}).then(({ x, y, middlewareData, placement }) => {\n\t\t\t\tconst oldPos = {\n\t\t\t\t\tleft: tooltipEl.style.left,\n\t\t\t\t\ttop: tooltipEl.style.top,\n\t\t\t\t};\n\t\t\t\tObject.assign(tooltipEl.style, {\n\t\t\t\t\tleft: `${x}px`,\n\t\t\t\t\ttop: `${y}px`,\n\t\t\t\t});\n\n\t\t\t\tif (arrowEl) {\n\t\t\t\t\tif (middlewareData.arrow?.x) {\n\t\t\t\t\t\tObject.assign(arrowEl.style, {\n\t\t\t\t\t\t\tleft: `${middlewareData.arrow.x}px`,\n\t\t\t\t\t\t\ttop: placement === 'bottom' ? `${-arrowEl.offsetHeight / 2}px` : '',\n\t\t\t\t\t\t\tbottom: placement === 'top' ? `${-arrowEl.offsetHeight / 2}px` : '',\n\t\t\t\t\t\t});\n\t\t\t\t\t} else if (middlewareData.arrow?.y) {\n\t\t\t\t\t\tObject.assign(arrowEl.style, {\n\t\t\t\t\t\t\tleft: placement === 'right' ? `${-arrowEl.offsetWidth / 2}px` : '',\n\t\t\t\t\t\t\tright: placement === 'left' ? `${-arrowEl.offsetWidth / 2}px` : '',\n\t\t\t\t\t\t\ttop: `${middlewareData.arrow.y}px`,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (oldPos.left !== tooltipEl.style.left || oldPos.top !== tooltipEl.style.top) {\n\t\t\t\t\tthis.alignTooltip(cb);\n\t\t\t\t} else if (typeof cb === 'function') {\n\t\t\t\t\tcb();\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate showTooltip = (): void => {\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tshowOverlay(this.tooltipElement);\n\t\t\tthis.tooltipElement.style.setProperty('display', 'block');\n\t\t\tgetDocument().body.addEventListener('keyup', this.hideTooltipByEscape);\n\t\t\tthis.alignTooltip(() => {\n\t\t\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\t\t\tthis.tooltipElement.style.setProperty('visibility', 'visible');\n\t\t\t\t\tdocument.addEventListener('scroll', this.showTooltip);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate hideTooltip = (): void => {\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\thideOverlay(this.tooltipElement);\n\t\t\tthis.tooltipElement.style.setProperty('display', 'none');\n\t\t\tthis.tooltipElement.style.setProperty('visibility', 'hidden');\n\t\t\tdocument.removeEventListener('scroll', this.showTooltip);\n\t\t}\n\t};\n\n\tprivate hideTooltipByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') {\n\t\t\tgetDocument().body.removeEventListener('keyup', this.hideTooltipByEscape);\n\t\t\tthis.hideTooltip();\n\t\t}\n\t};\n\n\tprivate addListeners = (el: Element): void => {\n\t\tel.addEventListener('mouseover', this.incrementOverFocusCount);\n\t\tel.addEventListener('focus', this.incrementOverFocusCount);\n\t\tel.addEventListener('mouseout', this.decrementOverFocusCount);\n\t\tel.addEventListener('blur', this.decrementOverFocusCount);\n\t};\n\n\tprivate removeListeners = (el: Element): void => {\n\t\tel.removeEventListener('mouseover', this.incrementOverFocusCount);\n\t\tel.removeEventListener('focus', this.incrementOverFocusCount);\n\t\tel.removeEventListener('mouseout', this.decrementOverFocusCount);\n\t\tel.removeEventListener('blur', this.decrementOverFocusCount);\n\t};\n\n\tprivate resyncListeners = (el: Element): void => {\n\t\tthis.removeListeners(el);\n\t\tthis.addListeners(el);\n\t};\n\n\tprivate catchHostElement = (el: HTMLElement | null): void => {\n\t\tif (el /* SSR instanceof HTMLElement */) {\n\t\t\tthis.previousSibling = el.previousElementSibling as HTMLElement | null;\n\t\t\tif (this.previousSibling /* SSR instanceof HTMLElement */) {\n\t\t\t\tthis.resyncListeners(this.previousSibling);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate catchTooltipElement = (el?: HTMLDivElement): void => {\n\t\tthis.tooltipElement = el;\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.resyncListeners(this.tooltipElement);\n\t\t}\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostElement}>\n\t\t\t\t{this.state._label !== '' && (\n\t\t\t\t\t<div id=\"floating\" ref={this.catchTooltipElement}>\n\t\t\t\t\t\t<div class=\"area\" id=\"arrow\" ref={this.catchArrowElement} />\n\t\t\t\t\t\t<kol-span-wc class=\"area\" id={this.state._id} _label={this.state._label}></kol-span-wc>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die Ausrichtung des Tooltips in Relation zum Elternelement.\n\t */\n\t@Prop() public _align?: Alignment = 'top';\n\n\t/**\n\t * Gibt die ID an, wenn z.B. Aria-Labelledby (Link) verwendet wird.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Setzt den Text in dem Tooltip beim Fokussieren oder Maus-drüberfahren angezeigt wird.\n\t */\n\t@Prop() public _label!: string;\n\n\t@State() public state: States = {\n\t\t_align: 'top',\n\t\t_id: nonce(),\n\t\t_label: '…', // ⚠ required\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: Alignment): void {\n\t\twatchTooltipAlignment(this, '_align', value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\twatchString(this, '_id', value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\twatchString(this, '_label', value);\n\t}\n\n\tprivate overFocusCount = 0;\n\tprivate overFocusTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate incrementOverFocusCount = (): void => {\n\t\tthis.overFocusCount++;\n\t\tthis.showOrHideTooltip();\n\t};\n\n\tprivate decrementOverFocusCount = (): void => {\n\t\tthis.overFocusCount--;\n\t\tthis.showOrHideTooltip();\n\t};\n\n\tprivate showOrHideTooltip = (): void => {\n\t\tclearTimeout(this.overFocusTimeout);\n\t\tthis.overFocusTimeout = setTimeout(() => {\n\t\t\tclearTimeout(this.overFocusTimeout);\n\t\t\tif (this.overFocusCount > 0) {\n\t\t\t\tthis.showTooltip();\n\t\t\t} else {\n\t\t\t\tthis.hideTooltip();\n\t\t\t}\n\t\t}, 250);\n\t};\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentDidLoad)\n\t */\n\tpublic disconnectedCallback(): void {\n\t\tif (this.previousSibling /* SSR instanceof HTMLElement */) {\n\t\t\tthis.removeListeners(this.previousSibling);\n\t\t}\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.removeListeners(this.tooltipElement);\n\t\t}\n\t}\n}\n"],"mappings":"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"}