@public-ui/components 2.0.15 → 2.1.0

package/dist/kolibri/kol-input-text.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolInputTextDefaultStyle0","KolInputText","getValue","_a","this","ref","value","render","ariaDescribedBy","getRenderStates","state","hasSuggestions","Array","isArray","_suggestions","length","hasExpertSlot","showExpertSlot","_label","h","Host","key","class","_hasValue","KolInputTag","_type","_hideLabel","_accessKey","_currentLength","_disabled","_hasCounter","_hideError","_hint","_icons","_id","_maxLength","_msg","_readOnly","_required","_smartButton","_tooltipAlign","_touched","onClick","focus","role","slot","name","Fragment","InternalUnderlinedAccessKey","accessKey","label","Object","assign","catchRef","title","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","id","list","maxlength","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","spellcheck","type","_value","controller","onFacade","onChange","onInput","onKeyDown","constructor","hostRef","propagateFocus","host","event","oldValue","_b","setState","target","code","propagateSubmitEventToForm","form","nonce","InputTextController","validateAccessKey","validateAlert","validateAutoComplete","validateDisabled","validateError","validateHasCounter","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMaxLength","validateMsg","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateSuggestions","validateSmartButton","validateSyncValueBySelector","validateTabIndex","validateTouched","validateType","validateValue","componentWillLoad","_alert","addValueChangeListener","v"],"sources":["src/components/input-text/style.scss?tag=kol-input-text&mode=default&encapsulation=shadow","src/components/input-text/component.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../input-line';\n@import '../@shared/kol-alert-mixin.scss';\n\n@include kol-alert-styles;\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n}\n","import type {\n\tAlertPropType,\n\tButtonProps,\n\tHideErrorPropType,\n\tIdPropType,\n\tInputTextAPI,\n\tInputTextStates,\n\tInputTextType,\n\tInputTypeOnDefault,\n\tInputTypeOnOff,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '@public-ui/schema';\nimport { propagateFocus, setState, showExpertSlot, validateAlert } from '@public-ui/schema';\nimport { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\nimport { InputTextController } from './controller';\n\nimport type { JSX } from '@stencil/core';\nimport { KolInputTag } from '../../core/component-names';\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputText implements InputTextAPI {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate ref?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.oldValue !== this.ref?.value) {\n\t\t\tthis.oldValue = this.ref?.value;\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tsetState(this, '_currentLength', (event.target as HTMLInputElement).value.length);\n\t\tthis.controller.onFacade.onInput(event);\n\t};\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t}\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.ref?.value;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t\t'kol-input-text': true,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<KolInputTag\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._type]: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this.state._accessKey}\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_hasCounter={this.state._hasCounter}\n\t\t\t\t\t_hideError={this.state._hideError}\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_smartButton={this.state._smartButton}\n\t\t\t\t\t_suggestions={this.state._suggestions}\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.ref?.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' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} 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{this.state._accessKey}\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<input\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\tautoComplete={this.state._autoComplete}\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\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\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\tpattern={this.state._pattern}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\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\tspellcheck=\"false\"\n\t\t\t\t\t\t\ttype={this.state._type}\n\t\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\tonInput={this.onInput}\n\t\t\t\t\t\t\tonKeyDown={this.onKeyDown}\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: InputTextController;\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 * Defines whether the screen-readers should read out the notification.\n\t * @TODO: Change type back to `AlertPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\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?: Stringified<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?: 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 a validation pattern for the input field.\n\t */\n\t@Prop() public _pattern?: string;\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 * 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 * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\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 either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: InputTextType = 'text';\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: InputTextStates = {\n\t\t_autoComplete: 'off',\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_suggestions: [],\n\t\t_type: 'text',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'text', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: AlertPropType): void {\n\t\tvalidateAlert(this, value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_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?: 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('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(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('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(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('_type')\n\tpublic validateType(value?: InputTextType): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.oldValue = this._value;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["validateAlert","component","value","watchBoolean","defaultStyleCss","KolInputTextDefaultStyle0","KolInputText","getValue","_a","this","ref","render","ariaDescribedBy","getRenderStates","state","hasSuggestions","Array","isArray","_suggestions","length","hasExpertSlot","showExpertSlot","_label","h","Host","key","class","_hasValue","KolInputTag","_type","_hideLabel","_accessKey","_currentLength","_disabled","_hasCounter","_hideError","_hint","_icons","_id","_maxLength","_msg","_readOnly","_required","_smartButton","_tooltipAlign","_touched","onClick","focus","role","slot","name","Fragment","InternalUnderlinedAccessKey","accessKey","label","Object","assign","catchRef","title","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","id","list","maxlength","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","spellcheck","type","_value","controller","onFacade","onChange","onInput","onKeyDown","constructor","hostRef","propagateFocus","host","event","oldValue","_b","setState","target","code","propagateSubmitEventToForm","form","nonce","InputTextController","validateAccessKey","validateAutoComplete","validateDisabled","validateError","validateHasCounter","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMaxLength","validateMsg","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateSuggestions","validateSmartButton","validateSyncValueBySelector","validateTabIndex","validateTouched","validateType","validateValue","componentWillLoad","_alert","addValueChangeListener","v"],"sources":["src/schema/props/alert.ts","src/components/input-text/style.scss?tag=kol-input-text&mode=default&encapsulation=shadow","src/components/input-text/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type AlertPropType = boolean;\n\n/**\n * Defines whether the screen-readers should read out the notification.\n */\nexport type PropAlert = {\n\talert: AlertPropType;\n};\n\n/* validator */\nexport const validateAlert = (component: Generic.Element.Component, value?: AlertPropType): void => {\n\twatchBoolean(component, '_alert', value);\n};\n","@import '../@shared/mixins';\n@import '../input-line';\n@import '../@shared/kol-alert-mixin.scss';\n\n@include kol-alert-styles;\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n}\n","import type {\n\tAlertPropType,\n\tButtonProps,\n\tHideErrorPropType,\n\tIdPropType,\n\tInputTextAPI,\n\tInputTextStates,\n\tInputTextType,\n\tInputTypeOnDefault,\n\tInputTypeOnOff,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { propagateFocus, setState, showExpertSlot, validateAlert } from '../../schema';\nimport { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\nimport { InputTextController } from './controller';\n\nimport type { JSX } from '@stencil/core';\nimport { KolInputTag } from '../../core/component-names';\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputText implements InputTextAPI {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate ref?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.oldValue !== this.ref?.value) {\n\t\t\tthis.oldValue = this.ref?.value;\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tsetState(this, '_currentLength', (event.target as HTMLInputElement).value.length);\n\t\tthis.controller.onFacade.onInput(event);\n\t};\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t}\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.ref?.value;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t\t'kol-input-text': true,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<KolInputTag\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._type]: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this.state._accessKey}\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_hasCounter={this.state._hasCounter}\n\t\t\t\t\t_hideError={this.state._hideError}\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_smartButton={this.state._smartButton}\n\t\t\t\t\t_suggestions={this.state._suggestions}\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.ref?.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' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} 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{this.state._accessKey}\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<input\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\tautoComplete={this.state._autoComplete}\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\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\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\tpattern={this.state._pattern}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\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\tspellcheck=\"false\"\n\t\t\t\t\t\t\ttype={this.state._type}\n\t\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\tonInput={this.onInput}\n\t\t\t\t\t\t\tonKeyDown={this.onKeyDown}\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: InputTextController;\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 * Defines whether the screen-readers should read out the notification.\n\t * @TODO: Change type back to `AlertPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\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?: Stringified<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?: 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 a validation pattern for the input field.\n\t */\n\t@Prop() public _pattern?: string;\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 * 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 * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\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 either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: InputTextType = 'text';\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: InputTextStates = {\n\t\t_autoComplete: 'off',\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_suggestions: [],\n\t\t_type: 'text',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'text', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: AlertPropType): void {\n\t\tvalidateAlert(this, value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_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?: 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('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(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('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(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('_type')\n\tpublic validateType(value?: InputTextType): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.oldValue = this._value;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as i,F as t,H as s,g as a}from"./index-3fbcceca.js";import{aK as d,I as o}from"./index-44da6e7f.js";import{t as n}from"./i18n-7bf2bd6f.js";import{F as f}from"./form-field-msg-244f6083.js";import{a as l,g as h,c as r}from"./component-names-ed22f86e.js";import"./i18n-0c047df5.js";function c(i){var t,e,s="";if("string"==typeof i||"number"==typeof i)s+=i;else if("object"==typeof i)if(Array.isArray(i)){var o=i.length;for(t=0;t<o;t++)i[t]&&(e=c(i[t]))&&(s&&(s+=" "),s+=e)}else for(e in i)i[e]&&(s&&(s+=" "),s+=e);return s}function u(){for(var i,t,e=0,s="",o=arguments.length;e<o;e++)(i=arguments[e])&&(t=c(i))&&(s&&(s+=" "),s+=t);return s}const b=class{constructor(i){e(this,i),this.slotName="input",this.catchInputSlot=i=>{d(this.host,i,this.slotName)},this._accessKey=void 0,this._alert=!0,this._currentLength=void 0,this._disabled=!1,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._readOnly=!1,this._renderNoLabel=!1,this._required=!1,this._slotName=void 0,this._suggestions=void 0,this._smartButton=void 0,this._tooltipAlign="top",this._touched=!1}componentWillRender(){this.slotName=this._slotName?this._slotName:"input"}getIconStyles(i){return i&&"object"==typeof i&&i.style?i.style:{}}render(){var e,a,d,c,_,b,m,g,p,y,v,k;const B=Boolean("error"===(null===(e=this._msg)||void 0===e?void 0:e._type)&&this._msg._description&&(null===(a=this._msg._description)||void 0===a?void 0:a.length)>0),j=!this._readOnly&&B&&!0===this._touched,L=Boolean(j||"error"!==(null===(d=this._msg)||void 0===d?void 0:d._type)&&(null===(c=this._msg)||void 0===c?void 0:c._description)),N=o(this._label),A="string"==typeof this._hint&&this._hint.length>0,x=!N&&this._hideLabel;return i(s,{key:"8252bdffbfd6563aeaf125b5b67e9d55f2583bda",class:u("kol-input",this.getModifierClassNameByMsgType(),{disabled:!0===this._disabled,error:!0===j,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched,"hidden-error":!0===this._hideError})},i("label",{key:"5b687b0fc10212e4ad903975682c571c351f499f",class:"input-label",id:x?void 0:`${this._id}-label`,hidden:x,htmlFor:this._id},i("span",{key:"a27ab1747c51e0ef950312eae7f6a3eb4fb92cc8",class:"input-label-span"},i("slot",{key:"ea7c6f61e71e2f665c55c4240c54358f1f5c65e1",name:"label"}))),A&&i("span",{key:"92a7226e070e588bfb423726a55d88c3ddf33149",class:"hint",id:`${this._id}-hint`},this._hint),i("div",{key:"f07afe67765e4e267c633f94fd0ce240a12d97ae",class:{input:!0,"icon-left":"object"==typeof(null===(_=this._icons)||void 0===_?void 0:_.left),"icon-right":"object"==typeof(null===(b=this._icons)||void 0===b?void 0:b.right)}},(null===(m=this._icons)||void 0===m?void 0:m.left)&&i(h,{key:"ec32c7a63bddaaa7797d8fcfd1bd6d56870241ed",_label:"",_icons:(null===(g=this._icons)||void 0===g?void 0:g.left).icon,style:this.getIconStyles(null===(p=this._icons)||void 0===p?void 0:p.left)}),i("div",{key:"40134dcfd7e5ffeed24b16b4c70ccacf2e7b5c26",ref:this.catchInputSlot,id:this.slotName,class:"input-slot"}),"object"==typeof this._smartButton&&null!==this._smartButton&&i(r,{key:"488299e9041bdbf0ffc7fc93f2fbb1ce838e35cf",_customClass:this._smartButton._customClass,_disabled:this._smartButton._disabled,_icons:this._smartButton._icons,_hideLabel:!0,_id:this._smartButton._id,_label:this._smartButton._label,_on:this._smartButton._on,_tooltipAlign:this._smartButton._tooltipAlign,_variant:this._smartButton._variant}),(null===(y=this._icons)||void 0===y?void 0:y.right)&&i(h,{key:"3f24020b19c35572293fecde959feeecfe0e8847",_label:"",_icons:(null===(v=this._icons)||void 0===v?void 0:v.right).icon,style:this.getIconStyles(null===(k=this._icons)||void 0===k?void 0:k.right)})),x&&i(l,{key:"6b5d44a5ae88228110ed4e2d39eea2e3aca2a708","aria-hidden":"true",class:"input-tooltip",_accessKey:this._accessKey,_align:this._tooltipAlign,_id:this._hideLabel?`${this._id}-label`:void 0,_label:this._label}),L&&i(f,{key:"f41ba0206412d499fe66325e4f3893620c0fb5d5",_alert:this._alert,_hideError:this._hideError,_msg:this._msg,_id:this._id}),Array.isArray(this._suggestions)&&this._suggestions.length>0&&i("datalist",{key:"7d4502e1e3a81e2c5e51437a7fafef665a0bb8d6",id:`${this._id}-list`},this._suggestions.map((t=>i("option",{value:t})))),this._hasCounter&&i("span",{key:"12acf32b3b95f150100c8f402a739a91dd1e0ab3",class:"counter","aria-atomic":"true","aria-live":"polite"},this._currentLength,this._maxLength&&i(t,null,i("span",{key:"9ce173b5e3eb5309ff158796b2de80a35966f5a4","aria-label":n("kol-of"),role:"img"},"/"),this._maxLength)," ",i("span",{key:"e6b4a93cca61a4a6ff1957ff46d1701b12dae253"},n("kol-characters"))))}getModifierClassNameByMsgType(){var i,t;if(null===(i=this._msg)||void 0===i?void 0:i._type)return{default:"msg-type-default",info:"msg-type-info",success:"msg-type-success",warning:"msg-type-warning",error:"msg-type-error"}[null===(t=this._msg)||void 0===t?void 0:t._type]}get host(){return a(this)}};export{b as kol_input};
+import{r as i,h as t,F as e,H as s,g as a}from"./index-3fbcceca.js";import{t as d}from"./i18n-37baa421.js";import{F as o}from"./form-field-msg-244f6083.js";import{a as n,g as l,c as h}from"./component-names-ed22f86e.js";import{h as r,s as f}from"./reuse-b66836de.js";import"./i18n-0c047df5.js";function c(t){var i,s,e="";if("string"==typeof t||"number"==typeof t)e+=t;else if("object"==typeof t)if(Array.isArray(t)){var o=t.length;for(i=0;i<o;i++)t[i]&&(s=c(t[i]))&&(e&&(e+=" "),e+=s)}else for(s in t)t[s]&&(e&&(e+=" "),e+=s);return e}function u(){for(var t,i,s=0,e="",o=arguments.length;s<o;s++)(t=arguments[s])&&(i=c(t))&&(e&&(e+=" "),e+=i);return e}const b=class{constructor(t){i(this,t),this.slotName="input",this.catchInputSlot=t=>{r(this.host,t,this.slotName)},this._accessKey=void 0,this._alert=!0,this._currentLength=void 0,this._disabled=!1,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._readOnly=!1,this._renderNoLabel=!1,this._required=!1,this._slotName=void 0,this._suggestions=void 0,this._smartButton=void 0,this._tooltipAlign="top",this._touched=!1}componentWillRender(){this.slotName=this._slotName?this._slotName:"input"}getIconStyles(t){return t&&"object"==typeof t&&t.style?t.style:{}}render(){var i,a,r,c,_,b,m,g,p,y,v,k;const B=Boolean("error"===(null===(i=this._msg)||void 0===i?void 0:i._type)&&this._msg._description&&(null===(a=this._msg._description)||void 0===a?void 0:a.length)>0),j=!this._readOnly&&B&&!0===this._touched,L=Boolean(j||"error"!==(null===(r=this._msg)||void 0===r?void 0:r._type)&&(null===(c=this._msg)||void 0===c?void 0:c._description)),N=f(this._label),A="string"==typeof this._hint&&this._hint.length>0,C=!N&&this._hideLabel;return t(s,{key:"b072543f7641ef363994245d06c7f2bd764f753f",class:u("kol-input",this.getModifierClassNameByMsgType(),{disabled:!0===this._disabled,error:!0===j,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched,"hidden-error":!0===this._hideError})},t("label",{key:"c1477c93278760eb904c8be41af9e2d616172455",class:"input-label",id:C?void 0:`${this._id}-label`,hidden:C,htmlFor:this._id},t("span",{key:"56168b5b34ff6cb4fcf61ee06b10319ac4e5011a",class:"input-label-span"},t("slot",{key:"a5d86e031f9de5ab58df928c01b6f3495afa73aa",name:"label"}))),A&&t("span",{key:"9eb13cd9be0d8f3b292e4741b9b5e3a30f87ea57",class:"hint",id:`${this._id}-hint`},this._hint),t("div",{key:"544a5b66396437d9d204377a26b5a7f8b4920aa7",class:{input:!0,"icon-left":"object"==typeof(null===(_=this._icons)||void 0===_?void 0:_.left),"icon-right":"object"==typeof(null===(b=this._icons)||void 0===b?void 0:b.right)}},(null===(m=this._icons)||void 0===m?void 0:m.left)&&t(l,{key:"52f24a7649e61ba65586fa4fcd718af977188b2d",_label:"",_icons:(null===(g=this._icons)||void 0===g?void 0:g.left).icon,style:this.getIconStyles(null===(p=this._icons)||void 0===p?void 0:p.left)}),t("div",{key:"ca294a18ec2654cf6f645ff3c3fd0810acc671a7",ref:this.catchInputSlot,id:this.slotName,class:"input-slot"}),"object"==typeof this._smartButton&&null!==this._smartButton&&t(h,{key:"bf192702fd5569ad649a0df9468b0ed269263226",_customClass:this._smartButton._customClass,_disabled:this._smartButton._disabled,_icons:this._smartButton._icons,_hideLabel:!0,_id:this._smartButton._id,_label:this._smartButton._label,_on:this._smartButton._on,_tooltipAlign:this._smartButton._tooltipAlign,_variant:this._smartButton._variant}),(null===(y=this._icons)||void 0===y?void 0:y.right)&&t(l,{key:"cdbd580ebe51b27dbf57a23cf6cb4b9a0dc52c93",_label:"",_icons:(null===(v=this._icons)||void 0===v?void 0:v.right).icon,style:this.getIconStyles(null===(k=this._icons)||void 0===k?void 0:k.right)})),C&&t(n,{key:"36299e559eaaf1542fa14aee60ea18ce5ad43d27","aria-hidden":"true",class:"input-tooltip",_accessKey:this._accessKey,_align:this._tooltipAlign,_id:this._hideLabel?`${this._id}-label`:void 0,_label:this._label}),L&&t(o,{key:"1ef7bb15638c51e4905126e53d55c0bd78401014",_alert:this._alert,_hideError:this._hideError,_msg:this._msg,_id:this._id}),Array.isArray(this._suggestions)&&this._suggestions.length>0&&t("datalist",{key:"2140b9cf07bc0cc2cd6b68d96c51aea78261c7b6",id:`${this._id}-list`},this._suggestions.map((i=>t("option",{value:i})))),this._hasCounter&&t("span",{key:"25ca509e7a4a52187a3b6fc47d66c4d03a241b23",class:"counter","aria-atomic":"true","aria-live":"polite"},this._currentLength,this._maxLength&&t(e,null,t("span",{key:"1ed61d7a3113d4a5dcfa88988d16d5c0521c8501","aria-label":d("kol-of"),role:"img"},"/"),this._maxLength)," ",t("span",{key:"c460083b600b8b402dc533987cbc542824476036"},d("kol-characters"))))}getModifierClassNameByMsgType(){var t,i;if(null===(t=this._msg)||void 0===t?void 0:t._type)return{default:"msg-type-default",info:"msg-type-info",success:"msg-type-success",warning:"msg-type-warning",error:"msg-type-error"}[null===(i=this._msg)||void 0===i?void 0:i._type]}get host(){return a(this)}};export{b as kol_input};

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

@@ -1 +1 @@
-{"version":3,"names":["r","e","t","f","n","Array","isArray","o","length","clsx","arguments","KolInput","this","slotName","catchInputSlot","slot","handleSlotContent","host","componentWillRender","_slotName","getIconStyles","icon","style","render","isMessageValidError","Boolean","_a","_msg","_type","_description","_b","hasError","_readOnly","_touched","showFormFieldMsg","_c","_d","hasExpertSlot","showExpertSlot","_label","hasHint","_hint","useTooltopInsteadOfLabel","_hideLabel","h","Host","key","class","getModifierClassNameByMsgType","disabled","_disabled","error","required","_required","touched","_hideError","id","_id","undefined","hidden","htmlFor","name","input","_e","_icons","left","_f","right","_g","KolIconTag","_h","_j","ref","_smartButton","KolButtonWcTag","_customClass","_on","_tooltipAlign","_variant","_k","_l","_m","KolTooltipWcTag","_accessKey","_align","FormFieldMsg","_alert","_suggestions","map","option","value","_hasCounter","_currentLength","_maxLength","Fragment","translate","role","default","info","success","warning"],"sources":["../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs","src/components/input/component.tsx"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","/* eslint-disable jsx-a11y/label-has-associated-control */\nimport { handleSlotContent, type MsgPropType, showExpertSlot } from '@public-ui/schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { translate } from '../../i18n';\n\nimport type {\n\tAccessKeyPropType,\n\tAnyIconFontClass,\n\tButtonProps,\n\tIdPropType,\n\tKoliBriCustomIcon,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '@public-ui/schema';\nimport { FormFieldMsg } from '../@shared/form-field-msg';\nimport type { Props } from './types';\nimport { KolButtonWcTag, KolIconTag, KolTooltipWcTag } from '../../core/component-names';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-input',\n\tshadow: false,\n})\nexport class KolInput implements Props {\n\t@Element() private readonly host?: HTMLElement;\n\n\tprivate slotName: string = 'input';\n\n\tpublic componentWillRender(): void {\n\t\tthis.slotName = this._slotName ? this._slotName : 'input';\n\t}\n\n\tprivate catchInputSlot = (slot?: HTMLDivElement): void => {\n\t\thandleSlotContent(this.host!, slot!, this.slotName);\n\t};\n\n\tprivate getIconStyles(icon?: AnyIconFontClass | KoliBriCustomIcon): Record<string, string> {\n\t\treturn icon && typeof icon === 'object' && icon.style ? icon.style : {};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst isMessageValidError = Boolean(this._msg?._type === 'error' && this._msg._description && this._msg._description?.length > 0);\n\t\tconst hasError = !this._readOnly && isMessageValidError && this._touched === true;\n\t\tconst showFormFieldMsg = Boolean(hasError || (this._msg?._type !== 'error' && this._msg?._description));\n\t\tconst hasExpertSlot = showExpertSlot(this._label);\n\t\tconst hasHint = typeof this._hint === 'string' && this._hint.length > 0;\n\t\tconst useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={clsx('kol-input', this.getModifierClassNameByMsgType(), {\n\t\t\t\t\tdisabled: this._disabled === true,\n\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t'read-only': this._readOnly === true,\n\t\t\t\t\trequired: this._required === true,\n\t\t\t\t\ttouched: this._touched === true,\n\t\t\t\t\t'hidden-error': this._hideError === true,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<label class=\"input-label\" id={!useTooltopInsteadOfLabel ? `${this._id}-label` : undefined} hidden={useTooltopInsteadOfLabel} htmlFor={this._id}>\n\t\t\t\t\t{/* INFO: span is needed for css styling :after content like a star (*) or optional text ! */}\n\t\t\t\t\t<span class=\"input-label-span\">\n\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! */}\n\t\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t\t</span>\n\t\t\t\t</label>\n\t\t\t\t{hasHint && (\n\t\t\t\t\t<span class=\"hint\" id={`${this._id}-hint`}>\n\t\t\t\t\t\t{this._hint}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tinput: true,\n\t\t\t\t\t\t'icon-left': typeof this._icons?.left === 'object',\n\t\t\t\t\t\t'icon-right': typeof this._icons?.right === 'object',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this._icons?.left && (\n\t\t\t\t\t\t<KolIconTag _label=\"\" _icons={(this._icons?.left as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.left)}></KolIconTag>\n\t\t\t\t\t)}\n\t\t\t\t\t<div ref={this.catchInputSlot} id={this.slotName} class=\"input-slot\"></div>\n\t\t\t\t\t{typeof this._smartButton === 'object' && this._smartButton !== null && (\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t_customClass={this._smartButton._customClass}\n\t\t\t\t\t\t\t_disabled={this._smartButton._disabled}\n\t\t\t\t\t\t\t_icons={this._smartButton._icons}\n\t\t\t\t\t\t\t_hideLabel={true}\n\t\t\t\t\t\t\t_id={this._smartButton._id}\n\t\t\t\t\t\t\t_label={this._smartButton._label}\n\t\t\t\t\t\t\t_on={this._smartButton._on}\n\t\t\t\t\t\t\t_tooltipAlign={this._smartButton._tooltipAlign}\n\t\t\t\t\t\t\t_variant={this._smartButton._variant}\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t)}\n\t\t\t\t\t{this._icons?.right && (\n\t\t\t\t\t\t<KolIconTag _label=\"\" _icons={(this._icons?.right as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.right)}></KolIconTag>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{useTooltopInsteadOfLabel && (\n\t\t\t\t\t<KolTooltipWcTag\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t */\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclass=\"input-tooltip\"\n\t\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t_id={this._hideLabel ? `${this._id}-label` : undefined}\n\t\t\t\t\t\t_label={this._label}\n\t\t\t\t\t></KolTooltipWcTag>\n\t\t\t\t)}\n\t\t\t\t{showFormFieldMsg && <FormFieldMsg _alert={this._alert} _hideError={this._hideError} _msg={this._msg} _id={this._id} />}\n\t\t\t\t{Array.isArray(this._suggestions) && this._suggestions.length > 0 && (\n\t\t\t\t\t<datalist id={`${this._id}-list`}>\n\t\t\t\t\t\t{this._suggestions.map((option: W3CInputValue) => (\n\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</datalist>\n\t\t\t\t)}\n\t\t\t\t{this._hasCounter && (\n\t\t\t\t\t<span class=\"counter\" aria-atomic=\"true\" aria-live=\"polite\">\n\t\t\t\t\t\t{this._currentLength}\n\t\t\t\t\t\t{this._maxLength && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<span aria-label={translate('kol-of')} role=\"img\">\n\t\t\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{this._maxLength}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t<span>{translate('kol-characters')}</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the elements access key.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t * @TODO: Change type back to `AlertPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _alert?: boolean = true;\n\n\t/**\n\t * @internal\n\t */\n\t@Prop() public _currentLength?: number;\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 * 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() 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?: MsgPropType;\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 * Gibt an, ob die Komponente kein Label rendern soll.\n\t */\n\t@Prop() public _renderNoLabel?: boolean = false;\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 * Ermöglicht den Slotnamen zu bestimmen. Wird nur verwendet, wenn sonst mehrere Slots mit dem gleichen Namen innerhalb eines Shadow DOMs existieren würden.\n\t * @internal\n\t */\n\t@Prop() public _slotName?: string;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\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() public _touched?: boolean = false;\n\n\tprivate getModifierClassNameByMsgType() {\n\t\tif (this._msg?._type) {\n\t\t\treturn {\n\t\t\t\tdefault: 'msg-type-default',\n\t\t\t\tinfo: 'msg-type-info',\n\t\t\t\tsuccess: 'msg-type-success',\n\t\t\t\twarning: 'msg-type-warning',\n\t\t\t\terror: 'msg-type-error',\n\t\t\t}[this._msg?._type];\n\t\t}\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["r","e","t","f","n","Array","isArray","o","length","clsx","arguments","KolInput","this","slotName","catchInputSlot","slot","handleSlotContent","host","componentWillRender","_slotName","getIconStyles","icon","style","render","isMessageValidError","Boolean","_a","_msg","_type","_description","_b","hasError","_readOnly","_touched","showFormFieldMsg","_c","_d","hasExpertSlot","showExpertSlot","_label","hasHint","_hint","useTooltopInsteadOfLabel","_hideLabel","h","Host","key","class","getModifierClassNameByMsgType","disabled","_disabled","error","required","_required","touched","_hideError","id","_id","undefined","hidden","htmlFor","name","input","_e","_icons","left","_f","right","_g","KolIconTag","_h","_j","ref","_smartButton","KolButtonWcTag","_customClass","_on","_tooltipAlign","_variant","_k","_l","_m","KolTooltipWcTag","_accessKey","_align","FormFieldMsg","_alert","_suggestions","map","option","value","_hasCounter","_currentLength","_maxLength","Fragment","translate","role","default","info","success","warning"],"sources":["../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs","src/components/input/component.tsx"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","/* eslint-disable jsx-a11y/label-has-associated-control */\nimport { handleSlotContent, type MsgPropType, showExpertSlot } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { translate } from '../../i18n';\n\nimport type {\n\tAccessKeyPropType,\n\tAnyIconFontClass,\n\tButtonProps,\n\tIdPropType,\n\tKoliBriCustomIcon,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '../../schema';\nimport { FormFieldMsg } from '../@shared/form-field-msg';\nimport type { Props } from './types';\nimport { KolButtonWcTag, KolIconTag, KolTooltipWcTag } from '../../core/component-names';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-input',\n\tshadow: false,\n})\nexport class KolInput implements Props {\n\t@Element() private readonly host?: HTMLElement;\n\n\tprivate slotName: string = 'input';\n\n\tpublic componentWillRender(): void {\n\t\tthis.slotName = this._slotName ? this._slotName : 'input';\n\t}\n\n\tprivate catchInputSlot = (slot?: HTMLDivElement): void => {\n\t\thandleSlotContent(this.host!, slot!, this.slotName);\n\t};\n\n\tprivate getIconStyles(icon?: AnyIconFontClass | KoliBriCustomIcon): Record<string, string> {\n\t\treturn icon && typeof icon === 'object' && icon.style ? icon.style : {};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst isMessageValidError = Boolean(this._msg?._type === 'error' && this._msg._description && this._msg._description?.length > 0);\n\t\tconst hasError = !this._readOnly && isMessageValidError && this._touched === true;\n\t\tconst showFormFieldMsg = Boolean(hasError || (this._msg?._type !== 'error' && this._msg?._description));\n\t\tconst hasExpertSlot = showExpertSlot(this._label);\n\t\tconst hasHint = typeof this._hint === 'string' && this._hint.length > 0;\n\t\tconst useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={clsx('kol-input', this.getModifierClassNameByMsgType(), {\n\t\t\t\t\tdisabled: this._disabled === true,\n\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t'read-only': this._readOnly === true,\n\t\t\t\t\trequired: this._required === true,\n\t\t\t\t\ttouched: this._touched === true,\n\t\t\t\t\t'hidden-error': this._hideError === true,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<label class=\"input-label\" id={!useTooltopInsteadOfLabel ? `${this._id}-label` : undefined} hidden={useTooltopInsteadOfLabel} htmlFor={this._id}>\n\t\t\t\t\t{/* INFO: span is needed for css styling :after content like a star (*) or optional text ! */}\n\t\t\t\t\t<span class=\"input-label-span\">\n\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! */}\n\t\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t\t</span>\n\t\t\t\t</label>\n\t\t\t\t{hasHint && (\n\t\t\t\t\t<span class=\"hint\" id={`${this._id}-hint`}>\n\t\t\t\t\t\t{this._hint}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tinput: true,\n\t\t\t\t\t\t'icon-left': typeof this._icons?.left === 'object',\n\t\t\t\t\t\t'icon-right': typeof this._icons?.right === 'object',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this._icons?.left && (\n\t\t\t\t\t\t<KolIconTag _label=\"\" _icons={(this._icons?.left as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.left)}></KolIconTag>\n\t\t\t\t\t)}\n\t\t\t\t\t<div ref={this.catchInputSlot} id={this.slotName} class=\"input-slot\"></div>\n\t\t\t\t\t{typeof this._smartButton === 'object' && this._smartButton !== null && (\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t_customClass={this._smartButton._customClass}\n\t\t\t\t\t\t\t_disabled={this._smartButton._disabled}\n\t\t\t\t\t\t\t_icons={this._smartButton._icons}\n\t\t\t\t\t\t\t_hideLabel={true}\n\t\t\t\t\t\t\t_id={this._smartButton._id}\n\t\t\t\t\t\t\t_label={this._smartButton._label}\n\t\t\t\t\t\t\t_on={this._smartButton._on}\n\t\t\t\t\t\t\t_tooltipAlign={this._smartButton._tooltipAlign}\n\t\t\t\t\t\t\t_variant={this._smartButton._variant}\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t)}\n\t\t\t\t\t{this._icons?.right && (\n\t\t\t\t\t\t<KolIconTag _label=\"\" _icons={(this._icons?.right as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.right)}></KolIconTag>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{useTooltopInsteadOfLabel && (\n\t\t\t\t\t<KolTooltipWcTag\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t */\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclass=\"input-tooltip\"\n\t\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t_id={this._hideLabel ? `${this._id}-label` : undefined}\n\t\t\t\t\t\t_label={this._label}\n\t\t\t\t\t></KolTooltipWcTag>\n\t\t\t\t)}\n\t\t\t\t{showFormFieldMsg && <FormFieldMsg _alert={this._alert} _hideError={this._hideError} _msg={this._msg} _id={this._id} />}\n\t\t\t\t{Array.isArray(this._suggestions) && this._suggestions.length > 0 && (\n\t\t\t\t\t<datalist id={`${this._id}-list`}>\n\t\t\t\t\t\t{this._suggestions.map((option: W3CInputValue) => (\n\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</datalist>\n\t\t\t\t)}\n\t\t\t\t{this._hasCounter && (\n\t\t\t\t\t<span class=\"counter\" aria-atomic=\"true\" aria-live=\"polite\">\n\t\t\t\t\t\t{this._currentLength}\n\t\t\t\t\t\t{this._maxLength && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<span aria-label={translate('kol-of')} role=\"img\">\n\t\t\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{this._maxLength}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t<span>{translate('kol-characters')}</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the elements access key.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t * @TODO: Change type back to `AlertPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _alert?: boolean = true;\n\n\t/**\n\t * @internal\n\t */\n\t@Prop() public _currentLength?: number;\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 * 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() 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?: MsgPropType;\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 * Gibt an, ob die Komponente kein Label rendern soll.\n\t */\n\t@Prop() public _renderNoLabel?: boolean = false;\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 * Ermöglicht den Slotnamen zu bestimmen. Wird nur verwendet, wenn sonst mehrere Slots mit dem gleichen Namen innerhalb eines Shadow DOMs existieren würden.\n\t * @internal\n\t */\n\t@Prop() public _slotName?: string;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\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() public _touched?: boolean = false;\n\n\tprivate getModifierClassNameByMsgType() {\n\t\tif (this._msg?._type) {\n\t\t\treturn {\n\t\t\t\tdefault: 'msg-type-default',\n\t\t\t\tinfo: 'msg-type-info',\n\t\t\t\tsuccess: 'msg-type-success',\n\t\t\t\twarning: 'msg-type-warning',\n\t\t\t\terror: 'msg-type-error',\n\t\t\t}[this._msg?._type];\n\t\t}\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-3fbcceca.js";import{ac as i,R as o,o as a,z as l}from"./index-44da6e7f.js";import{t as s}from"./i18n-7bf2bd6f.js";import"./i18n-0c047df5.js";const r="/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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  .hidden {\n    display: none;\n    visibility: hidden;\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: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  text {\n    font-size: 90px;\n    letter-spacing: normal;\n    word-spacing: normal;\n  }\n  svg {\n    max-height: 100%;\n  }\n}",d=r,h=class{constructor(e){n(this,e),this.handleColorChange=(e,n)=>{if("string"==typeof e){const t=i(e);n.set("_color",{red:t[0],green:t[1],blue:t[2]})}else o("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._color="#003c78",this._labeled=!0,this.state={_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const n=`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return e(t,{key:"564ebf5b7bcc35a66ac119a885d840060388952d",class:"kol-kolibri"},e("svg",{key:"eab498755abb03ff07828d355b336b763be71729",role:"img","aria-label":s("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:n},e("path",{key:"150506ef641f670458fa9a767629a692d2db9ef1",d:"M353 322L213 304V434L353 322Z"}),e("path",{key:"3a71e89612ccaf509c13a50c307b6fed0088b4ff",d:"M209 564V304L149 434L209 564Z"}),e("path",{key:"62e3558e0d84fa6de0f725cbb9f771d216209c4c",d:"M357 316L417 250L361 210L275 244L357 316Z"}),e("path",{key:"d7090215e7e76f48658b9efabccac047e47b6f7a",d:"M329 218L237 92L250 222L272 241L329 218Z"}),e("path",{key:"e70cf3e2dd7940c85ac530e98ad8bdd0b4e13d36",d:"M353 318L35 36L213 300L353 318Z"}),e("path",{key:"948d2b59cd8879af0eacf38f2ba12ece66c3aa86",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&e("text",{key:"0e96553dc0e8b3796e618154f23adafd9b6061b2",x:"250",y:"525",fill:n},"KoliBri")))}validateColor(e){a(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){l(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:["validateColor"],_labeled:["validateLabeled"]}}};h.style={default:d};export{h as kol_kolibri};
+import{r as n,h as e,H as t}from"./index-3fbcceca.js";import{c as i,v as o}from"./color-5129ba78.js";import{t as a}from"./i18n-37baa421.js";import{j as l,b as s}from"./prop.validators-29d576d2.js";import"./i18n-0c047df5.js";import"./reuse-b66836de.js";import"./index-4a3076fc.js";import"./dev.utils-1ca991a2.js";const r="/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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  .hidden {\n    display: none;\n    visibility: hidden;\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: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  text {\n    font-size: 90px;\n    letter-spacing: normal;\n    word-spacing: normal;\n  }\n  svg {\n    max-height: 100%;\n  }\n}",d=r,h=class{constructor(e){n(this,e),this.handleColorChange=(e,n)=>{if("string"==typeof e){const t=i(e);n.set("_color",{red:t[0],green:t[1],blue:t[2]})}else l("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._color="#003c78",this._labeled=!0,this.state={_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const n=`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return e(t,{key:"5fa07f54481e954f3ada11dde5d42b88350932d0",class:"kol-kolibri"},e("svg",{key:"84d3c6b420079d3a8d26bc0eb6a33f5b09471ec6",role:"img","aria-label":a("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:n},e("path",{key:"e64b0df6ca04f01f4b428f04f665bc73fc984f24",d:"M353 322L213 304V434L353 322Z"}),e("path",{key:"eab9abfd4ff3d50bbd87fbdbf5386be5f7918eb1",d:"M209 564V304L149 434L209 564Z"}),e("path",{key:"bf7dbd997df13f831cd93c0bd74203ad58a400c6",d:"M357 316L417 250L361 210L275 244L357 316Z"}),e("path",{key:"b92bc28b3225115e6167ccd64d536c6503516c43",d:"M329 218L237 92L250 222L272 241L329 218Z"}),e("path",{key:"4c5eadac3cf237a08d978bd47275a98b75bee325",d:"M353 318L35 36L213 300L353 318Z"}),e("path",{key:"0affb05d6011a26a8323c3e45bd40abdbd1cc5af",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&e("text",{key:"08b76cb8e49176c705da4f2f3b0e0c7ba7110f97",x:"250",y:"525",fill:n},"KoliBri")))}validateColor(e){o(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){s(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:["validateColor"],_labeled:["validateLabeled"]}}};h.style={default:d};export{h as kol_kolibri};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolKolibriDefaultStyle0","KolKolibri","this","handleColorChange","nextValue","nextState","rgba","colorRgba","set","red","green","blue","devHint","_color","_labeled","render","fillColor","state","h","Host","key","class","role","translate","xmlns","viewBox","fill","d","x","y","validateColor","value","defaultValue","hooks","beforePatch","validateLabeled","watchBoolean","componentWillLoad"],"sources":["src/components/kolibri/style.scss?tag=kol-kolibri&mode=default&encapsulation=shadow","src/components/kolibri/component.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t\tfont-size: rem(16);\n\t}\n\n\ttext {\n\t\tfont-size: 90px;\n\t\tletter-spacing: normal;\n\t\tword-spacing: normal;\n\t}\n\n\tsvg {\n\t\tmax-height: 100%;\n\t}\n}\n","import { devHint, validateColor, watchBoolean } from '@public-ui/schema';\nimport { Component, Host, Prop, State, Watch, h } from '@stencil/core';\n\nimport { colorRgba } from './color-rgba';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport type { Generic } from 'adopted-style-sheets';\n\nimport type { KolibriAPI, KolibriStates, PropColor, Stringified } from '@public-ui/schema';\n\n@Component({\n\ttag: 'kol-kolibri',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolKolibri implements KolibriAPI {\n\tpublic render(): JSX.Element {\n\t\tconst fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;\n\t\treturn (\n\t\t\t<Host class=\"kol-kolibri\">\n\t\t\t\t<svg role=\"img\" aria-label={translate('kol-kolibri-logo')} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 600 600\" fill={fillColor}>\n\t\t\t\t\t<path d=\"M353 322L213 304V434L353 322Z\" />\n\t\t\t\t\t<path d=\"M209 564V304L149 434L209 564Z\" />\n\t\t\t\t\t<path d=\"M357 316L417 250L361 210L275 244L357 316Z\" />\n\t\t\t\t\t<path d=\"M329 218L237 92L250 222L272 241L329 218Z\" />\n\t\t\t\t\t<path d=\"M353 318L35 36L213 300L353 318Z\" />\n\t\t\t\t\t<path d=\"M391 286L565 272L421 252L391 286Z\" />\n\t\t\t\t\t{this.state._labeled === true && (\n\t\t\t\t\t\t<text x=\"250\" y=\"525\" fill={fillColor}>\n\t\t\t\t\t\t\tKoliBri\n\t\t\t\t\t\t</text>\n\t\t\t\t\t)}\n\t\t\t\t</svg>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the color of the logo and label.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#003c78';\n\n\t/**\n\t * Defines whether the component has a label.\n\t */\n\t@Prop() public _labeled?: boolean = true;\n\n\t@State() public state: KolibriStates = {\n\t\t_color: {\n\t\t\tred: 0,\n\t\t\tgreen: 60,\n\t\t\tblue: 120,\n\t\t},\n\t\t_labeled: true,\n\t};\n\n\tprivate handleColorChange: Generic.Element.NextStateHooksCallback = (nextValue: unknown, nextState: Map<string, unknown>): void => {\n\t\tif (typeof nextValue === 'string') {\n\t\t\tconst rgba = colorRgba(nextValue);\n\t\t\tnextState.set('_color', {\n\t\t\t\tred: rgba[0],\n\t\t\t\tgreen: rgba[1],\n\t\t\t\tblue: rgba[2],\n\t\t\t});\n\t\t} else {\n\t\t\tdevHint(`[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.`);\n\t\t}\n\t};\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#003c78',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_labeled')\n\tpublic validateLabeled(value?: boolean): void {\n\t\twatchBoolean(this, '_labeled', value, {\n\t\t\tdefaultValue: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateColor(this._color);\n\t\tthis.validateLabeled(this._labeled);\n\t}\n}\n"],"mappings":";;;sLAAA,MAAMA,EAAkB,yyIACxB,MAAAC,EAAeD,E,MCkBFE,EAAU,M,yBAyCdC,KAAAC,kBAA4D,CAACC,EAAoBC,KACxF,UAAWD,IAAc,SAAU,CAClC,MAAME,EAAOC,EAAUH,GACvBC,EAAUG,IAAI,SAAU,CACvBC,IAAKH,EAAK,GACVI,MAAOJ,EAAK,GACZK,KAAML,EAAK,I,KAEN,CACNM,EAAQ,uG,eAzBuC,U,cAKb,K,WAEG,CACtCC,OAAQ,CACPJ,IAAK,EACLC,MAAO,GACPC,KAAM,KAEPG,SAAU,K,CArCJ,MAAAC,GACN,MAAMC,EAAY,OAAOd,KAAKe,MAAMJ,OAAOJ,OAAOP,KAAKe,MAAMJ,OAAOH,SAASR,KAAKe,MAAMJ,OAAOF,QAC/F,OACCO,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,eACXH,EAAA,OAAAE,IAAA,2CAAKE,KAAK,MAAK,aAAaC,EAAU,oBAAqBC,MAAM,6BAA6BC,QAAQ,cAAcC,KAAMV,GACzHE,EAAA,QAAAE,IAAA,2CAAMO,EAAE,kCACRT,EAAA,QAAAE,IAAA,2CAAMO,EAAE,kCACRT,EAAA,QAAAE,IAAA,2CAAMO,EAAE,8CACRT,EAAA,QAAAE,IAAA,2CAAMO,EAAE,6CACRT,EAAA,QAAAE,IAAA,2CAAMO,EAAE,oCACRT,EAAA,QAAAE,IAAA,2CAAMO,EAAE,sCACPzB,KAAKe,MAAMH,WAAa,MACxBI,EAAA,QAAAE,IAAA,2CAAMQ,EAAE,MAAMC,EAAE,MAAMH,KAAMV,GAAS,Y,CA0CnC,aAAAc,CAAcC,GACpBD,EAAc5B,KAAM6B,EAAO,CAC1BC,aAAc,UACdC,MAAO,CACNC,YAAahC,KAAKC,oB,CAMd,eAAAgC,CAAgBJ,GACtBK,EAAalC,KAAM,WAAY6B,EAAO,CACrCC,aAAc,M,CAIT,iBAAAK,GACNnC,KAAK4B,cAAc5B,KAAKW,QACxBX,KAAKiC,gBAAgBjC,KAAKY,S"}
+{"version":3,"names":["defaultStyleCss","KolKolibriDefaultStyle0","KolKolibri","this","handleColorChange","nextValue","nextState","rgba","colorRgba","set","red","green","blue","devHint","_color","_labeled","render","fillColor","state","h","Host","key","class","role","translate","xmlns","viewBox","fill","d","x","y","validateColor","value","defaultValue","hooks","beforePatch","validateLabeled","watchBoolean","componentWillLoad"],"sources":["src/components/kolibri/style.scss?tag=kol-kolibri&mode=default&encapsulation=shadow","src/components/kolibri/component.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t\tfont-size: rem(16);\n\t}\n\n\ttext {\n\t\tfont-size: 90px;\n\t\tletter-spacing: normal;\n\t\tword-spacing: normal;\n\t}\n\n\tsvg {\n\t\tmax-height: 100%;\n\t}\n}\n","import { devHint, validateColor, watchBoolean } from '../../schema';\nimport { Component, Host, Prop, State, Watch, h } from '@stencil/core';\n\nimport { colorRgba } from './color-rgba';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport type { Generic } from 'adopted-style-sheets';\n\nimport type { KolibriAPI, KolibriStates, PropColor, Stringified } from '../../schema';\n\n@Component({\n\ttag: 'kol-kolibri',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolKolibri implements KolibriAPI {\n\tpublic render(): JSX.Element {\n\t\tconst fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;\n\t\treturn (\n\t\t\t<Host class=\"kol-kolibri\">\n\t\t\t\t<svg role=\"img\" aria-label={translate('kol-kolibri-logo')} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 600 600\" fill={fillColor}>\n\t\t\t\t\t<path d=\"M353 322L213 304V434L353 322Z\" />\n\t\t\t\t\t<path d=\"M209 564V304L149 434L209 564Z\" />\n\t\t\t\t\t<path d=\"M357 316L417 250L361 210L275 244L357 316Z\" />\n\t\t\t\t\t<path d=\"M329 218L237 92L250 222L272 241L329 218Z\" />\n\t\t\t\t\t<path d=\"M353 318L35 36L213 300L353 318Z\" />\n\t\t\t\t\t<path d=\"M391 286L565 272L421 252L391 286Z\" />\n\t\t\t\t\t{this.state._labeled === true && (\n\t\t\t\t\t\t<text x=\"250\" y=\"525\" fill={fillColor}>\n\t\t\t\t\t\t\tKoliBri\n\t\t\t\t\t\t</text>\n\t\t\t\t\t)}\n\t\t\t\t</svg>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the color of the logo and label.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#003c78';\n\n\t/**\n\t * Defines whether the component has a label.\n\t */\n\t@Prop() public _labeled?: boolean = true;\n\n\t@State() public state: KolibriStates = {\n\t\t_color: {\n\t\t\tred: 0,\n\t\t\tgreen: 60,\n\t\t\tblue: 120,\n\t\t},\n\t\t_labeled: true,\n\t};\n\n\tprivate handleColorChange: Generic.Element.NextStateHooksCallback = (nextValue: unknown, nextState: Map<string, unknown>): void => {\n\t\tif (typeof nextValue === 'string') {\n\t\t\tconst rgba = colorRgba(nextValue);\n\t\t\tnextState.set('_color', {\n\t\t\t\tred: rgba[0],\n\t\t\t\tgreen: rgba[1],\n\t\t\t\tblue: rgba[2],\n\t\t\t});\n\t\t} else {\n\t\t\tdevHint(`[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.`);\n\t\t}\n\t};\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#003c78',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_labeled')\n\tpublic validateLabeled(value?: boolean): void {\n\t\twatchBoolean(this, '_labeled', value, {\n\t\t\tdefaultValue: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateColor(this._color);\n\t\tthis.validateLabeled(this._labeled);\n\t}\n}\n"],"mappings":";;;wTAAA,MAAMA,EAAkB,yyIACxB,MAAAC,EAAeD,E,MCkBFE,EAAU,M,yBAyCdC,KAAAC,kBAA4D,CAACC,EAAoBC,KACxF,UAAWD,IAAc,SAAU,CAClC,MAAME,EAAOC,EAAUH,GACvBC,EAAUG,IAAI,SAAU,CACvBC,IAAKH,EAAK,GACVI,MAAOJ,EAAK,GACZK,KAAML,EAAK,I,KAEN,CACNM,EAAQ,uG,eAzBuC,U,cAKb,K,WAEG,CACtCC,OAAQ,CACPJ,IAAK,EACLC,MAAO,GACPC,KAAM,KAEPG,SAAU,K,CArCJ,MAAAC,GACN,MAAMC,EAAY,OAAOd,KAAKe,MAAMJ,OAAOJ,OAAOP,KAAKe,MAAMJ,OAAOH,SAASR,KAAKe,MAAMJ,OAAOF,QAC/F,OACCO,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,eACXH,EAAA,OAAAE,IAAA,2CAAKE,KAAK,MAAK,aAAaC,EAAU,oBAAqBC,MAAM,6BAA6BC,QAAQ,cAAcC,KAAMV,GACzHE,EAAA,QAAAE,IAAA,2CAAMO,EAAE,kCACRT,EAAA,QAAAE,IAAA,2CAAMO,EAAE,kCACRT,EAAA,QAAAE,IAAA,2CAAMO,EAAE,8CACRT,EAAA,QAAAE,IAAA,2CAAMO,EAAE,6CACRT,EAAA,QAAAE,IAAA,2CAAMO,EAAE,oCACRT,EAAA,QAAAE,IAAA,2CAAMO,EAAE,sCACPzB,KAAKe,MAAMH,WAAa,MACxBI,EAAA,QAAAE,IAAA,2CAAMQ,EAAE,MAAMC,EAAE,MAAMH,KAAMV,GAAS,Y,CA0CnC,aAAAc,CAAcC,GACpBD,EAAc5B,KAAM6B,EAAO,CAC1BC,aAAc,UACdC,MAAO,CACNC,YAAahC,KAAKC,oB,CAMd,eAAAgC,CAAgBJ,GACtBK,EAAalC,KAAM,WAAY6B,EAAO,CACrCC,aAAc,M,CAIT,iBAAAK,GACNnC,KAAK4B,cAAc5B,KAAKW,QACxBX,KAAKiC,gBAAgBjC,KAAKY,S"}

package/dist/kolibri/kol-link-button.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-3fbcceca.js";import{h as o}from"./index-44da6e7f.js";import{m as s}from"./component-names-ed22f86e.js";const a="@charset \"UTF-8\";\n/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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  .hidden {\n    display: none;\n    visibility: hidden;\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-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  /* TODO: Why we need this? */\n  :is(a, button) > .kol-span-wc {\n    margin: auto;\n    width: 100%;\n  }\n}",l=a,r=class{constructor(e){n(this,e),this.catchRef=n=>{o(this.host,n)},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal"}render(){return e(t,{key:"e379d1ff0888746b63f0fe337ea2e7639acffa19",class:"kol-link-button"},e(s,{key:"d1cf90829da748ef9519b62506792e33b070e135",ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_on:this._on,_role:"button",_tabIndex:this._tabIndex,_target:this._target,_tooltipAlign:this._tooltipAlign},e("slot",{key:"6ed657713353049ad8f72d149284f1fc6f21e67c",name:"expert",slot:"expert"})))}get host(){return i(this)}};r.style={default:l};export{r as kol_link_button};
+import{r as n,h as e,H as t,g as i}from"./index-3fbcceca.js";import{m as o}from"./component-names-ed22f86e.js";import{a as s}from"./reuse-b66836de.js";const a="@charset \"UTF-8\";\n/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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  .hidden {\n    display: none;\n    visibility: hidden;\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-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  /* TODO: Why we need this? */\n  :is(a, button) > .kol-span-wc {\n    margin: auto;\n    width: 100%;\n  }\n}",l=a,r=class{constructor(e){n(this,e),this.catchRef=n=>{s(this.host,n)},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal"}render(){return e(t,{key:"48b7c1ddbc5bf67ffcd240f66344f2726421e504",class:"kol-link-button"},e(o,{key:"3c5dd469e4c56704f1b2965d835e6b8062f51830",ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_on:this._on,_role:"button",_tabIndex:this._tabIndex,_target:this._target,_tooltipAlign:this._tooltipAlign},e("slot",{key:"55d4e4041b79de0efc434b0effea997c85a0958c",name:"expert",slot:"expert"})))}get host(){return i(this)}};r.style={default:l};export{r as kol_link_button};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolLinkButtonDefaultStyle0","KolLinkButton","this","catchRef","ref","propagateFocus","host","render","h","Host","key","class","KolLinkWcTag","button","_variant","_customClass","length","_accessKey","_ariaCurrentValue","_disabled","_download","_hideLabel","_href","_icons","_label","_on","_role","_tabIndex","_target","_tooltipAlign","name","slot"],"sources":["src/components/link-button/style.scss?tag=kol-link-button&mode=default&encapsulation=shadow","src/components/link-button/component.tsx"],"sourcesContent":["@import '../button';\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaCurrentValuePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tDownloadPropType,\n\tHrefPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tLinkButtonProps,\n\tLinkOnCallbacksPropType,\n\tLinkTargetPropType,\n\tTooltipAlignPropType,\n} from '@public-ui/schema';\nimport { propagateFocus } from '@public-ui/schema';\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-link-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolLinkButton implements LinkButtonProps {\n\t@Element() private readonly host?: HTMLKolLinkButtonElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-link-button\">\n\t\t\t\t<KolLinkWcTag\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaCurrentValue={this._ariaCurrentValue}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_download={this._download}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_href={this._href}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role=\"button\"\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_target={this._target}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolLinkWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the elements access key.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-current attribute.\n\t */\n\t@Prop() public _ariaCurrentValue?: AriaCurrentValuePropType;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Tells the browser that the link contains a file. Optionally sets the filename.\n\t */\n\t@Prop() public _download?: DownloadPropType;\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 target URI of the link.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\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 callback functions for links.\n\t */\n\t@Prop() public _on?: LinkOnCallbacksPropType;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\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 open the link.\n\t */\n\t@Prop() public _target?: LinkTargetPropType;\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 = 'right';\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"],"mappings":";;;uJAAA,MAAMA,EAAkB,gkJACxB,MAAAC,EAAeD,E,MC0BFE,EAAa,M,yBAGRC,KAAAC,SAAYC,IAC5BC,EAAeH,KAAKI,KAAMF,EAAI,E,sGAmDM,M,yCAYC,M,4KAwCgB,Q,cAKJ,Q,CAzG3C,MAAAG,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,mBACXH,EAACI,EAAY,CAAAF,IAAA,2CACZN,IAAKF,KAAKC,SACVQ,MAAO,CACNE,OAAQ,KACR,CAACX,KAAKY,UAAqBZ,KAAKY,WAAa,SAC7C,CAACZ,KAAKa,cAAyBb,KAAKY,WAAa,iBAAmBZ,KAAKa,eAAiB,UAAYb,KAAKa,aAAaC,OAAS,GAElIC,WAAYf,KAAKe,WACjBC,kBAAmBhB,KAAKgB,kBACxBC,UAAWjB,KAAKiB,UAChBC,UAAWlB,KAAKkB,UAChBC,WAAYnB,KAAKmB,WACjBC,MAAOpB,KAAKoB,MACZC,OAAQrB,KAAKqB,OACbC,OAAQtB,KAAKsB,OACbC,IAAKvB,KAAKuB,IACVC,MAAM,SACNC,UAAWzB,KAAKyB,UAChBC,QAAS1B,KAAK0B,QACdC,cAAe3B,KAAK2B,eAEpBrB,EAAA,QAAAE,IAAA,2CAAMoB,KAAK,SAASC,KAAK,Y"}
+{"version":3,"names":["defaultStyleCss","KolLinkButtonDefaultStyle0","KolLinkButton","this","catchRef","ref","propagateFocus","host","render","h","Host","key","class","KolLinkWcTag","button","_variant","_customClass","length","_accessKey","_ariaCurrentValue","_disabled","_download","_hideLabel","_href","_icons","_label","_on","_role","_tabIndex","_target","_tooltipAlign","name","slot"],"sources":["src/components/link-button/style.scss?tag=kol-link-button&mode=default&encapsulation=shadow","src/components/link-button/component.tsx"],"sourcesContent":["@import '../button';\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaCurrentValuePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tDownloadPropType,\n\tHrefPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tLinkButtonProps,\n\tLinkOnCallbacksPropType,\n\tLinkTargetPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { propagateFocus } from '../../schema';\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-link-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolLinkButton implements LinkButtonProps {\n\t@Element() private readonly host?: HTMLKolLinkButtonElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-link-button\">\n\t\t\t\t<KolLinkWcTag\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaCurrentValue={this._ariaCurrentValue}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_download={this._download}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_href={this._href}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role=\"button\"\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_target={this._target}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolLinkWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the elements access key.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-current attribute.\n\t */\n\t@Prop() public _ariaCurrentValue?: AriaCurrentValuePropType;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Tells the browser that the link contains a file. Optionally sets the filename.\n\t */\n\t@Prop() public _download?: DownloadPropType;\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 target URI of the link.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\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 callback functions for links.\n\t */\n\t@Prop() public _on?: LinkOnCallbacksPropType;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\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 open the link.\n\t */\n\t@Prop() public _target?: LinkTargetPropType;\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 = 'right';\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"],"mappings":";;;uJAAA,MAAMA,EAAkB,gkJACxB,MAAAC,EAAeD,E,MC0BFE,EAAa,M,yBAGRC,KAAAC,SAAYC,IAC5BC,EAAeH,KAAKI,KAAMF,EAAI,E,sGAmDM,M,yCAYC,M,4KAwCgB,Q,cAKJ,Q,CAzG3C,MAAAG,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,mBACXH,EAACI,EAAY,CAAAF,IAAA,2CACZN,IAAKF,KAAKC,SACVQ,MAAO,CACNE,OAAQ,KACR,CAACX,KAAKY,UAAqBZ,KAAKY,WAAa,SAC7C,CAACZ,KAAKa,cAAyBb,KAAKY,WAAa,iBAAmBZ,KAAKa,eAAiB,UAAYb,KAAKa,aAAaC,OAAS,GAElIC,WAAYf,KAAKe,WACjBC,kBAAmBhB,KAAKgB,kBACxBC,UAAWjB,KAAKiB,UAChBC,UAAWlB,KAAKkB,UAChBC,WAAYnB,KAAKmB,WACjBC,MAAOpB,KAAKoB,MACZC,OAAQrB,KAAKqB,OACbC,OAAQtB,KAAKsB,OACbC,IAAKvB,KAAKuB,IACVC,MAAM,SACNC,UAAWzB,KAAKyB,UAChBC,QAAS1B,KAAK0B,QACdC,cAAe3B,KAAK2B,eAEpBrB,EAAA,QAAAE,IAAA,2CAAMoB,KAAK,SAASC,KAAK,Y"}

package/dist/kolibri/kol-link-group.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-3fbcceca.js";import{v as i,w as a}from"./index-44da6e7f.js";import{r as o,a as l}from"./unique-nav-labels-62d9802d.js";import{w as s}from"./validation-daa38230.js";import{h as r}from"./component-names-ed22f86e.js";const d="/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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  .hidden {\n    display: none;\n    visibility: hidden;\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  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  :is(ol, ul).horizontal {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  :is(ol, ul).horizontal li {\n    margin-left: calc(20rem / var(--kolibri-root-font-size, 16));\n    margin-right: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(ol, ul).horizontal li:first-child {\n    margin-left: 0;\n  }\n  :is(ol, ul).horizontal li:last-child {\n    margin-right: 0;\n  }\n  :is(ol, ul).vertical li {\n    margin-left: calc(28rem / var(--kolibri-root-font-size, 16));\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  li.list-none {\n    list-style-type: none !important;\n    margin-left: 0;\n  }\n}",h=d,c=n=>{const t=[];return n.links.map(((i,a)=>{t.push(e("li",{key:a,class:{ident:a>0&&"vertical"===n.orientation,"list-none":0===a&&"horizontal"===n.orientation},style:{listStyleType:n.listStyleType}},e(r,Object.assign({},i))))})),t},p=class{constructor(e){n(this,e),this.isUl=!0,this._listStyleType=void 0,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_listStyleType:"disc",_links:[],_orientation:"vertical"}}render(){const n=this.isUl?"ul":"ol";return e(t,{key:"07a4255b5f9864dd79016be898d3c5dde567671d",class:"kol-link-group"},e(n,{key:"6426f4966bd573f97f627063bc902d721af95efd","aria-label":this.state._label,class:{vertical:"vertical"===this.state._orientation,horizontal:"horizontal"===this.state._orientation}},e(c,{key:"48ca11bd6bb5e3f689a35ad05e910d38656b529b",links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})))}validateLabel(n,e,t=!1){!t&&this.state._label&&o(this.state._label),i(this,n),this.state._label&&l(this.state._label)}validateListStyleType(n){a(this,"_listStyleType",(n=>{switch(n){case"disc":case"circle":case"square":case"none":return this.isUl=!0,!0;case"decimal":case"decimal-leading-zero":case"lower-alpha":case"lower-latin":case"lower-greek":case"lower-roman":case"upper-alpha":case"upper-latin":case"upper-roman":return this.isUl=!1,!0;default:return!1}}),new Set(["https://www.w3schools.com/tags/tag_ol.asp"]),n,{defaultValue:"disc"})}validateLinks(n){s("KolLinkGroup",this,n)}validateOrientation(n){a(this,"_orientation",(n=>"horizontal"===n||"vertical"===n),new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateListStyleType(this._listStyleType),this.validateLinks(this._links),this.validateOrientation(this._orientation)}disconnectedCallback(){this.state._label&&o(this.state._label)}static get watchers(){return{_label:["validateLabel"],_listStyleType:["validateListStyleType"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};p.style={default:h};export{p as kol_link_group};
+import{r as n,h as e,H as t}from"./index-3fbcceca.js";import{r as i,a}from"./unique-nav-labels-62d9802d.js";import{w as o}from"./validation-561836d9.js";import{h as l}from"./component-names-ed22f86e.js";import{v as s}from"./label-e56ffdc6.js";import{w as r}from"./prop.validators-29d576d2.js";import"./index-4a3076fc.js";import"./dev.utils-1ca991a2.js";const d="/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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  .hidden {\n    display: none;\n    visibility: hidden;\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  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  :is(ol, ul).horizontal {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  :is(ol, ul).horizontal li {\n    margin-left: calc(20rem / var(--kolibri-root-font-size, 16));\n    margin-right: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(ol, ul).horizontal li:first-child {\n    margin-left: 0;\n  }\n  :is(ol, ul).horizontal li:last-child {\n    margin-right: 0;\n  }\n  :is(ol, ul).vertical li {\n    margin-left: calc(28rem / var(--kolibri-root-font-size, 16));\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  li.list-none {\n    list-style-type: none !important;\n    margin-left: 0;\n  }\n}",h=d,c=n=>{const t=[];return n.links.map(((i,a)=>{t.push(e("li",{key:a,class:{ident:a>0&&"vertical"===n.orientation,"list-none":0===a&&"horizontal"===n.orientation},style:{listStyleType:n.listStyleType}},e(l,Object.assign({},i))))})),t},p=class{constructor(e){n(this,e),this.isUl=!0,this._listStyleType=void 0,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_listStyleType:"disc",_links:[],_orientation:"vertical"}}render(){const n=this.isUl?"ul":"ol";return e(t,{key:"153895c9059653467587b4f6c8f2282b5ebc8bb3",class:"kol-link-group"},e(n,{key:"4c6d27071580b94e66bd3a3f59b67e940d1d24c6","aria-label":this.state._label,class:{vertical:"vertical"===this.state._orientation,horizontal:"horizontal"===this.state._orientation}},e(c,{key:"42e740e727f5a1d92131ef08f4102b35c1a1a105",links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})))}validateLabel(n,e,t=!1){!t&&this.state._label&&i(this.state._label),s(this,n),this.state._label&&a(this.state._label)}validateListStyleType(n){r(this,"_listStyleType",(n=>{switch(n){case"disc":case"circle":case"square":case"none":return this.isUl=!0,!0;case"decimal":case"decimal-leading-zero":case"lower-alpha":case"lower-latin":case"lower-greek":case"lower-roman":case"upper-alpha":case"upper-latin":case"upper-roman":return this.isUl=!1,!0;default:return!1}}),new Set(["https://www.w3schools.com/tags/tag_ol.asp"]),n,{defaultValue:"disc"})}validateLinks(n){o("KolLinkGroup",this,n)}validateOrientation(n){r(this,"_orientation",(n=>"horizontal"===n||"vertical"===n),new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateListStyleType(this._listStyleType),this.validateLinks(this._links),this.validateOrientation(this._orientation)}disconnectedCallback(){this.state._label&&i(this.state._label)}static get watchers(){return{_label:["validateLabel"],_listStyleType:["validateListStyleType"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};p.style={default:h};export{p as kol_link_group};

package/dist/kolibri/kol-link-group.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolLinkGroupDefaultStyle0","ListItem","props","list","links","map","link","index","push","h","key","class","ident","orientation","style","listStyleType","KolLinkTag","Object","assign","KolLinkGroup","this","isUl","_listStyleType","_links","_orientation","render","ListTag","Host","state","_label","vertical","horizontal","validateLabel","value","_oldValue","initial","removeNavLabel","addNavLabel","validateListStyleType","watchValidator","Set","defaultValue","validateLinks","watchNavLinks","validateOrientation","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/link-group/style.scss?tag=kol-link-group&mode=default&encapsulation=shadow","src/components/link-group/component.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\tul {\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t:is(ol, ul).horizontal {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\t:is(ol, ul).horizontal li {\n\t\tmargin-left: rem(20);\n\t\tmargin-right: rem(4);\n\t}\n\n\t:is(ol, ul).horizontal li:first-child {\n\t\tmargin-left: 0;\n\t}\n\n\t:is(ol, ul).horizontal li:last-child {\n\t\tmargin-right: 0;\n\t}\n\n\t:is(ol, ul).vertical li {\n\t\tmargin-left: rem(28);\n\t\tmargin-right: rem(8);\n\t}\n\n\tli.list-none {\n\t\tlist-style-type: none !important;\n\t\tmargin-left: 0;\n\t}\n}\n","import type { LabelPropType, LinkGroupAPI, LinkGroupStates, LinkProps, ListStyleType, Orientation, Stringified } from '@public-ui/schema';\nimport { validateLabel, watchValidator } from '@public-ui/schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkTag } from '../../core/component-names';\nconst ListItem = (props: { links: LinkProps[]; orientation: Orientation; listStyleType: ListStyleType }): JSX.Element => {\n\tconst list: JSX.Element[] = [];\n\tprops.links.map((link, index: number) => {\n\t\tlist.push(\n\t\t\t(\n\t\t\t\t<li\n\t\t\t\t\tkey={index}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tident: index > 0 && props.orientation === 'vertical',\n\t\t\t\t\t\t'list-none': index === 0 && props.orientation === 'horizontal',\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tlistStyleType: props.listStyleType,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<KolLinkTag {...link}></KolLinkTag>\n\t\t\t\t</li>\n\t\t\t) as JSX.Element,\n\t\t);\n\t});\n\treturn list;\n};\n\n@Component({\n\ttag: 'kol-link-group',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\n\n/**\n * @deprecated This component has been deprecated as it does not contribute significantly to accessibility.\n */\nexport class KolLinkGroup implements LinkGroupAPI {\n\tpublic render(): JSX.Element {\n\t\tconst ListTag = this.isUl ? 'ul' : 'ol';\n\t\treturn (\n\t\t\t<Host class=\"kol-link-group\">\n\t\t\t\t<ListTag\n\t\t\t\t\taria-label={this.state._label}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tvertical: this.state._orientation === 'vertical',\n\t\t\t\t\t\thorizontal: this.state._orientation === 'horizontal',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ListItem links={this.state._links} orientation={this.state._orientation} listStyleType={this.state._listStyleType} />\n\t\t\t\t</ListTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate isUl = true;\n\n\t/**\n\t * Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet\n\t */\n\t@Prop() public _listStyleType?: ListStyleType;\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?: LabelPropType;\n\n\t/**\n\t * Defines the list of links to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t@State() public state: LinkGroupStates = {\n\t\t_listStyleType: 'disc',\n\t\t_links: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial && this.state._label) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value);\n\t\tthis.state._label && addNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_listStyleType')\n\tpublic validateListStyleType(value?: ListStyleType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_listStyleType',\n\t\t\t(value) => {\n\t\t\t\tswitch (value) {\n\t\t\t\t\tcase 'disc':\n\t\t\t\t\tcase 'circle':\n\t\t\t\t\tcase 'square':\n\t\t\t\t\tcase 'none':\n\t\t\t\t\t\tthis.isUl = true;\n\t\t\t\t\t\treturn true;\n\t\t\t\t\tcase 'decimal':\n\t\t\t\t\tcase 'decimal-leading-zero':\n\t\t\t\t\tcase 'lower-alpha':\n\t\t\t\t\tcase 'lower-latin':\n\t\t\t\t\tcase 'lower-greek':\n\t\t\t\t\tcase 'lower-roman':\n\t\t\t\t\tcase 'upper-alpha':\n\t\t\t\t\tcase 'upper-latin':\n\t\t\t\t\tcase 'upper-roman':\n\t\t\t\t\t\tthis.isUl = false;\n\t\t\t\t\t\treturn true;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t},\n\t\t\tnew Set(['https://www.w3schools.com/tags/tag_ol.asp']),\n\t\t\tvalue,\n\t\t\t{ defaultValue: 'disc' },\n\t\t);\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolLinkGroup', this, value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' || value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t},\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateListStyleType(this._listStyleType);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.state._label && removeNavLabel(this.state._label);\n\t}\n}\n\n// console.log(\n//   stringifyJson([\n//     { _label: 'Fehler 1', _id: '#anschrift_anschrift_adresse_strasse', _icons: 'error' },\n//     { _label: 'Fehler 2', _id: '#anschrift_anschrift_adresse_hausnummer', _icons: 'error' },\n//   ])\n// );\n"],"mappings":";;;+PAAA,MAAMA,EAAkB,00JACxB,MAAAC,EAAeD,ECQf,MAAME,EAAYC,IACjB,MAAMC,EAAsB,GAC5BD,EAAME,MAAMC,KAAI,CAACC,EAAMC,KACtBJ,EAAKK,KAEHC,EAAA,MACCC,IAAKH,EACLI,MAAO,CACNC,MAAOL,EAAQ,GAAKL,EAAMW,cAAgB,WAC1C,YAAaN,IAAU,GAAKL,EAAMW,cAAgB,cAEnDC,MAAO,CACNC,cAAeb,EAAMa,gBAGtBN,EAACO,EAAUC,OAAAC,OAAA,GAAKZ,KAGlB,IAEF,OAAOH,CAAI,E,MAcCgB,EAAY,M,yBAkBhBC,KAAAC,KAAO,K,4FAoB6B,W,WAEH,CACxCC,eAAgB,OAChBC,OAAQ,GACRC,aAAc,W,CA1CR,MAAAC,GACN,MAAMC,EAAUN,KAAKC,KAAO,KAAO,KACnC,OACCZ,EAACkB,EAAI,CAAAjB,IAAA,2CAACC,MAAM,kBACXF,EAACiB,EAAO,CAAAhB,IAAA,wDACKU,KAAKQ,MAAMC,OACvBlB,MAAO,CACNmB,SAAUV,KAAKQ,MAAMJ,eAAiB,WACtCO,WAAYX,KAAKQ,MAAMJ,eAAiB,eAGzCf,EAACR,EAAQ,CAAAS,IAAA,2CAACN,MAAOgB,KAAKQ,MAAML,OAAQV,YAAaO,KAAKQ,MAAMJ,aAAcT,cAAeK,KAAKQ,MAAMN,kB,CAmCjG,aAAAU,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,GAAWf,KAAKQ,MAAMC,OAAQ,CAClCO,EAAehB,KAAKQ,MAAMC,O,CAE3BG,EAAcZ,KAAMa,GACpBb,KAAKQ,MAAMC,QAAUQ,EAAYjB,KAAKQ,MAAMC,O,CAItC,qBAAAS,CAAsBL,GAC5BM,EACCnB,KACA,kBACCa,IACA,OAAQA,GACP,IAAK,OACL,IAAK,SACL,IAAK,SACL,IAAK,OACJb,KAAKC,KAAO,KACZ,OAAO,KACR,IAAK,UACL,IAAK,uBACL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cACJD,KAAKC,KAAO,MACZ,OAAO,KACR,QACC,OAAO,M,GAGV,IAAImB,IAAI,CAAC,8CACTP,EACA,CAAEQ,aAAc,Q,CAKX,aAAAC,CAAcT,GACpBU,EAAc,eAAgBvB,KAAMa,E,CAI9B,mBAAAW,CAAoBX,GAC1BM,EACCnB,KACA,gBACCa,GAAmBA,IAAU,cAAgBA,IAAU,YACxD,IAAIO,IAAI,CAAC,uCACTP,EACA,CACCQ,aAAc,Y,CAKV,iBAAAI,GACNzB,KAAKY,cAAcZ,KAAKS,OAAQiB,UAAW,MAC3C1B,KAAKkB,sBAAsBlB,KAAKE,gBAChCF,KAAKsB,cAActB,KAAKG,QACxBH,KAAKwB,oBAAoBxB,KAAKI,a,CAGxB,oBAAAuB,GACN3B,KAAKQ,MAAMC,QAAUO,EAAehB,KAAKQ,MAAMC,O"}
+{"version":3,"names":["defaultStyleCss","KolLinkGroupDefaultStyle0","ListItem","props","list","links","map","link","index","push","h","key","class","ident","orientation","style","listStyleType","KolLinkTag","Object","assign","KolLinkGroup","this","isUl","_listStyleType","_links","_orientation","render","ListTag","Host","state","_label","vertical","horizontal","validateLabel","value","_oldValue","initial","removeNavLabel","addNavLabel","validateListStyleType","watchValidator","Set","defaultValue","validateLinks","watchNavLinks","validateOrientation","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/link-group/style.scss?tag=kol-link-group&mode=default&encapsulation=shadow","src/components/link-group/component.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\tul {\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t:is(ol, ul).horizontal {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\t:is(ol, ul).horizontal li {\n\t\tmargin-left: rem(20);\n\t\tmargin-right: rem(4);\n\t}\n\n\t:is(ol, ul).horizontal li:first-child {\n\t\tmargin-left: 0;\n\t}\n\n\t:is(ol, ul).horizontal li:last-child {\n\t\tmargin-right: 0;\n\t}\n\n\t:is(ol, ul).vertical li {\n\t\tmargin-left: rem(28);\n\t\tmargin-right: rem(8);\n\t}\n\n\tli.list-none {\n\t\tlist-style-type: none !important;\n\t\tmargin-left: 0;\n\t}\n}\n","import type { LabelPropType, LinkGroupAPI, LinkGroupStates, LinkProps, ListStyleType, Orientation, Stringified } from '../../schema';\nimport { validateLabel, watchValidator } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkTag } from '../../core/component-names';\nconst ListItem = (props: { links: LinkProps[]; orientation: Orientation; listStyleType: ListStyleType }): JSX.Element => {\n\tconst list: JSX.Element[] = [];\n\tprops.links.map((link, index: number) => {\n\t\tlist.push(\n\t\t\t(\n\t\t\t\t<li\n\t\t\t\t\tkey={index}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tident: index > 0 && props.orientation === 'vertical',\n\t\t\t\t\t\t'list-none': index === 0 && props.orientation === 'horizontal',\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tlistStyleType: props.listStyleType,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<KolLinkTag {...link}></KolLinkTag>\n\t\t\t\t</li>\n\t\t\t) as JSX.Element,\n\t\t);\n\t});\n\treturn list;\n};\n\n@Component({\n\ttag: 'kol-link-group',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\n\n/**\n * @deprecated This component has been deprecated as it does not contribute significantly to accessibility.\n */\nexport class KolLinkGroup implements LinkGroupAPI {\n\tpublic render(): JSX.Element {\n\t\tconst ListTag = this.isUl ? 'ul' : 'ol';\n\t\treturn (\n\t\t\t<Host class=\"kol-link-group\">\n\t\t\t\t<ListTag\n\t\t\t\t\taria-label={this.state._label}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tvertical: this.state._orientation === 'vertical',\n\t\t\t\t\t\thorizontal: this.state._orientation === 'horizontal',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ListItem links={this.state._links} orientation={this.state._orientation} listStyleType={this.state._listStyleType} />\n\t\t\t\t</ListTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate isUl = true;\n\n\t/**\n\t * Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet\n\t */\n\t@Prop() public _listStyleType?: ListStyleType;\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?: LabelPropType;\n\n\t/**\n\t * Defines the list of links to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t@State() public state: LinkGroupStates = {\n\t\t_listStyleType: 'disc',\n\t\t_links: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial && this.state._label) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value);\n\t\tthis.state._label && addNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_listStyleType')\n\tpublic validateListStyleType(value?: ListStyleType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_listStyleType',\n\t\t\t(value) => {\n\t\t\t\tswitch (value) {\n\t\t\t\t\tcase 'disc':\n\t\t\t\t\tcase 'circle':\n\t\t\t\t\tcase 'square':\n\t\t\t\t\tcase 'none':\n\t\t\t\t\t\tthis.isUl = true;\n\t\t\t\t\t\treturn true;\n\t\t\t\t\tcase 'decimal':\n\t\t\t\t\tcase 'decimal-leading-zero':\n\t\t\t\t\tcase 'lower-alpha':\n\t\t\t\t\tcase 'lower-latin':\n\t\t\t\t\tcase 'lower-greek':\n\t\t\t\t\tcase 'lower-roman':\n\t\t\t\t\tcase 'upper-alpha':\n\t\t\t\t\tcase 'upper-latin':\n\t\t\t\t\tcase 'upper-roman':\n\t\t\t\t\t\tthis.isUl = false;\n\t\t\t\t\t\treturn true;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t},\n\t\t\tnew Set(['https://www.w3schools.com/tags/tag_ol.asp']),\n\t\t\tvalue,\n\t\t\t{ defaultValue: 'disc' },\n\t\t);\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolLinkGroup', this, value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' || value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t},\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateListStyleType(this._listStyleType);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.state._label && removeNavLabel(this.state._label);\n\t}\n}\n\n// console.log(\n//   stringifyJson([\n//     { _label: 'Fehler 1', _id: '#anschrift_anschrift_adresse_strasse', _icons: 'error' },\n//     { _label: 'Fehler 2', _id: '#anschrift_anschrift_adresse_hausnummer', _icons: 'error' },\n//   ])\n// );\n"],"mappings":";;;iWAAA,MAAMA,EAAkB,00JACxB,MAAAC,EAAeD,ECQf,MAAME,EAAYC,IACjB,MAAMC,EAAsB,GAC5BD,EAAME,MAAMC,KAAI,CAACC,EAAMC,KACtBJ,EAAKK,KAEHC,EAAA,MACCC,IAAKH,EACLI,MAAO,CACNC,MAAOL,EAAQ,GAAKL,EAAMW,cAAgB,WAC1C,YAAaN,IAAU,GAAKL,EAAMW,cAAgB,cAEnDC,MAAO,CACNC,cAAeb,EAAMa,gBAGtBN,EAACO,EAAUC,OAAAC,OAAA,GAAKZ,KAGlB,IAEF,OAAOH,CAAI,E,MAcCgB,EAAY,M,yBAkBhBC,KAAAC,KAAO,K,4FAoB6B,W,WAEH,CACxCC,eAAgB,OAChBC,OAAQ,GACRC,aAAc,W,CA1CR,MAAAC,GACN,MAAMC,EAAUN,KAAKC,KAAO,KAAO,KACnC,OACCZ,EAACkB,EAAI,CAAAjB,IAAA,2CAACC,MAAM,kBACXF,EAACiB,EAAO,CAAAhB,IAAA,wDACKU,KAAKQ,MAAMC,OACvBlB,MAAO,CACNmB,SAAUV,KAAKQ,MAAMJ,eAAiB,WACtCO,WAAYX,KAAKQ,MAAMJ,eAAiB,eAGzCf,EAACR,EAAQ,CAAAS,IAAA,2CAACN,MAAOgB,KAAKQ,MAAML,OAAQV,YAAaO,KAAKQ,MAAMJ,aAAcT,cAAeK,KAAKQ,MAAMN,kB,CAmCjG,aAAAU,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,GAAWf,KAAKQ,MAAMC,OAAQ,CAClCO,EAAehB,KAAKQ,MAAMC,O,CAE3BG,EAAcZ,KAAMa,GACpBb,KAAKQ,MAAMC,QAAUQ,EAAYjB,KAAKQ,MAAMC,O,CAItC,qBAAAS,CAAsBL,GAC5BM,EACCnB,KACA,kBACCa,IACA,OAAQA,GACP,IAAK,OACL,IAAK,SACL,IAAK,SACL,IAAK,OACJb,KAAKC,KAAO,KACZ,OAAO,KACR,IAAK,UACL,IAAK,uBACL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cACJD,KAAKC,KAAO,MACZ,OAAO,KACR,QACC,OAAO,M,GAGV,IAAImB,IAAI,CAAC,8CACTP,EACA,CAAEQ,aAAc,Q,CAKX,aAAAC,CAAcT,GACpBU,EAAc,eAAgBvB,KAAMa,E,CAI9B,mBAAAW,CAAoBX,GAC1BM,EACCnB,KACA,gBACCa,GAAmBA,IAAU,cAAgBA,IAAU,YACxD,IAAIO,IAAI,CAAC,uCACTP,EACA,CACCQ,aAAc,Y,CAKV,iBAAAI,GACNzB,KAAKY,cAAcZ,KAAKS,OAAQiB,UAAW,MAC3C1B,KAAKkB,sBAAsBlB,KAAKE,gBAChCF,KAAKsB,cAActB,KAAKG,QACxBH,KAAKwB,oBAAoBxB,KAAKI,a,CAGxB,oBAAAuB,GACN3B,KAAKQ,MAAMC,QAAUO,EAAehB,KAAKQ,MAAMC,O"}

package/dist/kolibri/kol-link-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as e,g as s}from"./index-3fbcceca.js";import{h as a,a7 as d,R as h,aA as n,aL as l,i as r,aM as o,P as f,aN as c,aE as u,S as b,aO as v,aG as _,U as p,aP as g,a as k,I as y}from"./index-44da6e7f.js";import{t as m}from"./i18n-7bf2bd6f.js";import{o as x}from"./ariaCurrentService-6fe36ebc.js";import{p as A}from"./events-29e84d75.js";import{a as L,f as j,g as w}from"./component-names-ed22f86e.js";import"./i18n-0c047df5.js";const K=class{constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,a(this.host,this.ref)},this.onClick=t=>{var e,a;!0===this.state._disabled?A(t):"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&(t.preventDefault(),t.stopPropagation(),d(t,this.ref),null===(a=this.state._on)||void 0===a||a.onClick(t,this.state._href))},this.getRenderValues=()=>{const t="string"==typeof this.state._target&&"_self"!==this.state._target,e={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0);",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:t?"noopener":void 0,download:"string"==typeof this.state._download?this.state._download:void 0};return!0!==this.state._hideLabel||this.state._label||h("[KolLink] Es muss ein Aria-Label gesetzt werden, wenn _hide-label gesetzt ist."),{isExternal:t,tagAttrs:e}},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}render(){const{isExternal:a,tagAttrs:i}=this.getRenderValues(),s=y(this.state._label);return t(e,{key:"0fa6d3c26b8f6811452572fe341879ffd744b685",class:"kol-link-wc"},t("a",Object.assign({key:"39007b3cfd8006d0e492c272c5c4381caffd5d3d",ref:this.catchRef},i,{accessKey:this.state._accessKey,"aria-current":this.state._ariaCurrent,"aria-disabled":this.state._disabled?"true":void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?`${this.state._label}${a?` (${m("kol-open-link-in-tab")})`:""}`:void 0,class:{disabled:!0===this.state._disabled,"external-link":a,"hide-label":!0===this.state._hideLabel}},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick,role:this.state._role,tabIndex:this.state._disabled?-1:this.state._tabIndex}),t(j,{key:"5c7f4a512866f3dddf3e1569c89cba531d46b629",_accessKey:this.state._accessKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:s?"":this.state._label||this.state._href},t("slot",{key:"352558d1520d9039c87992ff9f520d934ce7b210",name:"expert",slot:"expert"})),a&&t(w,{key:"1dc75afd81a923b26abe815aa99b1f6e605e2d8f",class:"external-link-icon",_label:this.state._hideLabel?"":m("kol-open-link-in-tab"),_icons:"codicon codicon-link-external","aria-hidden":this.state._hideLabel})),t(L,{key:"956395af61a7aa10ff478e0d4af1bc6dee4c3573","aria-hidden":"true",hidden:s||!this.state._hideLabel,_accessKey:this.state._accessKey,_align:this.state._tooltipAlign,_label:this.state._label||this.state._href}))}validateAccessKey(t){n(this,t)}validateAriaCurrentValue(t){l(this,t)}validateDisabled(t){r(this,t)}validateDownload(t){o(this,t)}validateHideLabel(t){f(this,t)}validateHref(t){c(this,t,{required:!0})}validateIcons(t){u(this,t)}validateLabel(t){b(this,t)}validateOn(t){v(this,t)}validateRole(t){_(this,t)}validateTabIndex(t){p(this,t)}validateTarget(t){g(this,t)}validateTooltipAlign(t){k(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel),this.validateHref(this._href),this.validateIcons(this._icons),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTooltipAlign(this._tooltipAlign),this.unsubscribeOnLocationChange=x((t=>{this.state._ariaCurrent=t===this.state._href?this.state._ariaCurrentValue:void 0}))}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange()}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"]}}};export{K as kol_link_wc};
+import{r as t,h as i,H as e,g as s}from"./index-3fbcceca.js";import{t as a}from"./i18n-37baa421.js";import{o as d}from"./ariaCurrentService-6fe36ebc.js";import{p as n}from"./events-29e84d75.js";import{a as r,f as o,g as l}from"./component-names-ed22f86e.js";import{w as h,i as c,n as f,j as b}from"./prop.validators-29d576d2.js";import{v as u}from"./href-7d17954a.js";import{a as p,s as v}from"./reuse-b66836de.js";import{v as m}from"./access-key-04ca8172.js";import{v as _}from"./disabled-fbc49ac0.js";import{v as g}from"./hide-label-c461d8fe.js";import{v as j}from"./icons-d2e01be4.js";import{a as y}from"./label-e56ffdc6.js";import{v as k}from"./alternative-button-link-role-97826181.js";import{v as x}from"./tab-index-2cbc1ad1.js";import{v as w}from"./tooltip-align-c13a7aa7.js";import"./i18n-0c047df5.js";import"./index-4a3076fc.js";import"./dev.utils-1ca991a2.js";import"./align-fc528dec.js";const A=["date","location","page","step","time","true","false"],C=(t,e)=>{h(t,"_ariaCurrentValue",(t=>"string"==typeof t&&A.includes(t)),new Set([`AriaCurrentValue {${A.join(", ")}`]),e,{defaultValue:"page"})},L=(t,e)=>{c(t,"_download",e)},K=(t,e)=>{"object"==typeof e&&"function"==typeof(null==e?void 0:e.onClick)&&(t.state=Object.assign(Object.assign({},t.state),{_on:e}))},V=(t,e)=>{c(t,"_target",e)},I=class{constructor(e){t(this,e),this.catchRef=t=>{this.ref=t,p(this.host,this.ref)},this.onClick=t=>{var e,a;!0===this.state._disabled?n(t):"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&(t.preventDefault(),t.stopPropagation(),f(t,this.ref),null===(a=this.state._on)||void 0===a||a.onClick(t,this.state._href))},this.getRenderValues=()=>{const t="string"==typeof this.state._target&&"_self"!==this.state._target,e={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0);",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:t?"noopener":void 0,download:"string"==typeof this.state._download?this.state._download:void 0};return!0!==this.state._hideLabel||this.state._label||b("[KolLink] Es muss ein Aria-Label gesetzt werden, wenn _hide-label gesetzt ist."),{isExternal:t,tagAttrs:e}},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}render(){const{isExternal:t,tagAttrs:s}=this.getRenderValues(),d=v(this.state._label);return i(e,{key:"82f9f5d0f689c25163bd6136ca5c34dcb1fd692b",class:"kol-link-wc"},i("a",Object.assign({key:"b7db13f7744362450d778d707e5540558d997ecb",ref:this.catchRef},s,{accessKey:this.state._accessKey,"aria-current":this.state._ariaCurrent,"aria-disabled":this.state._disabled?"true":void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?`${this.state._label}${t?` (${a("kol-open-link-in-tab")})`:""}`:void 0,class:{disabled:!0===this.state._disabled,"external-link":t,"hide-label":!0===this.state._hideLabel}},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick,role:this.state._role,tabIndex:this.state._disabled?-1:this.state._tabIndex}),i(o,{key:"74e96d85bcef160e5cb9c0d5676981b32e5abaaf",_accessKey:this.state._accessKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:d?"":this.state._label||this.state._href},i("slot",{key:"e6f537ca1733bf45673369cb51f9cd0a5ed8d349",name:"expert",slot:"expert"})),t&&i(l,{key:"b41fee1ddbffadab9c2371ff336fadb3ce7abe74",class:"external-link-icon",_label:this.state._hideLabel?"":a("kol-open-link-in-tab"),_icons:"codicon codicon-link-external","aria-hidden":this.state._hideLabel})),i(r,{key:"c6e48539bc159d804fd5cff1983a1a652f16a312","aria-hidden":"true",hidden:d||!this.state._hideLabel,_accessKey:this.state._accessKey,_align:this.state._tooltipAlign,_label:this.state._label||this.state._href}))}validateAccessKey(t){m(this,t)}validateAriaCurrentValue(t){C(this,t)}validateDisabled(t){_(this,t)}validateDownload(t){L(this,t)}validateHideLabel(t){g(this,t)}validateHref(t){u(this,t,{required:!0})}validateIcons(t){j(this,t)}validateLabel(t){y(this,t)}validateOn(t){K(this,t)}validateRole(t){k(this,t)}validateTabIndex(t){x(this,t)}validateTarget(t){V(this,t)}validateTooltipAlign(t){w(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel),this.validateHref(this._href),this.validateIcons(this._icons),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTooltipAlign(this._tooltipAlign),this.unsubscribeOnLocationChange=d((t=>{this.state._ariaCurrent=t===this.state._href?this.state._ariaCurrentValue:void 0}))}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange()}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"]}}};export{I as kol_link_wc};