@public-ui/components 1.7.16 → 1.7.17

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

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{h as t,H as i,r as s,g as e}from"./index-a051748e.js";import{v as a,a as d,b as h}from"./aria-current-a63795f0.js";import{a as n,w as l,h as o,i as r,f as c,d as f,s as u}from"./prop.validators-d99c5d68.js";import{v,a as b}from"./custom-class-ae011192.js";import{v as m}from"./hide-label-04b87845.js";import{v as p,w as _}from"./icons-bbc974ee.js";import{a as y}from"./label-ce16ea0f.js";import{v as j}from"./tooltip-align-d96322b0.js";import{g as A}from"./a11y.tipps-5500b43f.js";import{s as g,t as x}from"./events-fa760b68.js";import{s as C,a as I}from"./reuse-d79ab469.js";import{v as k}from"./tab-index-a24ae591.js";import{p as S,a as L}from"./controller-b8634358.js";import{A as w}from"./associated.controller-50f43123.js";import{b as T,g as V}from"./component-names-fed305c7.js";import"./index-117bd1aa.js";import"./dev.utils-cdb6e8d3.js";import"./alignment-c366b3f5.js";const B=(t,a)=>{n(t,"_ariaExpanded",a)},E=(t,a)=>{l(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},K=(t,a)=>{l(t,"_type",(t=>"button"===t||"reset"===t||"submit"===t),new Set(["KoliBriButtonType {button, reset, submit}"]),a)},O=(t,a)=>{n(t,"_disabled",a)},D=class{render(){const a=C(this.state._label);return t(i,{key:"1f56e34b632d15e744fc953534c2bedd6fd2fae6",class:"kol-button-wc"},t("button",Object.assign({key:"e7b2c3489e47f8b1346715ddd26b442ea65b92ff",ref:this.catchRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-current":o(this.state._ariaCurrent),"aria-expanded":r(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":o(this.state._ariaSelected),class:{button:!0,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"icon-only":!0===this.state._hideLabel,"hide-label":!0===this.state._hideLabel},disabled:this.state._disabled,id:this.state._id,name:this.state._name},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),t(V,{key:"8cedd1ffd632930961c9c335818d25a4dca104e6",class:"button-inner",_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:a?"":this.state._label},t("slot",{key:"afe64c3f3878967cac6143044dd8554e01359b15",name:"expert",slot:"expert"}))),t(T,{key:"afb489925d0b2a6acd671e9f2780d15dca65d0fc","aria-hidden":"true",hidden:a||!this.state._hideLabel,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))}constructor(t){s(this,t),this.catchRef=t=>{this.ref=t,I(this.host,this.ref)},this.onClick=t=>{var a,i;"submit"===this.state._type?S({form:this.host,ref:this.ref}):"reset"===this.state._type?L({form:this.host,ref:this.ref}):(g(t),x("click",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(c(t,this.ref),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._value)))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._icons=void 0,this._iconAlign=void 0,this._iconOnly=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",this.state={_icons:{},_label:"…",_on:{},_type:"button",_variant:"normal"},this.controller=new w(this,"button",this.host)}validateAccessKey(t){f(this,"_accessKey",t)}validateAriaControls(t){a(this,t)}validateAriaCurrent(t){d(this,t)}validateAriaExpanded(t){B(this,t)}validateAriaLabel(t){this.validateLabel(t)}validateAriaSelected(t){n(this,"_ariaSelected",t)}validateCustomClass(t){v(this,t)}validateDisabled(t){O(this,t),!0===t&&A()}validateHideLabel(t){m(this,t)}validateIcon(t){p(this,t)}validateIcons(t){p(this,t)}validateIconAlign(t){_(this,t)}validateIconOnly(t){this.validateHideLabel(t)}validateId(t){f(this,"_id",t)}validateLabel(t){y(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){E(this,t)}validateRole(t){h(this,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){k(this,t)}validateTooltipAlign(t){j(this,t)}validateType(t){K(this,t)}validateValue(t){u(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){b(this,t)}componentWillLoad(){var t;this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcons(this._icons||this._icon),this.validateIconAlign(this._iconAlign),this.validateId(this._id),this.validateLabel(null!==(t=this._label)&&void 0!==t?t:this._ariaLabel),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return e(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_icons:["validateIcons"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};export{D as kol_button_wc};

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

@@ -0,0 +1 @@
+{"version":3,"names":["validateAriaExpanded","component","value","watchBoolean","validateButtonCallbacks","watchValidator","Set","validateButtonType","validateDisabled","KolButtonWc","render","hasExpertSlot","showExpertSlot","this","state","_label","h","Host","key","class","Object","assign","ref","catchRef","accessKey","_accessKey","_ariaControls","mapStringOrBoolean2String","_ariaCurrent","mapBoolean2String","_ariaExpanded","_hideLabel","undefined","_ariaSelected","button","_variant","_customClass","length","disabled","_disabled","id","_id","name","_name","_on","onClick","role","_role","tabIndex","_tabIndex","type","_type","KolSpanWcTag","_icons","slot","KolTooltipWcTag","hidden","_align","_tooltipAlign","constructor","hostRef","propagateFocus","host","event","propagateSubmitEventToForm","form","propagateResetEventToForm","stopPropagation","tryToDispatchKoliBriEvent","_value","controller","setFormAssociatedValue","_a","setEventTarget","_b","AssociatedInputController","validateAccessKey","watchString","validateAriaControls","validateAriaCurrent","validateAriaLabel","validateLabel","validateAriaSelected","validateCustomClass","a11yHintDisabled","validateHideLabel","validateIcon","validateIcons","validateIconAlign","watchIconAlign","validateIconOnly","validateId","validateLabelWithExpertSlot","required","validateName","validateOn","validateRole","validateAlternativeButtonLinkRole","validateSyncValueBySelector","validateTabIndex","validateTooltipAlign","validateType","validateValue","setState","validateVariant","validateButtonVariant","componentWillLoad","_iconOnly","_icon","_iconAlign","_ariaLabel","_syncValueBySelector"],"sources":["src/types/props/aria-expanded.ts","src/types/props/button-callbacks.ts","src/types/props/button-type.ts","src/types/props/disabled.ts","src/components/button/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\ntype AriaExpandedPropType = boolean;\n\n/**\n * Marks this element as open/expanded, or that the connected element (aria-controls/aria-owns) is open/expanded.\n * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n * @deprecated\n */\nexport type PropAriaExpanded = {\n\tariaExpanded: AriaExpandedPropType;\n};\n\n/* validator */\nexport const validateAriaExpanded = (component: Generic.Element.Component, value?: AriaExpandedPropType): void => {\n\twatchBoolean(component, '_ariaExpanded', value);\n};\n","import { Events } from '../../enums/events';\nimport { EventCallback, EventValueOrEventCallback } from '../callbacks';\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../../utils/prop.validators';\nimport { StencilUnknown } from '../unknown';\n\n/* types */\nexport type ButtonCallbacksPropType<T> = {\n\t[Events.onClick]?: EventValueOrEventCallback<MouseEvent, T>;\n\t[Events.onMouseDown]?: EventCallback<MouseEvent>;\n};\n\n/**\n * Defines the callback functions for button events.\n */\nexport type PropButtonCallbacks<T> = {\n\ton: ButtonCallbacksPropType<T>;\n};\n\n/* validator */\nexport const validateButtonCallbacks = (component: Generic.Element.Component, value?: ButtonCallbacksPropType<StencilUnknown>): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_on`,\n\t\t(value) => typeof value === 'object' && value !== null,\n\t\tnew Set(['ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}']),\n\t\tvalue,\n\t);\n};\n","/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../../utils/prop.validators';\n\nexport type ButtonTypePropType = 'button' | 'reset' | 'submit';\n\n/**\n * Defines either the type of the component or of the components interactive element.\n */\nexport type PropButtonType = {\n\ttype: ButtonTypePropType;\n};\n\n/* validator */\nexport const validateButtonType = (component: Generic.Element.Component, value?: ButtonTypePropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_type`,\n\t\t(value) => value === 'button' || value === 'reset' || value === 'submit',\n\t\tnew Set(['KoliBriButtonType {button, reset, submit}']),\n\t\tvalue,\n\t);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type DisabledPropType = boolean;\n\n/**\n * Makes the element not focusable and ignore all events.\n */\nexport type PropDisabled = {\n\tdisabled: DisabledPropType;\n};\n\n/* validator */\nexport const validateDisabled = (component: Generic.Element.Component, value?: DisabledPropType): void => {\n\twatchBoolean(component, '_disabled', value);\n};\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { States as ButtonStates } from '../../components/button/types';\nimport { Stringified } from '../../types/common';\nimport { AlignPropType } from '../../types/props/align';\nimport { AlternativeButtonLinkRolePropType, validateAlternativeButtonLinkRole } from '../../types/props/alternative-button-link-role';\nimport { validateAriaControls } from '../../types/props/aria-controls';\nimport { AriaCurrentPropType, validateAriaCurrent } from '../../types/props/aria-current';\nimport { validateAriaExpanded } from '../../types/props/aria-expanded';\nimport { ButtonCallbacksPropType, validateButtonCallbacks } from '../../types/props/button-callbacks';\nimport { ButtonTypePropType, validateButtonType } from '../../types/props/button-type';\nimport { ButtonVariantPropType, validateButtonVariant } from '../../types/props/button-variant';\nimport { CustomClassPropType, validateCustomClass } from '../../types/props/custom-class';\nimport { DisabledPropType, validateDisabled } from '../../types/props/disabled';\nimport { validateHideLabel } from '../../types/props/hide-label';\nimport { IconsPropType, validateIcons, watchIconAlign } from '../../types/props/icons';\nimport { LabelWithExpertSlotPropType, validateLabelWithExpertSlot } from '../../types/props/label';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType, validateTooltipAlign } from '../../types/props/tooltip-align';\nimport { StencilUnknown } from '../../types/unknown';\nimport { a11yHintDisabled } from '../../utils/a11y.tipps';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { mapBoolean2String, mapStringOrBoolean2String, setEventTarget, setState, watchBoolean, watchString } from '../../utils/prop.validators';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { validateTabIndex } from '../../utils/validators/tab-index';\nimport { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';\nimport { AssociatedInputController } from '../input-adapter-leanup/associated.controller';\nimport { API } from './types';\nimport { KolSpanWcTag, KolTooltipWcTag } from '../../core/component-names';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-button-wc',\n\tshadow: false,\n})\nexport class KolButtonWc implements API {\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 class=\"kol-button-wc\">\n\t\t\t\t<button\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\taria-controls={this.state._ariaControls}\n\t\t\t\t\taria-current={mapStringOrBoolean2String(this.state._ariaCurrent)}\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\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'icon-only': this.state._hideLabel === true, // @deprecated in v2\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<KolSpanWcTag class=\"button-inner\" _icons={this.state._icons} _hideLabel={this.state._hideLabel} _label={hasExpertSlot ? '' : this.state._label}>\n\t\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t\t</KolSpanWcTag>\n\t\t\t\t</button>\n\t\t\t\t<KolTooltipWcTag\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_align={this.state._tooltipAlign}\n\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t></KolTooltipWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: AssociatedInputController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines 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 * Deprecated: Marks the element as the selected in a group of related elements. Can be one of the following: `date` | `location` | `page` | `step` | `time` | `true`. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t *\n\t * @deprecated aria-current is not necessary for buttons. will be removed in version 2.\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrentPropType;\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 * Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\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 * @deprecated Use _icons.\n\t */\n\t@Prop() public _icon?: IconsPropType;\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 * Deprecated: Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t *\n\t * @deprecated\n\t */\n\t@Prop() public _iconAlign?: AlignPropType;\n\n\t/**\n\t * Deprecated: Hides the label and shows the description in a Tooltip instead.\n\t *\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\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?: string): void {\n\t\twatchString(this, '_accessKey', 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('_ariaCurrent')\n\tpublic validateAriaCurrent(value?: AriaCurrentPropType): void {\n\t\tvalidateAriaCurrent(this, value);\n\t}\n\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: boolean): void {\n\t\tvalidateAriaExpanded(this, value);\n\t}\n\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: boolean): void {\n\t\twatchBoolean(this, '_ariaSelected', 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\tif (value === true) {\n\t\t\ta11yHintDisabled();\n\t\t}\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: IconsPropType): void {\n\t\tvalidateIcons(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('_iconAlign')\n\tpublic validateIconAlign(value?: AlignPropType): void {\n\t\twatchIconAlign(this, value);\n\t}\n\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\tthis.validateHideLabel(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.validateAriaCurrent(this._ariaCurrent);\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 || this._iconOnly);\n\t\tthis.validateIcons(this._icons || this._icon);\n\t\tthis.validateIconAlign(this._iconAlign);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label ?? this._ariaLabel); // explicitly allow empty string labels\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"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as e,g as n}from"./index-c1d028ba.js";import{a as s}from"./reuse-d79ab469.js";const a=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host{display:inline-block}:is(a,button){display:inline-flex;place-items:center;text-align:center;text-decoration-line:none}:is(a,button)>.kol-span-wc{margin:auto;width:100%}:is(button):disabled{cursor:not-allowed;opacity:0.5}",o=a,d=class{constructor(t){i(this,t),this.catchRef=i=>{s(this.host,i)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._icons=void 0,this._iconAlign=void 0,this._iconOnly=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"}render(){return t(e,{key:"e051bfa26d0801e525bea9e7d9aa5f4cc891f265",class:"kol-button"},t("kol-button-wc",{key:"e125cc7dc14098496d994cc14f65b3895117e1c1",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,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel||this._iconOnly,_icons:this._icons||this._icon,_iconAlign:this._iconAlign,_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},t("slot",{key:"878b1492e2fe4923211999aad12ac77e11532729",name:"expert",slot:"expert"})))}get host(){return n(this)}};d.style={default:o};export{d as kol_button};
+import{r as i,h as t,H as e,g as n}from"./index-a051748e.js";import{a as s}from"./reuse-d79ab469.js";import{d as a}from"./component-names-fed305c7.js";const o=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host{display:inline-block}:is(a,button){display:inline-flex;place-items:center;text-align:center;text-decoration-line:none}:is(a,button)>.kol-span-wc{margin:auto;width:100%}:is(button):disabled{cursor:not-allowed;opacity:0.5}",d=o,h=class{constructor(t){i(this,t),this.catchRef=i=>{s(this.host,i)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._icons=void 0,this._iconAlign=void 0,this._iconOnly=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"}render(){return t(e,{key:"00077208a24dc1b778dcfd29e2133f81bdf4639b",class:"kol-button"},t(a,{key:"2849b258f5eccc021056db37017c3348077e7f18",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,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel||this._iconOnly,_icons:this._icons||this._icon,_iconAlign:this._iconAlign,_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},t("slot",{key:"1ca9de6ce3d380c4d9ac8d426c1ebe74b2714e7c",name:"expert",slot:"expert"})))}get host(){return n(this)}};h.style={default:d};export{h as kol_button};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButtonDefaultStyle0","KolButton","this","catchRef","ref","propagateFocus","host","render","h","Host","key","class","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_hideLabel","_iconOnly","_icons","_icon","_iconAlign","_id","_label","_name","_on","_role","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","_value","name","slot"],"sources":["src/components/button/style.scss?tag=kol-button&mode=default&encapsulation=shadow","src/components/button/shadow.tsx"],"sourcesContent":["@import '../button';\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { AlignPropType } from '../../types/props/align';\nimport { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';\nimport { AriaCurrentPropType } from '../../types/props/aria-current';\nimport { ButtonCallbacksPropType } from '../../types/props/button-callbacks';\nimport { ButtonTypePropType } from '../../types/props/button-type';\nimport { ButtonVariantPropType } from '../../types/props/button-variant';\nimport { CustomClassPropType } from '../../types/props/custom-class';\nimport { IconsPropType } from '../../types/props/icons';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { StencilUnknown } from '../../types/unknown';\nimport { propagateFocus } from '../../utils/reuse';\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements Props {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button\">\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_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel || this._iconOnly}\n\t\t\t\t\t_icons={this._icons || this._icon}\n\t\t\t\t\t_iconAlign={this._iconAlign}\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 which key combination can be used to trigger or focus the interactive element of the component.\n\t *\n\t * @deprecated\n\t */\n\t@Prop() public _accessKey?: string;\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 * Deprecated: Marks the element as the selected in a group of related elements. Can be one of the following: `date` | `location` | `page` | `step` | `time` | `true`. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t *\n\t * @deprecated aria-current is not necessary for buttons. will be removed in version 2.\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrentPropType;\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 * Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\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 * @deprecated Use _icons.\n\t */\n\t@Prop() public _icon?: IconsPropType;\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 * Deprecated: Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t *\n\t * @deprecated\n\t */\n\t@Prop() public _iconAlign?: AlignPropType;\n\n\t/**\n\t * Deprecated: Hides the label and shows the description in a Tooltip instead.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\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,ilCACxB,MAAAC,EAAeD,E,MCwBFE,EAAS,M,yBAGJC,KAAAC,SAAYC,IAC5BC,EAAeH,KAAKI,KAAMF,EAAI,E,kNAsFM,M,gBAOC,M,oRAgEgB,M,WAKV,S,oCAUM,Q,CAzK3C,MAAAG,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,cACXH,EAAA,iBAAAE,IAAA,2CACCN,IAAKF,KAAKC,SACVQ,MAAO,CACNC,OAAQ,KACR,CAACV,KAAKW,UAAqBX,KAAKW,WAAa,SAC7C,CAACX,KAAKY,cAAyBZ,KAAKW,WAAa,iBAAmBX,KAAKY,eAAiB,UAAYZ,KAAKY,aAAaC,OAAS,GAElIC,WAAYd,KAAKc,WACjBC,cAAef,KAAKe,cACpBC,aAAchB,KAAKgB,aACnBC,cAAejB,KAAKiB,cACpBC,WAAYlB,KAAKkB,WACjBC,cAAenB,KAAKmB,cACpBP,aAAcZ,KAAKY,aACnBQ,UAAWpB,KAAKoB,UAChBC,WAAYrB,KAAKqB,YAAcrB,KAAKsB,UACpCC,OAAQvB,KAAKuB,QAAUvB,KAAKwB,MAC5BC,WAAYzB,KAAKyB,WACjBC,IAAK1B,KAAK0B,IACVC,OAAQ3B,KAAK2B,OACbC,MAAO5B,KAAK4B,MACZC,IAAK7B,KAAK6B,IACVC,MAAO9B,KAAK8B,MACZC,qBAAsB/B,KAAK+B,qBAC3BC,UAAWhC,KAAKgC,UAChBC,cAAejC,KAAKiC,cACpBC,MAAOlC,KAAKkC,MACZC,OAAQnC,KAAKmC,OACbxB,SAAUX,KAAKW,UAEfL,EAAA,QAAAE,IAAA,2CAAM4B,KAAK,SAASC,KAAK,Y"}
+{"version":3,"names":["defaultStyleCss","KolButtonDefaultStyle0","KolButton","this","catchRef","ref","propagateFocus","host","render","h","Host","key","class","KolButtonWcTag","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_hideLabel","_iconOnly","_icons","_icon","_iconAlign","_id","_label","_name","_on","_role","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","_value","name","slot"],"sources":["src/components/button/style.scss?tag=kol-button&mode=default&encapsulation=shadow","src/components/button/shadow.tsx"],"sourcesContent":["@import '../button';\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { AlignPropType } from '../../types/props/align';\nimport { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';\nimport { AriaCurrentPropType } from '../../types/props/aria-current';\nimport { ButtonCallbacksPropType } from '../../types/props/button-callbacks';\nimport { ButtonTypePropType } from '../../types/props/button-type';\nimport { ButtonVariantPropType } from '../../types/props/button-variant';\nimport { CustomClassPropType } from '../../types/props/custom-class';\nimport { IconsPropType } from '../../types/props/icons';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { StencilUnknown } from '../../types/unknown';\nimport { propagateFocus } from '../../utils/reuse';\nimport { Props } from './types';\nimport { KolButtonWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements Props {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button\">\n\t\t\t\t<KolButtonWcTag\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_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel || this._iconOnly}\n\t\t\t\t\t_icons={this._icons || this._icon}\n\t\t\t\t\t_iconAlign={this._iconAlign}\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</KolButtonWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t *\n\t * @deprecated\n\t */\n\t@Prop() public _accessKey?: string;\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 * Deprecated: Marks the element as the selected in a group of related elements. Can be one of the following: `date` | `location` | `page` | `step` | `time` | `true`. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t *\n\t * @deprecated aria-current is not necessary for buttons. will be removed in version 2.\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrentPropType;\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 * Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\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 * @deprecated Use _icons.\n\t */\n\t@Prop() public _icon?: IconsPropType;\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 * Deprecated: Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t *\n\t * @deprecated\n\t */\n\t@Prop() public _iconAlign?: AlignPropType;\n\n\t/**\n\t * Deprecated: Hides the label and shows the description in a Tooltip instead.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\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":";;;uJAAA,MAAMA,EAAkB,ilCACxB,MAAAC,EAAeD,E,MCyBFE,EAAS,M,yBAGJC,KAAAC,SAAYC,IAC5BC,EAAeH,KAAKI,KAAMF,EAAI,E,kNAsFM,M,gBAOC,M,oRAgEgB,M,WAKV,S,oCAUM,Q,CAzK3C,MAAAG,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,cACXH,EAACI,EAAc,CAAAF,IAAA,2CACdN,IAAKF,KAAKC,SACVQ,MAAO,CACNE,OAAQ,KACR,CAACX,KAAKY,UAAqBZ,KAAKY,WAAa,SAC7C,CAACZ,KAAKa,cAAyBb,KAAKY,WAAa,iBAAmBZ,KAAKa,eAAiB,UAAYb,KAAKa,aAAaC,OAAS,GAElIC,WAAYf,KAAKe,WACjBC,cAAehB,KAAKgB,cACpBC,aAAcjB,KAAKiB,aACnBC,cAAelB,KAAKkB,cACpBC,WAAYnB,KAAKmB,WACjBC,cAAepB,KAAKoB,cACpBP,aAAcb,KAAKa,aACnBQ,UAAWrB,KAAKqB,UAChBC,WAAYtB,KAAKsB,YAActB,KAAKuB,UACpCC,OAAQxB,KAAKwB,QAAUxB,KAAKyB,MAC5BC,WAAY1B,KAAK0B,WACjBC,IAAK3B,KAAK2B,IACVC,OAAQ5B,KAAK4B,OACbC,MAAO7B,KAAK6B,MACZC,IAAK9B,KAAK8B,IACVC,MAAO/B,KAAK+B,MACZC,qBAAsBhC,KAAKgC,qBAC3BC,UAAWjC,KAAKiC,UAChBC,cAAelC,KAAKkC,cACpBC,MAAOnC,KAAKmC,MACZC,OAAQpC,KAAKoC,OACbxB,SAAUZ,KAAKY,UAEfN,EAAA,QAAAE,IAAA,2CAAM6B,KAAK,SAASC,KAAK,Y"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as i,H as a}from"./index-c1d028ba.js";import{t}from"./i18n-ad947f60.js";import{v as s}from"./has-closer-a9be38af.js";import{a as o,s as n}from"./prop.validators-8c5a4551.js";import{v as l}from"./label-9ebba50f.js";import{w as d}from"./validation-4822efd5.js";import"./i18n-fddf0324.js";import"./reuse-d79ab469.js";import"./index-117bd1aa.js";import"./a11y.tipps-1cea6b3d.js";import"./dev.utils-8d5cefe9.js";const r=(e,a)=>{o(e,"_hasFooter",a)},h=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host>div.card{height:100%;position:relative}.close{position:absolute;top:0;right:0}",c=h,f=class{constructor(a){e(this,a),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._on=void 0,this._hasCloser=!1,this._hasFooter=!1,this._heading=void 0,this._headline=void 0,this._label=void 0,this._level=1,this.state={_label:"…"}}render(){return i(a,{key:"4456029ad1f0d1d961e3f499a4fd99a1271d5aa3",class:"kol-card"},i("div",{key:"3e977e2e01f142aa0a7ff48f48f09a0c26893008",class:"card"},i("div",{key:"054799323c5b2efc5f3d7415ea9ba09f07d303cb",class:"header"},i("kol-heading-wc",{key:"ff4f74669233c75ae12e8828522aeb7a1c7d8aaf",_label:this.state._label,_level:this.state._level}),i("slot",{key:"4a80e470fbe83e44bfb6205031f76bf50569a4ed",name:"header"})),i("div",{key:"01aa039e91c84558f3f2a7bd3ce0bc31ee086199",class:"content"},i("slot",{key:"073fc39112c8f51fd1db84f786f31c6d1f293073",name:"content"}),i("slot",{key:"16bc8e0f6db4ea7fa50c032a22af89014c65ca41"})),this.state._hasFooter&&i("div",{class:"footer"},i("slot",{name:"footer"})),this.state._hasCloser&&i("kol-button-wc",{class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:t("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(e){this.validateOnValue(e)&&n(this,"_on",{onClose:e.onClose})}validateHasCloser(e){s(this,e)}validateHasFooter(e){r(this,e)}validateHeading(e){this.validateLabel(e)}validateHeadline(e){this.validateLabel(e)}validateLabel(e){l(this,e,{defaultValue:"…"})}validateLevel(e){d(this,e)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateHasFooter(this._hasFooter),this.validateLabel(this._label||this._heading||this._headline),this.validateLevel(this._level),this.validateOn(this._on)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_hasFooter:["validateHasFooter"],_heading:["validateHeading"],_headline:["validateHeadline"],_label:["validateLabel"],_level:["validateLevel"]}}};f.style={default:c};export{f as kol_card};
+import{r as e,h as i,H as t}from"./index-a051748e.js";import{t as a}from"./i18n-ad947f60.js";import{v as s}from"./has-closer-dd12bf14.js";import{a as o,s as n}from"./prop.validators-d99c5d68.js";import{v as d}from"./label-ce16ea0f.js";import{w as l}from"./validation-8597a722.js";import{c as r,d as h}from"./component-names-fed305c7.js";import"./i18n-fddf0324.js";import"./reuse-d79ab469.js";import"./index-117bd1aa.js";import"./a11y.tipps-5500b43f.js";import"./dev.utils-cdb6e8d3.js";const c=(e,a)=>{o(e,"_hasFooter",a)},f=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host>div.card{height:100%;position:relative}.close{position:absolute;top:0;right:0}",p=f,b=class{constructor(a){e(this,a),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._on=void 0,this._hasCloser=!1,this._hasFooter=!1,this._heading=void 0,this._headline=void 0,this._label=void 0,this._level=1,this.state={_label:"…"}}render(){return i(t,{key:"da32b0ed01193f42e03b2f832888f2f8f43da04f",class:"kol-card"},i("div",{key:"ebd95e2fa5aa4284d849b4d224eecf57a6e1865e",class:"card"},i("div",{key:"c9945158ac65a2349b6c98771e22b0360d1958e8",class:"header"},i(r,{key:"95c331fb65b35f817d40b9f2dcb6b895474f3dcf",_label:this.state._label,_level:this.state._level}),i("slot",{key:"4079d18c6d704b9da532e5c67b34c0634275b65d",name:"header"})),i("div",{key:"88d3091a5ff8e470a039b432ff80133d30705ff9",class:"content"},i("slot",{key:"1d1a3dd3ff5309bb469b511a313b2a10b77adf28",name:"content"}),i("slot",{key:"f98e0f4bcb8779315d1dc1a62e01ae080e6bf1b9"})),this.state._hasFooter&&i("div",{class:"footer"},i("slot",{name:"footer"})),this.state._hasCloser&&i(h,{class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:a("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(e){this.validateOnValue(e)&&n(this,"_on",{onClose:e.onClose})}validateHasCloser(e){s(this,e)}validateHasFooter(e){c(this,e)}validateHeading(e){this.validateLabel(e)}validateHeadline(e){this.validateLabel(e)}validateLabel(e){d(this,e,{defaultValue:"…"})}validateLevel(e){l(this,e)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateHasFooter(this._hasFooter),this.validateLabel(this._label||this._heading||this._headline),this.validateLevel(this._level),this.validateOn(this._on)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_hasFooter:["validateHasFooter"],_heading:["validateHeading"],_headline:["validateHeadline"],_label:["validateLabel"],_level:["validateLevel"]}}};b.style={default:p};export{b as kol_card};

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

