@public-ui/components 1.5.0-rc.8 → 1.5.0

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

@@ -1 +1 @@
-{"file":"kol-textarea.entry.js","mappings":"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","names":[],"sources":["./src/components/textarea/controller.ts","./src/components/textarea/style.css?tag=kol-textarea&mode=default&encapsulation=shadow","./src/components/textarea/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputController } from '../@deprecated/input/controller';\nimport { CSSResize, Props, Watches } from './types';\n\nexport class TextareaController extends InputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprivate afterSyncCharCounter = () => {\n\t\tif (typeof this.component._value === 'string' && this.component._value.length > 0) {\n\t\t\tthis.component.state._currentLength = this.component._value.length;\n\t\t}\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateHasCounter(value?: boolean): void {\n\t\twatchBoolean(this.component, '_hasCounter', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateMaxLength(value?: number): void {\n\t\twatchNumber(this.component, '_maxLength', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t\tmin: 0,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateReadOnly(value?: boolean): void {\n\t\twatchBoolean(this.component, '_readOnly', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateResize(value?: CSSResize): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_resize',\n\t\t\t(value) => typeof value === 'string' && (value === 'both' || value === 'horizontal' || value === 'none' || value === 'vertical'),\n\t\t\tnew Set('String {both, horizontal, vertical, none}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateRows(value?: number): void {\n\t\twatchNumber(this.component, '_rows', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../input-line.css';\n","import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { translate } from '../../i18n';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { setState } from '../../utils/prop.validators';\nimport { propergateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { TextareaController } from './controller';\nimport { ComponentApi, CSSResize, States } from './types';\n\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\tprivate ref?: HTMLTextAreaElement;\n\n\tprivate readonly catchRef = (ref?: HTMLTextAreaElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDiscribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\tpart=\"textarea\"\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t// aria-hidden=\"true\" // Wieso ist das hier?\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\trows={this.state._rows}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonKeyUp={this.onChange}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tresize: this.state._resize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t></textarea>\n\t\t\t\t\t\t{/**\n\t\t\t\t\t\t * https://webstandardssherpa.com/reviews/improving-the-tweet-box/\n\t\t\t\t\t\t * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live\n\t\t\t\t\t\t */}\n\t\t\t\t\t\t{this.state._hasCounter && (\n\t\t\t\t\t\t\t<span aria-atomic=\"true\" aria-live=\"polite\">\n\t\t\t\t\t\t\t\t{this.state._currentLength}\n\t\t\t\t\t\t\t\t{this.state._maxLength && (\n\t\t\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t\t\t<span aria-label={translate('kol-of')} role=\"img\">\n\t\t\t\t\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t{this.state._maxLength}\n\t\t\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t\t<span>{translate('kol-characters')}</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Passt die Höhe des Eingabefeldes automatisch an den Füllstand an.\n\t */\n\t@Prop({ reflect: true }) public _adjustHeight?: boolean = false;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob am unteren Rand des Eingabefeldes die Anzahl der Zeichen angezeigt werden soll.\n\t */\n\t@Prop({ reflect: true }) public _hasCounter?: boolean;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt an, wie viele Zeichen man maximal eingeben kann.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld nur lesend ist.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob die Größe des Eingabefeldes geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t */\n\t@Prop() public _resize?: CSSResize = 'vertical';\n\n\t/**\n\t * Gibt an, ob das Eingabefeld ein Pflichtfeld ist.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt die Anzahl der anzuzeigenden Zeilen des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: number;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_id: '…', // ⚠ required\n\n\t\t_resize: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: boolean): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_resize')\n\tpublic validateResize(value?: CSSResize): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_rows')\n\tpublic validateRows(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.validateAdjustHeight(this._adjustHeight);\n\t}\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.ref instanceof HTMLTextAreaElement) {\n\t\t\tsetState(this, '_currentLength', this.ref.value.length);\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ref);\n\t\t\t}\n\t\t}\n\t\tif (typeof this.controller.onFacade.onChange === 'function') {\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n}\n"],"version":3}
+{"file":"kol-textarea.entry.js","mappings":"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","names":[],"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"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,H as Host}from"./index-50adf9a0.js";import{b as watchBoolean,w as watchString,s as setState,e as watchNumber,a as watchValidator}from"./prop.validators-1f3db013.js";import{w as watchHeadingLevel}from"./validation-b0614edd.js";import{f as featureHint}from"./a11y.tipps-5ca36877.js";import"./dev.utils-bedce29d.js";import"./reuse-56bb5a4b.js";import"./index-81bd9b41.js";const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),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'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}: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,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}:host>div{background-color:white;height:0;left:0;position:fixed;top:0;width:100%;z-index:200}:host>div>kol-alert{display:block;margin:auto;max-width:750px}:host>div>kol-button-wc{display:block;margin:auto;position:relative;top:0;width:1em}",KolToast=class{constructor(t){registerInstance(this,t),this.handleShowAndDuration=()=>{!0===this.state._show&&"number"==typeof this.state._showDuration&&this.state._showDuration>=0&&(clearTimeout(this.durationTimeout),this.durationTimeout=setTimeout((()=>{clearTimeout(this.durationTimeout),this.close()}),this.state._showDuration))},this.close=()=>{var t;this._show=!1,this.state=Object.assign(Object.assign({},this.state),{_show:!1}),void 0!==(null===(t=this._on)||void 0===t?void 0:t.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClose:this.close},this._alert=!0,this._hasCloser=!1,this._heading="",this._level=1,this._on=void 0,this._show=!0,this._showDuration=1e4,this._type="default",this.state={_alert:!0,_level:1,_show:!0}}validateAlert(t){watchBoolean(this,"_alert",t)}validateHasCloser(t){watchBoolean(this,"_hasCloser",t)}validateHeading(t){watchString(this,"_heading",t)}validateLevel(t){watchHeadingLevel(this,t)}validateOn(t){if("object"==typeof t&&null!==t){featureHint("[KolToast] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onClose&&!0!==t.onClose||(e.onClose=t.onClose),setState(this,"_on",e)}}validateShow(t){watchBoolean(this,"_show",t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(t){watchNumber(this,"_showDuration",t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(t){watchValidator(this,"_type",(t=>"string"==typeof t&&("default"===t||"error"===t||"info"===t||"success"===t||"warning"===t)),new Set("String {success, info, warning, error}"),t)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.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 h(Host,null,this.state._show&&h("div",null,h("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},h("slot",null))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};KolToast.style={default:defaultStyleCss};export{KolToast as kol_toast};
+import{r as registerInstance,h,H as Host}from"./index-0e29e47a.js";import{b as watchBoolean,w as watchString,s as setState,e as watchNumber,a as watchValidator}from"./prop.validators-e15a584f.js";import{w as watchHeadingLevel}from"./validation-d4aeea71.js";import{f as featureHint}from"./a11y.tipps-1cea9822.js";import{v as validateShow}from"./show-f85eb6d8.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-f4596895.js";const validateHasCloser=(t,e)=>{watchBoolean(t,"_hasCloser",e)},defaultStyleCss=":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}",KolToast=class{constructor(t){registerInstance(this,t),this.handleShowAndDuration=()=>{!0===this.state._show&&"number"==typeof this.state._showDuration&&this.state._showDuration>=0&&(clearTimeout(this.durationTimeout),this.durationTimeout=setTimeout((()=>{this.close()}),this.state._showDuration))},this.close=()=>{var t;this._show=!1,this.state=Object.assign(Object.assign({},this.state),{_show:!1}),void 0!==(null===(t=this._on)||void 0===t?void 0:t.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClose:this.close},this._alert=!0,this._hasCloser=!1,this._heading="",this._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){watchBoolean(this,"_alert",t)}validateHasCloser(t){validateHasCloser(this,t)}validateHeading(t){watchString(this,"_heading",t)}validateLevel(t){watchHeadingLevel(this,t)}validateOn(t){if("object"==typeof t&&null!==t){featureHint("[KolToast] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onClose&&!0!==t.onClose||(e.onClose=t.onClose),setState(this,"_on",e)}}validateShow(t){validateShow(this,t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(t){watchNumber(this,"_showDuration",t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(t){watchValidator(this,"_type",(t=>"string"==typeof t&&("default"===t||"error"===t||"info"===t||"success"===t||"warning"===t)),new Set("String {success, info, warning, error}"),t)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.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 h(Host,null,this.state._show&&h("div",null,h("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},h("slot",null))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};KolToast.style={default:defaultStyleCss};export{KolToast as kol_toast};

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

@@ -1 +1 @@
-{"file":"kol-toast.entry.js","mappings":";;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,2rCAA2rC;;MCqCtsC,QAAQ;;;IAuJH,0BAAqB,GAAG;MACxC,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,EAAE;QAC/G,YAAY,CAAC,IAAI,CAAC,eAA+B,CAAC,CAAC;QACnD,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC;UACjC,YAAY,CAAC,IAAI,CAAC,eAA+B,CAAC,CAAC;UACnD,IAAI,CAAC,KAAK,EAAE,CAAC;SACb,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;OAC7B;KACD,CAAC;IAEe,UAAK,GAAG;;MACxB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;MACnB,IAAI,CAAC,KAAK,mCACN,IAAI,CAAC,KAAK,KACb,KAAK,EAAE,KAAK,GACZ,CAAC;MAEF,IAAI,CAAA,MAAA,IAAI,CAAC,GAAG,0CAAE,OAAO,MAAK,SAAS,EAAE;QACpC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;OACrC;KACD,CAAC;IAEe,OAAE,GAAG;MACrB,OAAO,EAAE,IAAI,CAAC,KAAK;KACnB,CAAC;kBA3KiD,IAAI;sBAKA,KAAK;oBAKzB,EAAE;kBAKE,CAAC;;iBAUyB,IAAI;yBAK7B,KAAK;iBAKV,SAAS;iBAKZ;MAC/B,MAAM,EAAE,IAAI;MACZ,MAAM,EAAE,CAAC;MACT,KAAK,EAAE,IAAI;KACX;;EAMM,aAAa,CAAC,KAAe;IACnC,YAAY,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;GACpC;EAMM,iBAAiB,CAAC,KAAe;IACvC,YAAY,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;GACxC;EAMM,eAAe,CAAC,KAAc;IACpC,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;GACrC;EAMM,aAAa,CAAC,KAAoB;IACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAMM,UAAU,CAAC,KAAkC;IACnD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE;MAChD,WAAW,CAAC,0EAA0E,CAAC,CAAC;MACxF,MAAM,SAAS,GAA+B,EAAE,CAAC;MACjD,IAAI,OAAO,KAAK,CAAC,OAAO,KAAK,UAAU,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,EAAE;QAClE,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;OAClC;MACD,QAAQ,CAA6B,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC;KAC7D;GACD;EAMM,YAAY,CAAC,KAAe;IAClC,YAAY,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;MAClC,KAAK,EAAE;QACN,UAAU,EAAE,IAAI,CAAC,qBAAqB;OACtC;KACD,CAAC,CAAC;GACH;EAMM,oBAAoB,CAAC,KAAc;IACzC,WAAW,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE;MACzC,KAAK,EAAE;QACN,UAAU,EAAE,IAAI,CAAC,qBAAqB;OACtC;KACD,CAAC,CAAC;GACH;EAMM,YAAY,CAAC,KAAiB;IACpC,cAAc,CACb,IAAI,EACJ,OAAO,EACP,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,KAAK,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,CAAC,EACpJ,IAAI,GAAG,CAAC,wCAAwC,CAAC,EACjD,KAAK,CACL,CAAC;GACF;EAKM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC9C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC9B;EA8BM,MAAM;IACZ,QACC,EAAC,IAAI,QACH,IAAI,CAAC,KAAK,CAAC,KAAK,KAChB,eACC,iBACC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAC,MAAM,EAEf,GAAG,EAAE,IAAI,CAAC,EAAE,IAEZ,eAAQ,CACG,CACP,CACN,CACK,EACN;GACF;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/toast/style.css?tag=kol-toast&mode=default&encapsulation=shadow","./src/components/toast/component.tsx"],"sourcesContent":["@import '../style.css';\n@import '../host-display-block.css';\n\n:host > div {\n\tbackground-color: white; /* 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\n:host > div > kol-alert {\n\tdisplay: block;\n\tmargin: auto;\n\tmax-width: 750px;\n}\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 '../../types/alert';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { setState, watchBoolean, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { KoliBriToastEventCallbacks } from '../../types/toast';\nimport { featureHint } from '../../utils/a11y.tipps';\n\n/**\n * API\n */\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\talert: boolean;\n\thasCloser: boolean;\n\theading: string;\n\tlevel: HeadingLevel;\n\ton: KoliBriToastEventCallbacks;\n\tshow: boolean;\n\tshowDuration: number;\n\ttype: AlertType;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-toast',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolToast implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung vorlesen soll.\n\t */\n\t@Prop({ reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob der Toast ein Schließen-Icon hat.\n\t */\n\t@Prop({ reflect: true }) public _hasCloser?: boolean = false;\n\n\t/**\n\t * Gibt den Titel der Meldung an.\n\t */\n\t@Prop() public _heading?: string = '';\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Toasts an.\n\t */\n\t@Prop() public _on?: KoliBriToastEventCallbacks;\n\n\t/**\n\t * Gibt an, ob der Toast eingeblendet wird.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = true;\n\n\t/**\n\t * Gibt an, wie viele Millisekunden der Toast eingeblendet werden soll.\n\t */\n\t@Prop() public _showDuration?: number = 10000;\n\n\t/**\n\t * Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt.\n\t */\n\t@Prop() public _type?: AlertType = 'default';\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_alert: true,\n\t\t_level: 1,\n\t\t_show: true,\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: boolean): void {\n\t\twatchBoolean(this, '_hasCloser', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriToastEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tfeatureHint('[KolToast] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');\n\t\t\tconst callbacks: KoliBriToastEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' || value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriToastEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\twatchBoolean(this, '_show', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.handleShowAndDuration,\n\t\t\t},\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_showDuration')\n\tpublic validateShowDuration(value?: number): void {\n\t\twatchNumber(this, '_showDuration', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.handleShowAndDuration,\n\t\t\t},\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'),\n\t\t\tnew Set('String {success, info, warning, error}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateShow(this._show);\n\t\tthis.validateShowDuration(this._showDuration);\n\t\tthis.validateType(this._type);\n\t}\n\n\tprivate durationTimeout?: NodeJS.Timer;\n\n\tprivate readonly handleShowAndDuration = () => {\n\t\tif (this.state._show === true && typeof this.state._showDuration === 'number' && this.state._showDuration >= 0) {\n\t\t\tclearTimeout(this.durationTimeout as NodeJS.Timer);\n\t\t\tthis.durationTimeout = setTimeout(() => {\n\t\t\t\tclearTimeout(this.durationTimeout as NodeJS.Timer);\n\t\t\t\tthis.close();\n\t\t\t}, this.state._showDuration);\n\t\t}\n\t};\n\n\tprivate readonly close = () => {\n\t\tthis._show = false;\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_show: false,\n\t\t};\n\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClose: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<kol-alert\n\t\t\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t\t\t_heading={this.state._heading}\n\t\t\t\t\t\t\t_level={this.state._level}\n\t\t\t\t\t\t\t_hasCloser={this.state._hasCloser}\n\t\t\t\t\t\t\t_type={this.state._type}\n\t\t\t\t\t\t\t_variant=\"card\"\n\t\t\t\t\t\t\t// tabindex=\"0\"\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</kol-alert>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-toast.entry.js","mappings":"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","names":[],"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"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,H as Host}from"./index-50adf9a0.js";import{w as watchTooltipAlignment}from"./button-link-249585bf.js";import{g as getDocument,n as nonce}from"./dev.utils-bedce29d.js";import{w as watchString}from"./prop.validators-1f3db013.js";import{p as processEnv}from"./reuse-56bb5a4b.js";import"./a11y.tipps-5ca36877.js";import"./index-81bd9b41.js";function getAlignment(t){return t.split("-")[1]}function getLengthFromAxis(t){return"y"===t?"height":"width"}function getSide(t){return t.split("-")[0]}function getMainAxisFromPlacement(t){return["top","bottom"].includes(getSide(t))?"x":"y"}function computeCoordsFromPlacement(t,e,n){let{reference:i,floating:o}=t;const l=i.x+i.width/2-o.width/2,s=i.y+i.height/2-o.height/2,r=getMainAxisFromPlacement(e),a=getLengthFromAxis(r),c=i[a]/2-o[a]/2,d="x"===r;let m;switch(getSide(e)){case"top":m={x:l,y:i.y-o.height};break;case"bottom":m={x:l,y:i.y+i.height};break;case"right":m={x:i.x+i.width,y:s};break;case"left":m={x:i.x-o.width,y:s};break;default:m={x:i.x,y:i.y}}switch(getAlignment(e)){case"start":m[r]-=c*(n&&d?-1:1);break;case"end":m[r]+=c*(n&&d?-1:1)}return m}const computePosition$1=async(t,e,n)=>{const{placement:i="bottom",strategy:o="absolute",middleware:l=[],platform:s}=n,r=l.filter(Boolean),a=await(null==s.isRTL?void 0:s.isRTL(e));let c=await s.getElementRects({reference:t,floating:e,strategy:o}),{x:d,y:m}=computeCoordsFromPlacement(c,i,a),u=i,g={},p=0;for(let n=0;n<r.length;n++){const{name:l,fn:f}=r[n],{x:h,y:y,data:v,reset:w}=await f({x:d,y:m,initialPlacement:i,placement:u,strategy:o,middlewareData:g,rects:c,platform:s,elements:{reference:t,floating:e}});d=null!=h?h:d,m=null!=y?y:m,g={...g,[l]:{...g[l],...v}},w&&p<=50&&(p++,"object"==typeof w&&(w.placement&&(u=w.placement),w.rects&&(c=!0===w.rects?await s.getElementRects({reference:t,floating:e,strategy:o}):w.rects),({x:d,y:m}=computeCoordsFromPlacement(c,u,a))),n=-1)}return{x:d,y:m,placement:u,strategy:o,middlewareData:g}};function expandPaddingObject(t){return{top:0,right:0,bottom:0,left:0,...t}}function getSideObjectFromPadding(t){return"number"!=typeof t?expandPaddingObject(t):{top:t,right:t,bottom:t,left:t}}function rectToClientRect(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function detectOverflow(t,e){var n;void 0===e&&(e={});const{x:i,y:o,platform:l,rects:s,elements:r,strategy:a}=t,{boundary:c="clippingAncestors",rootBoundary:d="viewport",elementContext:m="floating",altBoundary:u=!1,padding:g=0}=e,p=getSideObjectFromPadding(g),f=r[u?"floating"===m?"reference":"floating":m],h=rectToClientRect(await l.getClippingRect({element:null==(n=await(null==l.isElement?void 0:l.isElement(f)))||n?f:f.contextElement||await(null==l.getDocumentElement?void 0:l.getDocumentElement(r.floating)),boundary:c,rootBoundary:d,strategy:a})),y="floating"===m?{...s.floating,x:i,y:o}:s.reference,v=await(null==l.getOffsetParent?void 0:l.getOffsetParent(r.floating)),w=await(null==l.isElement?void 0:l.isElement(v))&&await(null==l.getScale?void 0:l.getScale(v))||{x:1,y:1},x=rectToClientRect(l.convertOffsetParentRelativeRectToViewportRelativeRect?await l.convertOffsetParentRelativeRectToViewportRelativeRect({rect:y,offsetParent:v,strategy:a}):y);return{top:(h.top-x.top+p.top)/w.y,bottom:(x.bottom-h.bottom+p.bottom)/w.y,left:(h.left-x.left+p.left)/w.x,right:(x.right-h.right+p.right)/w.x}}const min$1=Math.min,max$1=Math.max;function within(t,e,n){return max$1(t,min$1(e,n))}const arrow=t=>({name:"arrow",options:t,async fn(e){const{element:n,padding:i=0}=t||{},{x:o,y:l,placement:s,rects:r,platform:a,elements:c}=e;if(null==n)return{};const d=getSideObjectFromPadding(i),m={x:o,y:l},u=getMainAxisFromPlacement(s),g=getLengthFromAxis(u),p=await a.getDimensions(n),f="y"===u,h=f?"top":"left",y=f?"bottom":"right",v=f?"clientHeight":"clientWidth",w=r.reference[g]+r.reference[u]-m[u]-r.floating[g],x=m[u]-r.reference[u],b=await(null==a.getOffsetParent?void 0:a.getOffsetParent(n));let E=b?b[v]:0;E&&await(null==a.isElement?void 0:a.isElement(b))||(E=c.floating[v]||r.floating[g]);const C=w/2-x/2,T=d[h],A=E-p[g]-d[y],S=E/2-p[g]/2+C,L=within(T,S,A),R=null!=getAlignment(s)&&S!=L&&r.reference[g]/2-(S<T?d[h]:d[y])-p[g]/2<0;return{[u]:m[u]-(R?S<T?T-S:A-S:0),data:{[u]:L,centerOffset:S-L}}}}),oppositeSideMap={left:"right",right:"left",bottom:"top",top:"bottom"};function getOppositePlacement(t){return t.replace(/left|right|bottom|top/g,(t=>oppositeSideMap[t]))}function getAlignmentSides(t,e,n){void 0===n&&(n=!1);const i=getAlignment(t),o=getMainAxisFromPlacement(t),l=getLengthFromAxis(o);let s="x"===o?i===(n?"end":"start")?"right":"left":"start"===i?"bottom":"top";return e.reference[l]>e.floating[l]&&(s=getOppositePlacement(s)),{main:s,cross:getOppositePlacement(s)}}const oppositeAlignmentMap={start:"end",end:"start"};function getOppositeAlignmentPlacement(t){return t.replace(/start|end/g,(t=>oppositeAlignmentMap[t]))}function getExpandedPlacements(t){const e=getOppositePlacement(t);return[getOppositeAlignmentPlacement(t),e,getOppositeAlignmentPlacement(e)]}function getSideList(t,e,n){const i=["left","right"],o=["right","left"],l=["top","bottom"],s=["bottom","top"];switch(t){case"top":case"bottom":return n?e?o:i:e?i:o;case"left":case"right":return e?l:s;default:return[]}}function getOppositeAxisPlacements(t,e,n,i){const o=getAlignment(t);let l=getSideList(getSide(t),"start"===n,i);return o&&(l=l.map((t=>t+"-"+o)),e&&(l=l.concat(l.map(getOppositeAlignmentPlacement)))),l}const flip=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n;const{placement:i,middlewareData:o,rects:l,initialPlacement:s,platform:r,elements:a}=e,{mainAxis:c=!0,crossAxis:d=!0,fallbackPlacements:m,fallbackStrategy:u="bestFit",fallbackAxisSideDirection:g="none",flipAlignment:p=!0,...f}=t,h=getSide(i),y=getSide(s)===s,v=await(null==r.isRTL?void 0:r.isRTL(a.floating)),w=m||(y||!p?[getOppositePlacement(s)]:getExpandedPlacements(s));m||"none"===g||w.push(...getOppositeAxisPlacements(s,p,g,v));const x=[s,...w],b=await detectOverflow(e,f),E=[];let C=(null==(n=o.flip)?void 0:n.overflows)||[];if(c&&E.push(b[h]),d){const{main:t,cross:e}=getAlignmentSides(i,l,v);E.push(b[t],b[e])}if(C=[...C,{placement:i,overflows:E}],!E.every((t=>t<=0))){var T,A;const t=((null==(T=o.flip)?void 0:T.index)||0)+1,e=x[t];if(e)return{data:{index:t,overflows:C},reset:{placement:e}};let n=null==(A=C.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:A.placement;if(!n)switch(u){case"bestFit":{var S;const t=null==(S=C.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:S[0];t&&(n=t);break}case"initialPlacement":n=s}if(i!==n)return{reset:{placement:n}}}return{}}}};async function convertValueToCoords(t,e){const{placement:n,platform:i,elements:o}=t,l=await(null==i.isRTL?void 0:i.isRTL(o.floating)),s=getSide(n),r=getAlignment(n),a="x"===getMainAxisFromPlacement(n),c=["left","top"].includes(s)?-1:1,d=l&&a?-1:1,m="function"==typeof e?e(t):e;let{mainAxis:u,crossAxis:g,alignmentAxis:p}="number"==typeof m?{mainAxis:m,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...m};return r&&"number"==typeof p&&(g="end"===r?-1*p:p),a?{x:g*d,y:u*c}:{x:u*c,y:g*d}}const offset=function(t){return void 0===t&&(t=0),{name:"offset",options:t,async fn(e){const{x:n,y:i}=e,o=await convertValueToCoords(e,t);return{x:n+o.x,y:i+o.y,data:o}}}};function getCrossAxis(t){return"x"===t?"y":"x"}const shift=function(t){return void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:n,y:i,placement:o}=e,{mainAxis:l=!0,crossAxis:s=!1,limiter:r={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...a}=t,c={x:n,y:i},d=await detectOverflow(e,a),m=getMainAxisFromPlacement(getSide(o)),u=getCrossAxis(m);let g=c[m],p=c[u];if(l){const t="y"===m?"bottom":"right";g=within(g+d["y"===m?"top":"left"],g,g-d[t])}if(s){const t="y"===u?"bottom":"right";p=within(p+d["y"===u?"top":"left"],p,p-d[t])}const f=r.fn({...e,[m]:g,[u]:p});return{...f,data:{x:f.x-n,y:f.y-i}}}}};function getWindow(t){var e;return(null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function getComputedStyle$1(t){return getWindow(t).getComputedStyle(t)}function isNode(t){return t instanceof getWindow(t).Node}function getNodeName(t){return isNode(t)?(t.nodeName||"").toLowerCase():""}let uaString;function getUAString(){if(uaString)return uaString;const t=navigator.userAgentData;return t&&Array.isArray(t.brands)?(uaString=t.brands.map((t=>t.brand+"/"+t.version)).join(" "),uaString):navigator.userAgent}function isHTMLElement(t){return t instanceof getWindow(t).HTMLElement}function isElement(t){return t instanceof getWindow(t).Element}function isShadowRoot(t){if("undefined"==typeof ShadowRoot)return!1;return t instanceof getWindow(t).ShadowRoot||t instanceof ShadowRoot}function isOverflowElement(t){const{overflow:e,overflowX:n,overflowY:i,display:o}=getComputedStyle$1(t);return/auto|scroll|overlay|hidden|clip/.test(e+i+n)&&!["inline","contents"].includes(o)}function isTableElement(t){return["table","td","th"].includes(getNodeName(t))}function isContainingBlock(t){const e=/firefox/i.test(getUAString()),n=getComputedStyle$1(t),i=n.backdropFilter||n.WebkitBackdropFilter;return"none"!==n.transform||"none"!==n.perspective||!!i&&"none"!==i||e&&"filter"===n.willChange||e&&!!n.filter&&"none"!==n.filter||["transform","perspective"].some((t=>n.willChange.includes(t)))||["paint","layout","strict","content"].some((t=>{const e=n.contain;return null!=e&&e.includes(t)}))}function isClientRectVisualViewportBased(){return/^((?!chrome|android).)*safari/i.test(getUAString())}function isLastTraversableNode(t){return["html","body","#document"].includes(getNodeName(t))}const min=Math.min,max=Math.max,round=Math.round;function getCssDimensions(t){const e=getComputedStyle$1(t);let n=parseFloat(e.width),i=parseFloat(e.height);const o=isHTMLElement(t),l=o?t.offsetWidth:n,s=o?t.offsetHeight:i,r=round(n)!==l||round(i)!==s;return r&&(n=l,i=s),{width:n,height:i,fallback:r}}function unwrapElement(t){return isElement(t)?t:t.contextElement}const FALLBACK_SCALE={x:1,y:1};function getScale(t){const e=unwrapElement(t);if(!isHTMLElement(e))return FALLBACK_SCALE;const n=e.getBoundingClientRect(),{width:i,height:o,fallback:l}=getCssDimensions(e);let s=(l?round(n.width):n.width)/i,r=(l?round(n.height):n.height)/o;return s&&Number.isFinite(s)||(s=1),r&&Number.isFinite(r)||(r=1),{x:s,y:r}}function getBoundingClientRect(t,e,n,i){var o,l;void 0===e&&(e=!1),void 0===n&&(n=!1);const s=t.getBoundingClientRect(),r=unwrapElement(t);let a=FALLBACK_SCALE;e&&(i?isElement(i)&&(a=getScale(i)):a=getScale(t));const c=r?getWindow(r):window,d=isClientRectVisualViewportBased()&&n;let m=(s.left+(d&&(null==(o=c.visualViewport)?void 0:o.offsetLeft)||0))/a.x,u=(s.top+(d&&(null==(l=c.visualViewport)?void 0:l.offsetTop)||0))/a.y,g=s.width/a.x,p=s.height/a.y;if(r){const t=getWindow(r),e=i&&isElement(i)?getWindow(i):i;let n=t.frameElement;for(;n&&i&&e!==t;){const t=getScale(n),e=n.getBoundingClientRect(),i=getComputedStyle(n);e.x+=(n.clientLeft+parseFloat(i.paddingLeft))*t.x,e.y+=(n.clientTop+parseFloat(i.paddingTop))*t.y,m*=t.x,u*=t.y,g*=t.x,p*=t.y,m+=e.x,u+=e.y,n=getWindow(n).frameElement}}return rectToClientRect({width:g,height:p,x:m,y:u})}function getDocumentElement(t){return((isNode(t)?t.ownerDocument:t.document)||window.document).documentElement}function getNodeScroll(t){return isElement(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function convertOffsetParentRelativeRectToViewportRelativeRect(t){let{rect:e,offsetParent:n,strategy:i}=t;const o=isHTMLElement(n),l=getDocumentElement(n);if(n===l)return e;let s={scrollLeft:0,scrollTop:0},r={x:1,y:1};const a={x:0,y:0};if((o||!o&&"fixed"!==i)&&(("body"!==getNodeName(n)||isOverflowElement(l))&&(s=getNodeScroll(n)),isHTMLElement(n))){const t=getBoundingClientRect(n);r=getScale(n),a.x=t.x+n.clientLeft,a.y=t.y+n.clientTop}return{width:e.width*r.x,height:e.height*r.y,x:e.x*r.x-s.scrollLeft*r.x+a.x,y:e.y*r.y-s.scrollTop*r.y+a.y}}function getWindowScrollBarX(t){return getBoundingClientRect(getDocumentElement(t)).left+getNodeScroll(t).scrollLeft}function getDocumentRect(t){const e=getDocumentElement(t),n=getNodeScroll(t),i=t.ownerDocument.body,o=max(e.scrollWidth,e.clientWidth,i.scrollWidth,i.clientWidth),l=max(e.scrollHeight,e.clientHeight,i.scrollHeight,i.clientHeight);let s=-n.scrollLeft+getWindowScrollBarX(t);const r=-n.scrollTop;return"rtl"===getComputedStyle$1(i).direction&&(s+=max(e.clientWidth,i.clientWidth)-o),{width:o,height:l,x:s,y:r}}function getParentNode(t){if("html"===getNodeName(t))return t;const e=t.assignedSlot||t.parentNode||isShadowRoot(t)&&t.host||getDocumentElement(t);return isShadowRoot(e)?e.host:e}function getNearestOverflowAncestor(t){const e=getParentNode(t);return isLastTraversableNode(e)?e.ownerDocument.body:isHTMLElement(e)&&isOverflowElement(e)?e:getNearestOverflowAncestor(e)}function getOverflowAncestors(t,e){var n;void 0===e&&(e=[]);const i=getNearestOverflowAncestor(t),o=i===(null==(n=t.ownerDocument)?void 0:n.body),l=getWindow(i);return o?e.concat(l,l.visualViewport||[],isOverflowElement(i)?i:[]):e.concat(i,getOverflowAncestors(i))}function getViewportRect(t,e){const n=getWindow(t),i=getDocumentElement(t),o=n.visualViewport;let l=i.clientWidth,s=i.clientHeight,r=0,a=0;if(o){l=o.width,s=o.height;const t=isClientRectVisualViewportBased();(!t||t&&"fixed"===e)&&(r=o.offsetLeft,a=o.offsetTop)}return{width:l,height:s,x:r,y:a}}function getInnerBoundingClientRect(t,e){const n=getBoundingClientRect(t,!0,"fixed"===e),i=n.top+t.clientTop,o=n.left+t.clientLeft,l=isHTMLElement(t)?getScale(t):{x:1,y:1};return{width:t.clientWidth*l.x,height:t.clientHeight*l.y,x:o*l.x,y:i*l.y}}function getClientRectFromClippingAncestor(t,e,n){let i;if("viewport"===e)i=getViewportRect(t,n);else if("document"===e)i=getDocumentRect(getDocumentElement(t));else if(isElement(e))i=getInnerBoundingClientRect(e,n);else{const n={...e};if(isClientRectVisualViewportBased()){var o,l;const e=getWindow(t);n.x-=(null==(o=e.visualViewport)?void 0:o.offsetLeft)||0,n.y-=(null==(l=e.visualViewport)?void 0:l.offsetTop)||0}i=n}return rectToClientRect(i)}function getClippingElementAncestors(t,e){const n=e.get(t);if(n)return n;let i=getOverflowAncestors(t).filter((t=>isElement(t)&&"body"!==getNodeName(t))),o=null;const l="fixed"===getComputedStyle$1(t).position;let s=l?getParentNode(t):t;for(;isElement(s)&&!isLastTraversableNode(s);){const t=getComputedStyle$1(s),e=isContainingBlock(s);if("fixed"===t.position)o=null;else{(l?!e&&!o:!e&&"static"===t.position&&!!o&&["absolute","fixed"].includes(o.position))?i=i.filter((t=>t!==s)):o=t}s=getParentNode(s)}return e.set(t,i),i}function getClippingRect(t){let{element:e,boundary:n,rootBoundary:i,strategy:o}=t;const l=[..."clippingAncestors"===n?getClippingElementAncestors(e,this._c):[].concat(n),i],s=l[0],r=l.reduce(((t,n)=>{const i=getClientRectFromClippingAncestor(e,n,o);return t.top=max(i.top,t.top),t.right=min(i.right,t.right),t.bottom=min(i.bottom,t.bottom),t.left=max(i.left,t.left),t}),getClientRectFromClippingAncestor(e,s,o));return{width:r.right-r.left,height:r.bottom-r.top,x:r.left,y:r.top}}function getDimensions(t){return getCssDimensions(t)}function getTrueOffsetParent(t,e){return isHTMLElement(t)&&"fixed"!==getComputedStyle$1(t).position?e?e(t):t.offsetParent:null}function getContainingBlock(t){let e=getParentNode(t);for(;isHTMLElement(e)&&!isLastTraversableNode(e);){if(isContainingBlock(e))return e;e=getParentNode(e)}return null}function getOffsetParent(t,e){const n=getWindow(t);if(!isHTMLElement(t))return n;let i=getTrueOffsetParent(t,e);for(;i&&isTableElement(i)&&"static"===getComputedStyle$1(i).position;)i=getTrueOffsetParent(i,e);return i&&("html"===getNodeName(i)||"body"===getNodeName(i)&&"static"===getComputedStyle$1(i).position&&!isContainingBlock(i))?n:i||getContainingBlock(t)||n}function getRectRelativeToOffsetParent(t,e,n){const i=isHTMLElement(e),o=getDocumentElement(e),l=getBoundingClientRect(t,!0,"fixed"===n,e);let s={scrollLeft:0,scrollTop:0};const r={x:0,y:0};if(i||!i&&"fixed"!==n)if(("body"!==getNodeName(e)||isOverflowElement(o))&&(s=getNodeScroll(e)),isHTMLElement(e)){const t=getBoundingClientRect(e,!0);r.x=t.x+e.clientLeft,r.y=t.y+e.clientTop}else o&&(r.x=getWindowScrollBarX(o));return{x:l.left+s.scrollLeft-r.x,y:l.top+s.scrollTop-r.y,width:l.width,height:l.height}}const platform={getClippingRect:getClippingRect,convertOffsetParentRelativeRectToViewportRelativeRect:convertOffsetParentRelativeRectToViewportRelativeRect,isElement:isElement,getDimensions:getDimensions,getOffsetParent:getOffsetParent,getDocumentElement:getDocumentElement,getScale:getScale,async getElementRects(t){let{reference:e,floating:n,strategy:i}=t;const o=this.getOffsetParent||getOffsetParent,l=this.getDimensions;return{reference:getRectRelativeToOffsetParent(e,await o(n),i),floating:{x:0,y:0,...await l(n)}}},getClientRects:t=>Array.from(t.getClientRects()),isRTL:t=>"rtl"===getComputedStyle$1(t).direction},computePosition=(t,e,n)=>{const i=new Map,o={platform:platform,...n},l={...o.platform,_c:i};return computePosition$1(t,e,{...o,platform:l})},defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),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'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}: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,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-tooltip #floating{animation-name:fadeInOpacity;animation-iteration-count:1;animation-timing-function:ease-in;animation-duration:0.5s;box-sizing:border-box;display:none;position:absolute;visibility:hidden}kol-tooltip #arrow{background:#333;height:10px;position:absolute;transform:rotate(45deg);width:10px;z-index:999}kol-tooltip kol-badge{position:relative;z-index:1000}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",KolTooltip=class{constructor(t){registerInstance(this,t),this.alignTooltip=t=>{var e,n,i;if("test"!==processEnv&&this.previousSibling){const o=this.previousSibling;if(this.tooltipElement){const l=this.tooltipElement,s=this.arrowElement,r=[(i=null!==(e=null==s?void 0:s.offsetHeight)&&void 0!==e?e:10,void 0===i&&(i=0),{name:"offset",options:i,async fn(t){const{x:e,y:n}=t,o=await convertValueToCoords(t,i);return{x:e+o.x,y:n+o.y,data:o}}}),(void 0===n&&(n={}),{name:"flip",options:n,async fn(t){var e;const{placement:i,middlewareData:o,rects:l,initialPlacement:s,platform:r,elements:a}=t,{mainAxis:c=!0,crossAxis:d=!0,fallbackPlacements:m,fallbackStrategy:u="bestFit",fallbackAxisSideDirection:g="none",flipAlignment:p=!0,...f}=n,h=getSide(i),y=getSide(s)===s,v=await(null==r.isRTL?void 0:r.isRTL(a.floating)),w=m||(y||!p?[getOppositePlacement(s)]:getExpandedPlacements(s));m||"none"===g||w.push(...getOppositeAxisPlacements(s,p,g,v));const x=[s,...w],b=await detectOverflow(t,f),E=[];let C=(null==(e=o.flip)?void 0:e.overflows)||[];if(c&&E.push(b[h]),d){const{main:t,cross:e}=getAlignmentSides(i,l,v);E.push(b[t],b[e])}if(C=[...C,{placement:i,overflows:E}],!E.every((t=>t<=0))){var T,A;const t=((null==(T=o.flip)?void 0:T.index)||0)+1,e=x[t];if(e)return{data:{index:t,overflows:C},reset:{placement:e}};let n=null==(A=C.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:A.placement;if(!n)switch(u){case"bestFit":{var S;const t=null==(S=C.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:S[0];t&&(n=t);break}case"initialPlacement":n=s}if(i!==n)return{reset:{placement:n}}}return{}}}),shift()];s&&r.push(arrow({element:s})),computePosition(o,l,{placement:this.state._align,middleware:r}).then((({x:e,y:n,middlewareData:i,placement:o})=>{var r,a;const c=l.style.left,d=l.style.top;Object.assign(l.style,{left:`${e}px`,top:`${n}px`}),s&&((null===(r=i.arrow)||void 0===r?void 0:r.x)?Object.assign(s.style,{left:`${i.arrow.x}px`,top:"bottom"===o?-s.offsetHeight/2+"px":"",bottom:"top"===o?-s.offsetHeight/2+"px":""}):(null===(a=i.arrow)||void 0===a?void 0:a.y)&&Object.assign(s.style,{left:"right"===o?-s.offsetWidth/2+"px":"",right:"left"===o?-s.offsetWidth/2+"px":"",top:`${i.arrow.y}px`})),c!==l.style.left||d!==l.style.top?this.alignTooltip(t):"function"==typeof t&&t()}))}}},this.showTooltip=()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("display","block"),getDocument().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&&(getDocument().body.removeEventListener("keyup",this.hideTooltipByEscape),this.hideTooltip())},this.addListeners=t=>{t.addEventListener("mouseover",this.incrementOverFocusCount),t.addEventListener("focus",this.incrementOverFocusCount),t.addEventListener("mouseout",this.decrementOverFocusCount),t.addEventListener("blur",this.decrementOverFocusCount)},this.removeListeners=t=>{t.removeEventListener("mouseover",this.incrementOverFocusCount),t.removeEventListener("focus",this.incrementOverFocusCount),t.removeEventListener("mouseout",this.decrementOverFocusCount),t.removeEventListener("blur",this.decrementOverFocusCount)},this.resyncListeners=t=>{this.removeListeners(t),this.addListeners(t)},this.catchHostElement=t=>{t&&(this.previousSibling=t.previousElementSibling,this.previousSibling&&this.resyncListeners(this.previousSibling))},this.catchTooltipElement=t=>{this.tooltipElement=t,this.tooltipElement&&this.resyncListeners(this.tooltipElement)},this.catchArrowElement=t=>{this.arrowElement=t},this.overFocusCount=0,this.incrementOverFocusCount=()=>{this.overFocusCount++,this.showOrHideTooltip()},this.decrementOverFocusCount=()=>{this.overFocusCount--,this.showOrHideTooltip()},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{clearTimeout(this.overFocusTimeout),this.overFocusCount>0?this.showTooltip():this.hideTooltip()}),250)},this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_id:nonce(),_label:"…"}}render(){return h(Host,{ref:this.catchHostElement},""!==this.state._label&&h("div",{id:"floating",ref:this.catchTooltipElement},h("div",{id:"arrow",ref:this.catchArrowElement}),h("kol-badge",{id:this.state._id,_color:{backgroundColor:"#333",color:"#ddd"},_label:this.state._label})))}validateAlign(t){watchTooltipAlignment(this,"_align",t)}validateId(t){watchString(this,"_id",t)}validateLabel(t){watchString(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"]}}};KolTooltip.style={default:defaultStyleCss};export{KolTooltip as kol_tooltip};
+import{r as registerInstance,h,H as Host}from"./index-0e29e47a.js";import{c as computePosition,o as offset,f as flip,s as shift,a as arrow}from"./floating-ui.dom.esm-735f9fad.js";import{w as watchTooltipAlignment}from"./button-link-4a7e6a2e.js";import{g as getDocument,n as nonce}from"./dev.utils-157f0499.js";import{w as watchString}from"./prop.validators-e15a584f.js";import{p as processEnv}from"./reuse-3a02afb9.js";import"./a11y.tipps-1cea9822.js";import"./index-f4596895.js";const defaultStyleCss=":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}}",KolTooltip=class{constructor(t){registerInstance(this,t),this.alignTooltip=t=>{var e;if("test"!==processEnv&&this.previousSibling&&this.tooltipElement){const i=this.previousSibling,o=this.tooltipElement,s=this.arrowElement,n=[offset(null!==(e=null==s?void 0:s.offsetHeight)&&void 0!==e?e:10),flip(),shift()];s&&n.push(arrow({element:s})),computePosition(i,o,{placement:this.state._align,middleware:n}).then((({x:e,y:i,middlewareData:n,placement:l})=>{var r,a;const h=o.style.left,p=o.style.top;Object.assign(o.style,{left:`${e}px`,top:`${i}px`}),s&&((null===(r=n.arrow)||void 0===r?void 0:r.x)?Object.assign(s.style,{left:`${n.arrow.x}px`,top:"bottom"===l?-s.offsetHeight/2+"px":"",bottom:"top"===l?-s.offsetHeight/2+"px":""}):(null===(a=n.arrow)||void 0===a?void 0:a.y)&&Object.assign(s.style,{left:"right"===l?-s.offsetWidth/2+"px":"",right:"left"===l?-s.offsetWidth/2+"px":"",top:`${n.arrow.y}px`})),h!==o.style.left||p!==o.style.top?this.alignTooltip(t):"function"==typeof t&&t()}))}},this.showTooltip=()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("display","block"),getDocument().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&&(getDocument().body.removeEventListener("keyup",this.hideTooltipByEscape),this.hideTooltip())},this.addListeners=t=>{t.addEventListener("mouseover",this.incrementOverFocusCount),t.addEventListener("focus",this.incrementOverFocusCount),t.addEventListener("mouseout",this.decrementOverFocusCount),t.addEventListener("blur",this.decrementOverFocusCount)},this.removeListeners=t=>{t.removeEventListener("mouseover",this.incrementOverFocusCount),t.removeEventListener("focus",this.incrementOverFocusCount),t.removeEventListener("mouseout",this.decrementOverFocusCount),t.removeEventListener("blur",this.decrementOverFocusCount)},this.resyncListeners=t=>{this.removeListeners(t),this.addListeners(t)},this.catchHostElement=t=>{t&&(this.previousSibling=t.previousElementSibling,this.previousSibling&&this.resyncListeners(this.previousSibling))},this.catchTooltipElement=t=>{this.tooltipElement=t,this.tooltipElement&&this.resyncListeners(this.tooltipElement)},this.catchArrowElement=t=>{this.arrowElement=t},this.overFocusCount=0,this.incrementOverFocusCount=()=>{this.overFocusCount++,this.showOrHideTooltip()},this.decrementOverFocusCount=()=>{this.overFocusCount--,this.showOrHideTooltip()},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{clearTimeout(this.overFocusTimeout),this.overFocusCount>0?this.showTooltip():this.hideTooltip()}),250)},this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_id:nonce(),_label:"…"}}render(){return h(Host,{ref:this.catchHostElement},""!==this.state._label&&h("div",{id:"floating",ref:this.catchTooltipElement},h("div",{class:"area",id:"arrow",ref:this.catchArrowElement}),h("kol-span-wc",{class:"area",id:this.state._id,_label:this.state._label})))}validateAlign(t){watchTooltipAlignment(this,"_align",t)}validateId(t){watchString(this,"_id",t)}validateLabel(t){watchString(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"]}}};KolTooltip.style={default:defaultStyleCss};export{KolTooltip as kol_tooltip};