@public-ui/components 4.0.0-alpha.0 → 4.0.0-alpha.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"kol-textarea.entry.esm.js","sources":["src/schema/props/resize-textarea.ts","src/functional-components/inputs/TextArea/TextArea.tsx","src/functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper.tsx","src/components/textarea/controller.ts","src/components/textarea/style.scss?tag=kol-textarea&mode=default&encapsulation=shadow","src/components/textarea/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../utils';\n\nexport const textareaResizeOptions = ['vertical', 'none'] as const;\nexport type TextareaResizePropType = (typeof textareaResizeOptions)[number];\n\n/**\n * Defines how the textarea can be resized by the user.\n */\nexport type PropResizeTextarea = {\n\tresize: TextareaResizePropType;\n};\n\nconst isTextareaResizePropType = (value: unknown): value is TextareaResizePropType => {\n\treturn typeof value === 'string' && textareaResizeOptions.includes(value as TextareaResizePropType);\n};\n\nexport const validateResizeTextarea = (component: Generic.Element.Component, value?: TextareaResizePropType): void => {\n\twatchValidator(component, '_resize', isTextareaResizePropType, new Set(textareaResizeOptions), value, {\n\t\tdefaultValue: 'vertical',\n\t});\n};\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\nimport { getDefaultProps } from '../_helpers/getDefaultProps';\nimport type { DefaultInputProps } from '../_types';\nimport { checkHasMsg, type MsgPropType, type Stringified } from '../../../schema';\n\nexport type TextAreaProps = DefaultInputProps<JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>> & {\n\tvalue: string;\n\ttouched?: boolean;\n\tmsg?: Stringified<MsgPropType>;\n} & {\n\t[key: `aria-${string}`]: unknown;\n\t[key: `data-${string}`]: unknown;\n};\n\nconst TextAreaFc: FC<TextAreaProps> = (props) => {\n\tconst { class: classNames, msg, touched, readonly, disabled, required, ariaDescribedBy, hideLabel, label, ...other } = props;\n\n\tconst showMsg = checkHasMsg(msg, touched);\n\tconst msgType = typeof msg === 'string' ? 'error' : msg?._type;\n\n\tconst stateCssClasses = {\n\t\t['kol-textarea--disabled']: Boolean(disabled),\n\t\t['kol-textarea--required']: Boolean(required),\n\t\t['kol-textarea--touched']: Boolean(touched),\n\t\t['kol-textarea--readonly']: Boolean(readonly),\n\t\t[`kol-textarea--${msgType || 'error'}`]: showMsg,\n\t};\n\n\tconst inputProps: JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement> = {\n\t\tclass: clsx('kol-textarea', stateCssClasses, classNames),\n\t\trequired: required,\n\t\tdisabled: disabled,\n\t\treadonly: readonly,\n\t\t...getDefaultProps({ ariaDescribedBy, hideLabel, label }),\n\t\t...other,\n\t};\n\n\treturn <textarea {...inputProps} />;\n};\n\nexport default TextAreaFc;\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport KolTextAreaFc, { type TextAreaProps } from '../../functional-components/inputs/TextArea';\n\nimport { type TextareaStates, type MsgPropType } from '../../schema';\nimport { getRenderStates } from '../_helpers/getRenderStates';\n\nexport type TextAreaStateWrapperProps = Partial<TextAreaProps> & {\n\tstate: TextareaStates;\n};\n\nfunction getTextAreaProps(state: TextareaStates, other: Partial<TextAreaProps>): TextAreaProps {\n\tconst renderStates = getRenderStates(state);\n\tconst ariaDescribedBy = [...renderStates.ariaDescribedBy, ...(other.ariaDescribedBy ?? [])];\n\n\tconst props: TextAreaProps = {\n\t\tid: state._id,\n\t\thideLabel: state._hideLabel,\n\t\tlabel: state._label,\n\t\tvalue: state._value as string,\n\t\taccessKey: state._accessKey,\n\t\tdisabled: state._disabled,\n\t\tname: state._name,\n\t\trows: state._rows,\n\t\treadonly: state._readOnly,\n\t\trequired: state._required,\n\t\tplaceholder: state._placeholder,\n\t\ttouched: state._touched,\n\t\tmsg: state._msg as MsgPropType,\n\t\t...other,\n\t\tariaDescribedBy,\n\t};\n\n\tif ('_maxLength' in state && '_maxLengthBehavior' in state && state._maxLengthBehavior === 'hard') {\n\t\tprops.maxLength = state._maxLength;\n\t}\n\tif ('_shortKey' in state) props['aria-keyshortcuts'] = state._shortKey;\n\n\treturn props;\n}\n\nconst TextAreaStateWrapper: FC<TextAreaStateWrapperProps> = ({ state, ...other }) => {\n\treturn <KolTextAreaFc {...getTextAreaProps(state, other)} />;\n};\n\nexport default TextAreaStateWrapper;\n","import type {\n\tHasCounterPropType,\n\tMaxLengthBehaviorPropType,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tRowsPropType,\n\tSpellCheckPropType,\n\tTextareaProps,\n\tTextareaResizePropType,\n\tTextareaWatches,\n} from '../../schema';\nimport {\n\tvalidateHasCounter,\n\tvalidateMaxLength,\n\tvalidateMaxLengthBehavior,\n\tvalidatePlaceholder,\n\tvalidateReadOnly,\n\tvalidateRequired,\n\tvalidateResizeTextarea,\n\tvalidateRows,\n\tvalidateSpellCheck,\n\twatchString,\n} from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\n\nexport class TextareaController extends InputIconController implements TextareaWatches {\n\tprotected readonly component: Generic.Element.Component & TextareaProps;\n\n\tpublic constructor(component: Generic.Element.Component & TextareaProps, 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') {\n\t\t\tthis.component.state._currentLength = this.component._value.length;\n\t\t\tthis.updateCurrentLengthDebounced(this.component._value.length);\n\t\t}\n\t};\n\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tvalidateHasCounter(this.component, value);\n\t}\n\n\tpublic validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {\n\t\tvalidateMaxLengthBehavior(this.component, value);\n\t}\n\n\tpublic validateMaxLength(value?: number): void {\n\t\tvalidateMaxLength(this.component, value, {\n\t\t\thooks: { afterPatch: this.afterSyncCharCounter },\n\t\t});\n\t}\n\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tvalidatePlaceholder(this.component, value);\n\t}\n\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tvalidateReadOnly(this.component, value);\n\t}\n\n\tpublic validateResize(value?: TextareaResizePropType): void {\n\t\tvalidateResizeTextarea(this.component, value);\n\t}\n\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tvalidateRequired(this.component, value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tvalidateSpellCheck(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLengthBehavior(this.component._maxLengthBehavior);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateSpellCheck(this.component._spellCheck);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../../styles/kol-form-field-mixin' as *;\n@use '../../styles/kol-input-container-mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../host-display-block' as *;\n\n@layer kol-component {\n\t@include kol-alert;\n\t@include kol-form-field;\n\t@include kol-input-container;\n\n\t.kol-textarea {\n\t\twidth: 100%;\n\n\t\t&:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport type {\n\tAdjustHeightPropType,\n\tDisabledPropType,\n\tFocusableElement,\n\tHasCounterPropType,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMaxLengthBehaviorPropType,\n\tMsgPropType,\n\tNamePropType,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tRowsPropType,\n\tShortKeyPropType,\n\tSpellCheckPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTextareaAPI,\n\tTextareaResizePropType,\n\tTextareaStates,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerStateWrapperFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolTextAreaStateWrapperFc, { type TextAreaStateWrapperProps } from '../../functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper';\nimport { nonce } from '../../utils/dev.utils';\nimport { TextareaController } from './controller';\n\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolTextarea implements TextareaAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\tprivate textareaRef?: HTMLTextAreaElement;\n\n\tprivate readonly catchRef = (ref?: HTMLTextAreaElement) => {\n\t\tthis.textareaRef = ref;\n\t};\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this.textareaRef?.value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.textareaRef?.focus();\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-form-field-textarea', {\n\t\t\t\t'kol-form-field--has-value': this.state._hasValue,\n\t\t\t\t'kol-form-field--has-counter': this.controller.hasSoftCharacterLimit() || this.controller.hasCounter(),\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.textareaRef?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getTextAreaProps(): TextAreaStateWrapperProps {\n\t\tconst ariaDescribedBy = typeof this.state._maxLength === 'number' ? [`${this.state._id}-character-limit-hint`] : undefined; // When a character limit is defined, we provide an additional hint referenced by aria-describedby.\n\n\t\treturn {\n\t\t\tref: this.catchRef,\n\t\t\tstate: this.state,\n\t\t\tstyle: {\n\t\t\t\tresize: this.state._resize,\n\t\t\t},\n\t\t\tariaDescribedBy,\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput,\n\t\t\tonFocus: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerStateWrapperFc state={this.state}>\n\t\t\t\t\t<KolTextAreaStateWrapperFc {...this.getTextAreaProps()} />\n\t\t\t\t</KolInputContainerStateWrapperFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component’s interactive element.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Adjusts the height of the element to its content.\n\t * @TODO: change back to AdjustHeightPropType after stencil #4663 has been resolved\n\t */\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t * @deprecated Will be removed in the next major version.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Shows a character counter for the input element.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.\n\t */\n\t@Prop() public _maxLengthBehavior?: MaxLengthBehaviorPropType = 'hard';\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\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 * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t * In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`.\n\t */\n\t@Prop() public _resize?: TextareaResizePropType = 'vertical';\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Defines how many rows of text should be visible at the same time.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines whether the browser should check the spelling and grammar.\n\t */\n\t@Prop() public _spellCheck?: SpellCheckPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: string;\n\n\t@State() public state: TextareaStates = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_currentLengthDebounced: 0,\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\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?: AdjustHeightPropType): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_maxLengthBehavior')\n\tpublic validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {\n\t\tthis.controller.validateMaxLengthBehavior(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(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?: PlaceholderPropType): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: TextareaResizePropType): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_spellCheck')\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tthis.controller.validateSpellCheck(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(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 componentDidLoad(): void {\n\t\tsetTimeout(() => {\n\t\t\tif (this._adjustHeight === true && this.textareaRef /* SSR instanceof HTMLTextAreaElement */) {\n\t\t\t\tthis._rows =\n\t\t\t\t\tthis.state?._rows && this.state._rows > increaseTextareaHeight(this.textareaRef) ? this.state._rows : increaseTextareaHeight(this.textareaRef);\n\t\t\t} else if (!this._rows) {\n\t\t\t\tthis._rows = 1;\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tif (this.textareaRef instanceof HTMLTextAreaElement) {\n\t\t\tthis._value = this.textareaRef.value;\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.textareaRef);\n\t\t\t}\n\t\t\tthis.controller.onFacade.onInput(event);\n\t\t}\n\t};\n}\n"],"names":["KolTextAreaFc","KolFormFieldStateWrapperFc","KolInputContainerStateWrapperFc","KolTextAreaStateWrapperFc"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,F as e,H as n,r as i,g as a}from"./index-4c718166.js";import{n as s}from"./dev.utils-5db255b5.js";import{g as o}from"./controller-ae3a41a0.js";import{I as l}from"./controller-icon-30817124.js";import{v as r}from"./has-counter-a9dacd37.js";import{k as d,i as h,b as c,w as p,s as u,l as f}from"./prop.validators-c5e6ad2d.js";import{v as m}from"./rows-64f9b5cb.js";import{i as b}from"./component-names-aa3cbc3c.js";import{I as v}from"./InternalUnderlinedBadgeText-68465b64.js";import{s as y,b as g}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./events-29e84d75.js";import"./associated.controller-bce3d721.js";import"./access-and-short-key-864aafba.js";import"./tooltip-align-c001aae2.js";import"./align-3f029493.js";import"./hide-label-db0db59c.js";import"./label-d70e7c34.js";import"./icons-f3b7aabd.js";import"./common-54bf85ba.js";import"./index-541b643a.js";const k=["both","horizontal","vertical","none"];class w extends l{constructor(t,e,n){super(t,e,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateHasCounter(t){r(this.component,t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){d(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){h(this.component,"_placeholder",t)}validateReadOnly(t){c(this.component,"_readOnly",t)}validateResize(t){p(this.component,"_resize",(t=>"string"==typeof t&&k.includes(t)),new Set(`String {${k.join(", ")}`),t)}validateRequired(t){c(this.component,"_required",t)}validateRows(t){m(this.component,t)}validateValue(t){h(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const _="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",x=_,z=t=>{t.style.overflow="hidden";const e=t.rows,n=t.clientHeight/e;t.rows=1;const i=Math.round(t.scrollHeight/n);return t.rows=e,i},j=class{async getValue(){var t;return null===(t=this.textareaRef)||void 0===t?void 0:t.value}async focus(){await this.kolFocus()}async kolFocus(){var t;null===(t=this.textareaRef)||void 0===t||t.focus()}render(){const{ariaDescribedBy:i}=o(this.state),a=y(this.state._label);return t(n,{key:"4135602a13b0a5716f24bbb3ad6aa85918848f2f",class:{"kol-textarea":!0,"has-value":this.state._hasValue}},t(b,{key:"9ba58bdf0ca893ce31b95cfae7d56edf4acd71f7",class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_disabled:this.state._disabled,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_msg:this.state._msg,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.textareaRef)||void 0===t?void 0:t.focus()},role:"presentation"},t("span",{key:"6908d9280af4c12ff49e8a4928f7d8cec62d4212",slot:"label"},a?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(e,null,t(v,{badgeText:g(this.state._accessKey||this.state._shortKey),label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},g(this.state._accessKey||this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"b6d57fdd9921cfb7d69388c8519225855e496034",slot:"input"},t("textarea",Object.assign({key:"7294aeff04c51d9b62c61f7e76eeac8de7e8d2e0",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,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,{onInput:this.onInput,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},style:{resize:this.state._resize},value:this.state._value})))))}constructor(t){i(this,t),this.catchRef=t=>{this.textareaRef=t},this.onInput=t=>{this.textareaRef instanceof HTMLTextAreaElement&&(u(this,"_currentLength",this.textareaRef.value.length),this.state._adjustHeight&&(this._rows=z(this.textareaRef)),this.controller.onFacade.onInput(t))},this._accessKey=void 0,this._adjustHeight=!1,this._alert=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${s()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.controller=new w(this,"textarea",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAdjustHeight(t){this.controller.validateAdjustHeight(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(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){"both"!==t&&"horizontal"!==t||f("In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `none` (default) and `vertical`."),this.controller.validateResize(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentDidLoad(){setTimeout((()=>{var t;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(t=this.state)||void 0===t?void 0:t._rows)&&this.state._rows>z(this.textareaRef)?this.state._rows:z(this.textareaRef):this._rows||(this._rows=1)}),0)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}static get delegatesFocus(){return!0}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};j.style={default:x};export{j as kol_textarea};
+import{h as e,r as t,g as n}from"./index-Dina3aff.js";import{c as i}from"./clsx-eK3rPvPS.js";import{d as a,c as o,g as s,F as l}from"./FormFieldStateWrapper-DRcnPo2o.js";import{I as r,a as d}from"./controller-icon-DN63N3Rm.js";import{_ as h}from"./tslib.es6-CxX45GIN.js";import{w as c,e as m}from"./common-8fBdMvJM.js";import{n as p}from"./dev.utils-0SH3ep_K.js";import{a as u,v as f,b}from"./max-length-behavior-BmNWss6T.js";import{v}from"./placeholder-6URRds0_.js";import{v as y}from"./read-only-CcRldJ9w.js";import{v as g}from"./required-G86n77y0.js";import{v as k}from"./rows-P4l3PNiA.js";import{v as _}from"./spell-check-DIsLAYgk.js";import"./access-and-short-key-bcID78Ha.js";import"./disabled-BydergHu.js";import"./hide-label-DRunOux4.js";import"./label-CdtNxOKu.js";import"./tooltip-align-_VI7LehI.js";import"./align-CyK0wp7d.js";import"./events-CoPFQEiC.js";import"./associated.controller-BKIODHIT.js";import"./bootstrap-BiRnv4fV.js";import"./component-names-CkE54Ym7.js";import"./i18n-ZF6JbdVP.js";import"./isObject-DvSELytj.js";import"./Alert-yh8R3coC.js";import"./i18n-CdSCDnmA.js";import"./bem-CHTjklyp.js";import"./browser-Ba2Wl_kh.js";import"./Heading-KhwFHPZb.js";import"./InternalUnderlinedBadgeText-BnPUgbKl.js";import"./reuse-CX4AQDkS.js";import"./Icon-BsRmEtCa.js";import"./icons-72ER78AW.js";const w=["vertical","none"],x=e=>"string"==typeof e&&w.includes(e),j=(e,t)=>{c(e,"_resize",x,new Set(w),t,{defaultValue:"vertical"})},z=t=>{const{class:n,msg:l,touched:s,readonly:r,disabled:d,required:c,ariaDescribedBy:m,hideLabel:u,label:p}=t,v=h(t,["class","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label"]),f=o(l,s),b="string"==typeof l?"error":null==l?void 0:l._type,g={"kol-textarea--disabled":Boolean(d),"kol-textarea--required":Boolean(c),"kol-textarea--touched":Boolean(s),"kol-textarea--readonly":Boolean(r),[`kol-textarea--${b||"error"}`]:f},_=Object.assign(Object.assign({class:i("kol-textarea",g,n),required:c,disabled:d,readonly:r},a({ariaDescribedBy:m,hideLabel:u,label:p})),v);return e("textarea",Object.assign({},_))};function B(e,t){var n;const a=[...s(e).ariaDescribedBy,...null!==(n=t.ariaDescribedBy)&&void 0!==n?n:[]],i=Object.assign(Object.assign({id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,rows:e._rows,readonly:e._readOnly,required:e._required,placeholder:e._placeholder,touched:e._touched,msg:e._msg},t),{ariaDescribedBy:a});return"_maxLength"in e&&"_maxLengthBehavior"in e&&"hard"===e._maxLengthBehavior&&(i.maxLength=e._maxLength),"_shortKey"in e&&(i["aria-keyshortcuts"]=e._shortKey),i}const L=t=>{var{state:n}=t,a=h(t,["state"]);return e(z,Object.assign({},B(n,a)))};class S extends r{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&(this.component.state._currentLength=this.component._value.length,this.updateCurrentLengthDebounced(this.component._value.length))},this.component=e}validateHasCounter(e){u(this.component,e)}validateMaxLengthBehavior(e){f(this.component,e)}validateMaxLength(e){b(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validatePlaceholder(e){v(this.component,e)}validateReadOnly(e){y(this.component,e)}validateResize(e){j(this.component,e)}validateRequired(e){g(this.component,e)}validateRows(e){k(this.component,e)}validateSpellCheck(e){_(this.component,e)}validateValue(e){m(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLengthBehavior(this.component._maxLengthBehavior),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateResize(this.component._resize),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),this.validateValue(this.component._value)}}const C="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n  .kol-input-container {\n    background-color: white;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-textarea {\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}",R=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const a=Math.round(e.scrollHeight/n);return e.rows=t,a},O=class{async getValue(){var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.value}async kolFocus(){var e;null===(e=this.textareaRef)||void 0===e||e.focus()}getFormFieldProps(){return{state:this.state,class:i("kol-form-field-textarea",{"kol-form-field--has-value":this.state._hasValue,"kol-form-field--has-counter":this.controller.hasSoftCharacterLimit()||this.controller.hasCounter()}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getTextAreaProps(){const e="number"==typeof this.state._maxLength?[`${this.state._id}-character-limit-hint`]:void 0;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,style:{resize:this.state._resize},ariaDescribedBy:e},this.controller.onFacade),{onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return e(l,Object.assign({key:"59ad033cb8e22831871f37a99c924258fd827f87"},this.getFormFieldProps()),e(d,{key:"d0872947a090d08e0e1f63c40e861bd5ea311eea",state:this.state},e(L,Object.assign({key:"f66fb8dea2d4463ca6f8d8b80078f83e53781c8b"},this.getTextAreaProps()))))}constructor(e){t(this,e),this.catchRef=e=>{this.textareaRef=e},this._adjustHeight=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._hasCounter=!1,this._maxLengthBehavior="hard",this._readOnly=!1,this._resize="vertical",this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_adjustHeight:!1,_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideMsg:!1,_id:`id-${p()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.onInput=e=>{this.textareaRef instanceof HTMLTextAreaElement&&(this._value=this.textareaRef.value,this.state._adjustHeight&&(this._rows=R(this.textareaRef)),this.controller.onFacade.onInput(e))},this.controller=new S(this,"textarea",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMaxLengthBehavior(e){this.controller.validateMaxLengthBehavior(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout(()=>{var e;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>R(this.textareaRef)?this.state._rows:R(this.textareaRef):this._rows||(this._rows=1)},0)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}static get delegatesFocus(){return!0}get host(){return n(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hasCounter:["validateHasCounter"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_maxLengthBehavior:["validateMaxLengthBehavior"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};O.style={default:C};export{O as kol_textarea};

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

@@ -1 +1 @@
-{"version":3,"names":["cssResizeOptions","TextareaController","InputIconController","constructor","component","name","host","super","this","afterSyncCharCounter","_value","length","state","_currentLength","validateHasCounter","value","hooks","afterPatch","validateMaxLength","watchNumber","min","validatePlaceholder","watchString","validateReadOnly","watchBoolean","validateResize","watchValidator","includes","Set","join","validateRequired","validateRows","validateValue","setFormAssociatedValue","componentWillLoad","_hasCounter","_maxLength","_placeholder","_readOnly","_resize","_required","_rows","defaultStyleCss","KolTextareaDefaultStyle0","increaseTextareaHeight","el","style","overflow","currentRows","rows","rowHeight","clientHeight","nextRows","Math","round","scrollHeight","KolTextarea","getValue","_a","textareaRef","focus","kolFocus","render","ariaDescribedBy","getRenderStates","hasExpertSlot","showExpertSlot","_label","h","Host","key","class","_hasValue","KolInputTag","textarea","_hideLabel","_accessKey","_alert","showAsAlert","_disabled","_hideError","_hint","_icons","_id","_msg","_shortKey","_tooltipAlign","_touched","onClick","role","slot","Fragment","InternalUnderlinedBadgeText","badgeText","buildBadgeTextString","label","Object","assign","ref","catchRef","title","accessKey","undefined","autoCapitalize","autoCorrect","disabled","id","maxlength","_name","readOnly","required","placeholder","spellcheck","controller","onFacade","onInput","onFocus","event","inputHasFocus","onBlur","resize","hostRef","HTMLTextAreaElement","setState","_adjustHeight","nonce","Boolean","validateAccessKey","validateAdjustHeight","validateAlert","validateDisabled","validateError","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","devWarning","validateShortKey","validateSyncValueBySelector","validateTabIndex","validateTouched","componentDidLoad","setTimeout","addValueChangeListener","v"],"sources":["src/schema/components/textarea.ts","src/components/textarea/controller.ts","src/components/textarea/style.scss?tag=kol-textarea&mode=default&encapsulation=shadow","src/components/textarea/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type {\n\tMsgPropType,\n\tPropAccessKey,\n\tPropAdjustHeight,\n\tPropDisabled,\n\tPropHasCounter,\n\tPropHideError,\n\tPropHideLabel,\n\tPropId,\n\tPropLabelWithExpertSlot,\n\tPropMsg,\n\tPropName,\n\tPropReadOnly,\n\tPropRequired,\n\tPropRows,\n\tPropShortKey,\n\tPropSyncValueBySelector,\n\tPropTouched,\n} from '../props';\nimport type { InputTypeOnDefault, KoliBriHorizontalIcons, Stringified } from '../types';\n\n/**\n * TODO: In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `none` (default) and `vertical`.\n */\nexport const cssResizeOptions = ['both', 'horizontal', 'vertical', 'none'] as const;\nexport type CSSResize = (typeof cssResizeOptions)[number];\n\ntype RequiredProps = PropLabelWithExpertSlot;\ntype OptionalProps = {\n\talert: boolean;\n\t/**\n\t * @deprecated Will be removed in v3. Use `msg` instead.\n\t */\n\terror: string;\n\thint: string;\n\ticons: KoliBriHorizontalIcons;\n\tmaxLength: number;\n\tmsg: Stringified<MsgPropType>;\n\ton: InputTypeOnDefault;\n\tplaceholder: string;\n\tresize: CSSResize;\n\ttabIndex: number;\n\tvalue: string;\n} & PropAccessKey &\n\tPropAdjustHeight &\n\tPropDisabled &\n\tPropHasCounter &\n\tPropHideError &\n\tPropHideLabel &\n\tPropName &\n\tPropReadOnly &\n\tPropRequired &\n\tPropRows &\n\tPropSyncValueBySelector &\n\tPropShortKey &\n\tPropTouched;\n\ntype RequiredStates = {\n\tadjustHeight: boolean;\n\tcurrentLength: number;\n\thasValue: boolean;\n\tresize: CSSResize;\n} & PropId &\n\tPropAdjustHeight &\n\tPropHideError &\n\tPropLabelWithExpertSlot;\ntype OptionalStates = {\n\talert: boolean;\n\terror: string;\n\thint: string;\n\ticons: KoliBriHorizontalIcons;\n\tmaxLength: number;\n\ton: InputTypeOnDefault;\n\tplaceholder: string;\n\ttabIndex: number;\n\tvalue: string;\n} & PropAccessKey &\n\tPropDisabled &\n\tPropHasCounter &\n\tPropHideLabel &\n\tPropMsg &\n\tPropName &\n\tPropReadOnly &\n\tPropRequired &\n\tPropRows &\n\tPropShortKey &\n\tPropTouched;\n\nexport type TextareaProps = Generic.Element.Members<RequiredProps, OptionalProps>;\nexport type TextareaStates = Generic.Element.Members<RequiredStates, OptionalStates>;\nexport type TextareaWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;\nexport type TextareaAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n","import type { CSSResize, HasCounterPropType, RowsPropType, TextareaProps, TextareaWatches } from '../../schema';\nimport { validateHasCounter } from '../../schema';\nimport { cssResizeOptions, validateRows, watchBoolean, watchNumber, watchString, watchValidator } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class TextareaController extends InputIconController implements TextareaWatches {\n\tprotected readonly component: Generic.Element.Component & TextareaProps;\n\n\tpublic constructor(component: Generic.Element.Component & TextareaProps, 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?: HasCounterPropType): void {\n\t\tvalidateHasCounter(this.component, 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' && cssResizeOptions.includes(value),\n\t\t\tnew Set(`String {${cssResizeOptions.join(', ')}`),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../@shared/mixins';\n@import '../style';\n@import '../input-line';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n}\n","import type {\n\tAdjustHeightPropType,\n\tCSSResize,\n\tFocusableElement,\n\tHasCounterPropType,\n\tHideErrorPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tRowsPropType,\n\tShortKeyPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTextareaAPI,\n\tTextareaStates,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { buildBadgeTextString, devWarning, setState, showExpertSlot } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedBadgeText } from '../../functional-components';\nimport { TextareaController } from './controller';\nimport { KolInputTag } from '../../core/component-names';\n\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolTextarea implements TextareaAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\tprivate textareaRef?: HTMLTextAreaElement;\n\n\tprivate readonly catchRef = (ref?: HTMLTextAreaElement) => {\n\t\tthis.textareaRef = ref;\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this.textareaRef?.value;\n\t}\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.textareaRef?.focus();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host class={{ 'kol-textarea': true, 'has-value': this.state._hasValue }}>\n\t\t\t\t<KolInputTag\n\t\t\t\t\tclass={{ textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }}\n\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t_alert={this.showAsAlert()}\n\t\t\t\t\t_currentLength={this.state._currentLength}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hasCounter={this.state._hasCounter}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_maxLength={this.state._maxLength}\n\t\t\t\t\t_msg={this.state._msg}\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_shortKey={this.state._shortKey}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.textareaRef?.focus()}\n\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey || this.state._shortKey)} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{buildBadgeTextString(this.state._accessKey || this.state._shortKey)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\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-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\trows={this.state._rows}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonInput={this.onInput}\n\t\t\t\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tresize: this.state._resize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Adjusts the height of the element to its content.\n\t * @TODO: change back to AdjustHeightPropType after stencil #4663 has been resolved\n\t */\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t * @deprecated Will be removed in v3. Use automatic behaviour instead.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t * @deprecated Will be removed in v3. Use `msg` instead.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Shows the character count on the lower border of the input.\n\t * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: KoliBriHorizontalIcons;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\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 * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t * In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`.\n\t */\n\t@Prop() public _resize?: CSSResize = 'vertical';\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Defines how many rows of text should be visible at the same time.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (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 * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: TextareaStates = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\tif (this.state._alert === undefined) {\n\t\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t\t}\n\t\treturn this.state._alert;\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?: AdjustHeightPropType): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(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('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(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\tif (value === 'both' || value === 'horizontal') {\n\t\t\tdevWarning(\n\t\t\t\t'In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `none` (default) and `vertical`.',\n\t\t\t);\n\t\t}\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\tsetTimeout(() => {\n\t\t\tif (this._adjustHeight === true && this.textareaRef /* SSR instanceof HTMLTextAreaElement */) {\n\t\t\t\tthis._rows =\n\t\t\t\t\tthis.state?._rows && this.state._rows > increaseTextareaHeight(this.textareaRef) ? this.state._rows : increaseTextareaHeight(this.textareaRef);\n\t\t\t} else if (!this._rows) {\n\t\t\t\tthis._rows = 1;\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tif (this.textareaRef instanceof HTMLTextAreaElement) {\n\t\t\tsetState(this, '_currentLength', this.textareaRef.value.length);\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.textareaRef);\n\t\t\t}\n\t\t\tthis.controller.onFacade.onInput(event);\n\t\t}\n\t};\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["h","registerInstance","getElement","clsx","getDefaultProps","checkHasMsg","getRenderStates","FormFieldStateWrapper","InputIconController","InputContainerStateWrapperFc","__rest","watchValidator","watchString","nonce","validateHasCounter","validateMaxLengthBehavior","validateMaxLength","validatePlaceholder","validateReadOnly","validateRequired","validateRows","validateSpellCheck","textareaResizeOptions","isTextareaResizePropType","value","includes","validateResizeTextarea","component","Set","defaultValue","TextAreaFc","props","class","classNames","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label","other","showMsg","msgType","_type","stateCssClasses","Boolean","inputProps","Object","assign","getTextAreaProps","state","_a","renderStates","id","_id","_hideLabel","_label","_value","accessKey","_accessKey","_disabled","name","_name","rows","_rows","_readOnly","_required","placeholder","_placeholder","_touched","_msg","_maxLengthBehavior","maxLength","_maxLength","_shortKey","TextAreaStateWrapper","TextareaController","constructor","host","super","this","afterSyncCharCounter","_currentLength","length","updateCurrentLengthDebounced","hooks","afterPatch","validateResize","validateValue","setFormAssociatedValue","componentWillLoad","_hasCounter","_resize","_spellCheck","defaultStyleCss","increaseTextareaHeight","el","style","overflow","currentRows","rowHeight","clientHeight","nextRows","Math","round","scrollHeight","KolTextarea","getValue","textareaRef","kolFocus","focus","getFormFieldProps","_hasValue","controller","hasSoftCharacterLimit","hasCounter","tooltipAlign","_tooltipAlign","onClick","alert","showAsAlert","undefined","ref","catchRef","resize","onFacade","onInput","onFocus","event","inputHasFocus","onBlur","render","key","hostRef","_adjustHeight","_hideMsg","_hint","_currentLengthDebounced","HTMLTextAreaElement","validateAccessKey","validateAdjustHeight","validateDisabled","validateHideMsg","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","validateShortKey","validateSyncValueBySelector","validateTouched","componentDidLoad","setTimeout","addValueChangeListener","v","delegatesFocus","watchers","_icons","_on","_syncValueBySelector","default"],"sources":["0"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"kol-toast-container.entry.esm.js","sources":["src/functional-components/ToastItem/ToastItem.tsx","src/components/toaster/style.scss?tag=kol-toast-container&mode=default&encapsulation=shadow","src/components/toaster/shadow.tsx"],"sourcesContent":["import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport { type Toast } from '../../schema';\n\nimport KolAlertFc from '../Alert';\nimport clsx from 'clsx';\n\ntype ToastItemProps = JSXBase.HTMLAttributes<HTMLDivElement> & {\n\tstatus: 'adding' | 'settled' | 'removing';\n\ttoast: Toast;\n\tonClose: () => void;\n};\n\nconst ToastItemFc: FC<ToastItemProps> = ({ status, toast, onClose, ...other }) => {\n\tconst { type, label, description, variant } = toast;\n\n\treturn (\n\t\t<div class={clsx('kol-toast-item', `kol-toast-item--${status}`)}>\n\t\t\t<KolAlertFc\n\t\t\t\tclass=\"kol-toast-item__alert\"\n\t\t\t\talert={true}\n\t\t\t\tlabel={label}\n\t\t\t\tlevel={0}\n\t\t\t\thasCloser={true}\n\t\t\t\ttype={type}\n\t\t\t\tvariant={variant || 'card'}\n\t\t\t\tonCloserClick={onClose}\n\t\t\t>\n\t\t\t\t<div {...other}>{description}</div>\n\t\t\t</KolAlertFc>\n\t\t</div>\n\t);\n};\n\nexport default ToastItemFc;\n","@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@layer kol-component {\n\t@include kol-alert;\n\n\t:host {\n\t\tdisplay: flex;\n\t\tposition: fixed;\n\t\tz-index: 200;\n\t\tflex-direction: column;\n\t}\n\n\t.kol-toast-container {\n\t\t&__close-all {\n\t\t\talign-self: flex-end;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, State } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { nonce } from '../../utils/dev.utils';\n\nimport type { Toast, ToasterAPI, ToasterStates, ToastRenderFunction, ToastState } from '../../schema';\nimport { KolButtonTag } from '../../core/component-names';\nimport { KolToastItemFc } from '../../functional-components';\n\nconst TRANSITION_TIMEOUT = 300;\n\n@Component({\n\ttag: 'kol-toast-container',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolToastContainer implements ToasterAPI {\n\t@State() public state: ToasterStates = {\n\t\t_toastStates: [],\n\t};\n\n\tprivate readonly translateToastCloseAll = translate('kol-toast-close-all');\n\n\t/* Keep track of render functions, so we call each only once. */\n\tprivate knownRenderFunctions = new Set<ToastRenderFunction>();\n\n\t// Stencil requires async function:\n\t/**\n\t * Adds a toast to the queue.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async enqueue(toast: Toast) {\n\t\tconst newToastState: ToastState = {\n\t\t\ttoast: {\n\t\t\t\t...toast,\n\t\t\t\tvariant: 'card',\n\t\t\t},\n\t\t\tstatus: 'adding',\n\t\t\tid: `toast-${nonce()}`,\n\t\t};\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: [newToastState, ...this.state._toastStates],\n\t\t};\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: this.state._toastStates.map((localToastState) =>\n\t\t\t\t\tlocalToastState.id === newToastState.id && localToastState.status !== 'removing'\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...localToastState,\n\t\t\t\t\t\t\t\tstatus: 'settled',\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: localToastState,\n\t\t\t\t),\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\n\n\t\treturn () => {\n\t\t\tthis.handleClose(newToastState);\n\t\t};\n\t}\n\n\tprivate handleClose(toastState: ToastState) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: this.state._toastStates.map((localToastState) => {\n\t\t\t\tif (localToastState.id === toastState.id) {\n\t\t\t\t\tlocalToastState.status = 'removing';\n\t\t\t\t}\n\t\t\t\treturn localToastState;\n\t\t\t}),\n\t\t};\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: this.state._toastStates.filter((localToastState) => localToastState.id !== toastState.id),\n\t\t\t};\n\t\t\ttoastState.toast.onClose?.();\n\t\t}, TRANSITION_TIMEOUT);\n\t}\n\n\t/**\n\t * Closes all toasts.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeAll(immediate: boolean = false) {\n\t\tif (immediate) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: [],\n\t\t\t};\n\t\t} else {\n\t\t\tconst toastsToClose = [...this.state._toastStates]; // Create a snapshot of the open toasts at the time closeAll has been called\n\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: toastsToClose.map((localToastState) => ({\n\t\t\t\t\t...localToastState,\n\t\t\t\t\tstatus: 'removing',\n\t\t\t\t})),\n\t\t\t};\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_toastStates: this.state._toastStates.filter((toastState) => toastsToClose.every((toastToClose) => toastToClose.id !== toastState.id)),\n\t\t\t\t};\n\t\t\t\ttoastsToClose.forEach((toastState) => {\n\t\t\t\t\ttoastState.toast.onClose?.();\n\t\t\t\t});\n\t\t\t}, TRANSITION_TIMEOUT);\n\t\t}\n\t}\n\n\tprivate handleToastRef(toastState: ToastState, element?: HTMLDivElement) {\n\t\tif (element && typeof toastState.toast.render === 'function' && !this.knownRenderFunctions.has(toastState.toast.render)) {\n\t\t\tthis.knownRenderFunctions.add(toastState.toast.render);\n\t\t\ttoastState.toast.render(element, { close: () => this.handleClose(toastState) });\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-toast-container\">\n\t\t\t\t{this.state._toastStates.length > 1 && (\n\t\t\t\t\t<KolButtonTag\n\t\t\t\t\t\t_label={this.translateToastCloseAll}\n\t\t\t\t\t\tclass=\"kol-toast-container__button-close-all\"\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\tvoid this.closeAll();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolButtonTag>\n\t\t\t\t)}\n\t\t\t\t{this.state._toastStates.map((toastState) => (\n\t\t\t\t\t<KolToastItemFc\n\t\t\t\t\t\tkey={toastState.id}\n\t\t\t\t\t\tonClose={() => this.handleClose(toastState)}\n\t\t\t\t\t\tref={(element?: HTMLDivElement) => this.handleToastRef(toastState, element)}\n\t\t\t\t\t\ttoast={toastState.toast}\n\t\t\t\t\t\tstatus={toastState.status}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":["KolToastItemFc"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as n,r as t,H as e}from"./index-4c718166.js";import{t as o}from"./i18n-5fe08f1c.js";import{n as i}from"./dev.utils-5db255b5.js";import{k as s}from"./component-names-aa3cbc3c.js";import{_ as a}from"./tslib.es6-2e5096f8.js";import{c as l}from"./clsx-09a06a12.js";import{K as r}from"./Alert-472252f1.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./Heading-98b6ed4f.js";const c=t=>{var{status:e,toast:s,onClose:o}=t,i=a(t,["status","toast","onClose"]);const{type:d,label:c,description:h,variant:p,alertVariant:m}=s;return n("div",{class:l("toast",e)},n(r,{class:"alert",alert:!0,label:c,level:0,hasCloser:!0,type:d,variant:m||p||"card",onCloserClick:o},n("div",Object.assign({},i),h)))},d=c,h="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: flex;\n    flex-direction: column;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: fixed;\n    z-index: 200;\n  }\n  .close-all {\n    align-self: flex-end;\n  }\n}",p=h,b=300,m=class{constructor(n){t(this,n),this.knownRenderFunctions=new Set,this.state={_toastStates:[]}}async enqueue(t){const n={toast:t,status:"adding",id:`toast-${i()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[n,...this.state._toastStates]}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((t=>t.id===n.id&&"removing"!==t.status?Object.assign(Object.assign({},t),{status:"settled"}):t))})}),b),()=>{this.handleClose(n)}}handleClose(t){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((n=>(n.id===t.id&&(n.status="removing"),n)))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((n=>n.id!==t.id))})}),b)}async closeAll(t=!1){if(t)this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]});else{const t=[...this.state._toastStates];this.state=Object.assign(Object.assign({},this.state),{_toastStates:t.map((t=>Object.assign(Object.assign({},t),{status:"removing"})))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((n=>t.every((t=>t.id!==n.id))))})}),b)}}handleToastRef(t,n){n&&"function"==typeof t.toast.render&&!this.knownRenderFunctions.has(t.toast.render)&&(this.knownRenderFunctions.add(t.toast.render),t.toast.render(n,{close:()=>this.handleClose(t)}))}render(){return n(e,{key:"f66e71e939df21caaedf6b2384a78694239238a3",class:"kol-toast-container"},this.state._toastStates.length>1&&n(s,{key:"3659978e379a0ea75f8ff54eb13d4db599048ad5",_label:o("kol-toast-close-all"),class:"close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((t=>n(d,{key:t.id,onClose:()=>this.handleClose(t),ref:n=>this.handleToastRef(t,n),toast:t.toast,status:t.status}))))}};m.style={default:p};export{m as kol_toast_container};
+import{h as n,r as t,H as e}from"./index-Dina3aff.js";import{t as o}from"./i18n-CdSCDnmA.js";import{n as i}from"./dev.utils-0SH3ep_K.js";import{n as s}from"./component-names-CkE54Ym7.js";import{K as a}from"./Alert-yh8R3coC.js";import"./common-8fBdMvJM.js";import"./markdown-DL-PkOqb.js";import{_ as l}from"./tslib.es6-CxX45GIN.js";import{c as r}from"./clsx-eK3rPvPS.js";import"./i18n-ZF6JbdVP.js";import"./bem-CHTjklyp.js";import"./browser-Ba2Wl_kh.js";import"./Heading-KhwFHPZb.js";const c=t=>{var{status:e,toast:o,onClose:s}=t,i=l(t,["status","toast","onClose"]);const{type:d,label:c,description:h,variant:m}=o;return n("div",{class:r("kol-toast-item",`kol-toast-item--${e}`)},n(a,{class:"kol-toast-item__alert",alert:!0,label:c,level:0,hasCloser:!0,type:d,variant:m||"card",onCloserClick:s},n("div",Object.assign({},i),h)))},d="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: flex;\n    position: fixed;\n    z-index: 200;\n    flex-direction: column;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}",h=300,m=class{constructor(n){t(this,n),this.state={_toastStates:[]},this.translateToastCloseAll=o("kol-toast-close-all"),this.knownRenderFunctions=new Set}async enqueue(t){const n={toast:Object.assign(Object.assign({},t),{variant:"card"}),status:"adding",id:`toast-${i()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[n,...this.state._toastStates]}),setTimeout(()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map(t=>t.id===n.id&&"removing"!==t.status?Object.assign(Object.assign({},t),{status:"settled"}):t)})},h),()=>{this.handleClose(n)}}handleClose(t){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map(n=>(n.id===t.id&&(n.status="removing"),n))}),setTimeout(()=>{var n,e;this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter(n=>n.id!==t.id)}),null===(e=(n=t.toast).onClose)||void 0===e||e.call(n)},h)}async closeAll(t=!1){if(t)this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]});else{const t=[...this.state._toastStates];this.state=Object.assign(Object.assign({},this.state),{_toastStates:t.map(t=>Object.assign(Object.assign({},t),{status:"removing"}))}),setTimeout(()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter(n=>t.every(t=>t.id!==n.id))}),t.forEach(t=>{var n,e;null===(e=(n=t.toast).onClose)||void 0===e||e.call(n)})},h)}}handleToastRef(t,n){n&&"function"==typeof t.toast.render&&!this.knownRenderFunctions.has(t.toast.render)&&(this.knownRenderFunctions.add(t.toast.render),t.toast.render(n,{close:()=>this.handleClose(t)}))}render(){return n(e,{key:"59038f1cc016df1fb76b2436b4ad4598700e66a9",class:"kol-toast-container"},this.state._toastStates.length>1&&n(s,{key:"d2aea02a378c5631da3d47e8ab947e81eaa4174b",_label:this.translateToastCloseAll,class:"kol-toast-container__button-close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map(t=>n(c,{key:t.id,onClose:()=>this.handleClose(t),ref:n=>this.handleToastRef(t,n),toast:t.toast,status:t.status})))}};m.style={default:d};export{m as kol_toast_container};

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

@@ -1 +1 @@
-{"version":3,"names":["ToastItemFc","_a","status","toast","onClose","other","__rest","type","label","description","variant","alertVariant","h","class","clsx","KolAlertFc","alert","level","hasCloser","onCloserClick","Object","assign","KolToastItemFc","defaultStyleCss","KolToastContainerDefaultStyle0","TRANSITION_TIMEOUT","KolToastContainer","this","knownRenderFunctions","Set","_toastStates","enqueue","newToastState","id","nonce","state","setTimeout","map","localToastState","handleClose","toastState","filter","closeAll","immediate","toastsToClose","every","toastToClose","handleToastRef","element","render","has","add","close","Host","key","length","KolButtonTag","_label","translate","_on","onClick","ref"],"sources":["src/functional-components/ToastItem/ToastItem.tsx","src/components/toaster/style.scss?tag=kol-toast-container&mode=default&encapsulation=shadow","src/components/toaster/shadow.tsx"],"sourcesContent":["import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport { type Toast } from '../../schema';\n\nimport KolAlertFc from '../Alert';\nimport clsx from 'clsx';\n\ntype ToastItemProps = JSXBase.HTMLAttributes<HTMLDivElement> & {\n\tstatus: 'adding' | 'settled' | 'removing';\n\ttoast: Toast;\n\tonClose: () => void;\n};\n\nconst ToastItemFc: FC<ToastItemProps> = ({ status, toast, onClose, ...other }) => {\n\tconst { type, label, description, variant, alertVariant } = toast;\n\n\treturn (\n\t\t<div class={clsx('toast', status)}>\n\t\t\t<KolAlertFc\n\t\t\t\tclass=\"alert\"\n\t\t\t\talert={true}\n\t\t\t\tlabel={label}\n\t\t\t\tlevel={0}\n\t\t\t\thasCloser={true}\n\t\t\t\ttype={type}\n\t\t\t\tvariant={alertVariant || variant || 'card'}\n\t\t\t\tonCloserClick={onClose}\n\t\t\t>\n\t\t\t\t<div {...other}>{description}</div>\n\t\t\t</KolAlertFc>\n\t\t</div>\n\t);\n};\n\nexport default ToastItemFc;\n","@import '../@shared/mixins';\n@import '../style';\n@import '../@shared/kol-alert-mixin';\n\n@include kol-alert-styles;\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tfont-size: rem(16);\n\t\tposition: fixed;\n\t\tz-index: 200;\n\t}\n\n\t.close-all {\n\t\talign-self: flex-end;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, State } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { nonce } from '../../utils/dev.utils';\n\nimport type { Toast, ToasterAPI, ToasterStates, ToastRenderFunction, ToastState } from '../../schema';\nimport { KolButtonTag } from '../../core/component-names';\nimport { KolToastItemFc } from '../../functional-components';\n\nconst TRANSITION_TIMEOUT = 300;\n\n@Component({\n\ttag: 'kol-toast-container',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolToastContainer implements ToasterAPI {\n\t@State() public state: ToasterStates = {\n\t\t_toastStates: [],\n\t};\n\n\t/* Keep track of render functions, so we call each only once. */\n\tprivate knownRenderFunctions = new Set<ToastRenderFunction>();\n\n\t// Stencil requires async function:\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async enqueue(toast: Toast) {\n\t\tconst newToastState: ToastState = {\n\t\t\ttoast,\n\t\t\tstatus: 'adding',\n\t\t\tid: `toast-${nonce()}`,\n\t\t};\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: [newToastState, ...this.state._toastStates],\n\t\t};\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: this.state._toastStates.map((localToastState) =>\n\t\t\t\t\tlocalToastState.id === newToastState.id && localToastState.status !== 'removing'\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...localToastState,\n\t\t\t\t\t\t\t\tstatus: 'settled',\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: localToastState,\n\t\t\t\t),\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\n\n\t\treturn () => {\n\t\t\tthis.handleClose(newToastState);\n\t\t};\n\t}\n\n\tprivate handleClose(toastState: ToastState) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: this.state._toastStates.map((localToastState) => {\n\t\t\t\tif (localToastState.id === toastState.id) {\n\t\t\t\t\tlocalToastState.status = 'removing';\n\t\t\t\t}\n\t\t\t\treturn localToastState;\n\t\t\t}),\n\t\t};\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: this.state._toastStates.filter((localToastState) => localToastState.id !== toastState.id),\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeAll(immediate: boolean = false) {\n\t\tif (immediate) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: [],\n\t\t\t};\n\t\t} else {\n\t\t\tconst toastsToClose = [...this.state._toastStates]; // Create a snapshot of the open toasts at the time closeAll has been called\n\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: toastsToClose.map((localToastState) => ({\n\t\t\t\t\t...localToastState,\n\t\t\t\t\tstatus: 'removing',\n\t\t\t\t})),\n\t\t\t};\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_toastStates: this.state._toastStates.filter((toastState) => toastsToClose.every((toastToClose) => toastToClose.id !== toastState.id)),\n\t\t\t\t};\n\t\t\t}, TRANSITION_TIMEOUT);\n\t\t}\n\t}\n\n\tprivate handleToastRef(toastState: ToastState, element?: HTMLDivElement) {\n\t\tif (element && typeof toastState.toast.render === 'function' && !this.knownRenderFunctions.has(toastState.toast.render)) {\n\t\t\tthis.knownRenderFunctions.add(toastState.toast.render);\n\t\t\ttoastState.toast.render(element, { close: () => this.handleClose(toastState) });\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-toast-container\">\n\t\t\t\t{this.state._toastStates.length > 1 && (\n\t\t\t\t\t<KolButtonTag\n\t\t\t\t\t\t_label={translate('kol-toast-close-all')}\n\t\t\t\t\t\tclass=\"close-all\"\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\tvoid this.closeAll();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolButtonTag>\n\t\t\t\t)}\n\t\t\t\t{this.state._toastStates.map((toastState) => (\n\t\t\t\t\t<KolToastItemFc\n\t\t\t\t\t\tkey={toastState.id}\n\t\t\t\t\t\tonClose={() => this.handleClose(toastState)}\n\t\t\t\t\t\tref={(element?: HTMLDivElement) => this.handleToastRef(toastState, element)}\n\t\t\t\t\t\ttoast={toastState.toast}\n\t\t\t\t\t\tstatus={toastState.status}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["h","registerInstance","Host","translate","nonce","KolButtonTag","KolAlertFc","__rest","clsx","ToastItemFc","_a","status","toast","onClose","other","type","label","description","variant","class","alert","level","hasCloser","onCloserClick","Object","assign","defaultStyleCss","TRANSITION_TIMEOUT","KolToastContainer","constructor","hostRef","this","state","_toastStates","translateToastCloseAll","knownRenderFunctions","Set","enqueue","newToastState","id","setTimeout","map","localToastState","handleClose","toastState","_b","filter","call","closeAll","immediate","toastsToClose","every","toastToClose","forEach","handleToastRef","element","render","has","add","close","key","length","_label","_on","onClick","ref","style","default"],"sources":["0"],"mappings":"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","ignoreList":[]}

package/dist/kolibri/kol-toolbar.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kol-toolbar.entry.esm.js","sources":["src/schema/props/toolbar-items.ts","src/components/toolbar/style.scss?tag=kol-toolbar&mode=default&encapsulation=shadow","src/components/toolbar/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, setState } from '../utils';\nimport type { ButtonProps, LinkProps } from '../../schema';\n\n/* types */\nexport type ToolbarItemPropType = ButtonProps | LinkProps;\nexport type ToolbarItemsPropType = ToolbarItemPropType[];\n\n/**\n * Defines the primary toolbar items.\n */\nexport type PropToolbarItems = {\n\titems: ToolbarItemsPropType;\n};\n\n/* validator */\nexport const validateToolbarItems = (component: Generic.Element.Component, value?: ToolbarItemsPropType): void => {\n\temptyStringByArrayHandler(value, () => {\n\t\tobjectObjectHandler(value, () => {\n\t\t\tif (typeof value === 'undefined') {\n\t\t\t\tvalue = [];\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ToolbarItemPropType[]>(value);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value keeps the original items\n\t\t\t}\n\t\t\tif (Array.isArray(value) && value.every((items: ToolbarItemPropType) => typeof items === 'object' && items !== null)) {\n\t\t\t\tsetState(component, '_items', value);\n\t\t\t}\n\t\t});\n\t});\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n@use '../@shared/kol-button-mixin' as *;\n\n@layer kol-component {\n\t@include kol-button-styles('kol-link');\n\n\t.kol-toolbar {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\n\n\t\t&--orientation-vertical {\n\t\t\tflex-direction: column;\n\t\t\talign-items: stretch;\n\t\t}\n\n\t\t&:focus-within {\n\t\t\toutline: 1px solid;\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport type { LabelPropType, ToolbarAPI, ToolbarStates, ToolbarItemsPropType, ToolbarItemPropType } from '../../schema';\nimport { validateLabel, validateToolbarItems } from '../../schema';\nimport { KolLinkWcTag, KolButtonWcTag } from '../../core/component-names';\nimport type { OrientationPropType } from '../../schema/props/orientation';\nimport { validateOrientation } from '../../schema/props/orientation';\nimport { KeyboardKey } from '../../schema/enums';\n\n@Component({\n\ttag: 'kol-toolbar',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolToolbar implements ToolbarAPI {\n\t@Element() host!: HTMLElement;\n\n\t@State() public state: ToolbarStates = {\n\t\t_label: '',\n\t\t_items: [],\n\t};\n\n\t@State() private currentIndex: number = 0;\n\n\tprivate indexToElement = new Map<number, HTMLKolLinkWcElement | HTMLKolButtonWcElement>();\n\tprivate normalizeItem(item: ToolbarItemPropType): ToolbarItemPropType {\n\t\tconst { _icons, _disabled, ...rest } = item;\n\t\treturn { ...rest, _icons, _disabled };\n\t}\n\tprivate renderItem = (raw: ToolbarItemPropType, index: number): JSX.Element => {\n\t\tconst element = this.normalizeItem(raw);\n\t\tconst tabIndex = index === this.currentIndex && !element?._disabled ? 0 : -1;\n\n\t\tconst props = {\n\t\t\tkey: index,\n\t\t\tclass: 'button normal kol-toolbar__item',\n\t\t\t_tabIndex: tabIndex,\n\t\t};\n\t\tconst catchRef = (el?: HTMLKolLinkWcElement | HTMLKolButtonWcElement) => {\n\t\t\tif (el) this.indexToElement.set(index, el);\n\t\t};\n\t\treturn '_href' in element ? (\n\t\t\t<KolLinkWcTag {...element} {...props} ref={catchRef}></KolLinkWcTag>\n\t\t) : (\n\t\t\t<KolButtonWcTag {...element} {...props} ref={catchRef}></KolButtonWcTag>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div class={`kol-toolbar kol-toolbar--orientation-${this.state._orientation}`} role=\"toolbar\" aria-label={this.state._label}>\n\t\t\t\t{this.state._items.map(this.renderItem)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the functional elements of toolbar to render (e.g. kol-link, kol-button).\n\t */\n\t@Prop() public _items!: ToolbarItemsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: OrientationPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_items')\n\tpublic validateItems(value?: ToolbarItemsPropType): void {\n\t\tvalidateToolbarItems(this, value);\n\t\tthis.indexToElement.clear();\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: OrientationPropType): void {\n\t\tvalidateOrientation(this, value);\n\t}\n\n\t/**\n\t * Retrieves the toolbar item by index if defined.\n\t * If not it use the current index of state.\n\t *\n\t * @returns An array of HTMLElements representing the toolbar items.\n\t */\n\tprivate getCurrentToolbarItem(index?: number): HTMLKolLinkWcElement | HTMLKolButtonWcElement | undefined {\n\t\treturn typeof index === 'number' ? this.indexToElement.get(index) : undefined;\n\t}\n\n\t/**\n\t * Sets the index of the first enabled toolbar item.\n\t */\n\tprivate setFirstEnabledItemIndex() {\n\t\tthis.currentIndex = this.state._items?.findIndex((item) => !item._disabled);\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst pressedKey = event.code as KeyboardKey;\n\t\tconst isArrowKey = [KeyboardKey.ArrowUp, KeyboardKey.ArrowDown, KeyboardKey.ArrowRight, KeyboardKey.ArrowLeft].includes(pressedKey);\n\t\tif (!isArrowKey) return;\n\t\tevent.preventDefault();\n\n\t\tconst lastItemIndex = (this._items?.length ?? 0) - 1;\n\t\tif (lastItemIndex < 0) return;\n\t\tconst currentIndex = this.currentIndex;\n\t\tlet nextIndex = currentIndex;\n\n\t\tswitch (pressedKey) {\n\t\t\tcase KeyboardKey.ArrowUp:\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tnextIndex = currentIndex > 0 ? currentIndex - 1 : lastItemIndex;\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowDown:\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tnextIndex = currentIndex < lastItemIndex ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif (currentIndex === nextIndex) return;\n\n\t\tif (this.state._items?.[nextIndex]?._disabled) return;\n\n\t\tthis.currentIndex = nextIndex;\n\t\tvoid this.getCurrentToolbarItem(nextIndex)?.kolFocus();\n\t}\n\n\t/**\n\t * Resets the tabIndexes of the toolbar to default.\n\t */\n\t@Listen('blur', { capture: true })\n\tpublic handleBlur(event: FocusEvent) {\n\t\tif (event.target === this.host) this.setFirstEnabledItemIndex();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateItems(this._items);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t,g as i}from"./index-4c718166.js";import{e as o,k as a}from"./component-names-aa3cbc3c.js";import{t as s,o as r,p as l,s as d}from"./prop.validators-c5e6ad2d.js";import{v as h}from"./label-d70e7c34.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const c=(e,n)=>{s(n,(()=>{r(n,(()=>{void 0===n&&(n=[]);try{n=l(n)}catch(e){}Array.isArray(n)&&n.every((e=>"object"==typeof e&&null!==e))&&d(e,"_items",n)}))}))},b="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .toolbar {\n    display: flex;\n    align-items: center;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n  }\n  .toolbar:focus-within {\n    outline: calc(1rem / var(--kolibri-root-font-size, 16)) solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n}",f=b,m="kol-toolbar-item",u=class{constructor(t){n(this,t),this.indexToElement=new Map,this.renderItem=(n,t)=>{const i=t!==this.currentIndex||(null==n?void 0:n._disabled)?-1:0,s={key:t,class:m,_tabIndex:i},r=e=>{e&&this.indexToElement.set(t,e)};return e("_href"in n?o:a,Object.assign({},n,s,{ref:r}))},this.state={_label:"",_items:[]},this.currentIndex=0,this._label=void 0,this._items=void 0}render(){return e(t,{key:"de145c145e9308cc33f344d7b167b923f7d1cc27",class:"kol-toolbar"},e("div",{key:"69a375f2309f4eddc53f897e379206758df855dc",class:"toolbar",role:"toolbar","aria-label":this.state._label},this.state._items.map(this.renderItem)))}validateLabel(e){h(this,e)}validateItems(e){c(this,e)}getCurrentToolbarItem(e){return"number"==typeof e?this.indexToElement.get(e):void 0}setFirstEnabledItemIndex(){var e;this.currentIndex=null===(e=this.state._items)||void 0===e?void 0:e.findIndex((e=>!e._disabled))}handleKeyDown(e){var n,t;if(!("ArrowRight"===e.code||"ArrowLeft"===e.code))return;e.preventDefault();const i=(null===(n=this._items)||void 0===n?void 0:n.length)-1,o=this.currentIndex;let a=0;switch(e.code){case"ArrowLeft":a=o!==a?o-1:i;break;case"ArrowRight":i!==o&&(a=o+1)}o!==a&&(this.currentIndex=a,null===(t=this.getCurrentToolbarItem(a))||void 0===t||t.kolFocus())}handleBlur(e){e.target===this.host&&this.setFirstEnabledItemIndex()}componentWillLoad(){this.validateLabel(this._label),this.validateItems(this._items),this.setFirstEnabledItemIndex()}get host(){return i(this)}static get watchers(){return{_label:["validateLabel"],_items:["validateItems"]}}};u.style={default:f};export{u as kol_toolbar};
+import{r as n,h as e,g as t}from"./index-Dina3aff.js";import{_ as i}from"./tslib.es6-CxX45GIN.js";import{O as o,o as a,p as l,s}from"./common-8fBdMvJM.js";import{v as r}from"./label-CdtNxOKu.js";import{f as d,d as c}from"./component-names-CkE54Ym7.js";import{v as h}from"./orientation-5kQWqijN.js";import{K as m}from"./keyboard-D6PoWr38.js";const f=(n,e)=>{o(e,()=>{a(e,()=>{void 0===e&&(e=[]);try{e=l(e)}catch(n){}Array.isArray(e)&&e.every(n=>"object"==typeof n&&null!==n)&&s(n,"_items",e)})})},p="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    place-items: center;\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-link::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-link__text {\n    width: 100%;\n    margin: auto;\n  }\n  .kol-toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n  .kol-toolbar--orientation-vertical {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .kol-toolbar:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",b=class{constructor(t){n(this,t),this.state={_label:"",_items:[]},this.currentIndex=0,this.indexToElement=new Map,this.renderItem=(n,t)=>{const i=this.normalizeItem(n),o=t!==this.currentIndex||(null==i?void 0:i._disabled)?-1:0,a={key:t,class:"button normal kol-toolbar__item",_tabIndex:o},l=n=>{n&&this.indexToElement.set(t,n)};return e("_href"in i?d:c,Object.assign({},i,a,{ref:l}))}}normalizeItem(n){const{_icons:e,_disabled:t}=n,o=i(n,["_icons","_disabled"]);return Object.assign(Object.assign({},o),{_icons:e,_disabled:t})}render(){return e("div",{key:"21d9f22b65a5da8bf4467287754233720e9de61d",class:`kol-toolbar kol-toolbar--orientation-${this.state._orientation}`,role:"toolbar","aria-label":this.state._label},this.state._items.map(this.renderItem))}validateLabel(n){r(this,n)}validateItems(n){f(this,n),this.indexToElement.clear(),this.setFirstEnabledItemIndex()}validateOrientation(n){h(this,n)}getCurrentToolbarItem(n){return"number"==typeof n?this.indexToElement.get(n):void 0}setFirstEnabledItemIndex(){var n;this.currentIndex=null===(n=this.state._items)||void 0===n?void 0:n.findIndex(n=>!n._disabled)}handleKeyDown(n){var e,t,i,o,a;const l=n.code;if(![m.ArrowUp,m.ArrowDown,m.ArrowRight,m.ArrowLeft].includes(l))return;n.preventDefault();const r=(null!==(t=null===(e=this._items)||void 0===e?void 0:e.length)&&void 0!==t?t:0)-1;if(r<0)return;const s=this.currentIndex;let d=s;switch(l){case m.ArrowUp:case m.ArrowLeft:d=s>0?s-1:r;break;case m.ArrowDown:case m.ArrowRight:d=s<r?s+1:0}s!==d&&((null===(o=null===(i=this.state._items)||void 0===i?void 0:i[d])||void 0===o?void 0:o._disabled)||(this.currentIndex=d,null===(a=this.getCurrentToolbarItem(d))||void 0===a||a.kolFocus()))}handleBlur(n){n.target===this.host&&this.setFirstEnabledItemIndex()}componentWillLoad(){this.validateLabel(this._label),this.validateItems(this._items),this.validateOrientation(this._orientation),this.setFirstEnabledItemIndex()}get host(){return t(this)}static get watchers(){return{_label:["validateLabel"],_items:["validateItems"],_orientation:["validateOrientation"]}}};b.style={default:p};export{b as kol_toolbar};

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

@@ -1 +1 @@
-{"version":3,"names":["validateToolbarItems","component","value","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","Array","isArray","every","items","setState","defaultStyleCss","KolToolbarDefaultStyle0","TOOLBAR_ITEM_TAG_NAME","KolToolbar","this","indexToElement","Map","renderItem","element","index","tabIndex","currentIndex","_disabled","props","key","class","_tabIndex","catchRef","set","h","KolLinkTag","Object","assign","ref","KolButtonTag","_label","_items","render","Host","role","state","map","validateLabel","validateItems","getCurrentToolbarItem","get","undefined","setFirstEnabledItemIndex","_a","findIndex","item","handleKeyDown","event","isArrowKey","code","preventDefault","lastItemIndex","length","nextIndex","_b","kolFocus","handleBlur","target","host","componentWillLoad"],"sources":["src/schema/props/toolbar-items.ts","src/components/toolbar/style.scss?tag=kol-toolbar&mode=default&encapsulation=shadow","src/components/toolbar/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, setState } from '../utils';\nimport type { ButtonProps, LinkProps } from '../../schema';\n\n/* types */\nexport type ToolbarItemPropType = ButtonProps | LinkProps;\nexport type ToolbarItemsPropType = ToolbarItemPropType[];\n\n/**\n * Defines the primary toolbar items.\n */\nexport type PropToolbarItems = {\n\titems: ToolbarItemsPropType;\n};\n\n/* validator */\nexport const validateToolbarItems = (component: Generic.Element.Component, value?: ToolbarItemsPropType): void => {\n\temptyStringByArrayHandler(value, () => {\n\t\tobjectObjectHandler(value, () => {\n\t\t\tif (typeof value === 'undefined') {\n\t\t\t\tvalue = [];\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ToolbarItemPropType[]>(value);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value keeps the original items\n\t\t\t}\n\t\t\tif (Array.isArray(value) && value.every((items: ToolbarItemPropType) => typeof items === 'object' && items !== null)) {\n\t\t\t\tsetState(component, '_items', value);\n\t\t\t}\n\t\t});\n\t});\n};\n","@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.toolbar {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: rem(16);\n\t\tflex-wrap: wrap;\n\n\t\t&:focus-within {\n\t\t\toutline: rem(1) solid;\n\t\t\toutline-offset: rem(2);\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport type { LabelPropType, ToolbarAPI, ToolbarStates, ToolbarItemsPropType, ToolbarItemPropType } from '../../schema';\nimport { validateLabel, validateToolbarItems } from '../../schema';\nimport { KolLinkTag, KolButtonTag } from '../../core/component-names';\n\nconst TOOLBAR_ITEM_TAG_NAME = 'kol-toolbar-item';\n\n@Component({\n\ttag: 'kol-toolbar',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolToolbar implements ToolbarAPI {\n\t@Element() host!: HTMLElement;\n\n\t@State() public state: ToolbarStates = {\n\t\t_label: '',\n\t\t_items: [],\n\t};\n\n\t@State() private currentIndex: number = 0;\n\n\tprivate indexToElement = new Map<number, HTMLKolLinkElement | HTMLKolButtonElement>();\n\n\tprivate renderItem = (element: ToolbarItemPropType, index: number): JSX.Element => {\n\t\tconst tabIndex = index === this.currentIndex && !element?._disabled ? 0 : -1;\n\t\tconst props = {\n\t\t\tkey: index,\n\t\t\tclass: TOOLBAR_ITEM_TAG_NAME,\n\t\t\t_tabIndex: tabIndex,\n\t\t};\n\t\tconst catchRef = (element?: HTMLKolLinkElement | HTMLKolButtonElement) => {\n\t\t\telement && this.indexToElement.set(index, element);\n\t\t};\n\n\t\treturn '_href' in element ? (\n\t\t\t<KolLinkTag {...element} {...props} ref={catchRef}></KolLinkTag>\n\t\t) : (\n\t\t\t<KolButtonTag {...element} {...props} ref={catchRef}></KolButtonTag>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-toolbar\">\n\t\t\t\t<div class=\"toolbar\" role=\"toolbar\" aria-label={this.state._label}>\n\t\t\t\t\t{this.state._items.map(this.renderItem)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the semantic aria-label of the component.\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the functional elements of toolbar to render (e.g. kol-link, kol-button).\n\t */\n\t@Prop() public _items!: ToolbarItemsPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_items')\n\tpublic validateItems(value?: ToolbarItemsPropType): void {\n\t\tvalidateToolbarItems(this, value);\n\t}\n\n\t/**\n\t * Retrieves the toolbar item by index if defined.\n\t * If not it use the current index of state.\n\t *\n\t * @returns An array of HTMLElements representing the toolbar items.\n\t */\n\tprivate getCurrentToolbarItem(index?: number): ChildNode | undefined {\n\t\treturn typeof index === 'number' ? this.indexToElement.get(index) : undefined;\n\t}\n\n\t/**\n\t * Sets the index of the first enabled toolbar item.\n\t */\n\tprivate setFirstEnabledItemIndex() {\n\t\tthis.currentIndex = this.state._items?.findIndex((item) => !item._disabled);\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst isArrowKey = event.code === 'ArrowRight' || event.code === 'ArrowLeft';\n\t\tif (!isArrowKey) return;\n\t\tevent.preventDefault();\n\n\t\tconst lastItemIndex = this._items?.length - 1;\n\t\tconst currentIndex = this.currentIndex;\n\t\tlet nextIndex = 0;\n\n\t\tswitch (event.code) {\n\t\t\tcase 'ArrowLeft':\n\t\t\t\tnextIndex = currentIndex !== nextIndex ? currentIndex - 1 : lastItemIndex;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowRight':\n\t\t\t\tif (lastItemIndex !== currentIndex) nextIndex = currentIndex + 1;\n\t\t\t\tbreak;\n\t\t}\n\t\tif (currentIndex === nextIndex) return;\n\n\t\tthis.currentIndex = nextIndex;\n\t\tvoid (this.getCurrentToolbarItem(nextIndex) as HTMLKolLinkElement | HTMLKolButtonElement | undefined)?.kolFocus();\n\t}\n\n\t/**\n\t * Resets the tabIndexes of the toolbar to default.\n\t */\n\t@Listen('blur', { capture: true })\n\tpublic handleBlur(event: FocusEvent) {\n\t\tif (event.target === this.host) this.setFirstEnabledItemIndex();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateItems(this._items);\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n}\n"],"mappings":";;;iSAiBO,MAAMA,EAAuB,CAACC,EAAsCC,KAC1EC,EAA0BD,GAAO,KAChCE,EAAoBF,GAAO,KAC1B,UAAWA,IAAU,YAAa,CACjCA,EAAQ,E,CAET,IACCA,EAAQG,EAAiCH,E,CAExC,MAAOI,G,CAGT,GAAIC,MAAMC,QAAQN,IAAUA,EAAMO,OAAOC,UAAsCA,IAAU,UAAYA,IAAU,OAAO,CACrHC,EAASV,EAAW,SAAUC,E,IAE9B,GACD,ECjCH,MAAMU,EAAkB,2gJACxB,MAAAC,EAAeD,ECMf,MAAME,EAAwB,mB,MASjBC,EAAU,M,yBAUdC,KAAAC,eAAiB,IAAIC,IAErBF,KAAAG,WAAa,CAACC,EAA8BC,KACnD,MAAMC,EAAWD,IAAUL,KAAKO,gBAAiBH,IAAO,MAAPA,SAAO,SAAPA,EAASI,WAAY,GAAK,EAC3E,MAAMC,EAAQ,CACbC,IAAKL,EACLM,MAAOb,EACPc,UAAWN,GAEZ,MAAMO,EAAYT,IACjBA,GAAWJ,KAAKC,eAAea,IAAIT,EAAOD,EAAQ,EAGnD,MAAO,UAAWA,EACjBW,EAACC,EAAUC,OAAAC,OAAA,GAAKd,EAAaK,EAAK,CAAEU,IAAKN,KAEzCE,EAACK,EAAYH,OAAAC,OAAA,GAAKd,EAAaK,EAAK,CAAEU,IAAKN,IAC3C,E,WAxBqC,CACtCQ,OAAQ,GACRC,OAAQ,I,kBAG+B,E,4CAsBjC,MAAAC,GACN,OACCR,EAACS,EAAI,CAAAd,IAAA,2CAACC,MAAM,eACXI,EAAA,OAAAL,IAAA,2CAAKC,MAAM,UAAUc,KAAK,UAAS,aAAazB,KAAK0B,MAAML,QACzDrB,KAAK0B,MAAMJ,OAAOK,IAAI3B,KAAKG,a,CAgBf,aAAAyB,CAAc1C,GAC9B0C,EAAc5B,KAAMd,E,CAId,aAAA2C,CAAc3C,GACpBF,EAAqBgB,KAAMd,E,CASpB,qBAAA4C,CAAsBzB,GAC7B,cAAcA,IAAU,SAAWL,KAAKC,eAAe8B,IAAI1B,GAAS2B,S,CAM7D,wBAAAC,G,MACPjC,KAAKO,cAAe2B,EAAAlC,KAAK0B,MAAMJ,UAAM,MAAAY,SAAA,SAAAA,EAAEC,WAAWC,IAAUA,EAAK5B,W,CAI3D,aAAA6B,CAAcC,G,QACpB,MAAMC,EAAaD,EAAME,OAAS,cAAgBF,EAAME,OAAS,YACjE,IAAKD,EAAY,OACjBD,EAAMG,iBAEN,MAAMC,IAAgBR,EAAAlC,KAAKsB,UAAM,MAAAY,SAAA,SAAAA,EAAES,QAAS,EAC5C,MAAMpC,EAAeP,KAAKO,aAC1B,IAAIqC,EAAY,EAEhB,OAAQN,EAAME,MACb,IAAK,YACJI,EAAYrC,IAAiBqC,EAAYrC,EAAe,EAAImC,EAC5D,MACD,IAAK,aACJ,GAAIA,IAAkBnC,EAAcqC,EAAYrC,EAAe,EAC/D,MAEF,GAAIA,IAAiBqC,EAAW,OAEhC5C,KAAKO,aAAeqC,QACfC,EAAC7C,KAAK8B,sBAAsBc,MAAoE,MAAAC,SAAA,SAAAA,EAAEC,W,CAOjG,UAAAC,CAAWT,GACjB,GAAIA,EAAMU,SAAWhD,KAAKiD,KAAMjD,KAAKiC,0B,CAG/B,iBAAAiB,GACNlD,KAAK4B,cAAc5B,KAAKqB,QACxBrB,KAAK6B,cAAc7B,KAAKsB,QACxBtB,KAAKiC,0B","ignoreList":[]}
+{"version":3,"names":["registerInstance","h","getElement","__rest","emptyStringByArrayHandler","objectObjectHandler","parseJson","setState","validateLabel","KolLinkWcTag","KolButtonWcTag","validateOrientation","KeyboardKey","validateToolbarItems","component","value","e","Array","isArray","every","items","defaultStyleCss","KolToolbar","constructor","hostRef","this","state","_label","_items","currentIndex","indexToElement","Map","renderItem","raw","index","element","normalizeItem","tabIndex","_disabled","props","key","class","_tabIndex","catchRef","el","set","Object","assign","ref","item","_icons","rest","render","_orientation","role","map","validateItems","clear","setFirstEnabledItemIndex","getCurrentToolbarItem","get","undefined","_a","findIndex","handleKeyDown","event","_b","_c","_d","_e","pressedKey","code","isArrowKey","ArrowUp","ArrowDown","ArrowRight","ArrowLeft","includes","preventDefault","lastItemIndex","length","nextIndex","kolFocus","handleBlur","target","host","componentWillLoad","watchers","style","default"],"sources":["0"],"mappings":"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","ignoreList":[]}