@public-ui/components 1.5.0-rc.1 → 1.5.0-rc.10

package/dist/esm/kol-button-wc_2.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-50adf9a0.js";import{w as watchTooltipAlignment}from"./button-link-3d1888e3.js";import{d as devHint,e as a11yHintDisabled}from"./a11y.tipps-5cdbd5e2.js";import{n as nonce}from"./dev.utils-05f4e663.js";import{f as setEventTargetAndStopPropagation,j as mapStringOrBoolean2String,h as mapBoolean2String,w as watchString,a as watchValidator,b as watchBoolean,s as setState}from"./prop.validators-769a843a.js";import{a as propergateFocus}from"./reuse-56bb5a4b.js";import{v as validateIcon,w as watchIconAlign}from"./icon-cab2d129.js";import{a as validateAriaLabelWithLabel,b as validateLabelWithAriaLabel}from"./label-ea9f2a1a.js";import{v as validateTabIndex}from"./tab-index-22c62334.js";import{p as propergateSubmitEventToForm,a as propergateResetEventToForm}from"./controller-32fdeebb.js";import{a as watchButtonType,w as watchButtonVariant}from"./controller-5bd06546.js";import"./index-676dbf61.js";const KolButtonWc=class{constructor(t){registerInstance(this,t),this.nonce=nonce(),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this.onClick=t=>{var a,i;"submit"===this.state._type?propergateSubmitEventToForm({form:this.host,ref:this.ref}):"reset"===this.state._type?propergateResetEventToForm({form:this.host,ref:this.ref}):"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)?(setEventTargetAndStopPropagation(t,this.ref),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._value)):devHint("It was no button click callback configured!")},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._icon=void 0,this._iconAlign=void 0,this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icon:{},_label:"…",_on:{},_type:"button",_variant:"normal"}}render(){return h(Host,null,h("button",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-current":mapStringOrBoolean2String(this.state._ariaCurrent),"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-label":!1===this.state._iconOnly?this.state._ariaLabel:void 0,"aria-labelledby":!0===this.state._iconOnly?this.nonce:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:{[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._iconOnly},disabled:this.state._disabled,id:this.state._id},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),h("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._label},h("slot",{name:"expert",slot:"expert"}))),!0===this.state._iconOnly&&h("kol-tooltip",{"aria-hidden":"true",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._ariaLabel||this.state._label}))}validateAccessKey(t){watchString(this,"_accessKey",t)}validateAriaControls(t){watchString(this,"_ariaControls",t)}validateAriaCurrent(t){watchValidator(this,"_ariaControls",(t=>!0===t||"date"===t||"location"===t||"page"===t||"step"===t||"time"===t),new Set(["boolean","String {data, location, page, step, time}"]),t)}validateAriaExpanded(t){watchBoolean(this,"_ariaExpanded",t)}validateAriaLabel(t){validateAriaLabelWithLabel(this,t)}validateAriaSelected(t){watchBoolean(this,"_ariaSelected",t)}validateCustomClass(t){watchString(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){watchBoolean(this,"_disabled",t),!0===t&&a11yHintDisabled()}validateIcon(t){validateIcon(this,t)}validateIconAlign(t){watchIconAlign(this,t)}validateIconOnly(t){watchBoolean(this,"_iconOnly",t,{defaultValue:!1})}validateId(t){watchString(this,"_id",t)}validateLabel(t){validateLabelWithAriaLabel(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){watchString(this,"_role",t)}validateTabIndex(t){validateTabIndex(this,t)}validateTooltipAlign(t){watchTooltipAlignment(this,"_tooltipAlign",t)}validateType(t){watchButtonType(this,"_type",t)}validateValue(t){setState(this,"_value",t)}validateVariant(t){watchButtonVariant(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateIcon(this._icon),this.validateIconAlign(this._iconAlign),this.validateIconOnly(this._iconOnly),this.validateId(this._id),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_icon:["validateIcon"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_id:["validateId"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}},KolSpanWc=class{constructor(t){registerInstance(this,t),this._icon=void 0,this._iconOnly=!1,this._label=void 0,this.state={_icon:{},_iconOnly:!1,_label:"…"}}render(){const t=this.state._label.length>0;return h(Host,{class:{"icon-only":this.state._iconOnly}},this.state._icon.top&&h("kol-icon",{class:{"icon top":!0},style:this.state._icon.top.style,_ariaLabel:"",_icon:this.state._icon.top.icon}),h("span",null,this.state._icon.left&&h("kol-icon",{class:{"icon left":!0},style:this.state._icon.left.style,_ariaLabel:"",_icon:this.state._icon.left.icon}),!0!==this.state._iconOnly&&this.state._label.length>0?h("span",null,this.state._label):"",h("span",{"aria-hidden":t?"true":void 0,hidden:t},h("slot",{name:"expert"})),this.state._icon.right&&h("kol-icon",{class:{"icon right":!0},style:this.state._icon.right.style,_ariaLabel:"",_icon:this.state._icon.right.icon})),this.state._icon.bottom&&h("kol-icon",{class:{"icon bottom":!0},style:this.state._icon.bottom.style,_ariaLabel:"",_icon:this.state._icon.bottom.icon}))}validateIcon(t){validateIcon(this,t)}validateIconOnly(t){watchBoolean(this,"_iconOnly",t)}validateLabel(t){validateLabelWithAriaLabel(this,t)}componentWillLoad(){this.validateIcon(this._icon),this.validateIconOnly(this._iconOnly),this.validateLabel(this._label)}static get watchers(){return{_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"]}}};export{KolButtonWc as kol_button_wc,KolSpanWc as kol_span_wc};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-50adf9a0.js";import{w as watchTooltipAlignment}from"./button-link-0f3cba87.js";import{g as devWarning,e as a11yHintDisabled}from"./a11y.tipps-1cea9822.js";import{n as nonce}from"./dev.utils-157f0499.js";import{b as watchBoolean,f as setEventTarget,j as mapStringOrBoolean2String,h as mapBoolean2String,w as watchString,a as watchValidator,s as setState}from"./prop.validators-e402ad49.js";import{a as propagateFocus}from"./reuse-3a02afb9.js";import{v as validateIcon,w as watchIconAlign}from"./icon-00018c54.js";import{a as validateAriaLabelWithLabel,b as validateLabelWithAriaLabel}from"./label-d51b1a57.js";import{v as validateTabIndex}from"./tab-index-63d1379d.js";import{p as propagateSubmitEventToForm,a as propagateResetEventToForm}from"./controller-873db1b1.js";import{a as watchButtonType,w as watchButtonVariant}from"./controller-0b0c0e12.js";import"./index-81bd9b41.js";const validateAriaExpanded=(t,a)=>{watchBoolean(t,"_ariaExpanded",a)},validateDisabled=(t,a)=>{watchBoolean(t,"_disabled",a)},KolButtonWc=class{constructor(t){registerInstance(this,t),this.nonce=nonce(),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this.onClick=t=>{var a,i;"submit"===this.state._type?propagateSubmitEventToForm({form:this.host,ref:this.ref}):"reset"===this.state._type?propagateResetEventToForm({form:this.host,ref:this.ref}):"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)?(t.stopPropagation(),setEventTarget(t,this.ref),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._value)):devWarning("It was no button click callback configured!")},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._icon=void 0,this._iconAlign=void 0,this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icon:{},_label:"…",_on:{},_type:"button",_variant:"normal"}}render(){return h(Host,null,h("button",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-current":mapStringOrBoolean2String(this.state._ariaCurrent),"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-label":!1===this.state._iconOnly?this.state._ariaLabel:void 0,"aria-labelledby":!0===this.state._iconOnly?this.nonce:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:{[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._iconOnly},disabled:this.state._disabled,id:this.state._id},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),h("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._label},h("slot",{name:"expert",slot:"expert"}))),!0===this.state._iconOnly&&h("kol-tooltip",{"aria-hidden":"true",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._ariaLabel||this.state._label}))}validateAccessKey(t){watchString(this,"_accessKey",t)}validateAriaControls(t){watchString(this,"_ariaControls",t)}validateAriaCurrent(t){watchValidator(this,"_ariaControls",(t=>!0===t||"date"===t||"location"===t||"page"===t||"step"===t||"time"===t),new Set(["boolean","String {data, location, page, step, time}"]),t)}validateAriaExpanded(t){validateAriaExpanded(this,t)}validateAriaLabel(t){validateAriaLabelWithLabel(this,t)}validateAriaSelected(t){watchBoolean(this,"_ariaSelected",t)}validateCustomClass(t){watchString(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){validateDisabled(this,t),!0===t&&a11yHintDisabled()}validateIcon(t){validateIcon(this,t)}validateIconAlign(t){watchIconAlign(this,t)}validateIconOnly(t){watchBoolean(this,"_iconOnly",t,{defaultValue:!1})}validateId(t){watchString(this,"_id",t)}validateLabel(t){validateLabelWithAriaLabel(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){watchString(this,"_role",t)}validateTabIndex(t){validateTabIndex(this,t)}validateTooltipAlign(t){watchTooltipAlignment(this,"_tooltipAlign",t)}validateType(t){watchButtonType(this,"_type",t)}validateValue(t){setState(this,"_value",t)}validateVariant(t){watchButtonVariant(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateIcon(this._icon),this.validateIconAlign(this._iconAlign),this.validateIconOnly(this._iconOnly),this.validateId(this._id),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_icon:["validateIcon"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_id:["validateId"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}},KolSpanWc=class{constructor(t){registerInstance(this,t),this._icon=void 0,this._iconOnly=!1,this._label=void 0,this.state={_icon:{},_iconOnly:!1,_label:"…"}}render(){const t=this.state._label.length>0;return h(Host,{class:{"icon-only":this.state._iconOnly}},this.state._icon.top&&h("kol-icon",{class:"icon top",style:this.state._icon.top.style,_ariaLabel:"",_icon:this.state._icon.top.icon}),h("span",null,this.state._icon.left&&h("kol-icon",{class:"icon left",style:this.state._icon.left.style,_ariaLabel:"",_icon:this.state._icon.left.icon}),!0!==this.state._iconOnly&&this.state._label.length>0?h("span",null,this.state._label):"",h("span",{"aria-hidden":t?"true":void 0,hidden:t},h("slot",{name:"expert"})),this.state._icon.right&&h("kol-icon",{class:"icon right",style:this.state._icon.right.style,_ariaLabel:"",_icon:this.state._icon.right.icon})),this.state._icon.bottom&&h("kol-icon",{class:"icon bottom",style:this.state._icon.bottom.style,_ariaLabel:"",_icon:this.state._icon.bottom.icon}))}validateIcon(t){validateIcon(this,t)}validateIconOnly(t){watchBoolean(this,"_iconOnly",t)}validateLabel(t){validateLabelWithAriaLabel(this,t)}componentWillLoad(){this.validateIcon(this._icon),this.validateIconOnly(this._iconOnly),this.validateLabel(this._label)}static get watchers(){return{_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"]}}};export{KolButtonWc as kol_button_wc,KolSpanWc as kol_span_wc};

package/dist/esm/kol-button-wc_2.entry.js.map

@@ -1 +1 @@
-{"file":"kol-button-wc.kol-span-wc.entry.js","mappings":"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","names":[],"sources":["./src/components/button/component.tsx","./src/components/span/component.tsx"],"sourcesContent":["import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tButtonStates,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tKoliBriButtonVariant,\n\tOptionalButtonProps,\n\tOptionalButtonStates,\n\tRequiredButtonProps,\n\tRequiredButtonStates,\n\twatchTooltipAlignment,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Alignment } from '../../types/props/alignment';\nimport { a11yHintDisabled, devHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport {\n\tmapBoolean2String,\n\tmapStringOrBoolean2String,\n\tsetEventTargetAndStopPropagation,\n\tsetState,\n\twatchBoolean,\n\twatchString,\n\twatchValidator,\n} from '../../utils/prop.validators';\nimport { propergateFocus } from '../../utils/reuse';\nimport { validateIcon, watchIconAlign } from '../../utils/validators/icon';\nimport { validateAriaLabelWithLabel, validateLabelWithAriaLabel } from '../../utils/validators/label';\nimport { validateTabIndex } from '../../utils/validators/tab-index';\nimport { propergateResetEventToForm, propergateSubmitEventToForm } from '../form/controller';\nimport { watchButtonType, watchButtonVariant } from './controller';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-button-wc',\n\tshadow: false,\n})\nexport class KolButtonWc implements Generic.Element.ComponentApi<RequiredButtonProps, OptionalButtonProps, RequiredButtonStates, OptionalButtonStates> {\n\t@Element() private readonly host?: HTMLKolButtonWcElement;\n\tprivate readonly nonce = nonce();\n\tprivate ref?: HTMLButtonElement;\n\n\tprivate readonly catchRef = (ref?: HTMLButtonElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onClick = (event: MouseEvent) => {\n\t\tif (this.state._type === 'submit') {\n\t\t\tpropergateSubmitEventToForm({\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\tpropergateResetEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else if (typeof this.state._on?.onClick === 'function') {\n\t\t\tsetEventTargetAndStopPropagation(event, this.ref);\n\t\t\tthis.state._on?.onClick(event, this.state._value);\n\t\t} else {\n\t\t\tdevHint(`It was no button click callback configured!`);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<button\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\taccessKey={this.state._accessKey}\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._iconOnly === false ? this.state._ariaLabel : undefined}\n\t\t\t\t\taria-labelledby={this.state._iconOnly === true ? this.nonce : undefined}\n\t\t\t\t\taria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}\n\t\t\t\t\tclass={{\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._iconOnly === 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\t{...this.state._on}\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\trole={this.state._role}\n\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\ttype={this.state._type}\n\t\t\t\t>\n\t\t\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this.state._label}>\n\t\t\t\t\t\t{/*\n\t\t\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t\t*/}\n\t\t\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t\t\t</kol-span-wc>\n\t\t\t\t</button>\n\t\t\t\t{this.state._iconOnly === true && (\n\t\t\t\t\t<kol-tooltip\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t */\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t_align={this.state._tooltipAlign}\n\t\t\t\t\t\t_id={this.nonce}\n\t\t\t\t\t\t_label={this.state._ariaLabel || this.state._label}\n\t\t\t\t\t></kol-tooltip>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden.  (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 * Gibt an, welchen aktuellen Auswahlstatus der Button hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/**\n\t * Gibt an, ob durch den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop({ reflect: true }) public _ariaExpanded?: boolean;\n\n\t/**\n\t * Gibt einen beschreibenden Text für den Screenreader an. Damit die\n\t * Sprachsteuerung von interaktiven Elementen funktioniert, muss der\n\t * Aria-Label-Text mit dem Label-Text des Buttons beginnen.\n\t *\n\t * - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop({ reflect: true }) public _ariaSelected?: boolean;\n\n\t/**\n\t * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t */\n\t@Prop() public _customClass?: string;\n\n\t/**\n\t * Gibt an, ob der Button deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob das Icon links oder rechts dargestellt werden soll.\n\t *\n\t * @deprecated\n\t */\n\t@Prop() public _iconAlign?: Alignment;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt die ID der Schaltfläche an. (Selection, Testing)\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt den Label für die Beschriftung der Schaltfläche an.\n\t */\n\t// - eslint-disable-next-line @stencil/strict-mutable\n\t@Prop({ mutable: true, reflect: false }) public _label!: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: KoliBriButtonCallbacks<unknown>;\n\n\t/**\n\t * Gibt an, welche Role der Schalter hat.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welchen Tab-Index der Button hat. (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 * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/**\n\t * Gibt an, welche Typ der Button hat.\n\t */\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/**\n\t * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<unknown>;\n\n\t/**\n\t * Gibt an, welche Ausprägung der Button hat.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: ButtonStates = {\n\t\t_icon: {},\n\t\t_label: '…', // ⚠ required\n\t\t_on: {},\n\t\t_type: 'button',\n\t\t_variant: 'normal',\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\twatchString(this, '_accessKey', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\twatchString(this, '_ariaControls', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_ariaCurrent')\n\tpublic validateAriaCurrent(value?: AriaCurrent): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_ariaControls',\n\t\t\t(value) => value === true || value === 'date' || value === 'location' || value === 'page' || value === 'step' || value === 'time',\n\t\t\tnew Set(['boolean', 'String {data, location, page, step, time}']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: boolean): void {\n\t\twatchBoolean(this, '_ariaExpanded', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tvalidateAriaLabelWithLabel(this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: boolean): void {\n\t\twatchBoolean(this, '_ariaSelected', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: string): void {\n\t\twatchString(this, '_customClass', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\twatchBoolean(this, '_disabled', value);\n\t\tif (value === true) {\n\t\t\ta11yHintDisabled();\n\t\t}\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_icon')\n\tpublic validateIcon(value?: KoliBriIconProp): void {\n\t\tvalidateIcon(this, value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_iconAlign')\n\tpublic validateIconAlign(value?: Alignment): void {\n\t\twatchIconAlign(this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\twatchBoolean(this, '_iconOnly', value, {\n\t\t\tdefaultValue: false,\n\t\t\t// hooks: {\n\t\t\t//   beforePatch: (_value, nextState) => {\n\t\t\t//     let ariaLabel = this.state._ariaLabel;\n\t\t\t//     if (nextState.has('_ariaLabel')) {\n\t\t\t//       ariaLabel = nextState.get('_ariaLabel') as string;\n\t\t\t//     }\n\t\t\t//     if (typeof ariaLabel !== 'string' || ariaLabel.length <= 0) {\n\t\t\t//       devHint(`[KolButton]: Bevor Icon-Only aktiviert wird, muss ein Aria-Label bzw. Label gesetzt werden.`);\n\t\t\t//       nextState.set('_iconOnly', false);\n\t\t\t//     }\n\t\t\t//   },\n\t\t\t// },\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\twatchString(this, '_id', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tvalidateLabelWithAriaLabel(this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriButtonCallbacks<unknown>): 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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_role')\n\tpublic validateRole(value?: AlternativButtonLinkRole): void {\n\t\twatchString(this, '_role', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Alignment): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriButtonType): void {\n\t\twatchButtonType(this, '_type', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown>): void {\n\t\tsetState(this, '_value', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriButtonVariant): void {\n\t\twatchButtonVariant(this, '_variant', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\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.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateIconAlign(this._iconAlign);\n\t\tthis.validateIconOnly(this._iconOnly);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n","import { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriCustomIcon, KoliBriIconProp } from '../../types/icon';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { validateIcon } from '../../utils/validators/icon';\nimport { validateLabelWithAriaLabel } from '../../utils/validators/label';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tlabel: string;\n};\ntype OptionalProps = {\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\ticon: {\n\t\ttop?: KoliBriCustomIcon;\n\t\tright?: KoliBriCustomIcon;\n\t\tbottom?: KoliBriCustomIcon;\n\t\tleft?: KoliBriCustomIcon;\n\t};\n\ticonOnly: boolean;\n\tlabel: string;\n};\ntype OptionalStates = unknown;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-span-wc',\n\tshadow: false,\n})\nexport class KolSpanWc implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot = this.state._label.length > 0;\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'icon-only': this.state._iconOnly,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._icon.top && (\n\t\t\t\t\t<kol-icon\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t'icon top': true,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tstyle={this.state._icon.top.style}\n\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t_icon={this.state._icon.top.icon}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<span>\n\t\t\t\t\t{this.state._icon.left && (\n\t\t\t\t\t\t<kol-icon\n\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t'icon left': true,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={this.state._icon.left.style}\n\t\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t\t_icon={this.state._icon.left.icon}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._iconOnly !== true && this.state._label.length > 0 ? <span>{this.state._label}</span> : ''}\n\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.state._icon.right && (\n\t\t\t\t\t\t<kol-icon\n\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t'icon right': true,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={this.state._icon.right.style}\n\t\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t\t_icon={this.state._icon.right.icon}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t\t{this.state._icon.bottom && (\n\t\t\t\t\t<kol-icon\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t'icon bottom': true,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tstyle={this.state._icon.bottom.style}\n\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t_icon={this.state._icon.bottom.icon}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt einen beschreibenden Text für das Text-Element an.\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_icon: {},\n\t\t_iconOnly: false,\n\t\t_label: '…', // ⚠ required\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_icon')\n\tpublic validateIcon(value?: KoliBriIconProp): void {\n\t\tvalidateIcon(this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\twatchBoolean(this, '_iconOnly', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tvalidateLabelWithAriaLabel(this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateIconOnly(this._iconOnly);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"version":3}
+{"file":"kol-button-wc.kol-span-wc.entry.js","mappings":"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","names":[],"sources":["./src/types/props/aria-expanded.ts","./src/types/props/disabled.ts","./src/components/button/component.tsx","./src/components/span/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Markiert dieses Element als geöffnet, oder dass das verknüpfte Element (aria-controls/aria-owns) geöffnet ist.\n * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n */\n/** en\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 */\nexport type PropAriaExpanded = {\n\tariaExpanded: boolean;\n};\n\n/* validator */\nexport const validateAriaExpanded = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_ariaExpanded', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Macht das Element nicht fokussierbar und lässt es alle Events ignorieren.\n */\n/** en\n * Makes the element not focusable and ignore all events.\n */\nexport type PropDisabled = {\n\tdisabled: boolean;\n};\n\n/* validator */\nexport const validateDisabled = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_disabled', value);\n};\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tButtonStates,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tKoliBriButtonVariant,\n\tOptionalButtonProps,\n\tOptionalButtonStates,\n\tRequiredButtonProps,\n\tRequiredButtonStates,\n\twatchTooltipAlignment,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { AriaCurrent, PropAlignment, validateAriaExpanded, validateDisabled } from '../../types/props';\nimport { a11yHintDisabled, devWarning } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { mapBoolean2String, mapStringOrBoolean2String, setEventTarget, setState, watchBoolean, watchString, watchValidator } from '../../utils/prop.validators';\nimport { propagateFocus } from '../../utils/reuse';\nimport { validateIcon, watchIconAlign } from '../../types/props/icon';\nimport { validateAriaLabelWithLabel, validateLabelWithAriaLabel } from '../../types/props/label';\nimport { validateTabIndex } from '../../utils/validators/tab-index';\nimport { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';\nimport { watchButtonType, watchButtonVariant } from './controller';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-button-wc',\n\tshadow: false,\n})\nexport class KolButtonWc implements Generic.Element.ComponentApi<RequiredButtonProps, OptionalButtonProps, RequiredButtonStates, OptionalButtonStates> {\n\t@Element() private readonly host?: HTMLKolButtonWcElement;\n\tprivate readonly nonce = nonce();\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 if (typeof this.state._on?.onClick === 'function') {\n\t\t\tevent.stopPropagation();\n\t\t\tsetEventTarget(event, this.ref);\n\t\t\tthis.state._on?.onClick(event, this.state._value);\n\t\t} else {\n\t\t\tdevWarning(`It was no button click callback configured!`);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<button\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\taccessKey={this.state._accessKey}\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._iconOnly === false ? this.state._ariaLabel : undefined}\n\t\t\t\t\taria-labelledby={this.state._iconOnly === true ? this.nonce : undefined}\n\t\t\t\t\taria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}\n\t\t\t\t\tclass={{\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._iconOnly === 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\t{...this.state._on}\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\trole={this.state._role}\n\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\ttype={this.state._type}\n\t\t\t\t>\n\t\t\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this.state._label}>\n\t\t\t\t\t\t{/*\n\t\t\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t\t*/}\n\t\t\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t\t\t</kol-span-wc>\n\t\t\t\t</button>\n\t\t\t\t{this.state._iconOnly === true && (\n\t\t\t\t\t<kol-tooltip\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t */\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t_align={this.state._tooltipAlign}\n\t\t\t\t\t\t_id={this.nonce}\n\t\t\t\t\t\t_label={this.state._ariaLabel || this.state._label}\n\t\t\t\t\t></kol-tooltip>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden.  (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 * Gibt an, welchen aktuellen Auswahlstatus der Button hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/**\n\t * Gibt an, ob durch den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop({ reflect: true }) public _ariaExpanded?: boolean;\n\n\t/**\n\t * Gibt einen beschreibenden Text für den Screenreader an. Damit die\n\t * Sprachsteuerung von interaktiven Elementen funktioniert, muss der\n\t * Aria-Label-Text mit dem Label-Text des Buttons beginnen.\n\t *\n\t * - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop({ reflect: true }) public _ariaSelected?: boolean;\n\n\t/**\n\t * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t */\n\t@Prop() public _customClass?: string;\n\n\t/**\n\t * Gibt an, ob der Button deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob das Icon links oder rechts dargestellt werden soll.\n\t *\n\t * @deprecated\n\t */\n\t@Prop() public _iconAlign?: PropAlignment;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt die ID der Schaltfläche an. (Selection, Testing)\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt den Label für die Beschriftung der Schaltfläche an.\n\t */\n\t// - eslint-disable-next-line @stencil/strict-mutable\n\t@Prop({ mutable: true, reflect: false }) public _label!: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: KoliBriButtonCallbacks<unknown>;\n\n\t/**\n\t * Gibt an, welche Role der Schalter hat.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welchen Tab-Index der Button hat. (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 * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: PropAlignment = 'top';\n\n\t/**\n\t * Gibt an, welche Typ der Button hat.\n\t */\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/**\n\t * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<unknown>;\n\n\t/**\n\t * Gibt an, welche Ausprägung der Button hat.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n\n\t@State() public state: ButtonStates = {\n\t\t_icon: {},\n\t\t_label: '…', // ⚠ required\n\t\t_on: {},\n\t\t_type: 'button',\n\t\t_variant: 'normal',\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\twatchString(this, '_ariaControls', value);\n\t}\n\n\t@Watch('_ariaCurrent')\n\tpublic validateAriaCurrent(value?: AriaCurrent): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_ariaControls',\n\t\t\t(value) => value === true || value === 'date' || value === 'location' || value === 'page' || value === 'step' || value === 'time',\n\t\t\tnew Set(['boolean', 'String {data, location, page, step, time}']),\n\t\t\tvalue\n\t\t);\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\tvalidateAriaLabelWithLabel(this, 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?: string): void {\n\t\twatchString(this, '_customClass', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tvalidateDisabled(this, value);\n\t\tif (value === true) {\n\t\t\ta11yHintDisabled();\n\t\t}\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: KoliBriIconProp): void {\n\t\tvalidateIcon(this, value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\n\t@Watch('_iconAlign')\n\tpublic validateIconAlign(value?: PropAlignment): void {\n\t\twatchIconAlign(this, value);\n\t}\n\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\twatchBoolean(this, '_iconOnly', value, {\n\t\t\tdefaultValue: false,\n\t\t\t// hooks: {\n\t\t\t//   beforePatch: (_value, nextState) => {\n\t\t\t//     let ariaLabel = this.state._ariaLabel;\n\t\t\t//     if (nextState.has('_ariaLabel')) {\n\t\t\t//       ariaLabel = nextState.get('_ariaLabel') as string;\n\t\t\t//     }\n\t\t\t//     if (typeof ariaLabel !== 'string' || ariaLabel.length <= 0) {\n\t\t\t//       devHint(`[KolButton]: Bevor Icon-Only aktiviert wird, muss ein Aria-Label bzw. Label gesetzt werden.`);\n\t\t\t//       nextState.set('_iconOnly', false);\n\t\t\t//     }\n\t\t\t//   },\n\t\t\t// },\n\t\t});\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?: string): void {\n\t\tvalidateLabelWithAriaLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriButtonCallbacks<unknown>): 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('_role')\n\tpublic validateRole(value?: AlternativButtonLinkRole): void {\n\t\twatchString(this, '_role', 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?: PropAlignment): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriButtonType): void {\n\t\twatchButtonType(this, '_type', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown>): void {\n\t\tsetState(this, '_value', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriButtonVariant): void {\n\t\twatchButtonVariant(this, '_variant', 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.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateIconAlign(this._iconAlign);\n\t\tthis.validateIconOnly(this._iconOnly);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n","import { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriCustomIcon, KoliBriIconProp } from '../../types/icon';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { validateIcon } from '../../types/props/icon';\nimport { validateLabelWithAriaLabel } from '../../types/props/label';\n\ntype RequiredProps = {\n\tlabel: string;\n};\ntype OptionalProps = {\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\ticon: {\n\t\ttop?: KoliBriCustomIcon;\n\t\tright?: KoliBriCustomIcon;\n\t\tbottom?: KoliBriCustomIcon;\n\t\tleft?: KoliBriCustomIcon;\n\t};\n\ticonOnly: boolean;\n\tlabel: string;\n};\ntype OptionalStates = unknown;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-span-wc',\n\tshadow: false,\n})\nexport class KolSpanWc implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot = this.state._label.length > 0;\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'icon-only': this.state._iconOnly,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._icon.top && <kol-icon class=\"icon top\" style={this.state._icon.top.style} _ariaLabel=\"\" _icon={this.state._icon.top.icon} />}\n\t\t\t\t<span>\n\t\t\t\t\t{this.state._icon.left && <kol-icon class=\"icon left\" style={this.state._icon.left.style} _ariaLabel=\"\" _icon={this.state._icon.left.icon} />}\n\t\t\t\t\t{this.state._iconOnly !== true && this.state._label.length > 0 ? <span>{this.state._label}</span> : ''}\n\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.state._icon.right && <kol-icon class=\"icon right\" style={this.state._icon.right.style} _ariaLabel=\"\" _icon={this.state._icon.right.icon} />}\n\t\t\t\t</span>\n\t\t\t\t{this.state._icon.bottom && <kol-icon class=\"icon bottom\" style={this.state._icon.bottom.style} _ariaLabel=\"\" _icon={this.state._icon.bottom.icon} />}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt einen beschreibenden Text für das Text-Element an.\n\t */\n\t@Prop() public _label!: string;\n\n\t@State() public state: States = {\n\t\t_icon: {},\n\t\t_iconOnly: false,\n\t\t_label: '…', // ⚠ required\n\t};\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: KoliBriIconProp): void {\n\t\tvalidateIcon(this, value);\n\t}\n\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\twatchBoolean(this, '_iconOnly', value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tvalidateLabelWithAriaLabel(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateIconOnly(this._iconOnly);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-50adf9a0.js";import{a as propergateFocus}from"./reuse-56bb5a4b.js";const defaultStyleCss=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}a,button{background-color:transparent;border:none;font-size:inherit;margin:0;padding:0;transition-duration:0.5s;transition-property:background-color, color, border-color}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>kol-icon,kol-span-wc>span>kol-icon{display:inline-grid;place-items:center;width:1em;height:1em}a,button,input,select,textarea{appearance:none;cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}h1,h2,h3,h4,h5,h6{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size);margin:0;padding:0}a{text-decoration-line:none}a,button{min-height:44px;min-width:44px}a:disabled,button:disabled{cursor:not-allowed;opacity:0.5}",KolButton=class{constructor(i){registerInstance(this,i),this.catchRef=i=>{this.ref=i,propergateFocus(this.host,this.ref)},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._icon=void 0,this._iconAlign=void 0,this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}render(){return h(Host,null,h("kol-button-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icon:this._icon,_iconAlign:this._iconAlign,_iconOnly:this._iconOnly,_id:this._id,_label:this._label,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},h("slot",{name:"expert",slot:"expert"})))}get host(){return getElement(this)}};KolButton.style={default:defaultStyleCss};export{KolButton as kol_button};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-50adf9a0.js";import{a as propagateFocus}from"./reuse-3a02afb9.js";const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display: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}",KolButton=class{constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},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._icon=void 0,this._iconAlign=void 0,this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}render(){return h(Host,null,h("kol-button-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icon:this._icon,_iconAlign:this._iconAlign,_iconOnly:this._iconOnly,_id:this._id,_label:this._label,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},h("slot",{name:"expert",slot:"expert"})))}get host(){return getElement(this)}};KolButton.style={default:defaultStyleCss};export{KolButton as kol_button};

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

@@ -1 +1 @@
-{"file":"kol-button.entry.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,qiDAAqiD;;MCwBhjD,SAAS;;;IAIJ,aAAQ,GAAG,CAAC,GAA4B;MACxD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACrC,CAAC;;;;;;;;qBAiFoD,KAAK;;;qBAiBL,KAAK;;;;;;yBA8BhB,KAAK;iBAKL,QAAQ;;oBAUF,QAAQ;;EA7IlD,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,qBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAE;QACN,MAAM,EAAE,IAAI;QACZ,CAAC,IAAI,CAAC,QAAkB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ;QACrD,CAAC,IAAI,CAAC,YAAsB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;OAClI,EACD,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAMvB,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAG,CACrB,CACV,EACN;GACF;;;;;;;;;","names":[],"sources":["./src/components/button/style.css?tag=kol-button&mode=default&encapsulation=shadow","./src/components/button/shadow.tsx"],"sourcesContent":["@import '../button.css';\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tKoliBriButtonVariant,\n\tOptionalButtonProps,\n\tRequiredButtonProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Alignment } from '../../types/props/alignment';\nimport { propergateFocus } from '../../utils/reuse';\n\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements Generic.Element.Members<RequiredButtonProps, OptionalButtonProps> {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_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_icon={this._icon}\n\t\t\t\t\t_iconAlign={this._iconAlign}\n\t\t\t\t\t_iconOnly={this._iconOnly}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role={this._role}\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{/*\n\t\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t*/}\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden.  (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 * Gibt an, welchen aktuellen Auswahlstatus der Button hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/**\n\t * Gibt an, ob durch den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop({ reflect: true }) public _ariaExpanded?: boolean;\n\n\t/**\n\t * Gibt einen beschreibenden Text des Buttons an.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop({ reflect: true }) public _ariaSelected?: boolean;\n\n\t/**\n\t * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t */\n\t@Prop() public _customClass?: string;\n\n\t/**\n\t * Gibt an, ob der Button deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob das Icon links oder rechts dargestellt werden soll.\n\t *\n\t * @deprecated\n\t */\n\t@Prop() public _iconAlign?: Alignment;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt die ID der Schaltfläche an. (Selection, Testing)\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt den Label für die Beschriftung der Schaltfläche an.\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: KoliBriButtonCallbacks<unknown>;\n\n\t/**\n\t * Gibt an, welche Role der Schalter hat.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welchen Tab-Index der Button hat. (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 * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/**\n\t * Gibt an, welche Typ der Button hat.\n\t */\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/**\n\t * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<unknown>;\n\n\t/**\n\t * Gibt an, welche Ausprägung der Button hat.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n}\n"],"version":3}
+{"file":"kol-button.entry.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,ypCAAypC;;MCuBpqC,SAAS;;;IAIJ,aAAQ,GAAG,CAAC,GAA4B;MACxD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;;;;;;;;qBAiFoD,KAAK;;;qBAiBL,KAAK;;;;;;yBA8BZ,KAAK;iBAKT,QAAQ;;oBAUF,QAAQ;;EA7IlD,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,qBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAE;QACN,MAAM,EAAE,IAAI;QACZ,CAAC,IAAI,CAAC,QAAkB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ;QACrD,CAAC,IAAI,CAAC,YAAsB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;OAClI,EACD,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAMvB,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAG,CACrB,CACV,EACN;GACF;;;;;;;;;","names":[],"sources":["./src/components/button/style.css?tag=kol-button&mode=default&encapsulation=shadow","./src/components/button/shadow.tsx"],"sourcesContent":["@import '../button.css';\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tKoliBriButtonVariant,\n\tOptionalButtonProps,\n\tRequiredButtonProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { AriaCurrent, PropAlignment } from '../../types/props';\nimport { propagateFocus } from '../../utils/reuse';\n\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements Generic.Element.Members<RequiredButtonProps, OptionalButtonProps> {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_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_icon={this._icon}\n\t\t\t\t\t_iconAlign={this._iconAlign}\n\t\t\t\t\t_iconOnly={this._iconOnly}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role={this._role}\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{/*\n\t\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t*/}\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden.  (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 * Gibt an, welchen aktuellen Auswahlstatus der Button hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/**\n\t * Gibt an, ob durch den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop({ reflect: true }) public _ariaExpanded?: boolean;\n\n\t/**\n\t * Gibt einen beschreibenden Text des Buttons an.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop({ reflect: true }) public _ariaSelected?: boolean;\n\n\t/**\n\t * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t */\n\t@Prop() public _customClass?: string;\n\n\t/**\n\t * Gibt an, ob der Button deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob das Icon links oder rechts dargestellt werden soll.\n\t *\n\t * @deprecated\n\t */\n\t@Prop() public _iconAlign?: PropAlignment;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt die ID der Schaltfläche an. (Selection, Testing)\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt den Label für die Beschriftung der Schaltfläche an.\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: KoliBriButtonCallbacks<unknown>;\n\n\t/**\n\t * Gibt an, welche Role der Schalter hat.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welchen Tab-Index der Button hat. (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 * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: PropAlignment = 'top';\n\n\t/**\n\t * Gibt an, welche Typ der Button hat.\n\t */\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/**\n\t * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<unknown>;\n\n\t/**\n\t * Gibt an, welche Ausprägung der Button hat.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,H as Host}from"./index-50adf9a0.js";import{b as watchBoolean,w as watchString}from"./prop.validators-769a843a.js";import{w as watchHeadingLevel}from"./validation-d9821b54.js";import"./index-676dbf61.js";import"./a11y.tipps-5cdbd5e2.js";import"./dev.utils-05f4e663.js";import"./reuse-56bb5a4b.js";const defaultStyleCss=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}a,button{background-color:transparent;border:none;font-size:inherit;margin:0;padding:0;transition-duration:0.5s;transition-property:background-color, color, border-color}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>kol-icon,kol-span-wc>span>kol-icon{display:inline-grid;place-items:center;width:1em;height:1em}a,button,input,select,textarea{appearance:none;cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}h1,h2,h3,h4,h5,h6{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size);margin:0;padding:0}",KolCard=class{constructor(i){registerInstance(this,i),this._hasFooter=!1,this._heading=void 0,this._headline=void 0,this._level=1,this.state={_heading:"…"}}render(){return h(Host,null,h("div",null,h("div",{class:"header"},h("kol-heading-wc",{_headline:this.state._heading,_level:this.state._level}),h("slot",{name:"header"})),h("div",{class:"content"},h("slot",{name:"content"})),!0===this.state._hasFooter&&h("div",{class:"footer"},h("slot",{name:"footer"}))))}validateHasFooter(i){watchBoolean(this,"_hasFooter",i)}validateHeading(i){watchString(this,"_heading",i,{required:!0})}validateHeadline(i){this.validateHeading(i)}validateLevel(i){watchHeadingLevel(this,i)}componentWillLoad(){this.validateHasFooter(this._hasFooter),this.validateHeading(this._heading||this._headline),this.validateLevel(this._level)}static get watchers(){return{_hasFooter:["validateHasFooter"],_heading:["validateHeading"],_headline:["validateHeadline"],_level:["validateLevel"]}}};KolCard.style={default:defaultStyleCss};export{KolCard as kol_card};
+import{r as registerInstance,h,H as Host}from"./index-50adf9a0.js";import{b as watchBoolean,w as watchString}from"./prop.validators-e402ad49.js";import{w as watchHeadingLevel}from"./validation-b331e3a7.js";import"./a11y.tipps-1cea9822.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-81bd9b41.js";const validateHasFooter=(e,t)=>{watchBoolean(e,"_hasFooter",t)},defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}",KolCard=class{constructor(e){registerInstance(this,e),this._hasFooter=!1,this._heading=void 0,this._headline=void 0,this._level=1,this.state={_heading:"…"}}render(){return h(Host,null,h("div",null,h("div",{class:"header"},h("kol-heading-wc",{_headline:this.state._heading,_level:this.state._level}),h("slot",{name:"header"})),h("div",{class:"content"},h("slot",{name:"content"})),this.state._hasFooter&&h("div",{class:"footer"},h("slot",{name:"footer"}))))}validateHasFooter(e){validateHasFooter(this,e)}validateHeading(e){watchString(this,"_heading",e,{required:!0})}validateHeadline(e){this.validateHeading(e)}validateLevel(e){watchHeadingLevel(this,e)}componentWillLoad(){this.validateHasFooter(this._hasFooter),this.validateHeading(this._heading||this._headline),this.validateLevel(this._level)}static get watchers(){return{_hasFooter:["validateHasFooter"],_heading:["validateHeading"],_headline:["validateHeadline"],_level:["validateLevel"]}}};KolCard.style={default:defaultStyleCss};export{KolCard as kol_card};

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

@@ -1 +1 @@
-{"file":"kol-card.entry.js","mappings":";;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,u6CAAu6C;;MCyCl7C,OAAO;;;sBAyBoC,KAAK;;;kBAiBrB,CAAC;iBAKR;MAC/B,QAAQ,EAAE,GAAG;KACb;;EAhDM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,eACC,WAAK,KAAK,EAAC,QAAQ,IAClB,sBAAgB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAmB,EAC5F,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EACL,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,IAAI,KAC9B,WAAK,KAAK,EAAC,QAAQ,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACN,CACI,CACA,EACN;GACF;EAmCM,iBAAiB,CAAC,KAAe;IACvC,YAAY,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;GACxC;EAMM,eAAe,CAAC,KAAc;IACpC,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;MACpC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAOM,gBAAgB,CAAC,KAAc;IACrC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;GAC5B;EAMM,aAAa,CAAC,KAAoB;IACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAKM,iBAAiB;IACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;IACtD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;;;;;;;;;;;;;;","names":[],"sources":["./src/components/card/style.css?tag=kol-card&mode=default&encapsulation=shadow","./src/components/card/component.tsx"],"sourcesContent":["@import '../style.css';\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\n\n/**\n * API\n */\ntype RequiredProps = {\n\theading: string;\n};\ntype OptionalProps = {\n\thasFooter: boolean;\n\t/**\n\t * @deprecated Use _headline instead\n\t */\n\theadline: string;\n\tlevel: HeadingLevel;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @part card - TBD\n *\n * @slot header - Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card.\n * @slot footer - Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n */\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<kol-heading-wc _headline={this.state._heading} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t\t<slot name=\"header\" />\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\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasFooter === true && (\n\t\t\t\t\t\t<div class=\"footer\">\n\t\t\t\t\t\t\t<slot name=\"footer\" />\n\t\t\t\t\t\t</div>\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 * Gibt an, ob die Card einen Footer-Bereich hat.\n\t */\n\t@Prop({ reflect: true }) public _hasFooter?: boolean = false;\n\n\t/**\n\t * Gibt die Überschrift der Card an.\n\t */\n\t@Prop() public _heading!: string;\n\n\t/**\n\t * Gibt die Überschrift der Card an.\n\t *\n\t * @deprecated Verwende stattdessen das Property _heading.\n\t */\n\t@Prop() public _headline?: string;\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_heading: '…', // '⚠'\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hasFooter')\n\tpublic validateHasFooter(value?: boolean): void {\n\t\twatchBoolean(this, '_hasFooter', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t */\n\t@Watch('_headline')\n\tpublic validateHeadline(value?: string): void {\n\t\tthis.validateHeading(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasFooter(this._hasFooter);\n\t\tthis.validateHeading(this._heading || this._headline);\n\t\tthis.validateLevel(this._level);\n\t}\n}\n"],"version":3}
+{"file":"kol-card.entry.js","mappings":";;;;;;;;;;;AAeO,MAAM,iBAAiB,GAAG,CAAC,SAAoC,EAAE,KAAe;EACtF,YAAY,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;AAC9C,CAAC;;ACjBD,MAAM,eAAe,GAAG,w7BAAw7B;;MCoCn8B,OAAO;;;sBAyBoC,KAAK;;;kBAiBrB,CAAC;iBAER;MAC/B,QAAQ,EAAE,GAAG;KACb;;EA7CM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,eACC,WAAK,KAAK,EAAC,QAAQ,IAClB,sBAAgB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAmB,EAC5F,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,EACL,IAAI,CAAC,KAAK,CAAC,UAAU,KACrB,WAAK,KAAK,EAAC,QAAQ,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACN,CACI,CACA,EACN;GACF;EA6BM,iBAAiB,CAAC,KAAe;IACvC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAGM,eAAe,CAAC,KAAc;IACpC,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;MACpC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAOM,gBAAgB,CAAC,KAAc;IACrC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;GAC5B;EAGM,aAAa,CAAC,KAAoB;IACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAEM,iBAAiB;IACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;IACtD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;;;;;;;;;;;;;;","names":[],"sources":["./src/types/props/has-footer.ts","./src/components/card/style.css?tag=kol-card&mode=default&encapsulation=shadow","./src/components/card/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Zeigt den slot=\"footer\" an.\n */\n/** en\n * Shows the slot=\"footer\".\n */\nexport type PropHasFooter = {\n\thasFooter: boolean;\n};\n\n/* validator */\nexport const validateHasFooter = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_hasFooter', value);\n};\n","@import '../style.css';\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { watchString } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { PropHasFooter, validateHasFooter } from '../../types/props';\n\ntype RequiredProps = {\n\theading: string;\n};\ntype OptionalProps = {\n\t/**\n\t * @deprecated Use _headline instead\n\t */\n\theadline: string;\n\tlevel: HeadingLevel;\n} & PropHasFooter;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @slot header - Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card.\n * @slot footer - Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n */\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<kol-heading-wc _headline={this.state._heading} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t\t<slot name=\"header\" />\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\" />\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\" />\n\t\t\t\t\t\t</div>\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 * Gibt an, ob die Card einen Footer-Bereich hat.\n\t */\n\t@Prop({ reflect: true }) public _hasFooter?: boolean = false;\n\n\t/**\n\t * Gibt die Überschrift der Card an.\n\t */\n\t@Prop() public _heading!: string;\n\n\t/**\n\t * Gibt die Überschrift der Card an.\n\t *\n\t * @deprecated Verwende stattdessen das Property _heading.\n\t */\n\t@Prop() public _headline?: string;\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t@State() public state: States = {\n\t\t_heading: '…', // '⚠'\n\t};\n\n\t@Watch('_hasFooter')\n\tpublic validateHasFooter(value?: boolean): void {\n\t\tvalidateHasFooter(this, value);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t */\n\t@Watch('_headline')\n\tpublic validateHeadline(value?: string): void {\n\t\tthis.validateHeading(value);\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.validateHasFooter(this._hasFooter);\n\t\tthis.validateHeading(this._heading || this._headline);\n\t\tthis.validateLevel(this._level);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,H as Host}from"./index-50adf9a0.js";import{b as watchBoolean,w as watchString}from"./prop.validators-769a843a.js";import"./index-676dbf61.js";import"./a11y.tipps-5cdbd5e2.js";import"./dev.utils-05f4e663.js";import"./reuse-56bb5a4b.js";const defaultStyleCss=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}a,button{background-color:transparent;border:none;font-size:inherit;margin:0;padding:0;transition-duration:0.5s;transition-property:background-color, color, border-color}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>kol-icon,kol-span-wc>span>kol-icon{display:inline-grid;place-items:center;width:1em;height:1em}a,button,input,select,textarea{appearance:none;cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}h1,h2,h3,h4,h5,h6{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size);margin:0;padding:0}details{display:grid;width:100%}details>summary{border-radius:var(--kolibri-spacing);cursor:pointer;display:flex}details>summary>span{border-bottom-color:var(--kolibri-border-color);border-bottom-style:solid;border-bottom-width:calc(var(--kolibri-spacing) / 2);padding:0 var(--kolibri-spacing)}details>summary>span:first-child{display:inline-flex;text-align:center;width:1rem}details>summary>span:last-child{padding-left:var(--kolibri-spacing)}details[open]>summary>span,details>summary:focus>span,details>summary:hover>span{border-bottom-color:black}details>kol-indented-text{margin:0.25em 0 0 0.7em}",KolDetails=class{constructor(i){registerInstance(this,i),this.onClick=()=>{setTimeout((()=>{var i;this._open=null===(i=this.htmlDetailsElement)||void 0===i?void 0:i.open}),25)},this._open=!1,this._summary=void 0,this.state={_summary:"…"}}render(){return h(Host,null,h("details",{ref:i=>{this.htmlDetailsElement=i},open:this.state._open},h("summary",{onClick:this.onClick},h("span",null,this.state._open?h("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-angle-down"}):h("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-angle-right"})),h("span",null,this.state._summary)),h("kol-indented-text",null,h("slot",null))))}validateOpen(i){watchBoolean(this,"_open",i)}validateSummary(i){watchString(this,"_summary",i,{required:!0})}componentWillLoad(){this.validateOpen(this._open),this.validateSummary(this._summary)}static get watchers(){return{_open:["validateOpen"],_summary:["validateSummary"]}}};KolDetails.style={default:defaultStyleCss};export{KolDetails as kol_details};
+import{r as registerInstance,h,H as Host}from"./index-50adf9a0.js";import{b as watchBoolean,w as watchString}from"./prop.validators-e402ad49.js";import"./a11y.tipps-1cea9822.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-81bd9b41.js";const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}details{display:grid}details>summary{cursor:pointer;display:flex;place-items:center}details>summary>span{border-bottom-color:grey;border-bottom-style:solid}details[open]>summary>span,details>summary:focus>span,details>summary:hover>span{border-bottom-color:black}details>kol-indented-text{margin:0.25em 0px 0px 0.5em}",KolDetails=class{constructor(t){registerInstance(this,t),this.onClick=()=>{setTimeout((()=>{var t;this._open=null===(t=this.htmlDetailsElement)||void 0===t?void 0:t.open}),25)},this._open=!1,this._summary=void 0,this.state={_summary:"…"}}render(){return h(Host,null,h("details",{ref:t=>{this.htmlDetailsElement=t},open:this.state._open},h("summary",{onClick:this.onClick},this.state._open?h("kol-icon",{_ariaLabel:"",_icon:"codicon codicon-chevron-down"}):h("kol-icon",{_ariaLabel:"",_icon:"codicon codicon-chevron-right"}),h("span",null,this.state._summary)),h("kol-indented-text",null,h("slot",null))))}validateOpen(t){watchBoolean(this,"_open",t)}validateSummary(t){watchString(this,"_summary",t,{required:!0})}componentWillLoad(){this.validateOpen(this._open),this.validateSummary(this._summary)}static get watchers(){return{_open:["validateOpen"],_summary:["validateSummary"]}}};KolDetails.style={default:defaultStyleCss};export{KolDetails as kol_details};

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

@@ -1 +1 @@
-{"file":"kol-details.entry.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,ggEAAggE;;MC2B3gE,UAAU;;;IAqEd,YAAO,GAAG;MACjB,UAAU,CAAC;;QACV,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,kBAAkB,0CAAE,IAAI,CAAC;OAC3C,EAAE,EAAE,CAAC,CAAC;KACP,CAAC;iBA5C+D,KAAK;;iBAUtC;MAC/B,QAAQ,EAAE,GAAG;KACb;;EAtCM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,eACC,GAAG,EAAE,CAAC,EAAE;QACP,IAAI,CAAC,kBAAkB,GAAG,EAAwB,CAAC;OACnD,EACD,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAEtB,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO,IAC7B,gBACE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,gBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAC,wBAAwB,GAAG,GAAG,gBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAC,yBAAyB,GAAG,CACpI,EACP,gBAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAQ,CACzB,EACV,6BACC,eAAQ,CACW,CACX,CACJ,EACN;GACF;EAuBM,YAAY,CAAC,KAAe;IAClC,YAAY,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;GACnC;EAMM,eAAe,CAAC,KAAc;IACpC,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;MACpC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAKM,iBAAiB;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;;;;;;;;;;;;","names":[],"sources":["./src/components/details/style.css?tag=kol-details&mode=default&encapsulation=shadow","./src/components/details/component.tsx"],"sourcesContent":["@import '../style.css';\n\ndetails {\n\tdisplay: grid;\n\twidth: 100%;\n}\ndetails > summary {\n\tborder-radius: var(--kolibri-spacing);\n\tcursor: pointer;\n\tdisplay: flex;\n}\ndetails > summary > span {\n\tborder-bottom-color: var(--kolibri-border-color);\n\tborder-bottom-style: solid;\n\tborder-bottom-width: calc(var(--kolibri-spacing) / 2);\n\tpadding: 0 var(--kolibri-spacing);\n}\ndetails > summary > span:first-child {\n\tdisplay: inline-flex;\n\ttext-align: center;\n\twidth: 1rem;\n}\ndetails > summary > span:last-child {\n\tpadding-left: var(--kolibri-spacing);\n}\ndetails[open] > summary > span,\ndetails > summary:focus > span,\ndetails > summary:hover > span {\n\tborder-bottom-color: black;\n}\ndetails > kol-indented-text {\n\tmargin: 0.25em 0 0 0.7em;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tsummary: string;\n};\ntype OptionalProps = {\n\topen: boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate htmlDetailsElement?: HTMLDetailsElement;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<details\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.htmlDetailsElement = el as HTMLDetailsElement;\n\t\t\t\t\t}}\n\t\t\t\t\topen={this.state._open}\n\t\t\t\t>\n\t\t\t\t\t<summary onClick={this.onClick}>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{this.state._open ? <kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-angle-down\" /> : <kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-angle-right\" />}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span>{this.state._summary}</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<kol-indented-text>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</kol-indented-text>\n\t\t\t\t</details>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Detailbeschreibung geöffnet oder geschlossen ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t/**\n\t * Gibt die Zusammenfassung der Detailbeschreibung an.\n\t */\n\t@Prop() public _summary!: string;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_summary: '…', // '⚠'\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\twatchBoolean(this, '_open', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_summary')\n\tpublic validateSummary(value?: string): void {\n\t\twatchString(this, '_summary', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateSummary(this._summary);\n\t}\n\n\tprivate onClick = () => {\n\t\tsetTimeout(() => {\n\t\t\tthis._open = this.htmlDetailsElement?.open;\n\t\t}, 25);\n\t};\n}\n"],"version":3}
+{"file":"kol-details.entry.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,ywCAAywC;;MCwBpxC,UAAU;;;IA2Dd,YAAO,GAAG;MACjB,UAAU,CAAC;;QACV,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,kBAAkB,0CAAE,IAAI,CAAC;OAC3C,EAAE,EAAE,CAAC,CAAC;KACP,CAAC;iBAhC+D,KAAK;;iBAOtC;MAC/B,QAAQ,EAAE,GAAG;KACb;;EArCM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,eACC,GAAG,EAAE,CAAC,EAAE;QACP,IAAI,CAAC,kBAAkB,GAAG,EAAwB,CAAC;OACnD,EACD,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAEtB,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5B,IAAI,CAAC,KAAK,CAAC,KAAK,IAChB,gBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAC,8BAA8B,GAAG,KAE/D,gBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAC,+BAA+B,GAAG,CAChE,EACD,gBAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAQ,CACzB,EACV,6BACC,eAAQ,CACW,CACX,CACJ,EACN;GACF;EAiBM,YAAY,CAAC,KAAe;IAClC,YAAY,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;GACnC;EAGM,eAAe,CAAC,KAAc;IACpC,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;MACpC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAEM,iBAAiB;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;;;;;;;;;;;;","names":[],"sources":["./src/components/details/style.css?tag=kol-details&mode=default&encapsulation=shadow","./src/components/details/component.tsx"],"sourcesContent":["@import '../style.css';\n@import '../host-display-block.css';\n\ndetails {\n\tdisplay: grid;\n}\ndetails > summary {\n\tcursor: pointer;\n\tdisplay: flex;\n\tplace-items: center;\n}\ndetails > summary > span {\n\tborder-bottom-color: grey;\n\tborder-bottom-style: solid;\n}\ndetails[open] > summary > span,\ndetails > summary:focus > span,\ndetails > summary:hover > span {\n\tborder-bottom-color: black;\n}\ndetails > kol-indented-text {\n\tmargin: 0.25em 0px 0px 0.5em;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\n\ntype RequiredProps = {\n\tsummary: string;\n};\ntype OptionalProps = {\n\topen: boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate htmlDetailsElement?: HTMLDetailsElement;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<details\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.htmlDetailsElement = el as HTMLDetailsElement;\n\t\t\t\t\t}}\n\t\t\t\t\topen={this.state._open}\n\t\t\t\t>\n\t\t\t\t\t<summary onClick={this.onClick}>\n\t\t\t\t\t\t{this.state._open ? (\n\t\t\t\t\t\t\t<kol-icon _ariaLabel=\"\" _icon=\"codicon codicon-chevron-down\" />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<kol-icon _ariaLabel=\"\" _icon=\"codicon codicon-chevron-right\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<span>{this.state._summary}</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<kol-indented-text>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</kol-indented-text>\n\t\t\t\t</details>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Detailbeschreibung geöffnet oder geschlossen ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t/**\n\t * Gibt die Zusammenfassung der Detailbeschreibung an.\n\t */\n\t@Prop() public _summary!: string;\n\n\t@State() public state: States = {\n\t\t_summary: '…', // '⚠'\n\t};\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\twatchBoolean(this, '_open', value);\n\t}\n\n\t@Watch('_summary')\n\tpublic validateSummary(value?: string): void {\n\t\twatchString(this, '_summary', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateSummary(this._summary);\n\t}\n\n\tprivate onClick = () => {\n\t\tsetTimeout(() => {\n\t\t\tthis._open = this.htmlDetailsElement?.open;\n\t\t}, 25);\n\t};\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h}from"./index-50adf9a0.js";import{b as watchBoolean,w as watchString}from"./prop.validators-769a843a.js";import{a as translate}from"./i18n-8e14d822.js";import"./index-676dbf61.js";import"./a11y.tipps-5cdbd5e2.js";import"./dev.utils-05f4e663.js";import"./reuse-56bb5a4b.js";import"./index-4f2a12cc.js";const KolForm=class{constructor(t){registerInstance(this,t),this.onSubmit=t=>{var e,i;t.preventDefault(),"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(),"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._on=void 0,this._requiredText=!0,this.state={}}render(){return h("form",{method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?h("p",null,h("kol-indented-text",null,translate("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?h("p",null,h("kol-indented-text",null,this.state._requiredText)):null,h("slot",null))}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRequiredText(t){"boolean"==typeof t?watchBoolean(this,"_requiredText",t):watchString(this,"_requiredText",t)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"]}}};export{KolForm as kol_form};
+import{r as registerInstance,h}from"./index-50adf9a0.js";import{b as watchBoolean,w as watchString}from"./prop.validators-e402ad49.js";import{a as translate}from"./i18n-c97dc260.js";import"./a11y.tipps-1cea9822.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-81bd9b41.js";import"./index-a007a589.js";const KolForm=class{constructor(t){registerInstance(this,t),this.onSubmit=t=>{var e,i;t.preventDefault(),"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(),"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._on=void 0,this._requiredText=!0,this.state={}}render(){return h("form",{method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?h("p",null,h("kol-indented-text",null,translate("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?h("p",null,h("kol-indented-text",null,this.state._requiredText)):null,h("slot",null))}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRequiredText(t){"boolean"==typeof t?watchBoolean(this,"_requiredText",t):watchString(this,"_requiredText",t)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"]}}};export{KolForm as kol_form};

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

@@ -1 +1 @@
-{"file":"kol-form.entry.js","mappings":";;;;;;;;;;;;MAgCa,OAAO;;;IACF,aAAQ,GAAG,CAAC,KAAY;;MACxC,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,QAAO,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,QAAQ,CAAA,KAAK,UAAU,EAAE;QACnD,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,QAAQ,CAAC,KAAoB,CAAC,CAAC;OAC/C;KACD,CAAC;IACe,YAAO,GAAG,CAAC,KAAY;;MACvC,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,QAAO,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAA,KAAK,UAAU,EAAE;QAClD,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAC,KAAK,CAAC,CAAC;OAC/B;KACD,CAAC;;yBA2BoD,IAAI;iBAK1B,EAAE;;EA9B3B,MAAM;IACZ,QACC,YAAM,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,YAAY,EAAC,KAAK,EAAC,UAAU,UAC/F,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,IAAI,IACjC,aACC,6BAAoB,SAAS,CAAC,sBAAsB,CAAC,CAAqB,CACvE,IACD,OAAO,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IACtF,aACC,6BAAoB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAqB,CAC9D,IACD,IAAI,EACR,eAAQ,CACF,EACN;GACF;EAqBM,UAAU,CAAC,KAA4B;IAC7C,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE;MAChD,IAAI,CAAC,KAAK,mCACN,IAAI,CAAC,KAAK,KACb,GAAG,EAAE,KAAK,GACV,CAAC;KACF;GACD;EAMM,oBAAoB,CAAC,KAA4B;IACvD,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;MAC/B,YAAY,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;KAC3C;SAAM;MACN,WAAW,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;KAC1C;GACD;EAKM,iBAAiB;IACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC9C;;;;;;;;;","names":[],"sources":["./src/components/form/component.tsx"],"sourcesContent":["import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\n\nimport { Generic } from '@a11y-ui/core';\nimport { EventCallback } from '../../types/callbacks';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { Stringified } from '../../types/common';\nimport { translate } from '../../i18n';\n\nexport type KoliBriFormCallbacks = {\n\t[Events.onSubmit]?: EventCallback<Event>;\n\t[Events.onReset]?: EventCallback<Event>;\n};\n\n/**\n * API\n */\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\ton: KoliBriFormCallbacks;\n\trequiredText: string | boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-form',\n\tshadow: true,\n})\nexport class KolForm implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\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\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<form method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete=\"off\" noValidate>\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<kol-indented-text>{translate('kol-form-description')}</kol-indented-text>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<kol-indented-text>{this.state._requiredText}</kol-indented-text>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\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 * Gibt an, ob der Pflichtfeld-Hinweis eingeblendet werden soll.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t}\n}\n"],"version":3}
+{"file":"kol-form.entry.js","mappings":";;;;;;;;;;;;MA6Ba,OAAO;;;IACF,aAAQ,GAAG,CAAC,KAAY;;MACxC,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,QAAO,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,QAAQ,CAAA,KAAK,UAAU,EAAE;QACnD,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,QAAQ,CAAC,KAAoB,CAAC,CAAC;OAC/C;KACD,CAAC;IACe,YAAO,GAAG,CAAC,KAAY;;MACvC,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,QAAO,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAA,KAAK,UAAU,EAAE;QAClD,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAC,KAAK,CAAC,CAAC;OAC/B;KACD,CAAC;;yBA2BoD,IAAI;iBAE1B,EAAE;;EA3B3B,MAAM;IACZ,QACC,YAAM,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,YAAY,EAAC,KAAK,EAAC,UAAU,UAC/F,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,IAAI,IACjC,aACC,6BAAoB,SAAS,CAAC,sBAAsB,CAAC,CAAqB,CACvE,IACD,OAAO,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IACtF,aACC,6BAAoB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAqB,CAC9D,IACD,IAAI,EACR,eAAQ,CACF,EACN;GACF;EAeM,UAAU,CAAC,KAA4B;IAC7C,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE;MAChD,IAAI,CAAC,KAAK,mCACN,IAAI,CAAC,KAAK,KACb,GAAG,EAAE,KAAK,GACV,CAAC;KACF;GACD;EAGM,oBAAoB,CAAC,KAA4B;IACvD,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;MAC/B,YAAY,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;KAC3C;SAAM;MACN,WAAW,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;KAC1C;GACD;EAEM,iBAAiB;IACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC9C;;;;;;;;;","names":[],"sources":["./src/components/form/component.tsx"],"sourcesContent":["import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\n\nimport { Generic } from '@a11y-ui/core';\nimport { EventCallback } from '../../types/callbacks';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { Stringified } from '../../types/common';\nimport { translate } from '../../i18n';\n\nexport type KoliBriFormCallbacks = {\n\t[Events.onSubmit]?: EventCallback<Event>;\n\t[Events.onReset]?: EventCallback<Event>;\n};\n\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\ton: KoliBriFormCallbacks;\n\trequiredText: string | boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-form',\n\tshadow: true,\n})\nexport class KolForm implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\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\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<form method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete=\"off\" noValidate>\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<kol-indented-text>{translate('kol-form-description')}</kol-indented-text>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<kol-indented-text>{this.state._requiredText}</kol-indented-text>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\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 * Gibt an, ob der Pflichtfeld-Hinweis eingeblendet werden soll.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\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\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t}\n}\n"],"version":3}

package/dist/esm/kol-heading-wc_2.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,H as Host}from"./index-50adf9a0.js";import{w as watchString}from"./prop.validators-769a843a.js";import{w as watchHeadingLevel}from"./validation-d9821b54.js";import"./index-676dbf61.js";import"./a11y.tipps-5cdbd5e2.js";import"./dev.utils-05f4e663.js";import"./reuse-56bb5a4b.js";const KolHeadingWc=class{constructor(e){registerInstance(this,e),this.renderHeadline=(e,t)=>{switch(t){case 1:return h("h1",{class:"headline"},e,h("slot",null));case 2:return h("h2",{class:"headline"},e,h("slot",null));case 3:return h("h3",{class:"headline"},e,h("slot",null));case 4:return h("h4",{class:"headline"},e,h("slot",null));case 5:return h("h5",{class:"headline"},e,h("slot",null));case 6:return h("h6",{class:"headline"},e,h("slot",null));default:return h("strong",{class:"headline"},e,h("slot",null))}},this.renderSecondaryHeadline=(e,t)=>{switch(t){case 1:return h("h1",{class:"secondary-headline"},e);case 2:return h("h2",{class:"secondary-headline"},e);case 3:return h("h3",{class:"secondary-headline"},e);case 4:return h("h4",{class:"secondary-headline"},e);case 5:return h("h5",{class:"secondary-headline"},e);case 6:return h("h6",{class:"secondary-headline"},e);default:return h("strong",{class:"secondary-headline"},e)}},this._headline=void 0,this._level=1,this._secondaryHeadline=void 0,this.state={_headline:"…",_level:1}}validateHeadline(e){watchString(this,"_headline",e)}validateLevel(e){watchHeadingLevel(this,e)}validateSecondaryHeadline(e){watchString(this,"_secondaryHeadline",e)}componentWillLoad(){this.validateHeadline(this._headline),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline)}render(){return h(Host,null,"string"==typeof this.state._secondaryHeadline&&this.state._secondaryHeadline.length>0?h("hgroup",null,this.renderHeadline(this.state._headline,this.state._level),this.state._secondaryHeadline&&this.renderSecondaryHeadline(this.state._secondaryHeadline,this.state._level+1)):this.renderHeadline(this.state._headline,this.state._level))}static get watchers(){return{_headline:["validateHeadline"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"]}}},KolInput=class{constructor(e){registerInstance(this,e),this._alert=!0,this._disabled=!1,this._error="",this._hideLabel=!1,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._readOnly=!1,this._renderNoLabel=!1,this._required=!1,this._smartButton=void 0,this._touched=!1}render(){var e,t,i,s;const a="string"==typeof this._error&&this._error.length>0&&!0===this._touched,l="string"==typeof this._hint&&this._hint.length>0,n=!0===this._hideLabel&&!0!==this._required;return h(Host,{class:{disabled:!0===this._disabled,error:!0===a,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched}},!1===this._renderNoLabel&&h("label",{id:`${this._id}-label`,hidden:n,htmlFor:this._id},h("span",null,h("slot",{name:"label"}))),l&&h("span",{class:"hint",id:`${this._id}-hint`},this._hint),h("div",{class:{input:!0,"icon-left":"object"==typeof(null===(e=this._icon)||void 0===e?void 0:e.left),"icon-right":"object"==typeof(null===(t=this._icon)||void 0===t?void 0:t.right)}},h("div",{class:"icons"},(null===(i=this._icon)||void 0===i?void 0:i.left)?h("kol-icon",{_ariaLabel:"",_icon:this._icon.left.icon}):h("i",null),(null===(s=this._icon)||void 0===s?void 0:s.right)?h("kol-icon",{_ariaLabel:"",_icon:this._icon.right.icon}):h("i",null)),h("slot",{name:"input"}),"object"==typeof this._smartButton&&null!==this._smartButton&&h("kol-button-wc",{_ariaLabel:this._smartButton._ariaLabel,_customClass:this._smartButton._customClass,_disabled:this._smartButton._disabled,_icon:this._smartButton._icon,_iconOnly:!0,_id:this._smartButton._id,_label:this._smartButton._label,_on:this._smartButton._on,_tooltipAlign:this._smartButton._tooltipAlign,_variant:this._smartButton._variant})),a&&h("kol-alert",{class:"error",id:`${this._id}-error`,_alert:this._alert,_type:"error",_variant:"msg"},this._error),Array.isArray(this._list)&&this._list.length>0&&h("datalist",{id:`${this._id}-list`},this._list.map((e=>h("option",{value:e})))))}};export{KolHeadingWc as kol_heading_wc,KolInput as kol_input};
+import{r as registerInstance,h,H as Host}from"./index-50adf9a0.js";import{w as watchString}from"./prop.validators-e402ad49.js";import{w as watchHeadingLevel}from"./validation-b331e3a7.js";import"./a11y.tipps-1cea9822.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-81bd9b41.js";const KolHeadingWc=class{constructor(e){registerInstance(this,e),this.renderHeadline=(e,t)=>{switch(t){case 1:return h("h1",{class:"headline"},e,h("slot",null));case 2:return h("h2",{class:"headline"},e,h("slot",null));case 3:return h("h3",{class:"headline"},e,h("slot",null));case 4:return h("h4",{class:"headline"},e,h("slot",null));case 5:return h("h5",{class:"headline"},e,h("slot",null));case 6:return h("h6",{class:"headline"},e,h("slot",null));default:return h("strong",{class:"headline"},e,h("slot",null))}},this.renderSecondaryHeadline=(e,t)=>{switch(t){case 1:return h("h1",{class:"secondary-headline"},e);case 2:return h("h2",{class:"secondary-headline"},e);case 3:return h("h3",{class:"secondary-headline"},e);case 4:return h("h4",{class:"secondary-headline"},e);case 5:return h("h5",{class:"secondary-headline"},e);case 6:return h("h6",{class:"secondary-headline"},e);default:return h("strong",{class:"secondary-headline"},e)}},this._headline=void 0,this._level=1,this._secondaryHeadline=void 0,this.state={_headline:"…",_level:1}}validateHeadline(e){watchString(this,"_headline",e)}validateLevel(e){watchHeadingLevel(this,e)}validateSecondaryHeadline(e){watchString(this,"_secondaryHeadline",e)}componentWillLoad(){this.validateHeadline(this._headline),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline)}render(){return h(Host,null,"string"==typeof this.state._secondaryHeadline&&this.state._secondaryHeadline.length>0?h("hgroup",null,this.renderHeadline(this.state._headline,this.state._level),this.state._secondaryHeadline&&this.renderSecondaryHeadline(this.state._secondaryHeadline,this.state._level+1)):this.renderHeadline(this.state._headline,this.state._level))}static get watchers(){return{_headline:["validateHeadline"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"]}}},KolInput=class{constructor(e){registerInstance(this,e),this._alert=!0,this._disabled=!1,this._error="",this._hideLabel=!1,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._readOnly=!1,this._renderNoLabel=!1,this._required=!1,this._smartButton=void 0,this._touched=!1}render(){var e,t,i,s;const a="string"==typeof this._error&&this._error.length>0&&!0===this._touched,l="string"==typeof this._hint&&this._hint.length>0,n=!0===this._hideLabel&&!0!==this._required;return h(Host,{class:{disabled:!0===this._disabled,error:!0===a,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched}},!1===this._renderNoLabel&&h("label",{id:`${this._id}-label`,hidden:n,htmlFor:this._id},h("span",null,h("slot",{name:"label"}))),l&&h("span",{class:"hint",id:`${this._id}-hint`},this._hint),h("div",{class:{input:!0,"icon-left":"object"==typeof(null===(e=this._icon)||void 0===e?void 0:e.left),"icon-right":"object"==typeof(null===(t=this._icon)||void 0===t?void 0:t.right)}},(null===(i=this._icon)||void 0===i?void 0:i.left)?h("kol-icon",{_ariaLabel:"",_icon:this._icon.left.icon}):h("i",null),h("slot",{name:"input"}),"object"==typeof this._smartButton&&null!==this._smartButton&&h("kol-button-wc",{_ariaLabel:this._smartButton._ariaLabel,_customClass:this._smartButton._customClass,_disabled:this._smartButton._disabled,_icon:this._smartButton._icon,_iconOnly:!0,_id:this._smartButton._id,_label:this._smartButton._label,_on:this._smartButton._on,_tooltipAlign:this._smartButton._tooltipAlign,_variant:this._smartButton._variant}),(null===(s=this._icon)||void 0===s?void 0:s.right)?h("kol-icon",{_ariaLabel:"",_icon:this._icon.right.icon}):h("i",null)),a&&h("kol-alert",{class:"error",id:`${this._id}-error`,_alert:this._alert,_type:"error",_variant:"msg"},this._error),Array.isArray(this._list)&&this._list.length>0&&h("datalist",{id:`${this._id}-list`},this._list.map((e=>h("option",{value:e})))))}};export{KolHeadingWc as kol_heading_wc,KolInput as kol_input};

package/dist/esm/kol-heading-wc_2.entry.js.map

@@ -1 +1 @@
-{"file":"kol-heading-wc.kol-input.entry.js","mappings":";;;;;;;;;;;MAgCa,YAAY;;;IA0CP,mBAAc,GAAG,CAAC,QAAgB,EAAE,KAAc;MAClE,QAAQ,KAAK;QACZ,KAAK,CAAC;UACL,QACC,UAAI,KAAK,EAAC,UAAU,IAClB,QAAQ,EACT,eAAQ,CACJ,EACJ;QACH,KAAK,CAAC;UACL,QACC,UAAI,KAAK,EAAC,UAAU,IAClB,QAAQ,EACT,eAAQ,CACJ,EACJ;QACH,KAAK,CAAC;UACL,QACC,UAAI,KAAK,EAAC,UAAU,IAClB,QAAQ,EACT,eAAQ,CACJ,EACJ;QACH,KAAK,CAAC;UACL,QACC,UAAI,KAAK,EAAC,UAAU,IAClB,QAAQ,EACT,eAAQ,CACJ,EACJ;QACH,KAAK,CAAC;UACL,QACC,UAAI,KAAK,EAAC,UAAU,IAClB,QAAQ,EACT,eAAQ,CACJ,EACJ;QACH,KAAK,CAAC;UACL,QACC,UAAI,KAAK,EAAC,UAAU,IAClB,QAAQ,EACT,eAAQ,CACJ,EACJ;QACH;UACC,QACC,cAAQ,KAAK,EAAC,UAAU,IACtB,QAAQ,EACT,eAAQ,CACA,EACR;OACH;KACD,CAAC;IAEe,4BAAuB,GAAG,CAAC,QAAgB,EAAE,KAAc;MAC3E,QAAQ,KAAK;QACZ,KAAK,CAAC;UACL,OAAO,UAAI,KAAK,EAAC,oBAAoB,IAAE,QAAQ,CAAM,CAAC;QACvD,KAAK,CAAC;UACL,OAAO,UAAI,KAAK,EAAC,oBAAoB,IAAE,QAAQ,CAAM,CAAC;QACvD,KAAK,CAAC;UACL,OAAO,UAAI,KAAK,EAAC,oBAAoB,IAAE,QAAQ,CAAM,CAAC;QACvD,KAAK,CAAC;UACL,OAAO,UAAI,KAAK,EAAC,oBAAoB,IAAE,QAAQ,CAAM,CAAC;QACvD,KAAK,CAAC;UACL,OAAO,UAAI,KAAK,EAAC,oBAAoB,IAAE,QAAQ,CAAM,CAAC;QACvD,KAAK,CAAC;UACL,OAAO,UAAI,KAAK,EAAC,oBAAoB,IAAE,QAAQ,CAAM,CAAC;QACvD;UACC,OAAO,cAAQ,KAAK,EAAC,oBAAoB,IAAE,QAAQ,CAAU,CAAC;OAC/D;KACD,CAAC;;kBAxGqC,CAAC;;iBAOR;MAC/B,SAAS,EAAE,GAAG;MACd,MAAM,EAAE,CAAC;KACT;;EAGM,gBAAgB,CAAC,KAAc;IACrC,WAAW,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;GACtC;EAGM,aAAa,CAAC,KAAoB;IACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAGM,yBAAyB,CAAC,KAAc;IAC9C,WAAW,CAAC,IAAI,EAAE,oBAAoB,EAAE,KAAK,CAAC,CAAC;GAC/C;EAEM,iBAAiB;IACvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;GACxD;EA2EM,MAAM;IACZ,QACC,EAAC,IAAI,QACH,OAAO,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAC7F,kBACE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAC5D,IAAI,CAAC,KAAK,CAAC,kBAAkB,IAAI,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,kBAAkB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAC5G,KAET,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAC5D,CACK,EACN;GACF;;;;;;;;MChJW,QAAQ;;;kBA2E+B,IAAI;qBAKD,KAAK;kBAK1B,EAAE;sBAKoB,KAAK;iBAK5B,EAAE;;;;qBAoBoB,KAAK;0BAKA,KAAK;qBAKV,KAAK;;oBAUN,KAAK;;EAtInD,MAAM;;IACZ,MAAM,QAAQ,GAAG,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC;IACrG,MAAM,OAAO,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IACxE,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC;IAEtE,QACC,EAAC,IAAI,IACJ,KAAK,EAAE;QACN,QAAQ,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI;QACjC,KAAK,EAAE,QAAQ,KAAK,IAAI;QACxB,WAAW,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI;QACpC,QAAQ,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI;QACjC,OAAO,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;OAC/B,IAEA,IAAI,CAAC,cAAc,KAAK,KAAK,KAC7B,aAAO,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,GAAG,IACnE,gBACC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACA,CACR,EACA,OAAO,KACP,YAAM,KAAK,EAAC,MAAM,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,OAAO,IACvC,IAAI,CAAC,KAAK,CACL,CACP,EACD,WACC,KAAK,EAAE;QACN,KAAK,EAAE,IAAI;QACX,WAAW,EAAE,QAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,CAAA,KAAK,QAAQ;QACjD,YAAY,EAAE,QAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,CAAA,KAAK,QAAQ;OACnD,IAGD,WAAK,KAAK,EAAC,OAAO,IAChB,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,IAAG,gBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAG,IAAI,CAAC,KAAK,CAAC,IAA0B,CAAC,IAAI,GAAa,GAAG,YAAK,EAClH,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,IAAG,gBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAG,IAAI,CAAC,KAAK,CAAC,KAA2B,CAAC,IAAI,GAAa,GAAG,YAAK,CAChH,EACN,YAAM,IAAI,EAAC,OAAO,GAAQ,EACzB,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,KACnE,qBACC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,EACxC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,YAAY,EAC5C,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS,EACtC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAC9B,SAAS,EAAE,IAAI,EACf,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAC1B,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAChC,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAC1B,aAAa,EAAE,IAAI,CAAC,YAAY,CAAC,aAAa,EAC9C,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,GACpB,CACjB,CACI,EACL,QAAQ,KACR,iBAAW,KAAK,EAAC,OAAO,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,IACjG,IAAI,CAAC,MAAM,CACD,CACZ,EACA,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,KAClD,gBAAU,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,OAAO,IAC9B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAc,MAC9B,cAAQ,KAAK,EAAE,MAAM,GAAI,CACzB,CAAC,CACQ,CACX,CACK,EACN;GACF;;;;;","names":[],"sources":["./src/components/heading/component.tsx","./src/components/input/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { watchString } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from './validation';\n\n/**\n * API\n */\ntype RequiredProps = {\n\theadline: string;\n};\ntype OptionalProps = {\n\tsecondaryHeadline: string;\n\tlevel: HeadingLevel;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\theadline: string;\n\tlevel: HeadingLevel;\n};\ntype OptionalStates = {\n\tsecondaryHeadline: string;\n};\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-heading-wc',\n\tshadow: false,\n})\nexport class KolHeadingWc implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\t/**\n\t * Gibt den Text der Überschrift an.\n\t */\n\t@Prop() public _headline!: string;\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder ob es keine Überschrift ist, sondern nur fett gedruckt.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt den Text der zusätzlichen Überschrift an.\n\t */\n\t@Prop() public _secondaryHeadline?: string;\n\n\t@State() public state: States = {\n\t\t_headline: '…', // ⚠ required\n\t\t_level: 1,\n\t};\n\n\t@Watch('_headline')\n\tpublic validateHeadline(value?: string): void {\n\t\twatchString(this, '_headline', value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_secondaryHeadline')\n\tpublic validateSecondaryHeadline(value?: string): void {\n\t\twatchString(this, '_secondaryHeadline', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHeadline(this._headline);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateSecondaryHeadline(this._secondaryHeadline);\n\t}\n\n\tprivate readonly renderHeadline = (headline: string, 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:\n\t\t\t\treturn <h1 class=\"secondary-headline\">{headline}</h1>;\n\t\t\tcase 2:\n\t\t\t\treturn <h2 class=\"secondary-headline\">{headline}</h2>;\n\t\t\tcase 3:\n\t\t\t\treturn <h3 class=\"secondary-headline\">{headline}</h3>;\n\t\t\tcase 4:\n\t\t\t\treturn <h4 class=\"secondary-headline\">{headline}</h4>;\n\t\t\tcase 5:\n\t\t\t\treturn <h5 class=\"secondary-headline\">{headline}</h5>;\n\t\t\tcase 6:\n\t\t\t\treturn <h6 class=\"secondary-headline\">{headline}</h6>;\n\t\t\tdefault:\n\t\t\t\treturn <strong class=\"secondary-headline\">{headline}</strong>;\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (\n\t\t\t\t\t<hgroup>\n\t\t\t\t\t\t{this.renderHeadline(this.state._headline, 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._headline, this.state._level)\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n","/* eslint-disable jsx-a11y/label-has-associated-control */\nimport { Component, h, Host, JSX, Prop } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriCustomIcon } from '../../types/icon';\n\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { Props } from './types';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-input',\n\tshadow: false,\n})\nexport class KolInput implements Props {\n\tpublic render(): JSX.Element {\n\t\tconst hasError = typeof this._error === 'string' && this._error.length > 0 && this._touched === true;\n\t\tconst hasHint = typeof this._hint === 'string' && this._hint.length > 0;\n\t\tconst hideLabel = this._hideLabel === true && this._required !== true;\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\tdisabled: this._disabled === true,\n\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t'read-only': this._readOnly === true,\n\t\t\t\t\trequired: this._required === true,\n\t\t\t\t\ttouched: this._touched === true,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this._renderNoLabel === false && (\n\t\t\t\t\t<label id={`${this._id}-label`} hidden={hideLabel} htmlFor={this._id}>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</label>\n\t\t\t\t)}\n\t\t\t\t{hasHint && (\n\t\t\t\t\t<span class=\"hint\" id={`${this._id}-hint`}>\n\t\t\t\t\t\t{this._hint}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tinput: true,\n\t\t\t\t\t\t'icon-left': typeof this._icon?.left === 'object',\n\t\t\t\t\t\t'icon-right': typeof this._icon?.right === 'object',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{/* grid grid-cols-2 justify-between h-0 mx-3 my-2 */}\n\t\t\t\t\t<div class=\"icons\">\n\t\t\t\t\t\t{this._icon?.left ? <kol-icon _ariaLabel=\"\" _icon={(this._icon.left as KoliBriCustomIcon).icon}></kol-icon> : <i />}\n\t\t\t\t\t\t{this._icon?.right ? <kol-icon _ariaLabel=\"\" _icon={(this._icon.right as KoliBriCustomIcon).icon}></kol-icon> : <i />}\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot name=\"input\"></slot>\n\t\t\t\t\t{typeof this._smartButton === 'object' && this._smartButton !== null && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t_ariaLabel={this._smartButton._ariaLabel}\n\t\t\t\t\t\t\t_customClass={this._smartButton._customClass}\n\t\t\t\t\t\t\t_disabled={this._smartButton._disabled}\n\t\t\t\t\t\t\t_icon={this._smartButton._icon}\n\t\t\t\t\t\t\t_iconOnly={true}\n\t\t\t\t\t\t\t_id={this._smartButton._id}\n\t\t\t\t\t\t\t_label={this._smartButton._label}\n\t\t\t\t\t\t\t_on={this._smartButton._on}\n\t\t\t\t\t\t\t_tooltipAlign={this._smartButton._tooltipAlign}\n\t\t\t\t\t\t\t_variant={this._smartButton._variant}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{hasError && (\n\t\t\t\t\t<kol-alert class=\"error\" id={`${this._id}-error`} _alert={this._alert} _type=\"error\" _variant=\"msg\">\n\t\t\t\t\t\t{this._error}\n\t\t\t\t\t</kol-alert>\n\t\t\t\t)}\n\t\t\t\t{Array.isArray(this._list) && this._list.length > 0 && (\n\t\t\t\t\t<datalist id={`${this._id}-list`}>\n\t\t\t\t\t\t{this._list.map((option: string) => (\n\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</datalist>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string = '';\n\n\t/**\n\t * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: KoliBriHorizontalIcon;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt die Liste der Vorschlagswörter an.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Gibt an, ob die Eingabefeld nur lesend ist.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean = false;\n\n\t/**\n\t * Gibt an, ob die Komponente kein Label rendern soll.\n\t */\n\t@Prop({ reflect: true }) public _renderNoLabel?: boolean = false;\n\n\t/**\n\t * Gibt an, ob die Checkbox ein Pflichtfeld ist.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean = false;\n\n\t/**\n\t * Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ reflect: true }) public _touched?: boolean = false;\n}\n"],"version":3}
+{"file":"kol-heading-wc.kol-input.entry.js","mappings":"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","names":[],"sources":["./src/components/heading/component.tsx","./src/components/input/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { watchString } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from './validation';\n\ntype RequiredProps = {\n\theadline: string;\n};\ntype OptionalProps = {\n\tsecondaryHeadline: string;\n\tlevel: HeadingLevel;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\theadline: string;\n\tlevel: HeadingLevel;\n};\ntype OptionalStates = {\n\tsecondaryHeadline: string;\n};\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-heading-wc',\n\tshadow: false,\n})\nexport class KolHeadingWc implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\t/**\n\t * Gibt den Text der Überschrift an.\n\t */\n\t@Prop() public _headline!: string;\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder ob es keine Überschrift ist, sondern nur fett gedruckt.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt den Text der zusätzlichen Überschrift an.\n\t */\n\t@Prop() public _secondaryHeadline?: string;\n\n\t@State() public state: States = {\n\t\t_headline: '…', // ⚠ required\n\t\t_level: 1,\n\t};\n\n\t@Watch('_headline')\n\tpublic validateHeadline(value?: string): void {\n\t\twatchString(this, '_headline', value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_secondaryHeadline')\n\tpublic validateSecondaryHeadline(value?: string): void {\n\t\twatchString(this, '_secondaryHeadline', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHeadline(this._headline);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateSecondaryHeadline(this._secondaryHeadline);\n\t}\n\n\tprivate readonly renderHeadline = (headline: string, 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:\n\t\t\t\treturn <h1 class=\"secondary-headline\">{headline}</h1>;\n\t\t\tcase 2:\n\t\t\t\treturn <h2 class=\"secondary-headline\">{headline}</h2>;\n\t\t\tcase 3:\n\t\t\t\treturn <h3 class=\"secondary-headline\">{headline}</h3>;\n\t\t\tcase 4:\n\t\t\t\treturn <h4 class=\"secondary-headline\">{headline}</h4>;\n\t\t\tcase 5:\n\t\t\t\treturn <h5 class=\"secondary-headline\">{headline}</h5>;\n\t\t\tcase 6:\n\t\t\t\treturn <h6 class=\"secondary-headline\">{headline}</h6>;\n\t\t\tdefault:\n\t\t\t\treturn <strong class=\"secondary-headline\">{headline}</strong>;\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (\n\t\t\t\t\t<hgroup>\n\t\t\t\t\t\t{this.renderHeadline(this.state._headline, 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._headline, this.state._level)\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n","/* eslint-disable jsx-a11y/label-has-associated-control */\nimport { Component, h, Host, JSX, Prop } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriCustomIcon } from '../../types/icon';\n\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { Props } from './types';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-input',\n\tshadow: false,\n})\nexport class KolInput implements Props {\n\tpublic render(): JSX.Element {\n\t\tconst hasError = typeof this._error === 'string' && this._error.length > 0 && this._touched === true;\n\t\tconst hasHint = typeof this._hint === 'string' && this._hint.length > 0;\n\t\tconst hideLabel = this._hideLabel === true && this._required !== true;\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\tdisabled: this._disabled === true,\n\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t'read-only': this._readOnly === true,\n\t\t\t\t\trequired: this._required === true,\n\t\t\t\t\ttouched: this._touched === true,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this._renderNoLabel === false && (\n\t\t\t\t\t<label id={`${this._id}-label`} hidden={hideLabel} htmlFor={this._id}>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</label>\n\t\t\t\t)}\n\t\t\t\t{hasHint && (\n\t\t\t\t\t<span class=\"hint\" id={`${this._id}-hint`}>\n\t\t\t\t\t\t{this._hint}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tinput: true,\n\t\t\t\t\t\t'icon-left': typeof this._icon?.left === 'object',\n\t\t\t\t\t\t'icon-right': typeof this._icon?.right === 'object',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this._icon?.left ? <kol-icon _ariaLabel=\"\" _icon={(this._icon.left as KoliBriCustomIcon).icon}></kol-icon> : <i />}\n\t\t\t\t\t<slot name=\"input\"></slot>\n\t\t\t\t\t{typeof this._smartButton === 'object' && this._smartButton !== null && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t_ariaLabel={this._smartButton._ariaLabel}\n\t\t\t\t\t\t\t_customClass={this._smartButton._customClass}\n\t\t\t\t\t\t\t_disabled={this._smartButton._disabled}\n\t\t\t\t\t\t\t_icon={this._smartButton._icon}\n\t\t\t\t\t\t\t_iconOnly={true}\n\t\t\t\t\t\t\t_id={this._smartButton._id}\n\t\t\t\t\t\t\t_label={this._smartButton._label}\n\t\t\t\t\t\t\t_on={this._smartButton._on}\n\t\t\t\t\t\t\t_tooltipAlign={this._smartButton._tooltipAlign}\n\t\t\t\t\t\t\t_variant={this._smartButton._variant}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t)}\n\t\t\t\t\t{this._icon?.right ? <kol-icon _ariaLabel=\"\" _icon={(this._icon.right as KoliBriCustomIcon).icon}></kol-icon> : <i />}\n\t\t\t\t</div>\n\t\t\t\t{hasError && (\n\t\t\t\t\t<kol-alert class=\"error\" id={`${this._id}-error`} _alert={this._alert} _type=\"error\" _variant=\"msg\">\n\t\t\t\t\t\t{this._error}\n\t\t\t\t\t</kol-alert>\n\t\t\t\t)}\n\t\t\t\t{Array.isArray(this._list) && this._list.length > 0 && (\n\t\t\t\t\t<datalist id={`${this._id}-list`}>\n\t\t\t\t\t\t{this._list.map((option: string) => (\n\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</datalist>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string = '';\n\n\t/**\n\t * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: KoliBriHorizontalIcon;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt die Liste der Vorschlagswörter an.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Gibt an, ob die Eingabefeld nur lesend ist.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean = false;\n\n\t/**\n\t * Gibt an, ob die Komponente kein Label rendern soll.\n\t */\n\t@Prop({ reflect: true }) public _renderNoLabel?: boolean = false;\n\n\t/**\n\t * Gibt an, ob die Checkbox ein Pflichtfeld ist.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean = false;\n\n\t/**\n\t * Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ reflect: true }) public _touched?: boolean = false;\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h}from"./index-50adf9a0.js";const defaultStyleCss=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}a,button{background-color:transparent;border:none;font-size:inherit;margin:0;padding:0;transition-duration:0.5s;transition-property:background-color, color, border-color}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>kol-icon,kol-span-wc>span>kol-icon{display:inline-grid;place-items:center;width:1em;height:1em}a,button,input,select,textarea{appearance:none;cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}h1,h2,h3,h4,h5,h6{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size);margin:0;padding:0}:host>kol-heading-wc{display:grid}:host>kol-heading-wc>.overline{order:1}:host>kol-heading-wc>.headline{order:2}",KolHeading=class{constructor(i){registerInstance(this,i),this._headline=void 0,this._level=void 0,this._secondaryHeadline=void 0}render(){return h("kol-heading-wc",{_headline:this._headline,_level:this._level,_secondaryHeadline:this._secondaryHeadline},h("slot",null))}};KolHeading.style={default:defaultStyleCss};export{KolHeading as kol_heading};
+import{r as registerInstance,h}from"./index-50adf9a0.js";const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>kol-heading-wc{display:grid}:host>kol-heading-wc>.overline{order:1}:host>kol-heading-wc>.headline{order:2}",KolHeading=class{constructor(e){registerInstance(this,e),this._headline=void 0,this._level=void 0,this._secondaryHeadline=void 0}render(){return h("kol-heading-wc",{_headline:this._headline,_level:this._level,_secondaryHeadline:this._secondaryHeadline},h("slot",null))}};KolHeading.style={default:defaultStyleCss};export{KolHeading as kol_heading};

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

@@ -1 +1 @@
-{"file":"kol-heading.entry.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,uhDAAuhD;;MCYliD,UAAU;;;;;;;EACf,MAAM;IACZ,QACC,sBAAgB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,IAC1G,eAAQ,CACQ,EAChB;GACF;;;;;;;;","names":[],"sources":["./src/components/heading/style.css?tag=kol-heading&mode=default&encapsulation=shadow","./src/components/heading/shadow.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > kol-heading-wc {\n\tdisplay: grid;\n}\n:host > kol-heading-wc > .overline {\n\torder: 1;\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 { Props } from './component';\n\n@Component({\n\ttag: 'kol-heading',\n\tstyleUrls: {\n\t\tdefault: './style.css',\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 _headline={this._headline} _level={this._level} _secondaryHeadline={this._secondaryHeadline}>\n\t\t\t\t<slot />\n\t\t\t</kol-heading-wc>\n\t\t);\n\t}\n\t/**\n\t * Gibt den Text der Überschrift an.\n\t */\n\t@Prop() public _headline!: string;\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder ob es keine Überschrift ist, sondern nur fett gedruckt.\n\t */\n\t@Prop() public _level?: HeadingLevel;\n\n\t/**\n\t * Gibt den Text der zusätzlichen Überschrift an.\n\t */\n\t@Prop() public _secondaryHeadline?: string;\n}\n"],"version":3}
+{"file":"kol-heading.entry.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,wiCAAwiC;;MCYnjC,UAAU;;;;;;;EACf,MAAM;IACZ,QACC,sBAAgB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,IAC1G,eAAQ,CACQ,EAChB;GACF;;;;;;;;","names":[],"sources":["./src/components/heading/style.css?tag=kol-heading&mode=default&encapsulation=shadow","./src/components/heading/shadow.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > kol-heading-wc {\n\tdisplay: grid;\n}\n:host > kol-heading-wc > .overline {\n\torder: 1;\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 { Props } from './component';\n\n@Component({\n\ttag: 'kol-heading',\n\tstyleUrls: {\n\t\tdefault: './style.css',\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 _headline={this._headline} _level={this._level} _secondaryHeadline={this._secondaryHeadline}>\n\t\t\t\t<slot />\n\t\t\t</kol-heading-wc>\n\t\t);\n\t}\n\t/**\n\t * Gibt den Text der Überschrift an.\n\t */\n\t@Prop() public _headline!: string;\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder ob es keine Überschrift ist, sondern nur fett gedruckt.\n\t */\n\t@Prop() public _level?: HeadingLevel;\n\n\t/**\n\t * Gibt den Text der zusätzlichen Überschrift an.\n\t */\n\t@Prop() public _secondaryHeadline?: string;\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"file":"kol-icon-font-awesome.entry.js","mappings":";;;;;MAyBa,kBAAkB;;;;;;;;EACvB,MAAM;IACZ,QACC,gBACC,WAAW,EAAE,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,EAC5E,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,GAAG,IAAI,CAAC,OAAO,OAAO,IAAI,CAAC,KAAK,EAAE,GAAI,SAA+B,EACjJ,KAAK,EAAE,IAAI,CAAC,KAAK,GAChB,EACD;GACF;;;;;","names":[],"sources":["./src/components/icon-font-awesome/component.tsx"],"sourcesContent":["import { Component, h, JSX, Prop } from '@stencil/core';\nimport { FontAwesome, FontAwesomeOssPrefix } from '../../enums/font-awesome';\n\nimport { Generic } from '@a11y-ui/core';\nimport { AriaLabel } from '../../types/aria-label';\n\n/**\n * API\n */\ntype RequiredProps = AriaLabel & {\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<kol-icon\n\t\t\t\texportparts={`icon${typeof this._part === 'string' ? `,${this._part}` : ''}`}\n\t\t\t\t_ariaLabel={this._ariaLabel}\n\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_part={this._part}\n\t\t\t/>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt das Aria-Label am Icon an.\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 * 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"],"version":3}
+{"file":"kol-icon-font-awesome.entry.js","mappings":";;;;;MAsBa,kBAAkB;;;;;;;;EACvB,MAAM;IACZ,QACC,gBACC,WAAW,EAAE,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,EAC5E,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,GAAG,IAAI,CAAC,OAAO,OAAO,IAAI,CAAC,KAAK,EAAE,GAAI,SAA+B,EACjJ,KAAK,EAAE,IAAI,CAAC,KAAK,GAChB,EACD;GACF;;;;;","names":[],"sources":["./src/components/icon-font-awesome/component.tsx"],"sourcesContent":["import { Component, h, JSX, Prop } from '@stencil/core';\nimport { FontAwesome, FontAwesomeOssPrefix } from '../../enums/font-awesome';\n\nimport { Generic } from '@a11y-ui/core';\nimport { AriaLabel } from '../../types/aria-label';\n\ntype RequiredProps = AriaLabel & {\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<kol-icon\n\t\t\t\texportparts={`icon${typeof this._part === 'string' ? `,${this._part}` : ''}`}\n\t\t\t\t_ariaLabel={this._ariaLabel}\n\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_part={this._part}\n\t\t\t/>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt das Aria-Label am Icon an.\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 * 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"],"version":3}

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

@@ -1 +1 @@
-{"file":"kol-icon-icofont.entry.js","mappings":";;;;;MAwBa,cAAc;;;;;;;EACnB,MAAM;IACZ,QACC,gBACC,WAAW,EAAE,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,EAC5E,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,WAAW,IAAI,CAAC,KAAK,EAAE,GAAI,SAA+B,EAClG,KAAK,EAAE,IAAI,CAAC,KAAK,GAChB,EACD;GACF;;;;;","names":[],"sources":["./src/components/icon-icofont/component.tsx"],"sourcesContent":["import { Component, h, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { AriaLabel } from '../../types/aria-label';\nimport { Icofont } from '../../types/icofont';\n\n/**\n * API\n */\ntype RequiredProps = AriaLabel & {\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<kol-icon\n\t\t\t\texportparts={`icon${typeof this._part === 'string' ? `,${this._part}` : ''}`}\n\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t_icon={typeof this._icon === 'string' ? `icofont-${this._icon}` : (undefined as unknown as string)}\n\t\t\t\t_part={this._part}\n\t\t\t/>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt das Aria-Label am Icon an.\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 * 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"],"version":3}
+{"file":"kol-icon-icofont.entry.js","mappings":";;;;;MAqBa,cAAc;;;;;;;EACnB,MAAM;IACZ,QACC,gBACC,WAAW,EAAE,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,EAC5E,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,WAAW,IAAI,CAAC,KAAK,EAAE,GAAI,SAA+B,EAClG,KAAK,EAAE,IAAI,CAAC,KAAK,GAChB,EACD;GACF;;;;;","names":[],"sources":["./src/components/icon-icofont/component.tsx"],"sourcesContent":["import { Component, h, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { AriaLabel } from '../../types/aria-label';\nimport { Icofont } from '../../types/icofont';\n\ntype RequiredProps = AriaLabel & {\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<kol-icon\n\t\t\t\texportparts={`icon${typeof this._part === 'string' ? `,${this._part}` : ''}`}\n\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t_icon={typeof this._icon === 'string' ? `icofont-${this._icon}` : (undefined as unknown as string)}\n\t\t\t\t_part={this._part}\n\t\t\t/>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt das Aria-Label am Icon an.\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 * 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"],"version":3}