@@ -1 +1 @@
-{"version":3,"names":["validateHasFooter","component","value","watchBoolean","defaultStyleCss","KolCardDefaultStyle0","KolCard","this","close","_a","_on","onClose","undefined","Event","on","onClick","validateOnValue","_label","render","h","Host","key","class","state","_level","name","_hasFooter","_hasCloser","_hideLabel","_icons","left","icon","translate","_tooltipAlign","validateOn","setState","validateHasCloser","validateHeading","validateLabel","validateHeadline","defaultValue","validateLevel","watchHeadingLevel","componentWillLoad","_heading","_headline"],"sources":["src/types/props/has-footer.ts","src/components/card/style.scss?tag=kol-card&mode=default&encapsulation=shadow","src/components/card/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n\nexport type HasFooterPropType = boolean;\n\n/**\n * Shows the slot=\"footer\".\n */\nexport type PropHasFooter = {\n\thasFooter: HasFooterPropType;\n};\n\n/* validator */\nexport const validateHasFooter = (component: Generic.Element.Component, value?: HasFooterPropType): void => {\n\twatchBoolean(component, '_hasFooter', value);\n};\n","@import '../style';\n\n:host > div.card {\n\theight: 100%;\n\tposition: relative;\n}\n\n.close {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { HasCloserPropType, validateHasCloser } from '../../types/props/has-closer';\nimport { HasFooterPropType, validateHasFooter } from '../../types/props/has-footer';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { setState } from '../../utils/prop.validators';\nimport { KoliBriAlertEventCallbacks } from '../alert/types';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, KoliBriCardEventCallbacks, States } from './types';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n * @slot header - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card.\n * @slot footer - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card.\n */\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements API {\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\treturn (\n\t\t\t<Host class=\"kol-card\">\n\t\t\t\t<div class=\"card\">\n\t\t\t\t\t<div class=\"header\">\n\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<slot name=\"header\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot name=\"content\"></slot>\n\t\t\t\t\t\t{/* Deprecated for version 2 */}\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasFooter && (\n\t\t\t\t\t\t<div class=\"footer\">\n\t\t\t\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\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</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the event callback functions for the component.\n\t */\n\t@Prop() public _on?: KoliBriCardEventCallbacks;\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 * Shows the slot=\"footer\".\n\t * @TODO: Change type back to `HasFooterPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasFooter?: boolean = false;\n\n\t/**\n\t * Deprecated: Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _heading?: string;\n\n\t/**\n\t * Deprecated: Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _headline?: 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?: 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@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t};\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriCardEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriCardEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriCardEventCallbacks>(this, '_on', {\n\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t});\n\t\t}\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_hasFooter')\n\tpublic validateHasFooter(value?: HasFooterPropType): void {\n\t\tvalidateHasFooter(this, value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_headline')\n\tpublic validateHeadline(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\tdefaultValue: '…',\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHasFooter(this._hasFooter);\n\t\tthis.validateLabel(this._label || this._heading || this._headline);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"mappings":";;;uaAgBO,MAAMA,EAAoB,CAACC,EAAsCC,KACvEC,EAAaF,EAAW,aAAcC,EAAM,ECjB7C,MAAME,EAAkB,m8BACxB,MAAAC,EAAeD,E,MCwBFE,EAAO,M,yBACFC,KAAAC,MAAQ,K,MACxB,KAAIC,EAAAF,KAAKG,OAAG,MAAAD,SAAA,SAAAA,EAAEE,WAAYC,UAAW,CACpCL,KAAKG,IAAIC,QAAQ,IAAIE,MAAM,S,GAIZN,KAAAO,GAAK,CACrBC,QAASR,KAAKC,OAoFPD,KAAAS,gBAAmBd,UACnBA,IAAU,UAAYA,IAAU,aAAgBA,EAAoCS,UAAY,W,mCAnClE,M,gBAMA,M,mFAsBC,E,WAEP,CAC/BM,OAAQ,I,CA9EF,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,YACXH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACVH,EAAA,kBAAAE,IAAA,2CAAgBJ,OAAQV,KAAKgB,MAAMN,OAAQO,OAAQjB,KAAKgB,MAAMC,SAC9DL,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YAEZN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACVH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YAEXN,EAAA,QAAAE,IAAA,8CAEAd,KAAKgB,MAAMG,YACXP,EAAA,OAAKG,MAAM,UACVH,EAAA,QAAMM,KAAK,YAIZlB,KAAKgB,MAAMI,YACXR,EAAA,iBACCG,MAAM,QACNM,WAAU,KACVC,OAAQ,CACPC,KAAM,CACLC,KAAM,0BAGRd,OAAQe,EAAU,aAClBtB,IAAKH,KAAKO,GACVmB,cAAc,U,CAuDb,UAAAC,CAAWhC,GACjB,GAAIK,KAAKS,gBAAgBd,GAAQ,CAChCiC,EAAoC5B,KAAM,MAAO,CAChDI,QAAUT,EAAqCS,S,EAM3C,iBAAAyB,CAAkBlC,GACxBkC,EAAkB7B,KAAML,E,CAIlB,iBAAAF,CAAkBE,GACxBF,EAAkBO,KAAML,E,CAOlB,eAAAmC,CAAgBnC,GACtBK,KAAK+B,cAAcpC,E,CAOb,gBAAAqC,CAAiBrC,GACvBK,KAAK+B,cAAcpC,E,CAIb,aAAAoC,CAAcpC,GACpBoC,EAAc/B,KAAML,EAAO,CAC1BsC,aAAc,K,CAKT,aAAAC,CAAcvC,GACpBwC,EAAkBnC,KAAML,E,CAGlB,iBAAAyC,GACNpC,KAAK6B,kBAAkB7B,KAAKoB,YAC5BpB,KAAKP,kBAAkBO,KAAKmB,YAC5BnB,KAAK+B,cAAc/B,KAAKU,QAAUV,KAAKqC,UAAYrC,KAAKsC,WACxDtC,KAAKkC,cAAclC,KAAKiB,QACxBjB,KAAK2B,WAAW3B,KAAKG,I"}
+{"version":3,"names":["validateHasFooter","component","value","watchBoolean","defaultStyleCss","KolCardDefaultStyle0","KolCard","this","close","_a","_on","onClose","undefined","Event","on","onClick","validateOnValue","_label","render","h","Host","key","class","KolHeadingWcTag","state","_level","name","_hasFooter","_hasCloser","KolButtonWcTag","_hideLabel","_icons","left","icon","translate","_tooltipAlign","validateOn","setState","validateHasCloser","validateHeading","validateLabel","validateHeadline","defaultValue","validateLevel","watchHeadingLevel","componentWillLoad","_heading","_headline"],"sources":["src/types/props/has-footer.ts","src/components/card/style.scss?tag=kol-card&mode=default&encapsulation=shadow","src/components/card/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n\nexport type HasFooterPropType = boolean;\n\n/**\n * Shows the slot=\"footer\".\n */\nexport type PropHasFooter = {\n\thasFooter: HasFooterPropType;\n};\n\n/* validator */\nexport const validateHasFooter = (component: Generic.Element.Component, value?: HasFooterPropType): void => {\n\twatchBoolean(component, '_hasFooter', value);\n};\n","@import '../style';\n\n:host > div.card {\n\theight: 100%;\n\tposition: relative;\n}\n\n.close {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { HasCloserPropType, validateHasCloser } from '../../types/props/has-closer';\nimport { HasFooterPropType, validateHasFooter } from '../../types/props/has-footer';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { setState } from '../../utils/prop.validators';\nimport { KoliBriAlertEventCallbacks } from '../alert/types';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, KoliBriCardEventCallbacks, States } from './types';\nimport { KolButtonWcTag, KolHeadingWcTag } from '../../core/component-names';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n * @slot header - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card.\n * @slot footer - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card.\n */\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements API {\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\treturn (\n\t\t\t<Host class=\"kol-card\">\n\t\t\t\t<div class=\"card\">\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<KolHeadingWcTag _label={this.state._label} _level={this.state._level}></KolHeadingWcTag>\n\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot name=\"content\"></slot>\n\t\t\t\t\t\t{/* Deprecated for version 2 */}\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasFooter && (\n\t\t\t\t\t\t<div class=\"footer\">\n\t\t\t\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<KolButtonWcTag\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></KolButtonWcTag>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the event callback functions for the component.\n\t */\n\t@Prop() public _on?: KoliBriCardEventCallbacks;\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 * Shows the slot=\"footer\".\n\t * @TODO: Change type back to `HasFooterPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasFooter?: boolean = false;\n\n\t/**\n\t * Deprecated: Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _heading?: string;\n\n\t/**\n\t * Deprecated: Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _headline?: 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?: 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@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t};\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriCardEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriCardEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriCardEventCallbacks>(this, '_on', {\n\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t});\n\t\t}\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_hasFooter')\n\tpublic validateHasFooter(value?: HasFooterPropType): void {\n\t\tvalidateHasFooter(this, value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_headline')\n\tpublic validateHeadline(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\tdefaultValue: '…',\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHasFooter(this._hasFooter);\n\t\tthis.validateLabel(this._label || this._heading || this._headline);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"mappings":";;;qeAgBO,MAAMA,EAAoB,CAACC,EAAsCC,KACvEC,EAAaF,EAAW,aAAcC,EAAM,ECjB7C,MAAME,EAAkB,m8BACxB,MAAAC,EAAeD,E,MCyBFE,EAAO,M,yBACFC,KAAAC,MAAQ,K,MACxB,KAAIC,EAAAF,KAAKG,OAAG,MAAAD,SAAA,SAAAA,EAAEE,WAAYC,UAAW,CACpCL,KAAKG,IAAIC,QAAQ,IAAIE,MAAM,S,GAIZN,KAAAO,GAAK,CACrBC,QAASR,KAAKC,OAoFPD,KAAAS,gBAAmBd,UACnBA,IAAU,UAAYA,IAAU,aAAgBA,EAAoCS,UAAY,W,mCAnClE,M,gBAMA,M,mFAsBC,E,WAEP,CAC/BM,OAAQ,I,CA9EF,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,YACXH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACVH,EAACI,EAAe,CAAAF,IAAA,2CAACJ,OAAQV,KAAKiB,MAAMP,OAAQQ,OAAQlB,KAAKiB,MAAMC,SAC/DN,EAAA,QAAAE,IAAA,2CAAMK,KAAK,YAEZP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACVH,EAAA,QAAAE,IAAA,2CAAMK,KAAK,YAEXP,EAAA,QAAAE,IAAA,8CAEAd,KAAKiB,MAAMG,YACXR,EAAA,OAAKG,MAAM,UACVH,EAAA,QAAMO,KAAK,YAIZnB,KAAKiB,MAAMI,YACXT,EAACU,EAAc,CACdP,MAAM,QACNQ,WAAU,KACVC,OAAQ,CACPC,KAAM,CACLC,KAAM,0BAGRhB,OAAQiB,EAAU,aAClBxB,IAAKH,KAAKO,GACVqB,cAAc,U,CAuDb,UAAAC,CAAWlC,GACjB,GAAIK,KAAKS,gBAAgBd,GAAQ,CAChCmC,EAAoC9B,KAAM,MAAO,CAChDI,QAAUT,EAAqCS,S,EAM3C,iBAAA2B,CAAkBpC,GACxBoC,EAAkB/B,KAAML,E,CAIlB,iBAAAF,CAAkBE,GACxBF,EAAkBO,KAAML,E,CAOlB,eAAAqC,CAAgBrC,GACtBK,KAAKiC,cAActC,E,CAOb,gBAAAuC,CAAiBvC,GACvBK,KAAKiC,cAActC,E,CAIb,aAAAsC,CAActC,GACpBsC,EAAcjC,KAAML,EAAO,CAC1BwC,aAAc,K,CAKT,aAAAC,CAAczC,GACpB0C,EAAkBrC,KAAML,E,CAGlB,iBAAA2C,GACNtC,KAAK+B,kBAAkB/B,KAAKqB,YAC5BrB,KAAKP,kBAAkBO,KAAKoB,YAC5BpB,KAAKiC,cAAcjC,KAAKU,QAAUV,KAAKuC,UAAYvC,KAAKwC,WACxDxC,KAAKoC,cAAcpC,KAAKkB,QACxBlB,KAAK6B,WAAW7B,KAAKG,I"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as e,g as s}from"./index-c1d028ba.js";import{v as a}from"./label-9ebba50f.js";import{v as o}from"./open-156f7856.js";import{t as n}from"./events-fa760b68.js";import{s as h}from"./prop.validators-8c5a4551.js";import{a as d}from"./reuse-d79ab469.js";import"./a11y.tipps-1cea6b3d.js";import"./dev.utils-8d5cefe9.js";import"./index-117bd1aa.js";class l{constructor(t,e,i){this.detailsElement=t,this.summaryElement=e,this.contentElement=i,this.isClosing=!1,this.isExpanding=!1,this.summaryElement.addEventListener("click",this.handleSummaryClick.bind(this))}handleSummaryClick(t){t.preventDefault(),this.isClosing||!this.detailsElement.open?this.open():(this.isExpanding||this.detailsElement.open)&&this.collapse()}open(){this.detailsElement.open=!0,window.requestAnimationFrame(this.expand.bind(this))}expand(){this.isExpanding=!0,this.animateContentHeight("expand")}collapse(){this.isClosing=!0,this.animateContentHeight("collapse")}animateContentHeight(t){let e="expand"===t?0:this.contentElement.offsetHeight,i="expand"===t?this.contentElement.offsetHeight:0;this.animation&&(e=this.contentElement.offsetHeight,this.animation.cancel(),"expand"===t&&(i=this.contentElement.offsetHeight)),this.animation=this.contentElement.animate({height:[`${e}px`,`${i}px`]},{duration:matchMedia("(prefers-reduced-motion)").matches?0:250,easing:"ease-out"}),this.animation.addEventListener("finish",(()=>{this.onAnimationFinish()}),{once:!0}),this.animation.addEventListener("cancel",(()=>{"expand"===t?this.isExpanding=!1:this.isClosing=!1}),{once:!0})}onAnimationFinish(){this.detailsElement.open=this.isExpanding,this.animation=void 0,this.isClosing=!1,this.isExpanding=!1}}const r=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host{display:block}details{display:grid}details>summary{cursor:pointer;display:flex;place-items:center}details>summary>span{border-bottom-color:grey;border-bottom-style:solid}details>summary:focus>span,details>summary:hover>span,details[open]>summary>span{border-bottom-color:#000}.content{overflow:hidden}details>.kol-indented-text{margin:0.25em 0 0 0.5em}",c=r,p=class{constructor(t){i(this,t),this.catchRef=t=>{this.summaryElement=t,d(this.host,this.summaryElement)},this.handleToggle=t=>{clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var e,i,a,s;Boolean(null===(e=this.detailsElement)||void 0===e?void 0:e.open)!==this.state._open&&(this._open=Boolean(null===(i=this.detailsElement)||void 0===i?void 0:i.open),n("toggle",this.host,this._open),"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onToggle)&&(null===(s=this.state._on)||void 0===s||s.onToggle(t,this._open)))}),25)},this._label=void 0,this._on=void 0,this._open=!1,this._summary=void 0,this.state={_label:"…",_on:{}}}render(){return t(e,{key:"8eadbe46205e2e8933cc0e65b7142fb84ddd1ed2",class:"kol-details"},t("details",{key:"ac9ef6c5d7639af86f0c60c5702a52c4d5b81e7c",ref:t=>{this.detailsElement=t},onToggle:this.handleToggle},t("summary",{key:"165741104a7a3e35aff0c931c2f5ca27a0ce0eb6",ref:this.catchRef},this.state._open?t("kol-icon",{_label:"",_icons:"codicon codicon-chevron-down"}):t("kol-icon",{_label:"",_icons:"codicon codicon-chevron-right"}),t("span",{key:"f8065129d991fa8912241a48f912716081f4565b"},this.state._label)),t("div",{key:"21d8efe95ff3ae4c7a8f11fb86b5b790baa7290e","aria-hidden":!1===this.state._open?"true":void 0,class:"content",ref:t=>this.contentElement=t},t("kol-indented-text",{key:"93ba55116a1765788a1d21ae73a8fab63d26aed5"},t("slot",{key:"ceab73bd4609875262688da170785a2314ccdc64"})))))}validateLabel(t){a(this,t,{required:!0})}validateOn(t){"object"==typeof t&&null!==t&&"function"==typeof t.onToggle&&h(this,"_on",t)}validateOpen(t){o(this,t)}validateSummary(t){this.validateLabel(t)}componentWillLoad(){this.validateLabel(this._label||this._summary),this.validateOn(this._on),this.validateOpen(this._open)}componentDidLoad(){if(this.detailsElement&&this.summaryElement&&this.contentElement){const t=new l(this.detailsElement,this.summaryElement,this.contentElement);this.state._open&&t.open()}}get host(){return s(this)}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_open:["validateOpen"],_summary:["validateSummary"]}}};p.style={default:c};export{p as kol_details};
+import{r as i,h as t,H as e,g as s}from"./index-a051748e.js";import{v as a}from"./label-ce16ea0f.js";import{v as o}from"./open-7a91a920.js";import{t as n}from"./events-fa760b68.js";import{s as h}from"./prop.validators-d99c5d68.js";import{a as d}from"./reuse-d79ab469.js";import{h as r,k as l}from"./component-names-fed305c7.js";import"./a11y.tipps-5500b43f.js";import"./dev.utils-cdb6e8d3.js";import"./index-117bd1aa.js";class c{constructor(t,e,i){this.detailsElement=t,this.summaryElement=e,this.contentElement=i,this.isClosing=!1,this.isExpanding=!1,this.summaryElement.addEventListener("click",this.handleSummaryClick.bind(this))}handleSummaryClick(t){t.preventDefault(),this.isClosing||!this.detailsElement.open?this.open():(this.isExpanding||this.detailsElement.open)&&this.collapse()}open(){this.detailsElement.open=!0,window.requestAnimationFrame(this.expand.bind(this))}expand(){this.isExpanding=!0,this.animateContentHeight("expand")}collapse(){this.isClosing=!0,this.animateContentHeight("collapse")}animateContentHeight(t){let e="expand"===t?0:this.contentElement.offsetHeight,i="expand"===t?this.contentElement.offsetHeight:0;this.animation&&(e=this.contentElement.offsetHeight,this.animation.cancel(),"expand"===t&&(i=this.contentElement.offsetHeight)),this.animation=this.contentElement.animate({height:[`${e}px`,`${i}px`]},{duration:matchMedia("(prefers-reduced-motion)").matches?0:250,easing:"ease-out"}),this.animation.addEventListener("finish",(()=>{this.onAnimationFinish()}),{once:!0}),this.animation.addEventListener("cancel",(()=>{"expand"===t?this.isExpanding=!1:this.isClosing=!1}),{once:!0})}onAnimationFinish(){this.detailsElement.open=this.isExpanding,this.animation=void 0,this.isClosing=!1,this.isExpanding=!1}}const p=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host{display:block}details{display:grid}details>summary{cursor:pointer;display:flex;place-items:center}details>summary>span{border-bottom-color:grey;border-bottom-style:solid}details>summary:focus>span,details>summary:hover>span,details[open]>summary>span{border-bottom-color:#000}.content{overflow:hidden}details>.kol-indented-text{margin:0.25em 0 0 0.5em}",f=p,m=class{constructor(t){i(this,t),this.catchRef=t=>{this.summaryElement=t,d(this.host,this.summaryElement)},this.handleToggle=t=>{clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var e,i,s,a;Boolean(null===(e=this.detailsElement)||void 0===e?void 0:e.open)!==this.state._open&&(this._open=Boolean(null===(i=this.detailsElement)||void 0===i?void 0:i.open),n("toggle",this.host,this._open),"function"==typeof(null===(s=this.state._on)||void 0===s?void 0:s.onToggle)&&(null===(a=this.state._on)||void 0===a||a.onToggle(t,this._open)))}),25)},this._label=void 0,this._on=void 0,this._open=!1,this._summary=void 0,this.state={_label:"…",_on:{}}}render(){return t(e,{key:"7e913ad8f8e1e277ab20ba4e4404cf927e51bf1e",class:"kol-details"},t("details",{key:"395cb2b8246bf5b97d96d538bbadb356b2712fa8",ref:t=>{this.detailsElement=t},onToggle:this.handleToggle},t("summary",{key:"8d68e6a9661b189f4d51a84fedafacdd83b47643",ref:this.catchRef},this.state._open?t(r,{_label:"",_icons:"codicon codicon-chevron-down"}):t(r,{_label:"",_icons:"codicon codicon-chevron-right"}),t("span",{key:"56161ba3a9556a5736911b981c25257665ea06a4"},this.state._label)),t("div",{key:"616d04bc148caaab97ecf6dfc40eb66173d20e49","aria-hidden":!1===this.state._open?"true":void 0,class:"content",ref:t=>this.contentElement=t},t(l,{key:"eb523a93b16331ebd3497c4ab0802007b6e3c752"},t("slot",{key:"985cea4fe6e0be5ac2d8c2d4331c8a0624c7ca0d"})))))}validateLabel(t){a(this,t,{required:!0})}validateOn(t){"object"==typeof t&&null!==t&&"function"==typeof t.onToggle&&h(this,"_on",t)}validateOpen(t){o(this,t)}validateSummary(t){this.validateLabel(t)}componentWillLoad(){this.validateLabel(this._label||this._summary),this.validateOn(this._on),this.validateOpen(this._open)}componentDidLoad(){if(this.detailsElement&&this.summaryElement&&this.contentElement){const t=new c(this.detailsElement,this.summaryElement,this.contentElement);this.state._open&&t.open()}}get host(){return s(this)}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_open:["validateOpen"],_summary:["validateSummary"]}}};m.style={default:f};export{m as kol_details};

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

@@ -1 +1 @@
-{"version":3,"names":["DetailsAnimationController","constructor","detailsElement","summaryElement","contentElement","this","isClosing","isExpanding","addEventListener","handleSummaryClick","bind","event","preventDefault","open","collapse","window","requestAnimationFrame","expand","animateContentHeight","direction","startHeight","offsetHeight","endHeight","animation","cancel","animate","height","duration","matchMedia","matches","easing","onAnimationFinish","once","undefined","defaultStyleCss","KolDetailsDefaultStyle0","KolDetails","catchRef","ref","propagateFocus","host","handleToggle","clearTimeout","toggleTimeout","setTimeout","Boolean","_a","state","_open","_b","tryToDispatchKoliBriEvent","_c","_on","onToggle","_d","_label","render","h","Host","key","class","el","_icons","element","validateLabel","value","required","validateOn","on","setState","validateOpen","validateSummary","componentWillLoad","_summary","componentDidLoad","animationController"],"sources":["src/components/details/DetailsAnimationController.ts","src/components/details/style.scss?tag=kol-details&mode=default&encapsulation=shadow","src/components/details/component.tsx"],"sourcesContent":["/* Heavily inspired by: https://codepen.io/Mamboleoo/pen/QWEpLqm  */\n\nexport default class DetailsAnimationController {\n\tprivate animation?: Animation;\n\tprivate isClosing = false;\n\tprivate isExpanding = false;\n\n\tconstructor(\n\t\tprivate detailsElement: HTMLDetailsElement,\n\t\tprivate summaryElement: HTMLElement,\n\t\tprivate contentElement: HTMLElement,\n\t) {\n\t\tthis.summaryElement.addEventListener('click', this.handleSummaryClick.bind(this));\n\t}\n\n\tprivate handleSummaryClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\n\t\tif (this.isClosing || !this.detailsElement.open) {\n\t\t\tthis.open();\n\t\t} else if (this.isExpanding || this.detailsElement.open) {\n\t\t\tthis.collapse();\n\t\t}\n\t}\n\n\tpublic open() {\n\t\tthis.detailsElement.open = true;\n\t\twindow.requestAnimationFrame(this.expand.bind(this));\n\t}\n\n\tprivate expand() {\n\t\tthis.isExpanding = true;\n\t\tthis.animateContentHeight('expand');\n\t}\n\n\tprivate collapse() {\n\t\tthis.isClosing = true;\n\t\tthis.animateContentHeight('collapse');\n\t}\n\n\tprivate animateContentHeight(direction: 'expand' | 'collapse') {\n\t\tlet startHeight = direction === 'expand' ? 0 : this.contentElement.offsetHeight;\n\t\tlet endHeight = direction === 'expand' ? this.contentElement.offsetHeight : 0;\n\n\t\t/**\n\t\t * Override start and end height, when an animation is ongoing. During the animation, offsetHeight reflects the actual current height as it's being animated.\n\t\t * After canceling the animation, it reverts to the full height of the content container.\n\t\t */\n\t\tif (this.animation) {\n\t\t\tstartHeight = this.contentElement.offsetHeight;\n\t\t\tthis.animation.cancel();\n\t\t\tif (direction === 'expand') {\n\t\t\t\tendHeight = this.contentElement.offsetHeight;\n\t\t\t}\n\t\t}\n\n\t\tthis.animation = this.contentElement.animate(\n\t\t\t{\n\t\t\t\theight: [`${startHeight}px`, `${endHeight}px`],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: matchMedia('(prefers-reduced-motion)').matches ? 0 : 250,\n\t\t\t\teasing: 'ease-out',\n\t\t\t},\n\t\t);\n\n\t\tthis.animation.addEventListener(\n\t\t\t'finish',\n\t\t\t() => {\n\t\t\t\tthis.onAnimationFinish();\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t\tthis.animation.addEventListener(\n\t\t\t'cancel',\n\t\t\t() => {\n\t\t\t\tif (direction === 'expand') {\n\t\t\t\t\tthis.isExpanding = false;\n\t\t\t\t} else {\n\t\t\t\t\tthis.isClosing = false;\n\t\t\t\t}\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t}\n\n\tprivate onAnimationFinish() {\n\t\tthis.detailsElement.open = this.isExpanding;\n\t\tthis.animation = undefined;\n\t\tthis.isClosing = false;\n\t\tthis.isExpanding = false;\n\t}\n}\n","@import '../style';\n@import '../host-display-block';\n\ndetails {\n\tdisplay: grid;\n}\n\ndetails > summary {\n\tcursor: pointer;\n\tdisplay: flex;\n\tplace-items: center;\n}\n\ndetails > summary > span {\n\tborder-bottom-color: grey;\n\tborder-bottom-style: solid;\n}\n\ndetails > summary:focus > span,\ndetails > summary:hover > span,\ndetails[open] > summary > span {\n\tborder-bottom-color: #000;\n}\n\n.content {\n\toverflow: hidden;\n}\n\ndetails > .kol-indented-text {\n\tmargin: 0.25em 0 0 0.5em;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { validateOpen } from '../../types/props/open';\nimport { tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { setState } from '../../utils/prop.validators';\nimport DetailsAnimationController from './DetailsAnimationController';\nimport { API, EventCallbacks, States } from './types';\nimport { propagateFocus } from '../../utils/reuse';\n\n/**\n * @slot - Der Inhalt, der in der Detailbeschreibung angezeigt wird.\n */\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements API {\n\t@Element() private readonly host?: HTMLKolDetailsElement;\n\tprivate detailsElement?: HTMLDetailsElement;\n\tprivate summaryElement?: HTMLElement;\n\tprivate contentElement?: HTMLElement;\n\n\tprivate readonly catchRef = (ref?: HTMLElement) => {\n\t\tthis.summaryElement = ref;\n\t\tpropagateFocus(this.host, this.summaryElement);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-details\">\n\t\t\t\t<details\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.detailsElement = el as HTMLDetailsElement;\n\t\t\t\t\t}}\n\t\t\t\t\tonToggle={this.handleToggle}\n\t\t\t\t>\n\t\t\t\t\t<summary ref={this.catchRef}>\n\t\t\t\t\t\t{this.state._open ? <kol-icon _label=\"\" _icons=\"codicon codicon-chevron-down\" /> : <kol-icon _label=\"\" _icons=\"codicon codicon-chevron-right\" />}\n\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<div aria-hidden={this.state._open === false ? 'true' : undefined} class=\"content\" ref={(element) => (this.contentElement = element)}>\n\t\t\t\t\t\t<kol-indented-text>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</kol-indented-text>\n\t\t\t\t\t</div>\n\t\t\t\t</details>\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 callback functions for details.\n\t */\n\t@Prop() public _on?: EventCallbacks;\n\n\t/**\n\t * If set (to true) opens/expands the element, closes if not set (or set to false).\n\t * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t/**\n\t * Deprecated: Gibt die Zusammenfassung der Detailbeschreibung an.\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _summary?: string;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_on: {},\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(on?: EventCallbacks) {\n\t\tif (typeof on === 'object' && on !== null && typeof on.onToggle === 'function') {\n\t\t\tsetState<EventCallbacks>(this, '_on', on);\n\t\t}\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\t@Watch('_summary')\n\tpublic validateSummary(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._summary);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n\n\tpublic componentDidLoad() {\n\t\tif (this.detailsElement && this.summaryElement && this.contentElement) {\n\t\t\tconst animationController = new DetailsAnimationController(this.detailsElement, this.summaryElement, this.contentElement);\n\t\t\tif (this.state._open) {\n\t\t\t\tanimationController.open();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate toggleTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate handleToggle = (event: Event) => {\n\t\tclearTimeout(this.toggleTimeout);\n\t\tthis.toggleTimeout = setTimeout(() => {\n\t\t\tconst open = Boolean(this.detailsElement?.open);\n\t\t\tif (open !== this.state._open) {\n\t\t\t\t// Update state\n\t\t\t\tthis._open = Boolean(this.detailsElement?.open);\n\n\t\t\t\t// Event handling\n\t\t\t\ttryToDispatchKoliBriEvent('toggle', this.host, this._open);\n\n\t\t\t\t// Callback\n\t\t\t\tif (typeof this.state._on?.onToggle === 'function') {\n\t\t\t\t\tthis.state._on?.onToggle(event, this._open);\n\t\t\t\t}\n\t\t\t}\n\t\t}, 25);\n\t};\n}\n"],"mappings":";;;kXAEqBA,EAKpB,WAAAC,CACSC,EACAC,EACAC,GAFAC,KAAAH,iBACAG,KAAAF,iBACAE,KAAAD,iBANDC,KAAAC,UAAY,MACZD,KAAAE,YAAc,MAOrBF,KAAKF,eAAeK,iBAAiB,QAASH,KAAKI,mBAAmBC,KAAKL,M,CAGpE,kBAAAI,CAAmBE,GAC1BA,EAAMC,iBAEN,GAAIP,KAAKC,YAAcD,KAAKH,eAAeW,KAAM,CAChDR,KAAKQ,M,MACC,GAAIR,KAAKE,aAAeF,KAAKH,eAAeW,KAAM,CACxDR,KAAKS,U,EAIA,IAAAD,GACNR,KAAKH,eAAeW,KAAO,KAC3BE,OAAOC,sBAAsBX,KAAKY,OAAOP,KAAKL,M,CAGvC,MAAAY,GACPZ,KAAKE,YAAc,KACnBF,KAAKa,qBAAqB,S,CAGnB,QAAAJ,GACPT,KAAKC,UAAY,KACjBD,KAAKa,qBAAqB,W,CAGnB,oBAAAA,CAAqBC,GAC5B,IAAIC,EAAcD,IAAc,SAAW,EAAId,KAAKD,eAAeiB,aACnE,IAAIC,EAAYH,IAAc,SAAWd,KAAKD,eAAeiB,aAAe,EAM5E,GAAIhB,KAAKkB,UAAW,CACnBH,EAAcf,KAAKD,eAAeiB,aAClChB,KAAKkB,UAAUC,SACf,GAAIL,IAAc,SAAU,CAC3BG,EAAYjB,KAAKD,eAAeiB,Y,EAIlChB,KAAKkB,UAAYlB,KAAKD,eAAeqB,QACpC,CACCC,OAAQ,CAAC,GAAGN,MAAiB,GAAGE,QAEjC,CACCK,SAAUC,WAAW,4BAA4BC,QAAU,EAAI,IAC/DC,OAAQ,aAIVzB,KAAKkB,UAAUf,iBACd,UACA,KACCH,KAAK0B,mBAAmB,GAEzB,CAAEC,KAAM,OAET3B,KAAKkB,UAAUf,iBACd,UACA,KACC,GAAIW,IAAc,SAAU,CAC3Bd,KAAKE,YAAc,K,KACb,CACNF,KAAKC,UAAY,K,IAGnB,CAAE0B,KAAM,M,CAIF,iBAAAD,GACP1B,KAAKH,eAAeW,KAAOR,KAAKE,YAChCF,KAAKkB,UAAYU,UACjB5B,KAAKC,UAAY,MACjBD,KAAKE,YAAc,K,EC1FrB,MAAM2B,EAAkB,qtCACxB,MAAAC,EAAeD,E,MCmBFE,EAAU,M,yBAML/B,KAAAgC,SAAYC,IAC5BjC,KAAKF,eAAiBmC,EACtBC,EAAelC,KAAKmC,KAAMnC,KAAKF,eAAe,EA8FvCE,KAAAoC,aAAgB9B,IACvB+B,aAAarC,KAAKsC,eAClBtC,KAAKsC,cAAgBC,YAAW,K,YAC/B,MAAM/B,EAAOgC,SAAQC,EAAAzC,KAAKH,kBAAc,MAAA4C,SAAA,SAAAA,EAAEjC,MAC1C,GAAIA,IAASR,KAAK0C,MAAMC,MAAO,CAE9B3C,KAAK2C,MAAQH,SAAQI,EAAA5C,KAAKH,kBAAc,MAAA+C,SAAA,SAAAA,EAAEpC,MAG1CqC,EAA0B,SAAU7C,KAAKmC,KAAMnC,KAAK2C,OAGpD,WAAWG,EAAA9C,KAAK0C,MAAMK,OAAG,MAAAD,SAAA,SAAAA,EAAEE,YAAa,WAAY,EACnDC,EAAAjD,KAAK0C,MAAMK,OAAG,MAAAE,SAAA,SAAAA,EAAED,SAAS1C,EAAON,KAAK2C,M,KAGrC,GAAG,E,oDAtE0D,M,mCAQjC,CAC/BO,OAAQ,IACRH,IAAK,G,CA/CC,MAAAI,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,eACXH,EAAA,WAAAE,IAAA,2CACCrB,IAAMuB,IACLxD,KAAKH,eAAiB2D,CAAwB,EAE/CR,SAAUhD,KAAKoC,cAEfgB,EAAA,WAAAE,IAAA,2CAASrB,IAAKjC,KAAKgC,UACjBhC,KAAK0C,MAAMC,MAAQS,EAAA,YAAUF,OAAO,GAAGO,OAAO,iCAAoCL,EAAA,YAAUF,OAAO,GAAGO,OAAO,kCAC9GL,EAAA,QAAAE,IAAA,4CAAOtD,KAAK0C,MAAMQ,SAEnBE,EAAA,OAAAE,IAAA,yDAAkBtD,KAAK0C,MAAMC,QAAU,MAAQ,OAASf,UAAW2B,MAAM,UAAUtB,IAAMyB,GAAa1D,KAAKD,eAAiB2D,GAC3HN,EAAA,qBAAAE,IAAA,4CACCF,EAAA,QAAAE,IAAA,gD,CAoCC,aAAAK,CAAcC,GACpBD,EAAc3D,KAAM4D,EAAO,CAC1BC,SAAU,M,CAKL,UAAAC,CAAWC,GACjB,UAAWA,IAAO,UAAYA,IAAO,aAAeA,EAAGf,WAAa,WAAY,CAC/EgB,EAAyBhE,KAAM,MAAO+D,E,EAKjC,YAAAE,CAAaL,GACnBK,EAAajE,KAAM4D,E,CAIb,eAAAM,CAAgBN,GACtB5D,KAAK2D,cAAcC,E,CAGb,iBAAAO,GACNnE,KAAK2D,cAAc3D,KAAKkD,QAAUlD,KAAKoE,UACvCpE,KAAK8D,WAAW9D,KAAK+C,KACrB/C,KAAKiE,aAAajE,KAAK2C,M,CAGjB,gBAAA0B,GACN,GAAIrE,KAAKH,gBAAkBG,KAAKF,gBAAkBE,KAAKD,eAAgB,CACtE,MAAMuE,EAAsB,IAAI3E,EAA2BK,KAAKH,eAAgBG,KAAKF,eAAgBE,KAAKD,gBAC1G,GAAIC,KAAK0C,MAAMC,MAAO,CACrB2B,EAAoB9D,M"}
+{"version":3,"names":["DetailsAnimationController","constructor","detailsElement","summaryElement","contentElement","this","isClosing","isExpanding","addEventListener","handleSummaryClick","bind","event","preventDefault","open","collapse","window","requestAnimationFrame","expand","animateContentHeight","direction","startHeight","offsetHeight","endHeight","animation","cancel","animate","height","duration","matchMedia","matches","easing","onAnimationFinish","once","undefined","defaultStyleCss","KolDetailsDefaultStyle0","KolDetails","catchRef","ref","propagateFocus","host","handleToggle","clearTimeout","toggleTimeout","setTimeout","Boolean","_a","state","_open","_b","tryToDispatchKoliBriEvent","_c","_on","onToggle","_d","_label","render","h","Host","key","class","el","KolIconTag","_icons","element","KolIndentedTextTag","validateLabel","value","required","validateOn","on","setState","validateOpen","validateSummary","componentWillLoad","_summary","componentDidLoad","animationController"],"sources":["src/components/details/DetailsAnimationController.ts","src/components/details/style.scss?tag=kol-details&mode=default&encapsulation=shadow","src/components/details/component.tsx"],"sourcesContent":["/* Heavily inspired by: https://codepen.io/Mamboleoo/pen/QWEpLqm  */\n\nexport default class DetailsAnimationController {\n\tprivate animation?: Animation;\n\tprivate isClosing = false;\n\tprivate isExpanding = false;\n\n\tconstructor(\n\t\tprivate detailsElement: HTMLDetailsElement,\n\t\tprivate summaryElement: HTMLElement,\n\t\tprivate contentElement: HTMLElement,\n\t) {\n\t\tthis.summaryElement.addEventListener('click', this.handleSummaryClick.bind(this));\n\t}\n\n\tprivate handleSummaryClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\n\t\tif (this.isClosing || !this.detailsElement.open) {\n\t\t\tthis.open();\n\t\t} else if (this.isExpanding || this.detailsElement.open) {\n\t\t\tthis.collapse();\n\t\t}\n\t}\n\n\tpublic open() {\n\t\tthis.detailsElement.open = true;\n\t\twindow.requestAnimationFrame(this.expand.bind(this));\n\t}\n\n\tprivate expand() {\n\t\tthis.isExpanding = true;\n\t\tthis.animateContentHeight('expand');\n\t}\n\n\tprivate collapse() {\n\t\tthis.isClosing = true;\n\t\tthis.animateContentHeight('collapse');\n\t}\n\n\tprivate animateContentHeight(direction: 'expand' | 'collapse') {\n\t\tlet startHeight = direction === 'expand' ? 0 : this.contentElement.offsetHeight;\n\t\tlet endHeight = direction === 'expand' ? this.contentElement.offsetHeight : 0;\n\n\t\t/**\n\t\t * Override start and end height, when an animation is ongoing. During the animation, offsetHeight reflects the actual current height as it's being animated.\n\t\t * After canceling the animation, it reverts to the full height of the content container.\n\t\t */\n\t\tif (this.animation) {\n\t\t\tstartHeight = this.contentElement.offsetHeight;\n\t\t\tthis.animation.cancel();\n\t\t\tif (direction === 'expand') {\n\t\t\t\tendHeight = this.contentElement.offsetHeight;\n\t\t\t}\n\t\t}\n\n\t\tthis.animation = this.contentElement.animate(\n\t\t\t{\n\t\t\t\theight: [`${startHeight}px`, `${endHeight}px`],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: matchMedia('(prefers-reduced-motion)').matches ? 0 : 250,\n\t\t\t\teasing: 'ease-out',\n\t\t\t},\n\t\t);\n\n\t\tthis.animation.addEventListener(\n\t\t\t'finish',\n\t\t\t() => {\n\t\t\t\tthis.onAnimationFinish();\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t\tthis.animation.addEventListener(\n\t\t\t'cancel',\n\t\t\t() => {\n\t\t\t\tif (direction === 'expand') {\n\t\t\t\t\tthis.isExpanding = false;\n\t\t\t\t} else {\n\t\t\t\t\tthis.isClosing = false;\n\t\t\t\t}\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t}\n\n\tprivate onAnimationFinish() {\n\t\tthis.detailsElement.open = this.isExpanding;\n\t\tthis.animation = undefined;\n\t\tthis.isClosing = false;\n\t\tthis.isExpanding = false;\n\t}\n}\n","@import '../style';\n@import '../host-display-block';\n\ndetails {\n\tdisplay: grid;\n}\n\ndetails > summary {\n\tcursor: pointer;\n\tdisplay: flex;\n\tplace-items: center;\n}\n\ndetails > summary > span {\n\tborder-bottom-color: grey;\n\tborder-bottom-style: solid;\n}\n\ndetails > summary:focus > span,\ndetails > summary:hover > span,\ndetails[open] > summary > span {\n\tborder-bottom-color: #000;\n}\n\n.content {\n\toverflow: hidden;\n}\n\ndetails > .kol-indented-text {\n\tmargin: 0.25em 0 0 0.5em;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { validateOpen } from '../../types/props/open';\nimport { tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { setState } from '../../utils/prop.validators';\nimport DetailsAnimationController from './DetailsAnimationController';\nimport { API, EventCallbacks, States } from './types';\nimport { propagateFocus } from '../../utils/reuse';\nimport { KolIconTag, KolIndentedTextTag } from '../../core/component-names';\n\n/**\n * @slot - Der Inhalt, der in der Detailbeschreibung angezeigt wird.\n */\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements API {\n\t@Element() private readonly host?: HTMLKolDetailsElement;\n\tprivate detailsElement?: HTMLDetailsElement;\n\tprivate summaryElement?: HTMLElement;\n\tprivate contentElement?: HTMLElement;\n\n\tprivate readonly catchRef = (ref?: HTMLElement) => {\n\t\tthis.summaryElement = ref;\n\t\tpropagateFocus(this.host, this.summaryElement);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-details\">\n\t\t\t\t<details\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.detailsElement = el as HTMLDetailsElement;\n\t\t\t\t\t}}\n\t\t\t\t\tonToggle={this.handleToggle}\n\t\t\t\t>\n\t\t\t\t\t<summary ref={this.catchRef}>\n\t\t\t\t\t\t{this.state._open ? (\n\t\t\t\t\t\t\t<KolIconTag _label=\"\" _icons=\"codicon codicon-chevron-down\" />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<KolIconTag _label=\"\" _icons=\"codicon codicon-chevron-right\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<div aria-hidden={this.state._open === false ? 'true' : undefined} class=\"content\" ref={(element) => (this.contentElement = element)}>\n\t\t\t\t\t\t<KolIndentedTextTag>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</KolIndentedTextTag>\n\t\t\t\t\t</div>\n\t\t\t\t</details>\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 callback functions for details.\n\t */\n\t@Prop() public _on?: EventCallbacks;\n\n\t/**\n\t * If set (to true) opens/expands the element, closes if not set (or set to false).\n\t * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t/**\n\t * Deprecated: Gibt die Zusammenfassung der Detailbeschreibung an.\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _summary?: string;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_on: {},\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(on?: EventCallbacks) {\n\t\tif (typeof on === 'object' && on !== null && typeof on.onToggle === 'function') {\n\t\t\tsetState<EventCallbacks>(this, '_on', on);\n\t\t}\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\t@Watch('_summary')\n\tpublic validateSummary(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._summary);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n\n\tpublic componentDidLoad() {\n\t\tif (this.detailsElement && this.summaryElement && this.contentElement) {\n\t\t\tconst animationController = new DetailsAnimationController(this.detailsElement, this.summaryElement, this.contentElement);\n\t\t\tif (this.state._open) {\n\t\t\t\tanimationController.open();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate toggleTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate handleToggle = (event: Event) => {\n\t\tclearTimeout(this.toggleTimeout);\n\t\tthis.toggleTimeout = setTimeout(() => {\n\t\t\tconst open = Boolean(this.detailsElement?.open);\n\t\t\tif (open !== this.state._open) {\n\t\t\t\t// Update state\n\t\t\t\tthis._open = Boolean(this.detailsElement?.open);\n\n\t\t\t\t// Event handling\n\t\t\t\ttryToDispatchKoliBriEvent('toggle', this.host, this._open);\n\n\t\t\t\t// Callback\n\t\t\t\tif (typeof this.state._on?.onToggle === 'function') {\n\t\t\t\t\tthis.state._on?.onToggle(event, this._open);\n\t\t\t\t}\n\t\t\t}\n\t\t}, 25);\n\t};\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,H as i}from"./index-c1d028ba.js";import{t as o}from"./i18n-ad947f60.js";import{w as s,a as r,d as l}from"./prop.validators-8c5a4551.js";import"./i18n-fddf0324.js";import"./reuse-d79ab469.js";import"./index-117bd1aa.js";import"./a11y.tipps-1cea6b3d.js";import"./dev.utils-8d5cefe9.js";const n=(e,t)=>{s(e,"errorList",(e=>"object"==typeof e),new Set(["Object"]),t)},a=class{constructor(e){t(this,e),this.onSubmit=e=>{var t,i;e.preventDefault(),e.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onSubmit)&&(null===(i=this.state._on)||void 0===i||i.onSubmit(e))},this.onReset=e=>{var t,i;e.preventDefault(),e.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onReset)&&(null===(i=this.state._on)||void 0===i||i.onReset(e))},this.handleLinkClick=e=>{var t;const i=null===(t=e.target)||void 0===t?void 0:t.href;if(i){const e=new URL(i),t=document.querySelector(e.hash);t&&"function"==typeof t.focus&&(t.scrollIntoView({behavior:"smooth"}),t.focus())}},this._on=void 0,this._requiredText=!0,this._errorList=void 0,this.state={}}render(){return e(i,{key:"393467fbaee4457371eceeabdac5ea7679970b7d",class:"kol-form"},this._errorList&&this._errorList.length>0&&e("kol-alert",{_type:"error"},o("kol-error-list-message"),e("nav",{"aria-label":o("kol-error-list")},e("ul",null,this._errorList.map(((t,i)=>e("li",{key:i},e("kol-link",{_href:t.selector,_label:t.message,_on:{onClick:this.handleLinkClick},ref:e=>{0===i&&(this.errorListElement=e)}}))))))),e("form",{key:"45ef3becac2106284ce5812b10d1dcce8bc79e01",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?e("p",null,e("kol-indented-text",null,o("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?e("p",null,e("kol-indented-text",null,this.state._requiredText)):null,e("slot",{key:"78e6040f65ee41f7292771b94f107a722bc3c6ba"})))}focusErrorList(){return setTimeout((()=>{var e;this._errorList&&this._errorList.length>0&&(null===(e=this.errorListElement)||void 0===e||e.focus())}),300),Promise.resolve()}validateOn(e){"object"==typeof e&&null!==e&&(this.state=Object.assign(Object.assign({},this.state),{_on:e}))}validateRequiredText(e){"boolean"==typeof e?r(this,"_requiredText",e):l(this,"_requiredText",e)}validateErrorList(e){n(this,e)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}};export{a as kol_form};
+import{r as t,h as i,H as e}from"./index-a051748e.js";import{t as o}from"./i18n-ad947f60.js";import{w as s,a as r,d as l}from"./prop.validators-d99c5d68.js";import{k as n,l as a,i as d}from"./component-names-fed305c7.js";import"./i18n-fddf0324.js";import"./reuse-d79ab469.js";import"./index-117bd1aa.js";import"./a11y.tipps-5500b43f.js";import"./dev.utils-cdb6e8d3.js";const f=(t,e)=>{s(t,"errorList",(t=>"object"==typeof t),new Set(["Object"]),e)},h=class{constructor(e){t(this,e),this.onSubmit=t=>{var e,i;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onSubmit)&&(null===(i=this.state._on)||void 0===i||i.onSubmit(t))},this.onReset=t=>{var e,i;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onReset)&&(null===(i=this.state._on)||void 0===i||i.onReset(t))},this.handleLinkClick=t=>{var e;const i=null===(e=t.target)||void 0===e?void 0:e.href;if(i){const t=new URL(i),e=document.querySelector(t.hash);e&&"function"==typeof e.focus&&(e.scrollIntoView({behavior:"smooth"}),e.focus())}},this._on=void 0,this._requiredText=!0,this._errorList=void 0,this.state={}}render(){return i(e,{key:"e9a4994caddee31eb645e66619838f6d384416c4",class:"kol-form"},this._errorList&&this._errorList.length>0&&i(a,{_type:"error"},o("kol-error-list-message"),i("nav",{"aria-label":o("kol-error-list")},i("ul",null,this._errorList.map(((t,e)=>i("li",{key:e},i(d,{_href:t.selector,_label:t.message,_on:{onClick:this.handleLinkClick},ref:t=>{0===e&&(this.errorListElement=t)}}))))))),i("form",{key:"4f12d5e388779b42990da9bd6769ac8fe3b3e90b",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?i("p",null,i(n,null,o("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?i("p",null,i(n,null,this.state._requiredText)):null,i("slot",{key:"c26d0d28248fd890f85693eb4a15f1f52bf74bf3"})))}focusErrorList(){return setTimeout((()=>{var t;this._errorList&&this._errorList.length>0&&(null===(t=this.errorListElement)||void 0===t||t.focus())}),300),Promise.resolve()}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRequiredText(t){"boolean"==typeof t?r(this,"_requiredText",t):l(this,"_requiredText",t)}validateErrorList(t){f(this,t)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}};export{h as kol_form};

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

@@ -1 +1 @@
-{"version":3,"names":["validateErrorList","component","value","watchValidator","Set","KolForm","this","onSubmit","event","preventDefault","stopPropagation","_a","state","_on","_b","onReset","handleLinkClick","href","target","hrefUrl","URL","targetElement","document","querySelector","hash","focus","scrollIntoView","behavior","render","h","Host","key","class","_errorList","length","_type","translate","map","error","index","_href","selector","_label","message","onClick","ref","el","errorListElement","method","autoComplete","noValidate","_requiredText","focusErrorList","setTimeout","Promise","resolve","validateOn","Object","assign","validateRequiredText","watchBoolean","watchString","componentWillLoad"],"sources":["src/types/props/error-list.ts","src/components/form/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../../utils/prop.validators';\n\n/* types */\nexport type ErrorListPropType = {\n\tmessage: string;\n\tselector: string;\n};\n\nexport type PropErrorList = {\n\terrorList: ErrorListPropType[];\n};\n\n/* validator */\nexport const validateErrorList = (component: Generic.Element.Component, value?: ErrorListPropType[]): void => {\n\twatchValidator(component, 'errorList', (value): boolean => typeof value === 'object', new Set(['Object']), value);\n};\n","import { Component, h, Host, JSX, Method, Prop, State, Watch } from '@stencil/core';\nimport { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { ErrorListPropType, validateErrorList } from '../../types/props/error-list';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { API, KoliBriFormCallbacks, States } from './types';\n\n/**\n * @slot - Inhalt der Form.\n */\n@Component({\n\ttag: 'kol-form',\n\tshadow: true,\n})\nexport class KolForm implements API {\n\terrorListElement?: HTMLElement;\n\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t};\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t};\n\n\tprivate readonly handleLinkClick = (event: Event) => {\n\t\tconst href = (event.target as HTMLAnchorElement | undefined)?.href;\n\t\tif (href) {\n\t\t\tconst hrefUrl = new URL(href);\n\n\t\t\tconst targetElement = document.querySelector<HTMLElement>(hrefUrl.hash);\n\t\t\tif (targetElement && typeof targetElement.focus === 'function') {\n\t\t\t\ttargetElement.scrollIntoView({ behavior: 'smooth' });\n\t\t\t\ttargetElement.focus();\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-form\">\n\t\t\t\t{this._errorList && this._errorList.length > 0 && (\n\t\t\t\t\t<kol-alert _type=\"error\">\n\t\t\t\t\t\t{translate('kol-error-list-message')}\n\t\t\t\t\t\t<nav aria-label={translate('kol-error-list')}>\n\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t{this._errorList.map((error, index) => (\n\t\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t\t<kol-link\n\t\t\t\t\t\t\t\t\t\t\t_href={error.selector}\n\t\t\t\t\t\t\t\t\t\t\t_label={error.message}\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onClick: this.handleLinkClick }}\n\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (index === 0) this.errorListElement = el as HTMLElement;\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</nav>\n\t\t\t\t\t</kol-alert>\n\t\t\t\t)}\n\t\t\t\t<form method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete=\"off\" noValidate>\n\t\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<kol-indented-text>{translate('kol-form-description')}</kol-indented-text>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<kol-indented-text>{this.state._requiredText}</kol-indented-text>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<slot />\n\t\t\t\t</form>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Method()\n\tfocusErrorList(): Promise<void> {\n\t\tsetTimeout(() => {\n\t\t\tif (this._errorList && this._errorList.length > 0) {\n\t\t\t\tthis.errorListElement?.focus();\n\t\t\t}\n\t\t}, 300);\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Form-Events an.\n\t */\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/**\n\t * Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\t/**\n\t * A list of error objects that each describe an issue encountered in the form.\n\t * Each error object contains a message and a selector for identifying the form element related to the error.\n\t */\n\t@Prop() public _errorList?: ErrorListPropType[];\n\n\t@State() public state: States = {};\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\t@Watch('_errorList')\n\tpublic validateErrorList(value?: ErrorListPropType[]): void {\n\t\tvalidateErrorList(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t\tthis.validateErrorList(this._errorList);\n\t}\n}\n"],"mappings":";;;iTAcO,MAAMA,EAAoB,CAACC,EAAsCC,KACvEC,EAAeF,EAAW,aAAcC,UAA0BA,IAAU,UAAU,IAAIE,IAAI,CAAC,WAAYF,EAAM,E,MCDrGG,EAAO,M,yBAGFC,KAAAC,SAAYC,I,QAC5BA,EAAMC,iBACND,EAAME,kBACN,WAAWC,EAAAL,KAAKM,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEJ,YAAa,WAAY,EACnDO,EAAAR,KAAKM,MAAMC,OAAG,MAAAC,SAAA,SAAAA,EAAEP,SAASC,E,GAGVF,KAAAS,QAAWP,I,QAC3BA,EAAMC,iBACND,EAAME,kBACN,WAAWC,EAAAL,KAAKM,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEI,WAAY,WAAY,EAClDD,EAAAR,KAAKM,MAAMC,OAAG,MAAAC,SAAA,SAAAA,EAAEC,QAAQP,E,GAITF,KAAAU,gBAAmBR,I,MACnC,MAAMS,GAAON,EAACH,EAAMU,UAAwC,MAAAP,SAAA,SAAAA,EAAEM,KAC9D,GAAIA,EAAM,CACT,MAAME,EAAU,IAAIC,IAAIH,GAExB,MAAMI,EAAgBC,SAASC,cAA2BJ,EAAQK,MAClE,GAAIH,UAAwBA,EAAcI,QAAU,WAAY,CAC/DJ,EAAcK,eAAe,CAAEC,SAAU,WACzCN,EAAcI,O,0CA+DqC,K,qCAOtB,E,CAjEzB,MAAAG,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,YACV1B,KAAK2B,YAAc3B,KAAK2B,WAAWC,OAAS,GAC5CL,EAAA,aAAWM,MAAM,SACfC,EAAU,0BACXP,EAAA,oBAAiBO,EAAU,mBAC1BP,EAAA,UACEvB,KAAK2B,WAAWI,KAAI,CAACC,EAAOC,IAC5BV,EAAA,MAAIE,IAAKQ,GACRV,EAAA,YACCW,MAAOF,EAAMG,SACbC,OAAQJ,EAAMK,QACd9B,IAAK,CAAE+B,QAAStC,KAAKU,iBACrB6B,IAAMC,IACL,GAAIP,IAAU,EAAGjC,KAAKyC,iBAAmBD,CAAiB,UASlEjB,EAAA,QAAAE,IAAA,2CAAMiB,OAAO,OAAOzC,SAAUD,KAAKC,SAAUQ,QAAST,KAAKS,QAASkC,aAAa,MAAMC,WAAU,MAC/F5C,KAAKM,MAAMuC,gBAAkB,KAC7BtB,EAAA,SACCA,EAAA,yBAAoBO,EAAU,iCAErB9B,KAAKM,MAAMuC,gBAAkB,UAAY7C,KAAKM,MAAMuC,cAAcjB,OAAS,EACrFL,EAAA,SACCA,EAAA,yBAAoBvB,KAAKM,MAAMuC,gBAE7B,KACJtB,EAAA,QAAAE,IAAA,8C,CAOJ,cAAAqB,GACCC,YAAW,K,MACV,GAAI/C,KAAK2B,YAAc3B,KAAK2B,WAAWC,OAAS,EAAG,EAClDvB,EAAAL,KAAKyC,oBAAgB,MAAApC,SAAA,SAAAA,EAAEc,O,IAEtB,KACH,OAAO6B,QAAQC,S,CAqBT,UAAAC,CAAWtD,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChDI,KAAKM,MAAK6C,OAAAC,OAAAD,OAAAC,OAAA,GACNpD,KAAKM,OAAK,CACbC,IAAKX,G,EAMD,oBAAAyD,CAAqBzD,GAC3B,UAAWA,IAAU,UAAW,CAC/B0D,EAAatD,KAAM,gBAAiBJ,E,KAC9B,CACN2D,EAAYvD,KAAM,gBAAiBJ,E,EAK9B,iBAAAF,CAAkBE,GACxBF,EAAkBM,KAAMJ,E,CAGlB,iBAAA4D,GACNxD,KAAKkD,WAAWlD,KAAKO,KACrBP,KAAKqD,qBAAqBrD,KAAK6C,eAC/B7C,KAAKN,kBAAkBM,KAAK2B,W"}
+{"version":3,"names":["validateErrorList","component","value","watchValidator","Set","KolForm","this","onSubmit","event","preventDefault","stopPropagation","_a","state","_on","_b","onReset","handleLinkClick","href","target","hrefUrl","URL","targetElement","document","querySelector","hash","focus","scrollIntoView","behavior","render","h","Host","key","class","_errorList","length","KolAlertTag","_type","translate","map","error","index","KolLinkTag","_href","selector","_label","message","onClick","ref","el","errorListElement","method","autoComplete","noValidate","_requiredText","KolIndentedTextTag","focusErrorList","setTimeout","Promise","resolve","validateOn","Object","assign","validateRequiredText","watchBoolean","watchString","componentWillLoad"],"sources":["src/types/props/error-list.ts","src/components/form/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../../utils/prop.validators';\n\n/* types */\nexport type ErrorListPropType = {\n\tmessage: string;\n\tselector: string;\n};\n\nexport type PropErrorList = {\n\terrorList: ErrorListPropType[];\n};\n\n/* validator */\nexport const validateErrorList = (component: Generic.Element.Component, value?: ErrorListPropType[]): void => {\n\twatchValidator(component, 'errorList', (value): boolean => typeof value === 'object', new Set(['Object']), value);\n};\n","import { Component, h, Host, JSX, Method, Prop, State, Watch } from '@stencil/core';\nimport { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { ErrorListPropType, validateErrorList } from '../../types/props/error-list';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { API, KoliBriFormCallbacks, States } from './types';\nimport { KolAlertTag, KolIndentedTextTag, KolLinkTag } from '../../core/component-names';\n\n/**\n * @slot - Inhalt der Form.\n */\n@Component({\n\ttag: 'kol-form',\n\tshadow: true,\n})\nexport class KolForm implements API {\n\terrorListElement?: HTMLElement;\n\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t};\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t};\n\n\tprivate readonly handleLinkClick = (event: Event) => {\n\t\tconst href = (event.target as HTMLAnchorElement | undefined)?.href;\n\t\tif (href) {\n\t\t\tconst hrefUrl = new URL(href);\n\n\t\t\tconst targetElement = document.querySelector<HTMLElement>(hrefUrl.hash);\n\t\t\tif (targetElement && typeof targetElement.focus === 'function') {\n\t\t\t\ttargetElement.scrollIntoView({ behavior: 'smooth' });\n\t\t\t\ttargetElement.focus();\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-form\">\n\t\t\t\t{this._errorList && this._errorList.length > 0 && (\n\t\t\t\t\t<KolAlertTag _type=\"error\">\n\t\t\t\t\t\t{translate('kol-error-list-message')}\n\t\t\t\t\t\t<nav aria-label={translate('kol-error-list')}>\n\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t{this._errorList.map((error, index) => (\n\t\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t\t<KolLinkTag\n\t\t\t\t\t\t\t\t\t\t\t_href={error.selector}\n\t\t\t\t\t\t\t\t\t\t\t_label={error.message}\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onClick: this.handleLinkClick }}\n\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (index === 0) this.errorListElement = el as HTMLElement;\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</nav>\n\t\t\t\t\t</KolAlertTag>\n\t\t\t\t)}\n\t\t\t\t<form method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete=\"off\" noValidate>\n\t\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<KolIndentedTextTag>{translate('kol-form-description')}</KolIndentedTextTag>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<KolIndentedTextTag>{this.state._requiredText}</KolIndentedTextTag>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<slot />\n\t\t\t\t</form>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Method()\n\tfocusErrorList(): Promise<void> {\n\t\tsetTimeout(() => {\n\t\t\tif (this._errorList && this._errorList.length > 0) {\n\t\t\t\tthis.errorListElement?.focus();\n\t\t\t}\n\t\t}, 300);\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Form-Events an.\n\t */\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/**\n\t * Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\t/**\n\t * A list of error objects that each describe an issue encountered in the form.\n\t * Each error object contains a message and a selector for identifying the form element related to the error.\n\t */\n\t@Prop() public _errorList?: ErrorListPropType[];\n\n\t@State() public state: States = {};\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\t@Watch('_errorList')\n\tpublic validateErrorList(value?: ErrorListPropType[]): void {\n\t\tvalidateErrorList(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t\tthis.validateErrorList(this._errorList);\n\t}\n}\n"],"mappings":";;;iXAcO,MAAMA,EAAoB,CAACC,EAAsCC,KACvEC,EAAeF,EAAW,aAAcC,UAA0BA,IAAU,UAAU,IAAIE,IAAI,CAAC,WAAYF,EAAM,E,MCArGG,EAAO,M,yBAGFC,KAAAC,SAAYC,I,QAC5BA,EAAMC,iBACND,EAAME,kBACN,WAAWC,EAAAL,KAAKM,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEJ,YAAa,WAAY,EACnDO,EAAAR,KAAKM,MAAMC,OAAG,MAAAC,SAAA,SAAAA,EAAEP,SAASC,E,GAGVF,KAAAS,QAAWP,I,QAC3BA,EAAMC,iBACND,EAAME,kBACN,WAAWC,EAAAL,KAAKM,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEI,WAAY,WAAY,EAClDD,EAAAR,KAAKM,MAAMC,OAAG,MAAAC,SAAA,SAAAA,EAAEC,QAAQP,E,GAITF,KAAAU,gBAAmBR,I,MACnC,MAAMS,GAAON,EAACH,EAAMU,UAAwC,MAAAP,SAAA,SAAAA,EAAEM,KAC9D,GAAIA,EAAM,CACT,MAAME,EAAU,IAAIC,IAAIH,GAExB,MAAMI,EAAgBC,SAASC,cAA2BJ,EAAQK,MAClE,GAAIH,UAAwBA,EAAcI,QAAU,WAAY,CAC/DJ,EAAcK,eAAe,CAAEC,SAAU,WACzCN,EAAcI,O,0CA+DqC,K,qCAOtB,E,CAjEzB,MAAAG,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,YACV1B,KAAK2B,YAAc3B,KAAK2B,WAAWC,OAAS,GAC5CL,EAACM,EAAW,CAACC,MAAM,SACjBC,EAAU,0BACXR,EAAA,oBAAiBQ,EAAU,mBAC1BR,EAAA,UACEvB,KAAK2B,WAAWK,KAAI,CAACC,EAAOC,IAC5BX,EAAA,MAAIE,IAAKS,GACRX,EAACY,EAAU,CACVC,MAAOH,EAAMI,SACbC,OAAQL,EAAMM,QACdhC,IAAK,CAAEiC,QAASxC,KAAKU,iBACrB+B,IAAMC,IACL,GAAIR,IAAU,EAAGlC,KAAK2C,iBAAmBD,CAAiB,UASlEnB,EAAA,QAAAE,IAAA,2CAAMmB,OAAO,OAAO3C,SAAUD,KAAKC,SAAUQ,QAAST,KAAKS,QAASoC,aAAa,MAAMC,WAAU,MAC/F9C,KAAKM,MAAMyC,gBAAkB,KAC7BxB,EAAA,SACCA,EAACyB,EAAkB,KAAEjB,EAAU,iCAEtB/B,KAAKM,MAAMyC,gBAAkB,UAAY/C,KAAKM,MAAMyC,cAAcnB,OAAS,EACrFL,EAAA,SACCA,EAACyB,EAAkB,KAAEhD,KAAKM,MAAMyC,gBAE9B,KACJxB,EAAA,QAAAE,IAAA,8C,CAOJ,cAAAwB,GACCC,YAAW,K,MACV,GAAIlD,KAAK2B,YAAc3B,KAAK2B,WAAWC,OAAS,EAAG,EAClDvB,EAAAL,KAAK2C,oBAAgB,MAAAtC,SAAA,SAAAA,EAAEc,O,IAEtB,KACH,OAAOgC,QAAQC,S,CAqBT,UAAAC,CAAWzD,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChDI,KAAKM,MAAKgD,OAAAC,OAAAD,OAAAC,OAAA,GACNvD,KAAKM,OAAK,CACbC,IAAKX,G,EAMD,oBAAA4D,CAAqB5D,GAC3B,UAAWA,IAAU,UAAW,CAC/B6D,EAAazD,KAAM,gBAAiBJ,E,KAC9B,CACN8D,EAAY1D,KAAM,gBAAiBJ,E,EAK9B,iBAAAF,CAAkBE,GACxBF,EAAkBM,KAAMJ,E,CAGlB,iBAAA+D,GACN3D,KAAKqD,WAAWrD,KAAKO,KACrBP,KAAKwD,qBAAqBxD,KAAK+C,eAC/B/C,KAAKN,kBAAkBM,KAAK2B,W"}

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

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{r as e,h as s,H as a}from"./index-a051748e.js";import{a as l}from"./label-ce16ea0f.js";import{d as t}from"./prop.validators-d99c5d68.js";import{w as i}from"./validation-8597a722.js";import"./a11y.tipps-5500b43f.js";import"./dev.utils-cdb6e8d3.js";import"./reuse-d79ab469.js";import"./index-117bd1aa.js";const n=class{constructor(a){e(this,a),this.renderHeadline=(e,a)=>{switch(a){case 1:return s("h1",{class:"headline"},e,s("slot",null));case 2:return s("h2",{class:"headline"},e,s("slot",null));case 3:return s("h3",{class:"headline"},e,s("slot",null));case 4:return s("h4",{class:"headline"},e,s("slot",null));case 5:return s("h5",{class:"headline"},e,s("slot",null));case 6:return s("h6",{class:"headline"},e,s("slot",null));default:return s("strong",{class:"headline"},e,s("slot",null))}},this.renderSecondaryHeadline=(e,a)=>{switch(a){case 1:return s("span",{class:"secondary-headline"},e);case 2:return s("h2",{class:"secondary-headline"},e);case 3:return s("h3",{class:"secondary-headline"},e);case 4:return s("h4",{class:"secondary-headline"},e);case 5:return s("h5",{class:"secondary-headline"},e);case 6:return s("h6",{class:"secondary-headline"},e);default:return s("strong",{class:"secondary-headline"},e)}},this._label=void 0,this._level=1,this._secondaryHeadline=void 0,this.state={_label:"…",_level:1}}validateLabel(e){l(this,e,{defaultValue:"…"})}validateLevel(e){i(this,e)}validateSecondaryHeadline(e){t(this,"_secondaryHeadline",e)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline)}render(){return s(a,{key:"f15665b14858a2546a9a0f9ec63906c75d1323e6",class:"kol-heading-wc"},"string"==typeof this.state._secondaryHeadline&&this.state._secondaryHeadline.length>0?s("hgroup",null,this.renderHeadline(this.state._label,this.state._level),this.state._secondaryHeadline&&this.renderSecondaryHeadline(this.state._secondaryHeadline,this.state._level+1)):this.renderHeadline(this.state._label,this.state._level))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"]}}};export{n as kol_heading_wc};

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

@@ -0,0 +1 @@
+{"version":3,"names":["KolHeadingWc","this","renderHeadline","headline","level","h","class","renderSecondaryHeadline","_label","_level","validateLabel","value","validateLabelWithExpertSlot","defaultValue","validateLevel","watchHeadingLevel","validateSecondaryHeadline","watchString","componentWillLoad","_secondaryHeadline","render","Host","key","state","length"],"sources":["src/components/heading/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { LabelWithExpertSlotPropType, validateLabelWithExpertSlot } from '../../types/props/label';\nimport { watchString } from '../../utils/prop.validators';\nimport { API, States } from './types';\nimport { watchHeadingLevel } from './validation';\n\n/**\n * @slot - Inhalt der Überschrift.\n */\n@Component({\n\ttag: 'kol-heading-wc',\n\tshadow: false,\n})\nexport class KolHeadingWc implements API {\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@State() public state: States = {\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\t\tdefaultValue: '…',\n\t\t});\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\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateSecondaryHeadline(this._secondaryHeadline);\n\t}\n\n\tprivate readonly renderHeadline = (headline: LabelWithExpertSlotPropType, level?: number): JSX.Element => {\n\t\tswitch (level) {\n\t\t\tcase 1:\n\t\t\t\treturn (\n\t\t\t\t\t<h1 class=\"headline\">\n\t\t\t\t\t\t{headline}\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</h1>\n\t\t\t\t);\n\t\t\tcase 2:\n\t\t\t\treturn (\n\t\t\t\t\t<h2 class=\"headline\">\n\t\t\t\t\t\t{headline}\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</h2>\n\t\t\t\t);\n\t\t\tcase 3:\n\t\t\t\treturn (\n\t\t\t\t\t<h3 class=\"headline\">\n\t\t\t\t\t\t{headline}\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</h3>\n\t\t\t\t);\n\t\t\tcase 4:\n\t\t\t\treturn (\n\t\t\t\t\t<h4 class=\"headline\">\n\t\t\t\t\t\t{headline}\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</h4>\n\t\t\t\t);\n\t\t\tcase 5:\n\t\t\t\treturn (\n\t\t\t\t\t<h5 class=\"headline\">\n\t\t\t\t\t\t{headline}\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</h5>\n\t\t\t\t);\n\t\t\tcase 6:\n\t\t\t\treturn (\n\t\t\t\t\t<h6 class=\"headline\">\n\t\t\t\t\t\t{headline}\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</h6>\n\t\t\t\t);\n\t\t\tdefault:\n\t\t\t\treturn (\n\t\t\t\t\t<strong class=\"headline\">\n\t\t\t\t\t\t{headline}\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</strong>\n\t\t\t\t);\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 class=\"kol-heading-wc\">\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":";;;4TAeaA,EAAY,M,yBA4CPC,KAAAC,eAAiB,CAACC,EAAuCC,KACzE,OAAQA,GACP,KAAK,EACJ,OACCC,EAAA,MAAIC,MAAM,YACRH,EACDE,EAAA,cAGH,KAAK,EACJ,OACCA,EAAA,MAAIC,MAAM,YACRH,EACDE,EAAA,cAGH,KAAK,EACJ,OACCA,EAAA,MAAIC,MAAM,YACRH,EACDE,EAAA,cAGH,KAAK,EACJ,OACCA,EAAA,MAAIC,MAAM,YACRH,EACDE,EAAA,cAGH,KAAK,EACJ,OACCA,EAAA,MAAIC,MAAM,YACRH,EACDE,EAAA,cAGH,KAAK,EACJ,OACCA,EAAA,MAAIC,MAAM,YACRH,EACDE,EAAA,cAGH,QACC,OACCA,EAAA,UAAQC,MAAM,YACZH,EACDE,EAAA,c,EAMYJ,KAAAM,wBAA0B,CAACJ,EAAkBC,KAC7D,OAAQA,GACP,KAAK,EACJ,OAAOC,EAAA,QAAMC,MAAM,sBAAsBH,GAC1C,KAAK,EACJ,OAAOE,EAAA,MAAIC,MAAM,sBAAsBH,GACxC,KAAK,EACJ,OAAOE,EAAA,MAAIC,MAAM,sBAAsBH,GACxC,KAAK,EACJ,OAAOE,EAAA,MAAIC,MAAM,sBAAsBH,GACxC,KAAK,EACJ,OAAOE,EAAA,MAAIC,MAAM,sBAAsBH,GACxC,KAAK,EACJ,OAAOE,EAAA,MAAIC,MAAM,sBAAsBH,GACxC,QACC,OAAOE,EAAA,UAAQC,MAAM,sBAAsBH,G,oCAxGP,E,6CAOP,CAC/BK,OAAQ,IACRC,OAAQ,E,CAIF,aAAAC,CAAcC,GACpBC,EAA4BX,KAAMU,EAAO,CACxCE,aAAc,K,CAKT,aAAAC,CAAcH,GACpBI,EAAkBd,KAAMU,E,CAIlB,yBAAAK,CAA0BL,GAChCM,EAAYhB,KAAM,qBAAsBU,E,CAGlC,iBAAAO,GACNjB,KAAKS,cAAcT,KAAKO,QACxBP,KAAKa,cAAcb,KAAKQ,QACxBR,KAAKe,0BAA0Bf,KAAKkB,mB,CA4E9B,MAAAC,GACN,OACCf,EAACgB,EAAI,CAAAC,IAAA,2CAAChB,MAAM,yBACHL,KAAKsB,MAAMJ,qBAAuB,UAAYlB,KAAKsB,MAAMJ,mBAAmBK,OAAS,EAC5FnB,EAAA,cACEJ,KAAKC,eAAeD,KAAKsB,MAAMf,OAAQP,KAAKsB,MAAMd,QAClDR,KAAKsB,MAAMJ,oBAAsBlB,KAAKM,wBAAwBN,KAAKsB,MAAMJ,mBAAoBlB,KAAKsB,MAAMd,OAAS,IAGnHR,KAAKC,eAAeD,KAAKsB,MAAMf,OAAQP,KAAKsB,MAAMd,Q"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as e}from"./index-c1d028ba.js";const n=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host>.kol-heading-wc{display:grid}:host>.kol-heading-wc>.overline{order:1}:host>.kol-heading-wc>.headline{order:2}",t=n,a=class{constructor(e){i(this,e),this._label=void 0,this._level=void 0,this._secondaryHeadline=void 0}render(){return e("kol-heading-wc",{key:"954ad62adae470946bdf3f8356ccd51f7a1c87c7",_label:this._label,_level:this._level,_secondaryHeadline:this._secondaryHeadline,class:"kol-heading"},e("slot",{key:"a914612d31e22e315d8aa376a413a668117ce226"}))}};a.style={default:t};export{a as kol_heading};
+import{r as e,h as i}from"./index-a051748e.js";import{c as n}from"./component-names-fed305c7.js";const o=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host>.kol-heading-wc{display:grid}:host>.kol-heading-wc>.overline{order:1}:host>.kol-heading-wc>.headline{order:2}",t=o,a=class{constructor(i){e(this,i),this._label=void 0,this._level=void 0,this._secondaryHeadline=void 0}render(){return i(n,{key:"96f140bb13ef12cfb3b0f8eb27605578a1cd59a6",_label:this._label,_level:this._level,_secondaryHeadline:this._secondaryHeadline,class:"kol-heading"},i("slot",{key:"00ee080ce48966b7e2b57fb1ebe9739627d6e205"}))}};a.style={default:t};export{a as kol_heading};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolHeadingDefaultStyle0","KolHeading","render","h","key","_label","this","_level","_secondaryHeadline","class"],"sources":["src/components/heading/style.scss?tag=kol-heading&mode=default&encapsulation=shadow","src/components/heading/shadow.tsx"],"sourcesContent":["@import '../style';\n\n:host > .kol-heading-wc {\n\tdisplay: grid;\n}\n\n:host > .kol-heading-wc > .overline {\n\torder: 1;\n}\n\n:host > .kol-heading-wc > .headline {\n\torder: 2;\n}\n","import { Component, h, JSX, Prop } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { Props } from './types';\n\n/**\n * @slot - Inhalt der Überschrift.\n */\n@Component({\n\ttag: 'kol-heading',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolHeading implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-heading-wc _label={this._label} _level={this._level} _secondaryHeadline={this._secondaryHeadline} class=\"kol-heading\">\n\t\t\t\t<slot />\n\t\t\t</kol-heading-wc>\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.). 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;\n\n\t/**\n\t * Defines the text of the secondary headline.\n\t */\n\t@Prop() public _secondaryHeadline?: string;\n}\n"],"mappings":";;;+CAAA,MAAMA,EAAkB,k+BACxB,MAAAC,EAAeD,E,MCeFE,EAAU,M,uGACf,MAAAC,GACN,OACCC,EAAA,kBAAAC,IAAA,2CAAgBC,OAAQC,KAAKD,OAAQE,OAAQD,KAAKC,OAAQC,mBAAoBF,KAAKE,mBAAoBC,MAAM,eAC5GN,EAAA,QAAAC,IAAA,6C"}
+{"version":3,"names":["defaultStyleCss","KolHeadingDefaultStyle0","KolHeading","render","h","KolHeadingWcTag","key","_label","this","_level","_secondaryHeadline","class"],"sources":["src/components/heading/style.scss?tag=kol-heading&mode=default&encapsulation=shadow","src/components/heading/shadow.tsx"],"sourcesContent":["@import '../style';\n\n:host > .kol-heading-wc {\n\tdisplay: grid;\n}\n\n:host > .kol-heading-wc > .overline {\n\torder: 1;\n}\n\n:host > .kol-heading-wc > .headline {\n\torder: 2;\n}\n","import { Component, h, JSX, Prop } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { Props } from './types';\nimport { KolHeadingWcTag } from '../../core/component-names';\n\n/**\n * @slot - Inhalt der Überschrift.\n */\n@Component({\n\ttag: 'kol-heading',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolHeading implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolHeadingWcTag _label={this._label} _level={this._level} _secondaryHeadline={this._secondaryHeadline} class=\"kol-heading\">\n\t\t\t\t<slot />\n\t\t\t</KolHeadingWcTag>\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.). 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;\n\n\t/**\n\t * Defines the text of the secondary headline.\n\t */\n\t@Prop() public _secondaryHeadline?: string;\n}\n"],"mappings":";;;iGAAA,MAAMA,EAAkB,k+BACxB,MAAAC,EAAeD,E,MCgBFE,EAAU,M,uGACf,MAAAC,GACN,OACCC,EAACC,EAAe,CAAAC,IAAA,2CAACC,OAAQC,KAAKD,OAAQE,OAAQD,KAAKC,OAAQC,mBAAoBF,KAAKE,mBAAoBC,MAAM,eAC7GP,EAAA,QAAAE,IAAA,6C"}

package/dist/kolibri/kol-icon-font-awesome.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as i,H as s}from"./index-c1d028ba.js";const t=class{constructor(i){e(this,i),this._ariaLabel=void 0,this._icon=void 0,this._prefix=void 0,this._part=void 0}render(){return i(s,{key:"0e953c9df8af425a18b31b3928d822654b026bbf",class:"kol-icon-font-awesome"},i("kol-icon",{key:"ca04e8941e95a10cc10966cec744f9632d522d4b",exportparts:"icon"+("string"==typeof this._part?`,${this._part}`:""),_ariaLabel:this._ariaLabel,_icon:"string"==typeof this._prefix&&"string"==typeof this._icon?`${this._prefix} fa-${this._icon}`:void 0}))}};export{t as kol_icon_font_awesome};
+import{r as e,h as s,H as t}from"./index-a051748e.js";import{h as i}from"./component-names-fed305c7.js";const n=class{constructor(i){e(this,i),this._ariaLabel=void 0,this._icon=void 0,this._prefix=void 0,this._part=void 0}render(){return s(t,{key:"2476138b883808e99d86524d7b04fdb2918b4729",class:"kol-icon-font-awesome"},s(i,{key:"efa2e47112189c743891a6bed006f3cb604e129f",exportparts:"icon"+("string"==typeof this._part?`,${this._part}`:""),_ariaLabel:this._ariaLabel,_icon:"string"==typeof this._prefix&&"string"==typeof this._icon?`${this._prefix} fa-${this._icon}`:void 0}))}};export{n as kol_icon_font_awesome};

package/dist/kolibri/kol-icon-font-awesome.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["KolIconFontAwesome","render","h","Host","key","class","exportparts","this","_part","_ariaLabel","_icon","_prefix","undefined"],"sources":["src/components/icon-font-awesome/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport { Component, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { FontAwesome, FontAwesomeOssPrefix } from '../../enums/font-awesome';\nimport { PropAriaLabel } from '../../types/props/aria-label';\n\ntype RequiredProps = PropAriaLabel & {\n\ticon: FontAwesome;\n\tprefix: FontAwesomeOssPrefix;\n};\ntype OptionalProps = {\n\tpart: string;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\n/**\n * @deprecated Wir empfehlen die flexiblere KolIcon-Komponente zu verwenden.\n */\n@Component({\n\ttag: 'kol-icon-font-awesome',\n\tshadow: false,\n})\nexport class KolIconFontAwesome implements Generic.Element.Members<RequiredProps, OptionalProps> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-icon-font-awesome\">\n\t\t\t\t<kol-icon\n\t\t\t\t\texportparts={`icon${typeof this._part === 'string' ? `,${this._part}` : ''}`}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_icon={typeof this._prefix === 'string' && typeof this._icon === 'string' ? `${this._prefix} fa-${this._icon}` : (undefined as unknown as string)}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die semantische Beschriftung der Komponente.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Gibt einen Identifier eines Font Awesome Icons an. (https://fontawesome.com/v5.15/icons)\n\t */\n\t@Prop() public _icon!: FontAwesome;\n\n\t/**\n\t * Gibt den Prefix der Font Awesome Icons an. (https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use)\n\t */\n\t@Prop() public _prefix!: FontAwesomeOssPrefix;\n\n\t/**\n\t * Deprecated: Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/)\n\t *\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\t@Prop() public _part?: string;\n}\n"],"mappings":";;;4DAsBaA,EAAkB,M,oHACvB,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,yBACXH,EAAA,YAAAE,IAAA,2CACCE,YAAa,cAAcC,KAAKC,QAAU,SAAW,IAAID,KAAKC,QAAU,KACxEC,WAAYF,KAAKE,WACjBC,aAAcH,KAAKI,UAAY,iBAAmBJ,KAAKG,QAAU,SAAW,GAAGH,KAAKI,cAAcJ,KAAKG,QAAWE,Y"}
+{"version":3,"names":["KolIconFontAwesome","render","h","Host","key","class","KolIconTag","exportparts","this","_part","_ariaLabel","_icon","_prefix","undefined"],"sources":["src/components/icon-font-awesome/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport { Component, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { FontAwesome, FontAwesomeOssPrefix } from '../../enums/font-awesome';\nimport { PropAriaLabel } from '../../types/props/aria-label';\nimport { KolIconTag } from '../../core/component-names';\n\ntype RequiredProps = PropAriaLabel & {\n\ticon: FontAwesome;\n\tprefix: FontAwesomeOssPrefix;\n};\ntype OptionalProps = {\n\tpart: string;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\n/**\n * @deprecated Wir empfehlen die flexiblere KolIcon-Komponente zu verwenden.\n */\n@Component({\n\ttag: 'kol-icon-font-awesome',\n\tshadow: false,\n})\nexport class KolIconFontAwesome implements Generic.Element.Members<RequiredProps, OptionalProps> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-icon-font-awesome\">\n\t\t\t\t<KolIconTag\n\t\t\t\t\texportparts={`icon${typeof this._part === 'string' ? `,${this._part}` : ''}`}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_icon={typeof this._prefix === 'string' && typeof this._icon === 'string' ? `${this._prefix} fa-${this._icon}` : (undefined as unknown as string)}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die semantische Beschriftung der Komponente.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Gibt einen Identifier eines Font Awesome Icons an. (https://fontawesome.com/v5.15/icons)\n\t */\n\t@Prop() public _icon!: FontAwesome;\n\n\t/**\n\t * Gibt den Prefix der Font Awesome Icons an. (https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use)\n\t */\n\t@Prop() public _prefix!: FontAwesomeOssPrefix;\n\n\t/**\n\t * Deprecated: Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/)\n\t *\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\t@Prop() public _part?: string;\n}\n"],"mappings":";;;8GAuBaA,EAAkB,M,oHACvB,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,yBACXH,EAACI,EAAU,CAAAF,IAAA,2CACVG,YAAa,cAAcC,KAAKC,QAAU,SAAW,IAAID,KAAKC,QAAU,KACxEC,WAAYF,KAAKE,WACjBC,aAAcH,KAAKI,UAAY,iBAAmBJ,KAAKG,QAAU,SAAW,GAAGH,KAAKI,cAAcJ,KAAKG,QAAWE,Y"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as i,H as t}from"./index-c1d028ba.js";const n=class{constructor(i){e(this,i),this._ariaLabel=void 0,this._icon=void 0,this._part=void 0}render(){return i(t,{key:"a161e02d1aa12e64e9f3ecc3c337848ac81894c1",class:"kol-icon-icofont"},i("kol-icon",{key:"0da390d284340f82d9a4521103bec34d3dcef64e",exportparts:"icon"+("string"==typeof this._part?`,${this._part}`:""),_ariaLabel:this._ariaLabel,_icon:"string"==typeof this._icon?`icofont-${this._icon}`:void 0}))}};export{n as kol_icon_icofont};
+import{r as e,h as i,H as t}from"./index-a051748e.js";import{h as n}from"./component-names-fed305c7.js";const o=class{constructor(i){e(this,i),this._ariaLabel=void 0,this._icon=void 0,this._part=void 0}render(){return i(t,{key:"edec0b3bfdcfe6d2b7346adca3cbf8eb661f9ddc",class:"kol-icon-icofont"},i(n,{key:"e3c00132a29cdaa1b5e3a11ebd7d2e62a4905436",exportparts:"icon"+("string"==typeof this._part?`,${this._part}`:""),_ariaLabel:this._ariaLabel,_icon:"string"==typeof this._icon?`icofont-${this._icon}`:void 0}))}};export{o as kol_icon_icofont};

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

@@ -1 +1 @@
-{"version":3,"names":["KolIconIcofont","render","h","Host","key","class","exportparts","this","_part","_ariaLabel","_icon","undefined"],"sources":["src/components/icon-icofont/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport { Component, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Icofont } from '../../types/icofont';\nimport { PropAriaLabel } from '../../types/props/aria-label';\n\ntype RequiredProps = PropAriaLabel & {\n\ticon: Icofont;\n};\ntype OptionalProps = {\n\tpart: string;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\n/**\n * @deprecated Wir empfehlen die flexiblere KolIcon-Komponente zu verwenden.\n */\n@Component({\n\ttag: 'kol-icon-icofont',\n\tshadow: false,\n})\nexport class KolIconIcofont implements Generic.Element.Members<RequiredProps, OptionalProps> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-icon-icofont\">\n\t\t\t\t<kol-icon\n\t\t\t\t\texportparts={`icon${typeof this._part === 'string' ? `,${this._part}` : ''}`}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_icon={typeof this._icon === 'string' ? `icofont-${this._icon}` : (undefined as unknown as string)}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die semantische Beschriftung der Komponente.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Gibt einen Identifier eines Icofont Icons an. (https://icofont.com/icons)\n\t */\n\t@Prop() public _icon!: Icofont;\n\n\t/**\n\t * Deprecated: Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/)\n\t *\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\t@Prop() public _part?: string;\n}\n"],"mappings":";;;4DAqBaA,EAAc,M,6FACnB,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,oBACXH,EAAA,YAAAE,IAAA,2CACCE,YAAa,cAAcC,KAAKC,QAAU,SAAW,IAAID,KAAKC,QAAU,KACxEC,WAAYF,KAAKE,WACjBC,aAAcH,KAAKG,QAAU,SAAW,WAAWH,KAAKG,QAAWC,Y"}
+{"version":3,"names":["KolIconIcofont","render","h","Host","key","class","KolIconTag","exportparts","this","_part","_ariaLabel","_icon","undefined"],"sources":["src/components/icon-icofont/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport { Component, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Icofont } from '../../types/icofont';\nimport { PropAriaLabel } from '../../types/props/aria-label';\nimport { KolIconTag } from '../../core/component-names';\n\ntype RequiredProps = PropAriaLabel & {\n\ticon: Icofont;\n};\ntype OptionalProps = {\n\tpart: string;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\n/**\n * @deprecated Wir empfehlen die flexiblere KolIcon-Komponente zu verwenden.\n */\n@Component({\n\ttag: 'kol-icon-icofont',\n\tshadow: false,\n})\nexport class KolIconIcofont implements Generic.Element.Members<RequiredProps, OptionalProps> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-icon-icofont\">\n\t\t\t\t<KolIconTag\n\t\t\t\t\texportparts={`icon${typeof this._part === 'string' ? `,${this._part}` : ''}`}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_icon={typeof this._icon === 'string' ? `icofont-${this._icon}` : (undefined as unknown as string)}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die semantische Beschriftung der Komponente.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Gibt einen Identifier eines Icofont Icons an. (https://icofont.com/icons)\n\t */\n\t@Prop() public _icon!: Icofont;\n\n\t/**\n\t * Deprecated: Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/)\n\t *\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\t@Prop() public _part?: string;\n}\n"],"mappings":";;;8GAsBaA,EAAc,M,6FACnB,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,oBACXH,EAACI,EAAU,CAAAF,IAAA,2CACVG,YAAa,cAAcC,KAAKC,QAAU,SAAW,IAAID,KAAKC,QAAU,KACxEC,WAAYF,KAAKE,WACjBC,aAAcH,KAAKG,QAAU,SAAW,WAAWH,KAAKG,QAAWC,Y"}