@public-ui/components 2.0.5 → 2.0.6

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

@@ -1 +1 @@
-{"version":3,"names":["Icon","props","h","class","_label","label","length","ariaLabel","_icons","icon","AlertIcon","type","translate","KolAlertWc","this","close","_a","_on","onClose","undefined","Event","on","onClick","validateOnValue","value","_level","render","state","_alert","Log","debug","navigator","vibrate","e","setTimeout","validateAlert","Host","alert","_type","_variant","hasCloser","_hasCloser","role","_hideLabel","left","_tooltipAlign","watchBoolean","validateHasCloser","validateLabel","validateLevel","watchHeadingLevel","validateOn","setState","validateType","watchValidator","alertTypeOptions","includes","Set","join","validateVariant","alertVariantOptions","componentWillLoad","KolButtonWc","hasExpertSlot","showExpertSlot","Object","assign","ref","catchRef","accessKey","_accessKey","_ariaControls","mapBoolean2String","_ariaExpanded","mapStringOrBoolean2String","_ariaSelected","button","disabled","_disabled","_customClass","id","_id","name","_name","_role","tabIndex","_tabIndex","slot","hidden","_align","constructor","hostRef","propagateFocus","host","event","propagateSubmitEventToForm","form","propagateResetEventToForm","stopPropagation","tryToDispatchKoliBriEvent","_value","controller","setFormAssociatedValue","setEventTarget","_b","AssociatedInputController","validateAccessKey","validateAriaControls","validateAriaExpanded","validateAriaSelected","validateCustomClass","validateDisabled","validateHideLabel","validateIcons","validateId","watchString","validateLabelWithExpertSlot","required","validateName","validateButtonCallbacks","validateRole","validateAlternativeButtonLinkRole","validateSyncValueBySelector","validateTabIndex","validateTooltipAlign","validateButtonType","validateValue","validateButtonVariant","_syncValueBySelector","KolHeadingWc","renderHeadline","headline","level","validHeadline","HeadlineTag","variant","renderSecondaryHeadline","validateSecondaryHeadline","validateHeadingVariant","_secondaryHeadline"],"sources":["src/components/alert/component.tsx","src/components/button/component.tsx","src/components/heading/component.tsx"],"sourcesContent":["import type { JSX } from '@stencil/core';\nimport { alertTypeOptions, alertVariantOptions, setState, validateHasCloser, validateLabel, watchBoolean, watchValidator } from '@public-ui/schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { Log } from '../../utils/dev.utils';\nimport { watchHeadingLevel } from '../heading/validation';\n\nimport type {\n\tAlertAPI,\n\tAlertStates,\n\tAlertType,\n\tAlertVariant,\n\tHasCloserPropType,\n\tHeadingLevel,\n\tKoliBriAlertEventCallbacks,\n\tLabelPropType,\n} from '@public-ui/schema';\nconst Icon = (props: { ariaLabel: string; icon: string; label?: string }) => {\n\treturn <kol-icon class=\"heading-icon\" _label={typeof props.label === 'string' && props.label.length > 0 ? '' : props.ariaLabel} _icons={props.icon} />;\n};\n\nconst AlertIcon = (props: { label?: string; type?: AlertType }) => {\n\tswitch (props.type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"codicon codicon-error\" label={props.label} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"codicon codicon-info\" label={props.label} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"codicon codicon-warning\" label={props.label} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"codicon codicon-pass\" label={props.label} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"codicon codicon-comment\" label={props.label} />;\n\t}\n};\n\n/**\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-alert-wc',\n\tshadow: false,\n})\nexport class KolAlertWc implements AlertAPI {\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tif (this.state._alert) {\n\t\t\t/**\n\t\t\t * - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n\t\t\t * - https://googlechrome.github.io/samples/vibration/\n\t\t\t */\n\t\t\ttry {\n\t\t\t\tLog.debug(['Navigator should vibrate ...', navigator.vibrate([100, 75, 100, 75, 100])]);\n\t\t\t} catch (e) {\n\t\t\t\tLog.debug('Navigator does not support vibration.');\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.validateAlert(false);\n\t\t\t}, 10000);\n\t\t}\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\talert: true,\n\t\t\t\t\t[this.state._type as string]: true,\n\t\t\t\t\t[this.state._variant as string]: true,\n\t\t\t\t\thasCloser: !!this.state._hasCloser,\n\t\t\t\t}}\n\t\t\t\trole={this.state._alert ? 'alert' : undefined}\n\t\t\t>\n\t\t\t\t<div class=\"heading\">\n\t\t\t\t\t<AlertIcon label={this.state._label} type={this.state._type} />\n\t\t\t\t\t<div class=\"heading-content\">\n\t\t\t\t\t\t{typeof this.state._label === 'string' && this.state._label?.length > 0 && (\n\t\t\t\t\t\t\t<kol-heading-wc _label={this.state._label} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._variant === 'msg' && (\n\t\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label={translate('kol-close')}\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{this.state._variant === 'card' && (\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop() public _alert?: boolean = false;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\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 which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t */\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\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?: AlertType = 'default';\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: AlertStates = {\n\t\t_level: 1,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriAlertEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAlertEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriAlertEventCallbacks>(\n\t\t\t\tthis,\n\t\t\t\t'_on',\n\t\t\t\t{\n\t\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t\t}\n\t\t\t\t// {\n\t\t\t\t// \tafterPatch: (value: unknown) => {\n\t\t\t\t// \t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t\t// \t},\n\t\t\t\t// }\n\t\t\t);\n\t\t\t// } else {\n\t\t\t// \tsetState<KoliBriAlertEventCallbacks>(this, '_on', null, {\n\t\t\t// \t\tafterPatch: (value: unknown) => {\n\t\t\t// \t\t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t// \t\t},\n\t\t\t// \t});\n\t\t}\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value?) => typeof value === 'string' && alertTypeOptions.includes(value),\n\t\t\tnew Set(`String {${alertTypeOptions.join(', ')}`),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: AlertVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value?) => typeof value === 'string' && alertVariantOptions.includes(value),\n\t\t\tnew Set(`AlertVariant {${alertVariantOptions.join(', ')}`),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateType(this._type);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tButtonAPI,\n\tButtonCallbacksPropType,\n\tButtonStates,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tDisabledPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '@public-ui/schema';\nimport {\n\tmapBoolean2String,\n\tmapStringOrBoolean2String,\n\tpropagateFocus,\n\tsetEventTarget,\n\tsetState,\n\tshowExpertSlot,\n\tvalidateAccessKey,\n\tvalidateAlternativeButtonLinkRole,\n\tvalidateAriaControls,\n\tvalidateAriaExpanded,\n\tvalidateAriaSelected,\n\tvalidateButtonCallbacks,\n\tvalidateButtonType,\n\tvalidateButtonVariant,\n\tvalidateCustomClass,\n\tvalidateDisabled,\n\tvalidateHideLabel,\n\tvalidateIcons,\n\tvalidateLabelWithExpertSlot,\n\tvalidateTabIndex,\n\tvalidateTooltipAlign,\n\twatchString,\n} from '@public-ui/schema';\nimport { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\n\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';\nimport { AssociatedInputController } from '../input-adapter-leanup/associated.controller';\n\nimport type { JSX } from '@stencil/core';\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-button-wc',\n\tshadow: false,\n})\nexport class KolButtonWc implements ButtonAPI {\n\t@Element() private readonly host?: HTMLKolButtonWcElement;\n\tprivate ref?: HTMLButtonElement;\n\n\tprivate readonly catchRef = (ref?: HTMLButtonElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onClick = (event: MouseEvent) => {\n\t\tif (this.state._type === 'submit') {\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} else if (this.state._type === 'reset') {\n\t\t\tpropagateResetEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\t// Event handling\n\t\t\tstopPropagation(event);\n\t\t\ttryToDispatchKoliBriEvent('click', this.host, this.state._value);\n\n\t\t\t// TODO: Static form handling\n\t\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\n\t\t\t// Callback\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tsetEventTarget(event, this.ref);\n\t\t\t\tthis.state._on?.onClick(event, this.state._value);\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<button\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\taccessKey={this.state._accessKey || undefined}\n\t\t\t\t\taria-controls={this.state._ariaControls}\n\t\t\t\t\taria-expanded={mapBoolean2String(this.state._ariaExpanded)}\n\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\taria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\t[this.state._variant as string]: this.state._variant !== 'custom',\n\t\t\t\t\t\t[this.state._customClass as string]:\n\t\t\t\t\t\t\tthis.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,\n\t\t\t\t\t\t'hide-label': this.state._hideLabel === true,\n\t\t\t\t\t}}\n\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\tid={this.state._id}\n\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t{...this.state._on}\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\trole={this.state._role}\n\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\ttype={this.state._type}\n\t\t\t\t>\n\t\t\t\t\t<kol-span-wc\n\t\t\t\t\t\tclass=\"button-inner\"\n\t\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_label={hasExpertSlot ? '' : this.state._label}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t\t</kol-span-wc>\n\t\t\t\t</button>\n\t\t\t\t<kol-tooltip-wc\n\t\t\t\t\t/**\n\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t */\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\thidden={hasExpertSlot || !this.state._hideLabel}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_align={this.state._tooltipAlign}\n\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t></kol-tooltip-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: AssociatedInputController;\n\n\t/**\n\t * Defines the elements access key.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\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 * 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 icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\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 technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\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 * 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 * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: ButtonStates = {\n\t\t_icons: {},\n\t\t_label: '', // ⚠ required\n\t\t_on: {},\n\t\t_type: 'button',\n\t\t_variant: 'normal',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new AssociatedInputController(this, 'button', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: AccessKeyPropType): void {\n\t\tvalidateAccessKey(this, value);\n\t}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\tvalidateAriaControls(this, value);\n\t}\n\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: boolean): void {\n\t\tvalidateAriaExpanded(this, value);\n\t}\n\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: boolean): void {\n\t\tvalidateAriaSelected(this, value);\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: CustomClassPropType): void {\n\t\tvalidateCustomClass(this, value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsPropType): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\twatchString(this, '_id', value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this, value, {\n\t\t\trequired: true,\n\t\t});\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?: ButtonCallbacksPropType<StencilUnknown>): void {\n\t\tvalidateButtonCallbacks(this, value);\n\t}\n\n\t@Watch('_role')\n\tpublic validateRole(value?: AlternativeButtonLinkRolePropType): void {\n\t\tvalidateAlternativeButtonLinkRole(this, 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\tvalidateTabIndex(this, value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: ButtonTypePropType): void {\n\t\tvalidateButtonType(this, value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tsetState(this, '_value', value);\n\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: ButtonVariantPropType): void {\n\t\tvalidateButtonVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\n\t\tthis.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateName(this._name);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateSyncValueBySelector(this._syncValueBySelector);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n","import type { HeadingAPI, HeadingLevel, HeadingStates, HeadingVariantPropType, LabelWithExpertSlotPropType } from '@public-ui/schema';\nimport { validateHeadingVariant, validateLabelWithExpertSlot, watchString } from '@public-ui/schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { watchHeadingLevel } from './validation';\n\nimport type { JSX } from '@stencil/core';\n/**\n * @slot - Inhalt der Überschrift.\n */\n@Component({\n\ttag: 'kol-heading-wc',\n\tshadow: false,\n})\nexport class KolHeadingWc implements HeadingAPI {\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 which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Setzt den Text einer weiteren Überschrift, einen Level kleiner, unter der Ersten.\n\t */\n\t@Prop() public _secondaryHeadline?: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: HeadingVariantPropType;\n\n\t@State() public state: HeadingStates = {\n\t\t_label: '', // ⚠ required\n\t\t_level: 1,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_secondaryHeadline')\n\tpublic validateSecondaryHeadline(value?: string): void {\n\t\twatchString(this, '_secondaryHeadline', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: HeadingVariantPropType): void {\n\t\tvalidateHeadingVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateSecondaryHeadline(this._secondaryHeadline);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tprivate readonly renderHeadline = (headline: LabelWithExpertSlotPropType, level?: number): JSX.Element => {\n\t\tconst validHeadline = typeof level === 'number' && level > 0 && level <= 6;\n\t\tconst HeadlineTag = validHeadline ? `h${level}` : 'strong';\n\t\tconst variant = this._variant || HeadlineTag;\n\n\t\treturn (\n\t\t\t<HeadlineTag\n\t\t\t\tclass={{\n\t\t\t\t\theadline: true,\n\t\t\t\t\t[`headline-${variant}`]: true,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{headline}\n\t\t\t\t<slot name=\"expert\" />\n\t\t\t</HeadlineTag>\n\t\t);\n\t};\n\n\tprivate readonly renderSecondaryHeadline = (headline: string, level?: number): JSX.Element => {\n\t\tswitch (level) {\n\t\t\tcase 1: // if the headline is only strong\n\t\t\t\treturn <span class=\"secondary-headline\">{headline}</span>;\n\t\t\tcase 2: // if the headline is h1\n\t\t\t\treturn <h2 class=\"secondary-headline\">{headline}</h2>;\n\t\t\tcase 3: // if the headline is h2\n\t\t\t\treturn <h3 class=\"secondary-headline\">{headline}</h3>;\n\t\t\tcase 4: // if the headline is h3\n\t\t\t\treturn <h4 class=\"secondary-headline\">{headline}</h4>;\n\t\t\tcase 5: // if the headline is h4\n\t\t\t\treturn <h5 class=\"secondary-headline\">{headline}</h5>;\n\t\t\tcase 6: // if the headline is h5\n\t\t\t\treturn <h6 class=\"secondary-headline\">{headline}</h6>;\n\t\t\tdefault: // if the headline is h6\n\t\t\t\treturn <strong class=\"secondary-headline\">{headline}</strong>;\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (\n\t\t\t\t\t<hgroup>\n\t\t\t\t\t\t{this.renderHeadline(this.state._label, this.state._level)}\n\t\t\t\t\t\t{this.state._secondaryHeadline && this.renderSecondaryHeadline(this.state._secondaryHeadline, this.state._level + 1)}\n\t\t\t\t\t</hgroup>\n\t\t\t\t) : (\n\t\t\t\t\tthis.renderHeadline(this.state._label, this.state._level)\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["Icon","props","h","class","_label","label","length","ariaLabel","_icons","icon","AlertIcon","type","translate","KolAlertWc","this","close","_a","_on","onClose","undefined","Event","on","onClick","validateOnValue","value","_level","render","state","_alert","Log","debug","navigator","vibrate","e","setTimeout","validateAlert","Host","alert","_type","_variant","hasCloser","_hasCloser","role","_hideLabel","left","_tooltipAlign","watchBoolean","validateHasCloser","validateLabel","validateLevel","watchHeadingLevel","validateOn","setState","validateType","watchValidator","alertTypeOptions","includes","Set","join","validateVariant","alertVariantOptions","componentWillLoad","KolButtonWc","hasExpertSlot","showExpertSlot","Object","assign","ref","catchRef","accessKey","_accessKey","_ariaControls","mapBoolean2String","_ariaExpanded","mapStringOrBoolean2String","_ariaSelected","button","disabled","_disabled","_customClass","id","_id","name","_name","_role","tabIndex","_tabIndex","slot","hidden","_align","constructor","hostRef","propagateFocus","host","event","propagateSubmitEventToForm","form","propagateResetEventToForm","stopPropagation","tryToDispatchKoliBriEvent","_value","controller","setFormAssociatedValue","setEventTarget","_b","AssociatedInputController","validateAccessKey","validateAriaControls","validateAriaExpanded","validateAriaSelected","validateCustomClass","validateDisabled","validateHideLabel","validateIcons","validateId","watchString","validateLabelWithExpertSlot","required","validateName","validateButtonCallbacks","validateRole","validateAlternativeButtonLinkRole","validateSyncValueBySelector","validateTabIndex","validateTooltipAlign","validateButtonType","validateValue","validateButtonVariant","_syncValueBySelector","KolHeadingWc","renderHeadline","headline","level","validHeadline","HeadlineTag","variant","renderSecondaryHeadline","validateSecondaryHeadline","validateHeadingVariant","_secondaryHeadline"],"sources":["src/components/alert/component.tsx","src/components/button/component.tsx","src/components/heading/component.tsx"],"sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Log, alertTypeOptions, alertVariantOptions, setState, validateHasCloser, validateLabel, watchBoolean, watchValidator } from '@public-ui/schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { watchHeadingLevel } from '../heading/validation';\n\nimport type {\n\tAlertAPI,\n\tAlertStates,\n\tAlertType,\n\tAlertVariant,\n\tHasCloserPropType,\n\tHeadingLevel,\n\tKoliBriAlertEventCallbacks,\n\tLabelPropType,\n} from '@public-ui/schema';\nconst Icon = (props: { ariaLabel: string; icon: string; label?: string }) => {\n\treturn <kol-icon class=\"heading-icon\" _label={typeof props.label === 'string' && props.label.length > 0 ? '' : props.ariaLabel} _icons={props.icon} />;\n};\n\nconst AlertIcon = (props: { label?: string; type?: AlertType }) => {\n\tswitch (props.type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"codicon codicon-error\" label={props.label} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"codicon codicon-info\" label={props.label} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"codicon codicon-warning\" label={props.label} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"codicon codicon-pass\" label={props.label} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"codicon codicon-comment\" label={props.label} />;\n\t}\n};\n\n/**\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-alert-wc',\n\tshadow: false,\n})\nexport class KolAlertWc implements AlertAPI {\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tif (this.state._alert) {\n\t\t\t/**\n\t\t\t * - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n\t\t\t * - https://googlechrome.github.io/samples/vibration/\n\t\t\t */\n\t\t\ttry {\n\t\t\t\tLog.debug(['Navigator should vibrate ...', navigator.vibrate([100, 75, 100, 75, 100])]);\n\t\t\t} catch (e) {\n\t\t\t\tLog.debug('Navigator does not support vibration.');\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.validateAlert(false);\n\t\t\t}, 10000);\n\t\t}\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\talert: true,\n\t\t\t\t\t[this.state._type as string]: true,\n\t\t\t\t\t[this.state._variant as string]: true,\n\t\t\t\t\thasCloser: !!this.state._hasCloser,\n\t\t\t\t}}\n\t\t\t\trole={this.state._alert ? 'alert' : undefined}\n\t\t\t>\n\t\t\t\t<div class=\"heading\">\n\t\t\t\t\t<AlertIcon label={this.state._label} type={this.state._type} />\n\t\t\t\t\t<div class=\"heading-content\">\n\t\t\t\t\t\t{typeof this.state._label === 'string' && this.state._label?.length > 0 && (\n\t\t\t\t\t\t\t<kol-heading-wc _label={this.state._label} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._variant === 'msg' && (\n\t\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label={translate('kol-close')}\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{this.state._variant === 'card' && (\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop() public _alert?: boolean = false;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\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 which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t */\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\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?: AlertType = 'default';\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: AlertStates = {\n\t\t_level: 1,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriAlertEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAlertEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriAlertEventCallbacks>(\n\t\t\t\tthis,\n\t\t\t\t'_on',\n\t\t\t\t{\n\t\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t\t}\n\t\t\t\t// {\n\t\t\t\t// \tafterPatch: (value: unknown) => {\n\t\t\t\t// \t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t\t// \t},\n\t\t\t\t// }\n\t\t\t);\n\t\t\t// } else {\n\t\t\t// \tsetState<KoliBriAlertEventCallbacks>(this, '_on', null, {\n\t\t\t// \t\tafterPatch: (value: unknown) => {\n\t\t\t// \t\t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t// \t\t},\n\t\t\t// \t});\n\t\t}\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value?) => typeof value === 'string' && alertTypeOptions.includes(value),\n\t\t\tnew Set(`String {${alertTypeOptions.join(', ')}`),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: AlertVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value?) => typeof value === 'string' && alertVariantOptions.includes(value),\n\t\t\tnew Set(`AlertVariant {${alertVariantOptions.join(', ')}`),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateType(this._type);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tButtonAPI,\n\tButtonCallbacksPropType,\n\tButtonStates,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tDisabledPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '@public-ui/schema';\nimport {\n\tmapBoolean2String,\n\tmapStringOrBoolean2String,\n\tpropagateFocus,\n\tsetEventTarget,\n\tsetState,\n\tshowExpertSlot,\n\tvalidateAccessKey,\n\tvalidateAlternativeButtonLinkRole,\n\tvalidateAriaControls,\n\tvalidateAriaExpanded,\n\tvalidateAriaSelected,\n\tvalidateButtonCallbacks,\n\tvalidateButtonType,\n\tvalidateButtonVariant,\n\tvalidateCustomClass,\n\tvalidateDisabled,\n\tvalidateHideLabel,\n\tvalidateIcons,\n\tvalidateLabelWithExpertSlot,\n\tvalidateTabIndex,\n\tvalidateTooltipAlign,\n\twatchString,\n} from '@public-ui/schema';\nimport { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\n\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';\nimport { AssociatedInputController } from '../input-adapter-leanup/associated.controller';\n\nimport type { JSX } from '@stencil/core';\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-button-wc',\n\tshadow: false,\n})\nexport class KolButtonWc implements ButtonAPI {\n\t@Element() private readonly host?: HTMLKolButtonWcElement;\n\tprivate ref?: HTMLButtonElement;\n\n\tprivate readonly catchRef = (ref?: HTMLButtonElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onClick = (event: MouseEvent) => {\n\t\tif (this.state._type === 'submit') {\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} else if (this.state._type === 'reset') {\n\t\t\tpropagateResetEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\t// Event handling\n\t\t\tstopPropagation(event);\n\t\t\ttryToDispatchKoliBriEvent('click', this.host, this.state._value);\n\n\t\t\t// TODO: Static form handling\n\t\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\n\t\t\t// Callback\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tsetEventTarget(event, this.ref);\n\t\t\t\tthis.state._on?.onClick(event, this.state._value);\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<button\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\taccessKey={this.state._accessKey || undefined}\n\t\t\t\t\taria-controls={this.state._ariaControls}\n\t\t\t\t\taria-expanded={mapBoolean2String(this.state._ariaExpanded)}\n\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\taria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\t[this.state._variant as string]: this.state._variant !== 'custom',\n\t\t\t\t\t\t[this.state._customClass as string]:\n\t\t\t\t\t\t\tthis.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,\n\t\t\t\t\t\t'hide-label': this.state._hideLabel === true,\n\t\t\t\t\t}}\n\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\tid={this.state._id}\n\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t{...this.state._on}\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\trole={this.state._role}\n\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\ttype={this.state._type}\n\t\t\t\t>\n\t\t\t\t\t<kol-span-wc\n\t\t\t\t\t\tclass=\"button-inner\"\n\t\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_label={hasExpertSlot ? '' : this.state._label}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t\t</kol-span-wc>\n\t\t\t\t</button>\n\t\t\t\t<kol-tooltip-wc\n\t\t\t\t\t/**\n\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t */\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\thidden={hasExpertSlot || !this.state._hideLabel}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_align={this.state._tooltipAlign}\n\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t></kol-tooltip-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: AssociatedInputController;\n\n\t/**\n\t * Defines the elements access key.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\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 * 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 icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\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 technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\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 * 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 * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: ButtonStates = {\n\t\t_icons: {},\n\t\t_label: '', // ⚠ required\n\t\t_on: {},\n\t\t_type: 'button',\n\t\t_variant: 'normal',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new AssociatedInputController(this, 'button', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: AccessKeyPropType): void {\n\t\tvalidateAccessKey(this, value);\n\t}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\tvalidateAriaControls(this, value);\n\t}\n\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: boolean): void {\n\t\tvalidateAriaExpanded(this, value);\n\t}\n\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: boolean): void {\n\t\tvalidateAriaSelected(this, value);\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: CustomClassPropType): void {\n\t\tvalidateCustomClass(this, value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsPropType): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\twatchString(this, '_id', value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this, value, {\n\t\t\trequired: true,\n\t\t});\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?: ButtonCallbacksPropType<StencilUnknown>): void {\n\t\tvalidateButtonCallbacks(this, value);\n\t}\n\n\t@Watch('_role')\n\tpublic validateRole(value?: AlternativeButtonLinkRolePropType): void {\n\t\tvalidateAlternativeButtonLinkRole(this, 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\tvalidateTabIndex(this, value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: ButtonTypePropType): void {\n\t\tvalidateButtonType(this, value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tsetState(this, '_value', value);\n\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: ButtonVariantPropType): void {\n\t\tvalidateButtonVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\n\t\tthis.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateName(this._name);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateSyncValueBySelector(this._syncValueBySelector);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n","import type { HeadingAPI, HeadingLevel, HeadingStates, HeadingVariantPropType, LabelWithExpertSlotPropType } from '@public-ui/schema';\nimport { validateHeadingVariant, validateLabelWithExpertSlot, watchString } from '@public-ui/schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { watchHeadingLevel } from './validation';\n\nimport type { JSX } from '@stencil/core';\n/**\n * @slot - Inhalt der Überschrift.\n */\n@Component({\n\ttag: 'kol-heading-wc',\n\tshadow: false,\n})\nexport class KolHeadingWc implements HeadingAPI {\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 which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Setzt den Text einer weiteren Überschrift, einen Level kleiner, unter der Ersten.\n\t */\n\t@Prop() public _secondaryHeadline?: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: HeadingVariantPropType;\n\n\t@State() public state: HeadingStates = {\n\t\t_label: '', // ⚠ required\n\t\t_level: 1,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_secondaryHeadline')\n\tpublic validateSecondaryHeadline(value?: string): void {\n\t\twatchString(this, '_secondaryHeadline', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: HeadingVariantPropType): void {\n\t\tvalidateHeadingVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateSecondaryHeadline(this._secondaryHeadline);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tprivate readonly renderHeadline = (headline: LabelWithExpertSlotPropType, level?: number): JSX.Element => {\n\t\tconst validHeadline = typeof level === 'number' && level > 0 && level <= 6;\n\t\tconst HeadlineTag = validHeadline ? `h${level}` : 'strong';\n\t\tconst variant = this._variant || HeadlineTag;\n\n\t\treturn (\n\t\t\t<HeadlineTag\n\t\t\t\tclass={{\n\t\t\t\t\theadline: true,\n\t\t\t\t\t[`headline-${variant}`]: true,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{headline}\n\t\t\t\t<slot name=\"expert\" />\n\t\t\t</HeadlineTag>\n\t\t);\n\t};\n\n\tprivate readonly renderSecondaryHeadline = (headline: string, level?: number): JSX.Element => {\n\t\tswitch (level) {\n\t\t\tcase 1: // if the headline is only strong\n\t\t\t\treturn <span class=\"secondary-headline\">{headline}</span>;\n\t\t\tcase 2: // if the headline is h1\n\t\t\t\treturn <h2 class=\"secondary-headline\">{headline}</h2>;\n\t\t\tcase 3: // if the headline is h2\n\t\t\t\treturn <h3 class=\"secondary-headline\">{headline}</h3>;\n\t\t\tcase 4: // if the headline is h3\n\t\t\t\treturn <h4 class=\"secondary-headline\">{headline}</h4>;\n\t\t\tcase 5: // if the headline is h4\n\t\t\t\treturn <h5 class=\"secondary-headline\">{headline}</h5>;\n\t\t\tcase 6: // if the headline is h5\n\t\t\t\treturn <h6 class=\"secondary-headline\">{headline}</h6>;\n\t\t\tdefault: // if the headline is h6\n\t\t\t\treturn <strong class=\"secondary-headline\">{headline}</strong>;\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (\n\t\t\t\t\t<hgroup>\n\t\t\t\t\t\t{this.renderHeadline(this.state._label, this.state._level)}\n\t\t\t\t\t\t{this.state._secondaryHeadline && this.renderSecondaryHeadline(this.state._secondaryHeadline, this.state._level + 1)}\n\t\t\t\t\t</hgroup>\n\t\t\t\t) : (\n\t\t\t\t\tthis.renderHeadline(this.state._label, this.state._level)\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e}from"./index-a5e15b1e.js";const i="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tkol-alert-wc {\n\t\tdisplay: grid;\n\t}\n\n\tkol-alert-wc .heading {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\tkol-alert-wc .heading > div {\n\t\tflex-grow: 1;\n\t}\n\n\t.close {\n\t\toutline: transparent solid 1px; /* Visible with forced colors */\n\t}\n}\n",o=i,l=class{constructor(n){t(this,n),this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){return n(e,null,n("kol-alert-wc",{_alert:this._alert,_hasCloser:this._hasCloser,_label:this._label,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},n("slot",null)))}};l.style={default:o};export{l as kol_alert};
+import{r as t,h as n,H as e}from"./index-a5e15b1e.js";const i="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tkol-alert-wc {\n\t\tdisplay: grid;\n\t}\n\n\tkol-alert-wc .heading {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\tkol-alert-wc .heading > div {\n\t\tflex-grow: 1;\n\t}\n\n\t.close {\n\t\toutline: transparent solid 1px; /* Visible with forced colors */\n\t}\n}\n",o=i,l=class{constructor(n){t(this,n),this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){return n(e,null,n("kol-alert-wc",{_alert:this._alert,_hasCloser:this._hasCloser,_label:this._label,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},n("slot",null)))}};l.style={default:o};export{l as kol_alert};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolAlertDefaultStyle0","KolAlert","_level","render","h","Host","_alert","this","_hasCloser","_label","_on","_type","_variant"],"sources":["src/components/alert/style.css?tag=kol-alert&mode=default&encapsulation=shadow","src/components/alert/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n@layer kol-component {\n\tkol-alert-wc {\n\t\tdisplay: grid;\n\t}\n\n\tkol-alert-wc .heading {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\tkol-alert-wc .heading > div {\n\t\tflex-grow: 1;\n\t}\n\n\t.close {\n\t\toutline: transparent solid 1px; /* Visible with forced colors */\n\t}\n}\n","import type { AlertProps, AlertStates, AlertType, AlertVariant, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '@public-ui/schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-alert',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAlert implements AlertProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-alert-wc\n\t\t\t\t\t_alert={this._alert}\n\t\t\t\t\t_hasCloser={this._hasCloser}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_level={this._level}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-alert-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop() public _alert?: boolean = false;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\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 which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t */\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\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?: AlertType = 'default';\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: AlertStates = {\n\t\t_level: 1,\n\t};\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,ilIACxB,MAAAC,EAAeD,E,MCaFE,EAAQ,M,qCAsBc,M,gBAMI,M,kCAUC,E,8BAUJ,U,cAKM,M,WAEJ,CACpCC,OAAQ,E,CAvDF,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,gBACCE,OAAQC,KAAKD,OACbE,WAAYD,KAAKC,WACjBC,OAAQF,KAAKE,OACbP,OAAQK,KAAKL,OACbQ,IAAKH,KAAKG,IACVC,MAAOJ,KAAKI,MACZC,SAAUL,KAAKK,UAEfR,EAAA,c"}
+{"version":3,"names":["defaultStyleCss","KolAlertDefaultStyle0","KolAlert","_level","render","h","Host","_alert","this","_hasCloser","_label","_on","_type","_variant"],"sources":["src/components/alert/style.css?tag=kol-alert&mode=default&encapsulation=shadow","src/components/alert/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n@layer kol-component {\n\tkol-alert-wc {\n\t\tdisplay: grid;\n\t}\n\n\tkol-alert-wc .heading {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\tkol-alert-wc .heading > div {\n\t\tflex-grow: 1;\n\t}\n\n\t.close {\n\t\toutline: transparent solid 1px; /* Visible with forced colors */\n\t}\n}\n","import type { AlertProps, AlertStates, AlertType, AlertVariant, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '@public-ui/schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-alert',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAlert implements AlertProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-alert-wc\n\t\t\t\t\t_alert={this._alert}\n\t\t\t\t\t_hasCloser={this._hasCloser}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_level={this._level}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-alert-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop() public _alert?: boolean = false;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\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 which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t */\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\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?: AlertType = 'default';\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: AlertStates = {\n\t\t_level: 1,\n\t};\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,kpIACxB,MAAAC,EAAeD,E,MCaFE,EAAQ,M,qCAsBc,M,gBAMI,M,kCAUC,E,8BAUJ,U,cAKM,M,WAEJ,CACpCC,OAAQ,E,CAvDF,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,gBACCE,OAAQC,KAAKD,OACbE,WAAYD,KAAKC,WACjBC,OAAQF,KAAKE,OACbP,OAAQK,KAAKL,OACbQ,IAAKH,KAAKG,IACVC,MAAOJ,KAAKI,MACZC,SAAUL,KAAKK,UAEfR,EAAA,c"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as a,H as s}from"./index-a5e15b1e.js";import{y as i,v as e}from"./index-836a963f.js";import{a as r}from"./i18n-e3260ea2.js";import"./index-4391c04d.js";import"./dev.utils-44a0a914.js";const n=a=>0===a.length?"":a[0].toUpperCase(),l=a=>{const t=a.split(/\s+/),s=t.at(0),e=t.at(-1);return t.length>=2&&s&&e?`${n(s)}${n(e)}`:n(a)},o=class{constructor(a){t(this,a),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return a(s,null,a("div",{"aria-label":r("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"container",role:"img"},this.state._src?a("img",{alt:"","aria-hidden":"true",class:"image",src:this.state._src}):a("span",{"aria-hidden":"true",class:"initials"},l(this.state._label.trim()))))}validateSrc(a){i(this,a)}validateLabel(a){e(this,a,{required:!0})}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}};export{o as kol_avatar_wc};
+import{r as t,h as s,H as a}from"./index-a5e15b1e.js";import{F as e,v as i}from"./index-c3ae175d.js";import{a as r}from"./i18n-73edd5e1.js";import"./index-eb50dd62.js";import"./dev.utils-c7d151c6.js";const n=a=>0===a.length?"":a[0].toUpperCase(),l=a=>{const t=a.split(/\s+/),s=t.at(0),e=t.at(-1);return t.length>=2&&s&&e?`${n(s)}${n(e)}`:n(a)},d=class{constructor(a){t(this,a),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return s(a,null,s("div",{"aria-label":r("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"container",role:"img"},this.state._src?s("img",{alt:"","aria-hidden":"true",class:"image",src:this.state._src}):s("span",{"aria-hidden":"true",class:"initials"},l(this.state._label.trim()))))}validateSrc(a){e(this,a)}validateLabel(a){i(this,a,{required:!0})}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}};export{d as kol_avatar_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e}from"./index-a5e15b1e.js";const i="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\n\t\toutline: transparent solid 1px; /* Visible with forced colors  */\n\t\t/*theme?*/\n\t\twidth: 100px;\n\t\theight: 100px;\n\t}\n\n\t.image {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.initials {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t/*theme?*/\n\t\tbackground: #d3d3d3;\n\t\tfont-size: 2rem;\n\t}\n}\n",o=i,a=class{constructor(n){t(this,n),this._src=void 0,this._label=void 0}render(){return n(e,null,n("kol-avatar-wc",{_src:this._src,_label:this._label}))}};a.style={default:o};export{a as kol_avatar};
+import{r as t,h as n,H as e}from"./index-a5e15b1e.js";const i="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\n\t\toutline: transparent solid 1px; /* Visible with forced colors  */\n\t\t/*theme?*/\n\t\twidth: 100px;\n\t\theight: 100px;\n\t}\n\n\t.image {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.initials {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t/*theme?*/\n\t\tbackground: #d3d3d3;\n\t\tfont-size: 2rem;\n\t}\n}\n",o=i,a=class{constructor(n){t(this,n),this._src=void 0,this._label=void 0}render(){return n(e,null,n("kol-avatar-wc",{_src:this._src,_label:this._label}))}};a.style={default:o};export{a as kol_avatar};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolAvatarDefaultStyle0","KolAvatar","render","h","Host","_src","this","_label"],"sources":["src/components/avatar/style.css?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n@layer kol-component {\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\n\t\toutline: transparent solid 1px; /* Visible with forced colors  */\n\t\t/*theme?*/\n\t\twidth: 100px;\n\t\theight: 100px;\n\t}\n\n\t.image {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.initials {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t/*theme?*/\n\t\tbackground: #d3d3d3;\n\t\tfont-size: 2rem;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport type { AvatarProps } from '@public-ui/schema';\n\n@Component({\n\ttag: 'kol-avatar',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAvatar implements AvatarProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-avatar-wc _src={this._src} _label={this._label}></kol-avatar-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,owIACxB,MAAAC,EAAeD,E,MCWFE,EAAS,M,mEACd,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBAAeE,KAAMC,KAAKD,KAAME,OAAQD,KAAKC,S"}
+{"version":3,"names":["defaultStyleCss","KolAvatarDefaultStyle0","KolAvatar","render","h","Host","_src","this","_label"],"sources":["src/components/avatar/style.css?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n@layer kol-component {\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\n\t\toutline: transparent solid 1px; /* Visible with forced colors  */\n\t\t/*theme?*/\n\t\twidth: 100px;\n\t\theight: 100px;\n\t}\n\n\t.image {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.initials {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t/*theme?*/\n\t\tbackground: #d3d3d3;\n\t\tfont-size: 2rem;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport type { AvatarProps } from '@public-ui/schema';\n\n@Component({\n\ttag: 'kol-avatar',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAvatar implements AvatarProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-avatar-wc _src={this._src} _label={this._label}></kol-avatar-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,q0IACxB,MAAAC,EAAeD,E,MCWFE,EAAS,M,mEACd,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBAAeE,KAAMC,KAAKD,KAAME,OAAQD,KAAKC,S"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e}from"./index-a5e15b1e.js";import{f as i,i as o,j as a,o as s,k as l,s as r}from"./index-836a963f.js";import{n as h}from"./dev.utils-44a0a914.js";const d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t:host > span {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\toutline: transparent solid 1px; /* Visible with forced colors  */\n\t}\n\n\t:host > span > kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}\n",c=d;i("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const u=class{constructor(n){t(this,n),this.bgColorStr="#000",this.colorStr="#fff",this.id=h(),this.handleColorChange=t=>{const n=o(t);this.bgColorStr=n.backgroundColor,this.colorStr=n.foregroundColor},this._color="#000",this._icons=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"}}}renderSmartButton(t){return n("kol-button-wc",{_ariaControls:this.id,_customClass:t._customClass,_disabled:t._disabled,_hideLabel:!0,_icons:t._icons,_id:t._id,_label:t._label,_on:t._on,_tooltipAlign:t._tooltipAlign,_variant:t._variant})}render(){const t="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return n(e,null,n("span",{class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},n("kol-span-wc",{id:t?this.id:void 0,_allowMarkdown:!0,_icons:this._icons,_label:this._label}),t&&this.renderSmartButton(this.state._smartButton)))}validateColor(t){a(this,t,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(t){s(t,(()=>{try{t=l(t)}catch(t){}r(this,"_smartButton",t)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}};u.style={default:c};export{u as kol_badge};
+import{r as t,h as n,H as e}from"./index-a5e15b1e.js";import{j as i,q as o,r as s,t as a,u as l,m as r}from"./index-c3ae175d.js";import{n as d}from"./dev.utils-c7d151c6.js";const h="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t:host > span {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\toutline: transparent solid 1px; /* Visible with forced colors  */\n\t}\n\n\t:host > span > kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}\n",c=h;i("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const u=class{constructor(n){t(this,n),this.bgColorStr="#000",this.colorStr="#fff",this.id=d(),this.handleColorChange=t=>{const n=o(t);this.bgColorStr=n.backgroundColor,this.colorStr=n.foregroundColor},this._color="#000",this._icons=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"}}}renderSmartButton(t){return n("kol-button-wc",{_ariaControls:this.id,_customClass:t._customClass,_disabled:t._disabled,_hideLabel:!0,_icons:t._icons,_id:t._id,_label:t._label,_on:t._on,_tooltipAlign:t._tooltipAlign,_variant:t._variant})}render(){const t="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return n(e,null,n("span",{class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},n("kol-span-wc",{id:t?this.id:void 0,_allowMarkdown:!0,_icons:this._icons,_label:this._label}),t&&this.renderSmartButton(this.state._smartButton)))}validateColor(t){s(this,t,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(t){a(t,(()=>{try{t=l(t)}catch(t){}r(this,"_smartButton",t)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}};u.style={default:c};export{u as kol_badge};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolBadgeDefaultStyle0","featureHint","KolBadge","this","bgColorStr","colorStr","id","nonce","handleColorChange","value","colorPair","backgroundColor","foregroundColor","_color","renderSmartButton","props","h","_ariaControls","_customClass","_disabled","_hideLabel","_icons","_id","_label","_on","_tooltipAlign","_variant","render","hasSmartButton","state","_smartButton","Host","class","style","color","undefined","_allowMarkdown","validateColor","defaultValue","hooks","beforePatch","validateSmartButton","objectObjectHandler","parseJson","e","setState","componentWillLoad"],"sources":["src/components/badge/style.css?tag=kol-badge&mode=default&encapsulation=shadow","src/components/badge/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\t:host > span {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\toutline: transparent solid 1px; /* Visible with forced colors  */\n\t}\n\n\t:host > span > kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}\n","import type { BadgeAPI, BadgeStates, ButtonProps, KoliBriIconsProp, LabelPropType, PropColor, Stringified } from '@public-ui/schema';\nimport { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor } from '@public-ui/schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\n\nimport type { JSX } from '@stencil/core';\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements BadgeAPI {\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = nonce();\n\n\tprivate renderSmartButton(props: ButtonProps): JSX.Element {\n\t\treturn (\n\t\t\t<kol-button-wc\n\t\t\t\t_ariaControls={this.id}\n\t\t\t\t_customClass={props._customClass}\n\t\t\t\t_disabled={props._disabled}\n\t\t\t\t_hideLabel={true}\n\t\t\t\t_icons={props._icons}\n\t\t\t\t_id={props._id}\n\t\t\t\t_label={props._label}\n\t\t\t\t_on={props._on}\n\t\t\t\t_tooltipAlign={props._tooltipAlign}\n\t\t\t\t_variant={props._variant}\n\t\t\t></kol-button-wc>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-span-wc id={hasSmartButton ? this.id : undefined} _allowMarkdown _icons={this._icons} _label={this._label}></kol-span-wc>\n\t\t\t\t\t{hasSmartButton && this.renderSmartButton(this.state._smartButton as ButtonProps)}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the backgroundColor and foregroundColor.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\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 * 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@State() public state: BadgeStates = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tconst colorPair = handleColorChange(value);\n\t\tthis.bgColorStr = colorPair.backgroundColor;\n\t\tthis.colorStr = colorPair.foregroundColor as string;\n\t};\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#000',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"],"mappings":";;;6KAAA,MAAMA,EAAkB,w9HACxB,MAAAC,EAAeD,ECMfE,EAAY,uE,MASCC,EAAQ,M,yBACZC,KAAAC,WAAa,OACbD,KAAAE,SAAW,OACFF,KAAAG,GAAKC,IAkEdJ,KAAAK,kBAAqBC,IAC5B,MAAMC,EAAYF,EAAkBC,GACpCN,KAAKC,WAAaM,EAAUC,gBAC5BR,KAAKE,SAAWK,EAAUE,eAAyB,E,YA3BH,O,mFAiBZ,CACpCC,OAAQ,CACPF,gBAAiB,OACjBC,gBAAiB,Q,CA5DX,iBAAAE,CAAkBC,GACzB,OACCC,EAAA,iBACCC,cAAed,KAAKG,GACpBY,aAAcH,EAAMG,aACpBC,UAAWJ,EAAMI,UACjBC,WAAY,KACZC,OAAQN,EAAMM,OACdC,IAAKP,EAAMO,IACXC,OAAQR,EAAMQ,OACdC,IAAKT,EAAMS,IACXC,cAAeV,EAAMU,cACrBC,SAAUX,EAAMW,U,CAKZ,MAAAC,GACN,MAAMC,SAAwBzB,KAAK0B,MAAMC,eAAiB,UAAY3B,KAAK0B,MAAMC,eAAiB,KAClG,OACCd,EAACe,EAAI,KACJf,EAAA,QACCgB,MAAO,CACN,sBAAuB7B,KAAK0B,MAAMC,eAAiB,UAAY3B,KAAK0B,MAAMC,eAAiB,MAE5FG,MAAO,CACNtB,gBAAiBR,KAAKC,WACtB8B,MAAO/B,KAAKE,WAGbW,EAAA,eAAaV,GAAIsB,EAAiBzB,KAAKG,GAAK6B,UAAWC,eAAc,KAACf,OAAQlB,KAAKkB,OAAQE,OAAQpB,KAAKoB,SACvGK,GAAkBzB,KAAKW,kBAAkBX,KAAK0B,MAAMC,e,CAwClD,aAAAO,CAAc5B,GACpB4B,EAAclC,KAAMM,EAAO,CAC1B6B,aAAc,OACdC,MAAO,CACNC,YAAarC,KAAKK,oB,CAMd,mBAAAiC,CAAoBhC,GAC1BiC,EAAoBjC,GAAO,KAC1B,IACCA,EAAQkC,EAAuBlC,E,CAE9B,MAAOmC,G,CAGTC,EAAS1C,KAAM,eAAgBM,EAAM,G,CAIhC,iBAAAqC,GACN3C,KAAKkC,cAAclC,KAAKU,QACxBV,KAAKsC,oBAAoBtC,KAAK2B,a"}
+{"version":3,"names":["defaultStyleCss","KolBadgeDefaultStyle0","featureHint","KolBadge","this","bgColorStr","colorStr","id","nonce","handleColorChange","value","colorPair","backgroundColor","foregroundColor","_color","renderSmartButton","props","h","_ariaControls","_customClass","_disabled","_hideLabel","_icons","_id","_label","_on","_tooltipAlign","_variant","render","hasSmartButton","state","_smartButton","Host","class","style","color","undefined","_allowMarkdown","validateColor","defaultValue","hooks","beforePatch","validateSmartButton","objectObjectHandler","parseJson","e","setState","componentWillLoad"],"sources":["src/components/badge/style.css?tag=kol-badge&mode=default&encapsulation=shadow","src/components/badge/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\t:host > span {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\toutline: transparent solid 1px; /* Visible with forced colors  */\n\t}\n\n\t:host > span > kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}\n","import type { BadgeAPI, BadgeStates, ButtonProps, KoliBriIconsProp, LabelPropType, PropColor, Stringified } from '@public-ui/schema';\nimport { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor } from '@public-ui/schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\n\nimport type { JSX } from '@stencil/core';\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements BadgeAPI {\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = nonce();\n\n\tprivate renderSmartButton(props: ButtonProps): JSX.Element {\n\t\treturn (\n\t\t\t<kol-button-wc\n\t\t\t\t_ariaControls={this.id}\n\t\t\t\t_customClass={props._customClass}\n\t\t\t\t_disabled={props._disabled}\n\t\t\t\t_hideLabel={true}\n\t\t\t\t_icons={props._icons}\n\t\t\t\t_id={props._id}\n\t\t\t\t_label={props._label}\n\t\t\t\t_on={props._on}\n\t\t\t\t_tooltipAlign={props._tooltipAlign}\n\t\t\t\t_variant={props._variant}\n\t\t\t></kol-button-wc>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-span-wc id={hasSmartButton ? this.id : undefined} _allowMarkdown _icons={this._icons} _label={this._label}></kol-span-wc>\n\t\t\t\t\t{hasSmartButton && this.renderSmartButton(this.state._smartButton as ButtonProps)}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the backgroundColor and foregroundColor.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\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 * 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@State() public state: BadgeStates = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tconst colorPair = handleColorChange(value);\n\t\tthis.bgColorStr = colorPair.backgroundColor;\n\t\tthis.colorStr = colorPair.foregroundColor as string;\n\t};\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#000',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"],"mappings":";;;6KAAA,MAAMA,EAAkB,yhIACxB,MAAAC,EAAeD,ECMfE,EAAY,uE,MASCC,EAAQ,M,yBACZC,KAAAC,WAAa,OACbD,KAAAE,SAAW,OACFF,KAAAG,GAAKC,IAkEdJ,KAAAK,kBAAqBC,IAC5B,MAAMC,EAAYF,EAAkBC,GACpCN,KAAKC,WAAaM,EAAUC,gBAC5BR,KAAKE,SAAWK,EAAUE,eAAyB,E,YA3BH,O,mFAiBZ,CACpCC,OAAQ,CACPF,gBAAiB,OACjBC,gBAAiB,Q,CA5DX,iBAAAE,CAAkBC,GACzB,OACCC,EAAA,iBACCC,cAAed,KAAKG,GACpBY,aAAcH,EAAMG,aACpBC,UAAWJ,EAAMI,UACjBC,WAAY,KACZC,OAAQN,EAAMM,OACdC,IAAKP,EAAMO,IACXC,OAAQR,EAAMQ,OACdC,IAAKT,EAAMS,IACXC,cAAeV,EAAMU,cACrBC,SAAUX,EAAMW,U,CAKZ,MAAAC,GACN,MAAMC,SAAwBzB,KAAK0B,MAAMC,eAAiB,UAAY3B,KAAK0B,MAAMC,eAAiB,KAClG,OACCd,EAACe,EAAI,KACJf,EAAA,QACCgB,MAAO,CACN,sBAAuB7B,KAAK0B,MAAMC,eAAiB,UAAY3B,KAAK0B,MAAMC,eAAiB,MAE5FG,MAAO,CACNtB,gBAAiBR,KAAKC,WACtB8B,MAAO/B,KAAKE,WAGbW,EAAA,eAAaV,GAAIsB,EAAiBzB,KAAKG,GAAK6B,UAAWC,eAAc,KAACf,OAAQlB,KAAKkB,OAAQE,OAAQpB,KAAKoB,SACvGK,GAAkBzB,KAAKW,kBAAkBX,KAAK0B,MAAMC,e,CAwClD,aAAAO,CAAc5B,GACpB4B,EAAclC,KAAMM,EAAO,CAC1B6B,aAAc,OACdC,MAAO,CACNC,YAAarC,KAAKK,oB,CAMd,mBAAAiC,CAAoBhC,GAC1BiC,EAAoBjC,GAAO,KAC1B,IACCA,EAAQkC,EAAuBlC,E,CAE9B,MAAOmC,G,CAGTC,EAAS1C,KAAM,eAAgBM,EAAM,G,CAIhC,iBAAAqC,GACN3C,KAAKkC,cAAclC,KAAKU,QACxBV,KAAKsC,oBAAoBtC,KAAK2B,a"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,F as e,H as i}from"./index-a5e15b1e.js";import{v as o,l as a}from"./index-836a963f.js";import{r as l,a as s}from"./unique-nav-labels-62d9802d.js";import{w as r}from"./validation-5ab0a1be.js";const d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\tli,\n\tul {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tlist-style: none;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tflex-wrap: wrap;\n\t\tplace-items: center;\n\t}\n\n\tkol-icon::part(separator) {\n\t\tfont-weight: 900;\n\t\tfont-size: 0.7em;\n\t}\n\n\tkol-icon::part(separator):before {\n\t\tcontent: '\\f054';\n\t\tfont-family: 'Font Awesome 6 Free';\n\t}\n}\n",h=d,c=class{constructor(i){t(this,i),this.renderLink=(t,i)=>{const a=this.state._links.length-1;return n("li",{key:i},0!==i&&n("kol-icon",{_label:"",_icons:"codicon codicon-chevron-right"}),i===a?n("span",null,t._hideLabel?n("kol-icon",{_label:t._label,_icons:"string"==typeof t._icons?t._icons:"codicon codicon-symbol-event"}):n(e,null,t._label)):n("kol-link",Object.assign({},t)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return n(i,null,n("nav",{"aria-label":this.state._label},n("ul",null,0===this.state._links.length&&n("li",null,n("kol-icon",{_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(t,n,e=!1){e||l(this.state._label),o(this,t,{required:!0}),a(t),s(this.state._label)}validateLinks(t){r("KolBreadcrumb",this,t)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){l(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};c.style={default:h};export{c as kol_breadcrumb};
+import{r as t,h as n,F as e,H as i}from"./index-a5e15b1e.js";import{v as o,x as a}from"./index-c3ae175d.js";import{r as l,a as s}from"./unique-nav-labels-62d9802d.js";import{w as r}from"./validation-f540005c.js";const d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\tli,\n\tul {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tlist-style: none;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tflex-wrap: wrap;\n\t\tplace-items: center;\n\t}\n\n\tkol-icon::part(separator) {\n\t\tfont-weight: 900;\n\t\tfont-size: 0.7em;\n\t}\n\n\tkol-icon::part(separator):before {\n\t\tcontent: '\\f054';\n\t\tfont-family: 'Font Awesome 6 Free';\n\t}\n}\n",h=d,c=class{constructor(i){t(this,i),this.renderLink=(t,i)=>{const a=this.state._links.length-1;return n("li",{key:i},0!==i&&n("kol-icon",{_label:"",_icons:"codicon codicon-chevron-right"}),i===a?n("span",null,t._hideLabel?n("kol-icon",{_label:t._label,_icons:"string"==typeof t._icons?t._icons:"codicon codicon-symbol-event"}):n(e,null,t._label)):n("kol-link",Object.assign({},t)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return n(i,null,n("nav",{"aria-label":this.state._label},n("ul",null,0===this.state._links.length&&n("li",null,n("kol-icon",{_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(t,n,e=!1){e||l(this.state._label),o(this,t,{required:!0}),a(t),s(this.state._label)}validateLinks(t){r("KolBreadcrumb",this,t)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){l(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};c.style={default:h};export{c as kol_breadcrumb};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolBreadcrumbDefaultStyle0","KolBreadcrumb","this","renderLink","link","index","lastIndex","state","_links","length","h","key","_label","_icons","_hideLabel","Fragment","Object","assign","render","Host","map","validateLabel","value","_oldValue","initial","removeNavLabel","required","a11yHintLabelingLandmarks","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/breadcrumb/style.css?tag=kol-breadcrumb&mode=default&encapsulation=shadow","src/components/breadcrumb/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\tli,\n\tul {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tlist-style: none;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tflex-wrap: wrap;\n\t\tplace-items: center;\n\t}\n\n\tkol-icon::part(separator) {\n\t\tfont-weight: 900;\n\t\tfont-size: 0.7em;\n\t}\n\n\tkol-icon::part(separator):before {\n\t\tcontent: '\\f054';\n\t\tfont-family: 'Font Awesome 6 Free';\n\t}\n}\n","import type { BreadcrumbAPI, BreadcrumbLinkProps, BreadcrumbStates, LabelPropType, LinkProps, Stringified } from '@public-ui/schema';\nimport { a11yHintLabelingLandmarks, validateLabel } from '@public-ui/schema';\nimport { Component, Fragment, 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';\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements BreadcrumbAPI {\n\tprivate readonly renderLink = (link: BreadcrumbLinkProps, index: number): JSX.Element => {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<li key={index}>\n\t\t\t\t{index !== 0 && <kol-icon _label=\"\" _icons=\"codicon codicon-chevron-right\" />}\n\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t<span>\n\t\t\t\t\t\t{link._hideLabel ? (\n\t\t\t\t\t\t\t<kol-icon _label={link._label} _icons={typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event'} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>{link._label}</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\t<kol-link {...link}></kol-link>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-icon _label=\"\" _icons=\"codicon codicon-home\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map(this.renderLink)}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<BreadcrumbLinkProps[]>;\n\n\t@State() public state: BreadcrumbStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(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('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;oNAAA,MAAMA,EAAkB,mmIACxB,MAAAC,EAAeD,E,MCcFE,EAAa,M,yBACRC,KAAAC,WAAa,CAACC,EAA2BC,KACzD,MAAMC,EAAYJ,KAAKK,MAAMC,OAAOC,OAAS,EAC7C,OACCC,EAAA,MAAIC,IAAKN,GACPA,IAAU,GAAKK,EAAA,YAAUE,OAAO,GAAGC,OAAO,kCAC1CR,IAAUC,EACVI,EAAA,YACEN,EAAKU,WACLJ,EAAA,YAAUE,OAAQR,EAAKQ,OAAQC,cAAeT,EAAKS,SAAW,SAAWT,EAAKS,OAAS,iCAEvFH,EAAAK,EAAA,KAAGX,EAAKQ,SAIVF,EAAA,WAAAM,OAAAC,OAAA,GAAcb,IAEX,E,uDA+BmC,CACzCQ,OAAQ,GACRJ,OAAQ,G,CA7BF,MAAAU,GACN,OACCR,EAACS,EAAI,KACJT,EAAA,oBAAiBR,KAAKK,MAAMK,QAC3BF,EAAA,UACER,KAAKK,MAAMC,OAAOC,SAAW,GAC7BC,EAAA,UACCA,EAAA,YAAUE,OAAO,GAAGC,OAAO,yBAAyB,KAGrDX,KAAKK,MAAMC,OAAOY,IAAIlB,KAAKC,c,CAuB1B,aAAAkB,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAevB,KAAKK,MAAMK,O,CAE3BS,EAAcnB,KAAMoB,EAAO,CAC1BI,SAAU,OAEXC,EAA0BL,GAC1BM,EAAY1B,KAAKK,MAAMK,O,CAIjB,aAAAiB,CAAcP,GACpBQ,EAAc,gBAAiB5B,KAAMoB,E,CAG/B,iBAAAS,GACN7B,KAAKmB,cAAcnB,KAAKU,OAAQoB,UAAW,MAC3C9B,KAAK2B,cAAc3B,KAAKM,O,CAGlB,oBAAAyB,GACNR,EAAevB,KAAKK,MAAMK,O"}
+{"version":3,"names":["defaultStyleCss","KolBreadcrumbDefaultStyle0","KolBreadcrumb","this","renderLink","link","index","lastIndex","state","_links","length","h","key","_label","_icons","_hideLabel","Fragment","Object","assign","render","Host","map","validateLabel","value","_oldValue","initial","removeNavLabel","required","a11yHintLabelingLandmarks","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/breadcrumb/style.css?tag=kol-breadcrumb&mode=default&encapsulation=shadow","src/components/breadcrumb/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\tli,\n\tul {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tlist-style: none;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tflex-wrap: wrap;\n\t\tplace-items: center;\n\t}\n\n\tkol-icon::part(separator) {\n\t\tfont-weight: 900;\n\t\tfont-size: 0.7em;\n\t}\n\n\tkol-icon::part(separator):before {\n\t\tcontent: '\\f054';\n\t\tfont-family: 'Font Awesome 6 Free';\n\t}\n}\n","import type { BreadcrumbAPI, BreadcrumbLinkProps, BreadcrumbStates, LabelPropType, LinkProps, Stringified } from '@public-ui/schema';\nimport { a11yHintLabelingLandmarks, validateLabel } from '@public-ui/schema';\nimport { Component, Fragment, 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';\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements BreadcrumbAPI {\n\tprivate readonly renderLink = (link: BreadcrumbLinkProps, index: number): JSX.Element => {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<li key={index}>\n\t\t\t\t{index !== 0 && <kol-icon _label=\"\" _icons=\"codicon codicon-chevron-right\" />}\n\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t<span>\n\t\t\t\t\t\t{link._hideLabel ? (\n\t\t\t\t\t\t\t<kol-icon _label={link._label} _icons={typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event'} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>{link._label}</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\t<kol-link {...link}></kol-link>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-icon _label=\"\" _icons=\"codicon codicon-home\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map(this.renderLink)}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<BreadcrumbLinkProps[]>;\n\n\t@State() public state: BreadcrumbStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(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('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;oNAAA,MAAMA,EAAkB,oqIACxB,MAAAC,EAAeD,E,MCcFE,EAAa,M,yBACRC,KAAAC,WAAa,CAACC,EAA2BC,KACzD,MAAMC,EAAYJ,KAAKK,MAAMC,OAAOC,OAAS,EAC7C,OACCC,EAAA,MAAIC,IAAKN,GACPA,IAAU,GAAKK,EAAA,YAAUE,OAAO,GAAGC,OAAO,kCAC1CR,IAAUC,EACVI,EAAA,YACEN,EAAKU,WACLJ,EAAA,YAAUE,OAAQR,EAAKQ,OAAQC,cAAeT,EAAKS,SAAW,SAAWT,EAAKS,OAAS,iCAEvFH,EAAAK,EAAA,KAAGX,EAAKQ,SAIVF,EAAA,WAAAM,OAAAC,OAAA,GAAcb,IAEX,E,uDA+BmC,CACzCQ,OAAQ,GACRJ,OAAQ,G,CA7BF,MAAAU,GACN,OACCR,EAACS,EAAI,KACJT,EAAA,oBAAiBR,KAAKK,MAAMK,QAC3BF,EAAA,UACER,KAAKK,MAAMC,OAAOC,SAAW,GAC7BC,EAAA,UACCA,EAAA,YAAUE,OAAO,GAAGC,OAAO,yBAAyB,KAGrDX,KAAKK,MAAMC,OAAOY,IAAIlB,KAAKC,c,CAuB1B,aAAAkB,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAevB,KAAKK,MAAMK,O,CAE3BS,EAAcnB,KAAMoB,EAAO,CAC1BI,SAAU,OAEXC,EAA0BL,GAC1BM,EAAY1B,KAAKK,MAAMK,O,CAIjB,aAAAiB,CAAcP,GACpBQ,EAAc,gBAAiB5B,KAAMoB,E,CAG/B,iBAAAS,GACN7B,KAAKmB,cAAcnB,KAAKU,OAAQoB,UAAW,MAC3C9B,KAAK2B,cAAc3B,KAAKM,O,CAGlB,oBAAAyB,GACNR,EAAevB,KAAKK,MAAMK,O"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e}from"./index-a5e15b1e.js";const i="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t:host > kol-button-group-wc {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n",o=i,a=class{constructor(n){t(this,n)}render(){return n(e,null,n("kol-button-group-wc",null,n("slot",null)))}};a.style={default:o};export{a as kol_button_group};
+import{r as t,h as n,H as e}from"./index-a5e15b1e.js";const i="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t:host > kol-button-group-wc {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n",o=i,a=class{constructor(n){t(this,n)}render(){return n(e,null,n("kol-button-group-wc",null,n("slot",null)))}};a.style={default:o};export{a as kol_button_group};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButtonGroupDefaultStyle0","KolButtonGroup","render","h","Host"],"sources":["src/components/button-group/style.css?tag=kol-button-group&mode=default&encapsulation=shadow","src/components/button-group/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\t:host > kol-button-group-wc {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n","import type { ButtonGroupProps } from '@public-ui/schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host } from '@stencil/core';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements ButtonGroupProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-group-wc>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-button-group-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,g1HACxB,MAAAC,EAAeD,E,MCUFE,EAAc,M,yBACnB,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,2BACCA,EAAA,c"}
+{"version":3,"names":["defaultStyleCss","KolButtonGroupDefaultStyle0","KolButtonGroup","render","h","Host"],"sources":["src/components/button-group/style.css?tag=kol-button-group&mode=default&encapsulation=shadow","src/components/button-group/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\t:host > kol-button-group-wc {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n","import type { ButtonGroupProps } from '@public-ui/schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host } from '@stencil/core';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements ButtonGroupProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-group-wc>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-button-group-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,i5HACxB,MAAAC,EAAeD,E,MCUFE,EAAc,M,yBACnB,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,2BACCA,EAAA,c"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e,g as i}from"./index-a5e15b1e.js";import{b as o}from"./index-836a963f.js";const s="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\t:is(a, button) {\n\t\talign-items: baseline;\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: left;\n\t\ttext-decoration-line: underline;\n\t}\n\n\ta:is(:focus, :hover):not([aria-disabled]),\n\tbutton:is(:focus, :hover):not([disabled]) {\n\t\ttext-decoration-thickness: 0.2em;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t.skip {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\t.skip:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tpadding: 1em;\n\t\tposition: unset;\n\t}\n\n\tkol-icon.external-link-icon {\n\t\tdisplay: inline-flex;\n\t}\n}\n\n",a=s,l=class{constructor(n){t(this,n),this.catchRef=t=>{o(this.host,t)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}async getValue(){return this._value}render(){return n(e,null,n("kol-button-wc",{ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:"link",_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},n("slot",{name:"expert",slot:"expert"})))}get host(){return i(this)}};l.style={default:a};export{l as kol_button_link};
+import{r as t,h as n,H as e,g as i}from"./index-a5e15b1e.js";import{k as o}from"./index-c3ae175d.js";const s="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\t:is(a, button) {\n\t\talign-items: baseline;\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: left;\n\t\ttext-decoration-line: underline;\n\t}\n\n\ta:is(:focus, :hover):not([aria-disabled]),\n\tbutton:is(:focus, :hover):not([disabled]) {\n\t\ttext-decoration-thickness: 0.2em;\n\t}\n\n\t.skip {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\t.skip:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tpadding: 1em;\n\t\tposition: unset;\n\t}\n\n\tkol-icon.external-link-icon {\n\t\tdisplay: inline-flex;\n\t}\n}\n\n",a=s,l=class{constructor(n){t(this,n),this.catchRef=t=>{o(this.host,t)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}async getValue(){return this._value}render(){return n(e,null,n("kol-button-wc",{ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:"link",_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},n("slot",{name:"expert",slot:"expert"})))}get host(){return i(this)}};l.style={default:a};export{l as kol_button_link};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e,g as i}from"./index-a5e15b1e.js";import{b as s}from"./index-836a963f.js";const o="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\t:is(a, button) {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: center;\n\t\ttext-decoration-line: none;\n\n\t\t&::before {\n\t\t\t/* Render zero-width character as first element to set the baseline correctly. */\n\t\t\tcontent: '\\200B';\n\t\t}\n\t}\n\t/* TODO: Why we need this? */\n\t:is(a, button) > kol-span-wc {\n\t\tmargin: auto;\n\t\twidth: 100%;\n\t}\n}\n\n",a=o,l=class{constructor(n){t(this,n),this.catchRef=t=>{s(this.host,t)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}async getValue(){return this._value}render(){return n(e,null,n("kol-button-wc",{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,_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},n("slot",{name:"expert",slot:"expert"})))}get host(){return i(this)}};l.style={default:a};export{l as kol_button};
+import{r as t,h as n,H as e,g as i}from"./index-a5e15b1e.js";import{k as s}from"./index-c3ae175d.js";const o="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\t:is(a, button) {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: center;\n\t\ttext-decoration-line: none;\n\n\t\t&::before {\n\t\t\t/* Render zero-width character as first element to set the baseline correctly. */\n\t\t\tcontent: '\\200B';\n\t\t}\n\t}\n\t/* TODO: Why we need this? */\n\t:is(a, button) > kol-span-wc {\n\t\tmargin: auto;\n\t\twidth: 100%;\n\t}\n}\n\n",a=o,l=class{constructor(n){t(this,n),this.catchRef=t=>{s(this.host,t)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}async getValue(){return this._value}render(){return n(e,null,n("kol-button-wc",{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,_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},n("slot",{name:"expert",slot:"expert"})))}get host(){return i(this)}};l.style={default:a};export{l as kol_button};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButtonDefaultStyle0","KolButton","this","catchRef","ref","propagateFocus","host","getValue","_value","render","h","Host","class","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaExpanded","_ariaSelected","_disabled","_hideLabel","_icons","_id","_label","_name","_on","_role","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","name","slot"],"sources":["src/components/button/style.css?tag=kol-button&mode=default&encapsulation=shadow","src/components/button/shadow.tsx"],"sourcesContent":["@import url(../button.css);\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tButtonCallbacksPropType,\n\tButtonProps,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '@public-ui/schema';\nimport { propagateFocus } from '@public-ui/schema';\nimport { Component, Element, h, Host, Method, Prop } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements ButtonProps {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<Stringified<StencilUnknown> | undefined> {\n\t\treturn this._value;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\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_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-button-wc>\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 which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\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 * 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 icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\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 technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\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 * 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 * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\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":";;;qGAAA,MAAMA,EAAkB,grIACxB,MAAAC,EAAeD,E,MCyBFE,EAAS,M,yBAGJC,KAAAC,SAAYC,IAC5BC,EAAeH,KAAKI,KAAMF,EAAI,E,4JAyEM,M,gBAOC,M,4MA8CgB,M,WAKV,S,oCAUM,Q,CAxI3C,cAAMG,GACZ,OAAOL,KAAKM,M,CAGN,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBACCN,IAAKF,KAAKC,SACVS,MAAO,CACNC,OAAQ,KACR,CAACX,KAAKY,UAAqBZ,KAAKY,WAAa,SAC7C,CAACZ,KAAKa,cAAyBb,KAAKY,WAAa,iBAAmBZ,KAAKa,eAAiB,UAAYb,KAAKa,aAAaC,OAAS,GAElIC,WAAYf,KAAKe,WACjBC,cAAehB,KAAKgB,cACpBC,cAAejB,KAAKiB,cACpBC,cAAelB,KAAKkB,cACpBL,aAAcb,KAAKa,aACnBM,UAAWnB,KAAKmB,UAChBC,WAAYpB,KAAKoB,WACjBC,OAAQrB,KAAKqB,OACbC,IAAKtB,KAAKsB,IACVC,OAAQvB,KAAKuB,OACbC,MAAOxB,KAAKwB,MACZC,IAAKzB,KAAKyB,IACVC,MAAO1B,KAAK0B,MACZC,qBAAsB3B,KAAK2B,qBAC3BC,UAAW5B,KAAK4B,UAChBC,cAAe7B,KAAK6B,cACpBC,MAAO9B,KAAK8B,MACZxB,OAAQN,KAAKM,OACbM,SAAUZ,KAAKY,UAEfJ,EAAA,QAAMuB,KAAK,SAASC,KAAK,Y"}
+{"version":3,"names":["defaultStyleCss","KolButtonDefaultStyle0","KolButton","this","catchRef","ref","propagateFocus","host","getValue","_value","render","h","Host","class","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaExpanded","_ariaSelected","_disabled","_hideLabel","_icons","_id","_label","_name","_on","_role","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","name","slot"],"sources":["src/components/button/style.css?tag=kol-button&mode=default&encapsulation=shadow","src/components/button/shadow.tsx"],"sourcesContent":["@import url(../button.css);\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tButtonCallbacksPropType,\n\tButtonProps,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '@public-ui/schema';\nimport { propagateFocus } from '@public-ui/schema';\nimport { Component, Element, h, Host, Method, Prop } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements ButtonProps {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<Stringified<StencilUnknown> | undefined> {\n\t\treturn this._value;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\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_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-button-wc>\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 which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\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 * 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 icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\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 technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\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 * 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 * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\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":";;;qGAAA,MAAMA,EAAkB,ivIACxB,MAAAC,EAAeD,E,MCyBFE,EAAS,M,yBAGJC,KAAAC,SAAYC,IAC5BC,EAAeH,KAAKI,KAAMF,EAAI,E,4JAyEM,M,gBAOC,M,4MA8CgB,M,WAKV,S,oCAUM,Q,CAxI3C,cAAMG,GACZ,OAAOL,KAAKM,M,CAGN,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBACCN,IAAKF,KAAKC,SACVS,MAAO,CACNC,OAAQ,KACR,CAACX,KAAKY,UAAqBZ,KAAKY,WAAa,SAC7C,CAACZ,KAAKa,cAAyBb,KAAKY,WAAa,iBAAmBZ,KAAKa,eAAiB,UAAYb,KAAKa,aAAaC,OAAS,GAElIC,WAAYf,KAAKe,WACjBC,cAAehB,KAAKgB,cACpBC,cAAejB,KAAKiB,cACpBC,cAAelB,KAAKkB,cACpBL,aAAcb,KAAKa,aACnBM,UAAWnB,KAAKmB,UAChBC,WAAYpB,KAAKoB,WACjBC,OAAQrB,KAAKqB,OACbC,IAAKtB,KAAKsB,IACVC,OAAQvB,KAAKuB,OACbC,MAAOxB,KAAKwB,MACZC,IAAKzB,KAAKyB,IACVC,MAAO1B,KAAK0B,MACZC,qBAAsB3B,KAAK2B,qBAC3BC,UAAW5B,KAAK4B,UAChBC,cAAe7B,KAAK6B,cACpBC,MAAO9B,KAAK8B,MACZxB,OAAQN,KAAKM,OACbM,SAAUZ,KAAKY,UAEfJ,EAAA,QAAMuB,KAAK,SAASC,KAAK,Y"}