@public-ui/components 1.5.0-rc.0 → 1.5.0-rc.2

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as s,g as a}from"./index-50adf9a0.js";import{w as e}from"./button-link-b0ebacde.js";import{d as l,e as n}from"./a11y.tipps-5cdbd5e2.js";import{n as h}from"./dev.utils-05f4e663.js";import{f as o,j as d,h as r,w as c,a as u,b as f,s as _}from"./prop.validators-8365f685.js";import{a as v}from"./reuse-56bb5a4b.js";import{v as b,w as p}from"./icon-2c0634d7.js";import{a as m,b as y}from"./label-467917df.js";import{v as A}from"./tab-index-068270b7.js";import{p as g,a as j}from"./controller-e3c820af.js";import{a as I,w as x}from"./controller-8f60f862.js";import"./index-676dbf61.js";const C=class{constructor(t){i(this,t),this.nonce=h(),this.catchRef=t=>{this.ref=t,v(this.host,this.ref)},this.onClick=t=>{var a,i;"submit"===this.state._type?g({form:this.host,ref:this.ref}):"reset"===this.state._type?j({form:this.host,ref:this.ref}):"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)?(o(t,this.ref),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._value)):l("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="",this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._icon=void 0,this._iconAlign="left",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={_ariaLabel:"",_icon:{},_iconAlign:"left",_label:"",_on:{},_type:"button"}}render(){return t(s,null,t("button",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-current":d(this.state._ariaCurrent),"aria-expanded":r(this.state._ariaExpanded),"aria-label":!1===this.state._iconOnly?this.state._ariaLabel||this.state._label:void 0,"aria-labelledby":!0===this.state._iconOnly?this.nonce:void 0,"aria-selected":d(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}),t("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._label},t("slot",{name:"expert",slot:"expert"}))),!0===this.state._iconOnly&&t("kol-tooltip",{"aria-hidden":"true",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._ariaLabel||this.state._label}))}validateAccessKey(t){c(this,"_accessKey",t)}validateAriaControls(t){c(this,"_ariaControls",t)}validateAriaCurrent(t){u(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){f(this,"_ariaExpanded",t)}validateAriaLabel(t){m(this,t)}validateAriaSelected(t){f(this,"_ariaSelected",t)}validateCustomClass(t){c(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){f(this,"_disabled",t),!0===t&&n()}validateIcon(t){b(this,t)}validateIconAlign(t){p(this,t)}validateIconOnly(t){f(this,"_iconOnly",t,{defaultValue:!1})}validateId(t){c(this,"_id",t)}validateLabel(t){y(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){c(this,"_role",t)}validateTabIndex(t){A(this,t)}validateTooltipAlign(t){e(this,"_tooltipAlign",t)}validateType(t){I(this,"_type",t)}validateValue(t){_(this,"_value",t)}validateVariant(t){x(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 a(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"]}}},O=t=>{t instanceof Node&&setTimeout((()=>{var a,i;null===(a=t.parentElement)||void 0===a||a.removeChild(t),null===(i=t.parentNode)||void 0===i||i.removeChild(t)}))},L=class{constructor(t){i(this,t),this._icon=void 0,this._iconOnly=!1,this._label=void 0,this.state={_icon:{},_iconOnly:!1,_label:""}}render(){return t(s,{class:{"icon-only":this.state._iconOnly}},this.state._icon.top&&t("kol-icon",{class:{"icon top":!0},style:this.state._icon.top.style,_ariaLabel:"",_icon:this.state._icon.top.icon}),t("span",null,this.state._icon.left&&t("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?t("span",null,this.state._label):"",t("span",{ref:this.state._label.length>0||!0===this.state._iconOnly?O:void 0},t("slot",{name:"expert"})),this.state._icon.right&&t("kol-icon",{class:{"icon right":!0},style:this.state._icon.right.style,_ariaLabel:"",_icon:this.state._icon.right.icon})),this.state._icon.bottom&&t("kol-icon",{class:{"icon bottom":!0},style:this.state._icon.bottom.style,_ariaLabel:"",_icon:this.state._icon.bottom.icon}))}validateIcon(t){b(this,t)}validateIconOnly(t){f(this,"_iconOnly",t)}validateLabel(t){y(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{C as kol_button_wc,L as kol_span_wc};
+import{r as i,h as t,H as s,g as a}from"./index-50adf9a0.js";import{w as e}from"./button-link-3d1888e3.js";import{d as l,e as n}from"./a11y.tipps-5cdbd5e2.js";import{n as h}from"./dev.utils-05f4e663.js";import{f as o,j as d,h as r,w as c,a as u,b as _,s as f}from"./prop.validators-769a843a.js";import{a as v}from"./reuse-56bb5a4b.js";import{v as b,w as p}from"./icon-cab2d129.js";import{a as m,b as y}from"./label-ea9f2a1a.js";import{v as A}from"./tab-index-22c62334.js";import{p as g,a as j}from"./controller-32fdeebb.js";import{a as I,w as x}from"./controller-5bd06546.js";import"./index-676dbf61.js";const C=class{constructor(t){i(this,t),this.nonce=h(),this.catchRef=t=>{this.ref=t,v(this.host,this.ref)},this.onClick=t=>{var a,i;"submit"===this.state._type?g({form:this.host,ref:this.ref}):"reset"===this.state._type?j({form:this.host,ref:this.ref}):"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)?(o(t,this.ref),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._value)):l("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 t(s,null,t("button",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-current":d(this.state._ariaCurrent),"aria-expanded":r(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":d(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}),t("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._label},t("slot",{name:"expert",slot:"expert"}))),!0===this.state._iconOnly&&t("kol-tooltip",{"aria-hidden":"true",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._ariaLabel||this.state._label}))}validateAccessKey(t){c(this,"_accessKey",t)}validateAriaControls(t){c(this,"_ariaControls",t)}validateAriaCurrent(t){u(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){_(this,"_ariaExpanded",t)}validateAriaLabel(t){m(this,t)}validateAriaSelected(t){_(this,"_ariaSelected",t)}validateCustomClass(t){c(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){_(this,"_disabled",t),!0===t&&n()}validateIcon(t){b(this,t)}validateIconAlign(t){p(this,t)}validateIconOnly(t){_(this,"_iconOnly",t,{defaultValue:!1})}validateId(t){c(this,"_id",t)}validateLabel(t){y(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){c(this,"_role",t)}validateTabIndex(t){A(this,t)}validateTooltipAlign(t){e(this,"_tooltipAlign",t)}validateType(t){I(this,"_type",t)}validateValue(t){f(this,"_value",t)}validateVariant(t){x(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 a(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"]}}},O=class{constructor(t){i(this,t),this._icon=void 0,this._iconOnly=!1,this._label=void 0,this.state={_icon:{},_iconOnly:!1,_label:"…"}}render(){const a=this.state._label.length>0;return t(s,{class:{"icon-only":this.state._iconOnly}},this.state._icon.top&&t("kol-icon",{class:{"icon top":!0},style:this.state._icon.top.style,_ariaLabel:"",_icon:this.state._icon.top.icon}),t("span",null,this.state._icon.left&&t("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?t("span",null,this.state._label):"",t("span",{"aria-hidden":a?"true":void 0,hidden:a},t("slot",{name:"expert"})),this.state._icon.right&&t("kol-icon",{class:{"icon right":!0},style:this.state._icon.right.style,_ariaLabel:"",_icon:this.state._icon.right.icon})),this.state._icon.bottom&&t("kol-icon",{class:{"icon bottom":!0},style:this.state._icon.bottom.style,_ariaLabel:"",_icon:this.state._icon.bottom.icon}))}validateIcon(t){b(this,t)}validateIconOnly(t){_(this,"_iconOnly",t)}validateLabel(t){y(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{C as kol_button_wc,O as kol_span_wc};

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

@@ -1 +1 @@
-{"version":3,"names":["KolButtonWc","this","nonce","catchRef","ref","propergateFocus","host","onClick","event","state","_type","propergateSubmitEventToForm","form","propergateResetEventToForm","_a","_on","setEventTargetAndStopPropagation","_b","_value","devHint","_ariaLabel","_icon","_iconAlign","_label","render","h","Host","Object","assign","accessKey","_accessKey","_ariaControls","mapStringOrBoolean2String","_ariaCurrent","mapBoolean2String","_ariaExpanded","_iconOnly","undefined","_ariaSelected","class","_variant","_customClass","length","disabled","_disabled","id","_id","role","_role","tabIndex","_tabIndex","type","name","slot","_align","_tooltipAlign","validateAccessKey","value","watchString","validateAriaControls","validateAriaCurrent","watchValidator","Set","validateAriaExpanded","watchBoolean","validateAriaLabel","validateAriaLabelWithLabel","validateAriaSelected","validateCustomClass","defaultValue","validateDisabled","a11yHintDisabled","validateIcon","validateIconAlign","watchIconAlign","validateIconOnly","validateId","validateLabel","validateLabelWithAriaLabel","validateOn","validateRole","validateTabIndex","validateTooltipAlign","watchTooltipAlignment","validateType","watchButtonType","validateValue","setState","validateVariant","watchButtonVariant","componentWillLoad","removeNode","el","Node","setTimeout","parentElement","removeChild","parentNode","KolSpanWc","top","style","icon","left","right","bottom"],"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 || this.state._label : 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 = 'left';\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_ariaLabel: '',\n\t\t_icon: {},\n\t\t/**\n\t\t * @deprecated\n\t\t */\n\t\t_iconAlign: 'left',\n\t\t_label: '',\n\t\t_on: {},\n\t\t_type: 'button',\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\nconst removeNode = (el?: Node) => {\n\tif (el instanceof Node) {\n\t\tsetTimeout(() => {\n\t\t\tel.parentElement?.removeChild(el);\n\t\t\tel.parentNode?.removeChild(el);\n\t\t});\n\t}\n};\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\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\n\t\t\t\t\t<span ref={this.state._label.length > 0 || this.state._iconOnly === true ? removeNode : undefined}>\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\" />\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: '',\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"],"mappings":"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"}
+{"version":3,"names":["KolButtonWc","this","nonce","catchRef","ref","propergateFocus","host","onClick","event","state","_type","propergateSubmitEventToForm","form","propergateResetEventToForm","_a","_on","setEventTargetAndStopPropagation","_b","_value","devHint","_icon","_label","_variant","render","h","Host","Object","assign","accessKey","_accessKey","_ariaControls","mapStringOrBoolean2String","_ariaCurrent","mapBoolean2String","_ariaExpanded","_iconOnly","_ariaLabel","undefined","_ariaSelected","class","_customClass","length","disabled","_disabled","id","_id","role","_role","tabIndex","_tabIndex","type","name","slot","_align","_tooltipAlign","validateAccessKey","value","watchString","validateAriaControls","validateAriaCurrent","watchValidator","Set","validateAriaExpanded","watchBoolean","validateAriaLabel","validateAriaLabelWithLabel","validateAriaSelected","validateCustomClass","defaultValue","validateDisabled","a11yHintDisabled","validateIcon","validateIconAlign","watchIconAlign","validateIconOnly","validateId","validateLabel","validateLabelWithAriaLabel","validateOn","validateRole","validateTabIndex","validateTooltipAlign","watchTooltipAlignment","validateType","watchButtonType","validateValue","setState","validateVariant","watchButtonVariant","componentWillLoad","_iconAlign","KolSpanWc","hideExpertSlot","top","style","icon","left","hidden","right","bottom"],"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"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as o,H as t,g as n}from"./index-50adf9a0.js";import{a as e}from"./reuse-56bb5a4b.js";const s=":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{font-family:inherit;font-size:inherit}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{display:inline-block}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:inherit}*{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}a.icon-only>kol-span-wc>span>span,button.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{display:inline-block}a,button{min-height:44px;min-width:44px;width:100%}a:active,button:active{outline:0;box-shadow:none}a:disabled,button:disabled{box-shadow:none;cursor:not-allowed;opacity:0.5}",r=class{constructor(o){i(this,o),this.catchRef=i=>{this.ref=i,e(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._icon=void 0,this._iconAlign="left",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 o(t,null,o("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},o("slot",{name:"expert",slot:"expert"})))}get host(){return n(this)}};r.style={default:s};export{r as kol_button};
+import{r as i,h as o,H as r,g as t}from"./index-50adf9a0.js";import{a as n}from"./reuse-56bb5a4b.js";const a=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-black:#000;--kolibri-color-white:#fff;--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}:host{display:inline-flex}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;width:100%}kol-icon.external-link-icon{display:inline-flex}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}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{display:contents;padding:0 var(--kolibri-spacing)}a,button,input,select,textarea{appearance:none;cursor:pointer;font-family:var(--kolibri-font-family)}.icon-only>kol-span-wc>span>span{display:none}a{text-decoration-line:none}:is(a,button){min-height:44px;min-width:44px;text-align:center}:is(a,button):disabled{cursor:not-allowed;opacity:0.5}kol-span-wc{padding:calc(2 * var(--kolibri-spacing))}.primary :is(a,button) kol-span-wc{background-color:var(--kolibri-color-primary);color:var(--kolibri-color-white)}.secondary :is(a,button) kol-span-wc{background-color:var(--kolibri-color-secondary);color:var(--kolibri-color-white)}.normal :is(a,button) kol-span-wc{background-color:var(--kolibri-color-normal);color:var(--kolibri-color-white)}.danger :is(a,button) kol-span-wc{background-color:var(--kolibri-color-danger);color:var(--kolibri-color-white)}.ghost :is(a,button) kol-span-wc{background-color:var(--kolibri-color-ghost);color:var(--kolibri-color-black)}",s=class{constructor(o){i(this,o),this.catchRef=i=>{this.ref=i,n(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 o(r,null,o("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},o("slot",{name:"expert",slot:"expert"})))}get host(){return t(this)}};s.style={default:a};export{s as kol_button};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButton","this","catchRef","ref","propergateFocus","host","render","h","Host","class","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_icon","_iconAlign","_iconOnly","_id","_label","_on","_role","_tabIndex","_tooltipAlign","_type","_value","name","slot"],"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 = 'left';\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"],"mappings":";;;qGAAA,MAAMA,EAAkB,8uD,MCwBXC,EAAS,M,yBAIJC,KAAAC,SAAYC,IAC5BF,KAAKE,IAAMA,EACXC,EAAgBH,KAAKI,KAAMJ,KAAKE,IAAI,E,gIAmEA,G,wEAeiB,M,qCAYd,O,eAKc,M,6HA8BX,M,WAKA,S,oCAUM,Q,CA7I1CG,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBACCJ,IAAKF,KAAKC,SACVO,MAAO,CACNC,OAAQ,KACR,CAACT,KAAKU,UAAqBV,KAAKU,WAAa,SAC7C,CAACV,KAAKW,cAAyBX,KAAKU,WAAa,iBAAmBV,KAAKW,eAAiB,UAAYX,KAAKW,aAAaC,OAAS,GAElIC,WAAYb,KAAKa,WACjBC,cAAed,KAAKc,cACpBC,aAAcf,KAAKe,aACnBC,cAAehB,KAAKgB,cACpBC,WAAYjB,KAAKiB,WACjBC,cAAelB,KAAKkB,cACpBP,aAAcX,KAAKW,aACnBQ,UAAWnB,KAAKmB,UAChBC,MAAOpB,KAAKoB,MACZC,WAAYrB,KAAKqB,WACjBC,UAAWtB,KAAKsB,UAChBC,IAAKvB,KAAKuB,IACVC,OAAQxB,KAAKwB,OACbC,IAAKzB,KAAKyB,IACVC,MAAO1B,KAAK0B,MACZC,UAAW3B,KAAK2B,UAChBC,cAAe5B,KAAK4B,cACpBC,MAAO7B,KAAK6B,MACZC,OAAQ9B,KAAK8B,OACbpB,SAAUV,KAAKU,UAMfJ,EAAA,QAAMyB,KAAK,SAASC,KAAK,Y"}
+{"version":3,"names":["defaultStyleCss","KolButton","this","catchRef","ref","propergateFocus","host","render","h","Host","class","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_icon","_iconAlign","_iconOnly","_id","_label","_on","_role","_tabIndex","_tooltipAlign","_type","_value","name","slot"],"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"],"mappings":";;;qGAAA,MAAMA,EAAkB,4qE,MCwBXC,EAAS,M,yBAIJC,KAAAC,SAAYC,IAC5BF,KAAKE,IAAMA,EACXC,EAAgBH,KAAKI,KAAMJ,KAAKE,IAAI,E,kNAkFiB,M,8DAiBA,M,6HA8BX,M,WAKA,S,oCAUM,Q,CA7I1CG,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBACCJ,IAAKF,KAAKC,SACVO,MAAO,CACNC,OAAQ,KACR,CAACT,KAAKU,UAAqBV,KAAKU,WAAa,SAC7C,CAACV,KAAKW,cAAyBX,KAAKU,WAAa,iBAAmBV,KAAKW,eAAiB,UAAYX,KAAKW,aAAaC,OAAS,GAElIC,WAAYb,KAAKa,WACjBC,cAAed,KAAKc,cACpBC,aAAcf,KAAKe,aACnBC,cAAehB,KAAKgB,cACpBC,WAAYjB,KAAKiB,WACjBC,cAAelB,KAAKkB,cACpBP,aAAcX,KAAKW,aACnBQ,UAAWnB,KAAKmB,UAChBC,MAAOpB,KAAKoB,MACZC,WAAYrB,KAAKqB,WACjBC,UAAWtB,KAAKsB,UAChBC,IAAKvB,KAAKuB,IACVC,OAAQxB,KAAKwB,OACbC,IAAKzB,KAAKyB,IACVC,MAAO1B,KAAK0B,MACZC,UAAW3B,KAAK2B,UAChBC,cAAe5B,KAAK4B,cACpBC,MAAO7B,KAAK6B,MACZC,OAAQ9B,KAAK8B,OACbpB,SAAUV,KAAKU,UAMfJ,EAAA,QAAMyB,KAAK,SAASC,KAAK,Y"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as o,H as r}from"./index-50adf9a0.js";import{b as e,w as a}from"./prop.validators-8365f685.js";import{w as t}from"./validation-fdaf7554.js";import"./index-676dbf61.js";import"./a11y.tipps-5cdbd5e2.js";import"./dev.utils-05f4e663.js";import"./reuse-56bb5a4b.js";const n=":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{font-family:inherit;font-size:inherit}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{display:inline-block}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:inherit}*{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}a.icon-only>kol-span-wc>span>span,button.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}",l=class{constructor(o){i(this,o),this._hasFooter=!1,this._heading=void 0,this._headline=void 0,this._level=1,this.state={_heading:"…"}}render(){return o(r,null,o("div",null,o("div",{class:"header"},o("kol-heading-wc",{_label:this.state._heading,_level:this.state._level}),o("slot",{name:"header"})),o("div",{class:"content"},o("slot",{name:"content"})),!0===this.state._hasFooter&&o("div",{class:"footer"},o("slot",{name:"footer"}))))}validateHasFooter(i){e(this,"_hasFooter",i)}validateHeading(i){a(this,"_heading",i,{required:!0})}validateHeadline(i){this.validateHeading(i)}validateLevel(i){t(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"]}}};l.style={default:n};export{l as kol_card};
+import{r as i,h as o,H as r}from"./index-50adf9a0.js";import{b as e,w as a}from"./prop.validators-769a843a.js";import{w as t}from"./validation-d9821b54.js";import"./index-676dbf61.js";import"./a11y.tipps-5cdbd5e2.js";import"./dev.utils-05f4e663.js";import"./reuse-56bb5a4b.js";const l=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-black:#000;--kolibri-color-white:#fff;--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}:host{display:inline-flex}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;width:100%}kol-icon.external-link-icon{display:inline-flex}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}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{display:contents;padding:0 var(--kolibri-spacing)}a,button,input,select,textarea{appearance:none;cursor:pointer;font-family:var(--kolibri-font-family)}.icon-only>kol-span-wc>span>span{display:none}",n=class{constructor(o){i(this,o),this._hasFooter=!1,this._heading=void 0,this._headline=void 0,this._level=1,this.state={_heading:"…"}}render(){return o(r,null,o("div",null,o("div",{class:"header"},o("kol-heading-wc",{_headline:this.state._heading,_level:this.state._level}),o("slot",{name:"header"})),o("div",{class:"content"},o("slot",{name:"content"})),!0===this.state._hasFooter&&o("div",{class:"footer"},o("slot",{name:"footer"}))))}validateHasFooter(i){e(this,"_hasFooter",i)}validateHeading(i){a(this,"_heading",i,{required:!0})}validateHeadline(i){this.validateHeading(i)}validateLevel(i){t(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"]}}};n.style={default:l};export{n as kol_card};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolCard","_heading","render","h","Host","class","_label","this","state","_level","name","_hasFooter","validateHasFooter","value","watchBoolean","validateHeading","watchString","required","validateHeadline","validateLevel","watchHeadingLevel","componentWillLoad","_headline"],"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 _label={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"],"mappings":";;;qRAAA,MAAMA,EAAkB,sgD,MCyCXC,EAAO,M,yCAyBoC,M,6DAiBhB,E,WAKP,CAC/BC,SAAU,I,CA/CJC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,WACCA,EAAA,OAAKE,MAAM,UACVF,EAAA,kBAAgBG,OAAQC,KAAKC,MAAMP,SAAUQ,OAAQF,KAAKC,MAAMC,SAChEN,EAAA,QAAMO,KAAK,YAEZP,EAAA,OAAKE,MAAM,WACVF,EAAA,QAAMO,KAAK,aAEXH,KAAKC,MAAMG,aAAe,MAC1BR,EAAA,OAAKE,MAAM,UACVF,EAAA,QAAMO,KAAK,a,CAyCVE,kBAAkBC,GACxBC,EAAaP,KAAM,aAAcM,E,CAO3BE,gBAAgBF,GACtBG,EAAYT,KAAM,WAAYM,EAAO,CACpCI,SAAU,M,CASLC,iBAAiBL,GACvBN,KAAKQ,gBAAgBF,E,CAOfM,cAAcN,GACpBO,EAAkBb,KAAMM,E,CAMlBQ,oBACNd,KAAKK,kBAAkBL,KAAKI,YAC5BJ,KAAKQ,gBAAgBR,KAAKN,UAAYM,KAAKe,WAC3Cf,KAAKY,cAAcZ,KAAKE,O"}
+{"version":3,"names":["defaultStyleCss","KolCard","_heading","render","h","Host","class","_headline","this","state","_level","name","_hasFooter","validateHasFooter","value","watchBoolean","validateHeading","watchString","required","validateHeadline","validateLevel","watchHeadingLevel","componentWillLoad"],"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"],"mappings":";;;qRAAA,MAAMA,EAAkB,g7C,MCyCXC,EAAO,M,yCAyBoC,M,6DAiBhB,E,WAKP,CAC/BC,SAAU,I,CA/CJC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,WACCA,EAAA,OAAKE,MAAM,UACVF,EAAA,kBAAgBG,UAAWC,KAAKC,MAAMP,SAAUQ,OAAQF,KAAKC,MAAMC,SACnEN,EAAA,QAAMO,KAAK,YAEZP,EAAA,OAAKE,MAAM,WACVF,EAAA,QAAMO,KAAK,aAEXH,KAAKC,MAAMG,aAAe,MAC1BR,EAAA,OAAKE,MAAM,UACVF,EAAA,QAAMO,KAAK,a,CAyCVE,kBAAkBC,GACxBC,EAAaP,KAAM,aAAcM,E,CAO3BE,gBAAgBF,GACtBG,EAAYT,KAAM,WAAYM,EAAO,CACpCI,SAAU,M,CASLC,iBAAiBL,GACvBN,KAAKQ,gBAAgBF,E,CAOfM,cAAcN,GACpBO,EAAkBb,KAAMM,E,CAMlBQ,oBACNd,KAAKK,kBAAkBL,KAAKI,YAC5BJ,KAAKQ,gBAAgBR,KAAKN,UAAYM,KAAKD,WAC3CC,KAAKY,cAAcZ,KAAKE,O"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as o,H as r}from"./index-50adf9a0.js";import{b as a,w as l}from"./prop.validators-8365f685.js";import"./index-676dbf61.js";import"./a11y.tipps-5cdbd5e2.js";import"./dev.utils-05f4e663.js";import"./reuse-56bb5a4b.js";const e=":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{font-family:inherit;font-size:inherit}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{display:inline-block}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:inherit}*{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}a.icon-only>kol-span-wc>span>span,button.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}",t=class{constructor(o){i(this,o),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 o(r,null,o("details",{ref:i=>{this.htmlDetailsElement=i},open:this.state._open},o("summary",{onClick:this.onClick},o("span",null,this.state._open?o("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-angle-down"}):o("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-angle-right"})),o("span",null,this.state._summary)),o("kol-indented-text",null,o("slot",null))))}validateOpen(i){a(this,"_open",i)}validateSummary(i){l(this,"_summary",i,{required:!0})}componentWillLoad(){this.validateOpen(this._open),this.validateSummary(this._summary)}static get watchers(){return{_open:["validateOpen"],_summary:["validateSummary"]}}};t.style={default:e};export{t as kol_details};
+import{r as i,h as o,H as r}from"./index-50adf9a0.js";import{b as a,w as e}from"./prop.validators-769a843a.js";import"./index-676dbf61.js";import"./a11y.tipps-5cdbd5e2.js";import"./dev.utils-05f4e663.js";import"./reuse-56bb5a4b.js";const l=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-black:#000;--kolibri-color-white:#fff;--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}:host{display:inline-flex}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;width:100%}kol-icon.external-link-icon{display:inline-flex}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}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{display:contents;padding:0 var(--kolibri-spacing)}a,button,input,select,textarea{appearance:none;cursor:pointer;font-family:var(--kolibri-font-family)}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}details{display:grid;width:100%}details>summary{border-radius:var(--kolibri-spacing);cursor:pointer;display:flex;gap:var(--kolibri-spacing);place-items:center}details>summary>span{border-bottom-color:grey;border-bottom-style:solid;border-bottom-width:calc(var(--kolibri-spacing) / 2)}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.35em}",t=class{constructor(o){i(this,o),this.onClick=()=>{setTimeout((()=>{var o;this._open=null===(o=this.htmlDetailsElement)||void 0===o?void 0:o.open}),25)},this._open=!1,this._summary=void 0,this.state={_summary:"…"}}render(){return o(r,null,o("details",{ref:o=>{this.htmlDetailsElement=o},open:this.state._open},o("summary",{onClick:this.onClick},this.state._open?o("kol-icon",{_ariaLabel:"",_icon:"codicon codicon-chevron-down"}):o("kol-icon",{_ariaLabel:"",_icon:"codicon codicon-chevron-right"}),o("span",null,this.state._summary)),o("kol-indented-text",null,o("slot",null))))}validateOpen(o){a(this,"_open",o)}validateSummary(o){e(this,"_summary",o,{required:!0})}componentWillLoad(){this.validateOpen(this._open),this.validateSummary(this._summary)}static get watchers(){return{_open:["validateOpen"],_summary:["validateSummary"]}}};t.style={default:l};export{t as kol_details};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolDetails","this","onClick","setTimeout","_open","_a","htmlDetailsElement","open","_summary","render","h","Host","ref","el","state","_ariaLabel","_icon","validateOpen","value","watchBoolean","validateSummary","watchString","required","componentWillLoad"],"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"],"mappings":";;;wOAAA,MAAMA,EAAkB,+lE,MC2BXC,EAAU,M,yBAqEdC,KAAAC,QAAU,KACjBC,YAAW,K,MACVF,KAAKG,OAAQC,EAAAJ,KAAKK,sBAAkB,MAAAD,SAAA,SAAAA,EAAEE,IAAI,GACxC,GAAG,E,WA3C0D,M,mCAUjC,CAC/BC,SAAU,I,CArCJC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,WACCE,IAAMC,IACLZ,KAAKK,mBAAqBO,CAAwB,EAEnDN,KAAMN,KAAKa,MAAMV,OAEjBM,EAAA,WAASR,QAASD,KAAKC,SACtBQ,EAAA,YACET,KAAKa,MAAMV,MAAQM,EAAA,YAAUK,WAAW,GAAGC,MAAM,2BAA8BN,EAAA,YAAUK,WAAW,GAAGC,MAAM,6BAE/GN,EAAA,YAAOT,KAAKa,MAAMN,WAEnBE,EAAA,yBACCA,EAAA,e,CA4BEO,aAAaC,GACnBC,EAAalB,KAAM,QAASiB,E,CAOtBE,gBAAgBF,GACtBG,EAAYpB,KAAM,WAAYiB,EAAO,CACpCI,SAAU,M,CAOLC,oBACNtB,KAAKgB,aAAahB,KAAKG,OACvBH,KAAKmB,gBAAgBnB,KAAKO,S"}
+{"version":3,"names":["defaultStyleCss","KolDetails","this","onClick","setTimeout","_open","_a","htmlDetailsElement","open","_summary","render","h","Host","ref","el","state","_ariaLabel","_icon","validateOpen","value","watchBoolean","validateSummary","watchString","required","componentWillLoad"],"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\twidth: 100%;\n}\ndetails > summary {\n\tborder-radius: var(--kolibri-spacing);\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: var(--kolibri-spacing);\n\tplace-items: center;\n}\ndetails > summary > span {\n\tborder-bottom-color: grey;\n\tborder-bottom-style: solid;\n\tborder-bottom-width: calc(var(--kolibri-spacing) / 2);\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.35em;\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{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/**\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"],"mappings":";;;wOAAA,MAAMA,EAAkB,k4D,MC2BXC,EAAU,M,yBAuEdC,KAAAC,QAAU,KACjBC,YAAW,K,MACVF,KAAKG,OAAQC,EAAAJ,KAAKK,sBAAkB,MAAAD,SAAA,SAAAA,EAAEE,IAAI,GACxC,GAAG,E,WA3C0D,M,mCAUjC,CAC/BC,SAAU,I,CAvCJC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,WACCE,IAAMC,IACLZ,KAAKK,mBAAqBO,CAAwB,EAEnDN,KAAMN,KAAKa,MAAMV,OAEjBM,EAAA,WAASR,QAASD,KAAKC,SACrBD,KAAKa,MAAMV,MACXM,EAAA,YAAUK,WAAW,GAAGC,MAAM,iCAE9BN,EAAA,YAAUK,WAAW,GAAGC,MAAM,kCAE/BN,EAAA,YAAOT,KAAKa,MAAMN,WAEnBE,EAAA,yBACCA,EAAA,e,CA4BEO,aAAaC,GACnBC,EAAalB,KAAM,QAASiB,E,CAOtBE,gBAAgBF,GACtBG,EAAYpB,KAAM,WAAYiB,EAAO,CACpCI,SAAU,M,CAOLC,oBACNtB,KAAKgB,aAAahB,KAAKG,OACvBH,KAAKmB,gBAAgBnB,KAAKO,S"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i}from"./index-50adf9a0.js";import{b as e,w as o}from"./prop.validators-8365f685.js";import{a as s}from"./i18n-67083aee.js";import"./index-676dbf61.js";import"./a11y.tipps-5cdbd5e2.js";import"./dev.utils-05f4e663.js";import"./reuse-56bb5a4b.js";const r=class{constructor(e){t(this,e),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 i("form",{method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?i("p",null,i("kol-indented-text",null,s("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?i("p",null,i("kol-indented-text",null,this.state._requiredText)):null,i("slot",null))}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRequiredText(t){"boolean"==typeof t?e(this,"_requiredText",t):o(this,"_requiredText",t)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"]}}};export{r as kol_form};
+import{r as t,h as i}from"./index-50adf9a0.js";import{b as e,w as o}from"./prop.validators-769a843a.js";import{a as s}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 r=class{constructor(e){t(this,e),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 i("form",{method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?i("p",null,i("kol-indented-text",null,s("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?i("p",null,i("kol-indented-text",null,this.state._requiredText)):null,i("slot",null))}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRequiredText(t){"boolean"==typeof t?e(this,"_requiredText",t):o(this,"_requiredText",t)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"]}}};export{r as kol_form};

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

@@ -1 +1 @@
-{"version":3,"names":["KolForm","this","onSubmit","event","preventDefault","_a","state","_on","_b","onReset","render","h","method","autoComplete","noValidate","_requiredText","translate","length","validateOn","value","Object","assign","validateRequiredText","watchBoolean","watchString","componentWillLoad"],"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"],"mappings":";;;8QAgCaA,EAAO,M,yBACFC,KAAAC,SAAYC,I,QAC5BA,EAAMC,iBACN,WAAWC,EAAAJ,KAAKK,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEH,YAAa,WAAY,EACnDM,EAAAP,KAAKK,MAAMC,OAAG,MAAAC,SAAA,SAAAA,EAAEN,SAASC,E,GAGVF,KAAAQ,QAAWN,I,QAC3BA,EAAMC,iBACN,WAAWC,EAAAJ,KAAKK,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEI,WAAY,WAAY,EAClDD,EAAAP,KAAKK,MAAMC,OAAG,MAAAC,SAAA,SAAAA,EAAEC,QAAQN,E,yCA6B4B,K,WAKtB,E,CA9BzBO,SACN,OACCC,EAAA,QAAMC,OAAO,OAAOV,SAAUD,KAAKC,SAAUO,QAASR,KAAKQ,QAASI,aAAa,MAAMC,WAAU,MAC/Fb,KAAKK,MAAMS,gBAAkB,KAC7BJ,EAAA,SACCA,EAAA,yBAAoBK,EAAU,iCAErBf,KAAKK,MAAMS,gBAAkB,UAAYd,KAAKK,MAAMS,cAAcE,OAAS,EACrFN,EAAA,SACCA,EAAA,yBAAoBV,KAAKK,MAAMS,gBAE7B,KACJJ,EAAA,a,CAwBIO,WAAWC,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChDlB,KAAKK,MAAKc,OAAAC,OAAAD,OAAAC,OAAA,GACNpB,KAAKK,OAAK,CACbC,IAAKY,G,EASDG,qBAAqBH,GAC3B,UAAWA,IAAU,UAAW,CAC/BI,EAAatB,KAAM,gBAAiBkB,E,KAC9B,CACNK,EAAYvB,KAAM,gBAAiBkB,E,EAO9BM,oBACNxB,KAAKiB,WAAWjB,KAAKM,KACrBN,KAAKqB,qBAAqBrB,KAAKc,c"}
+{"version":3,"names":["KolForm","this","onSubmit","event","preventDefault","_a","state","_on","_b","onReset","render","h","method","autoComplete","noValidate","_requiredText","translate","length","validateOn","value","Object","assign","validateRequiredText","watchBoolean","watchString","componentWillLoad"],"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"],"mappings":";;;0SAgCaA,EAAO,M,yBACFC,KAAAC,SAAYC,I,QAC5BA,EAAMC,iBACN,WAAWC,EAAAJ,KAAKK,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEH,YAAa,WAAY,EACnDM,EAAAP,KAAKK,MAAMC,OAAG,MAAAC,SAAA,SAAAA,EAAEN,SAASC,E,GAGVF,KAAAQ,QAAWN,I,QAC3BA,EAAMC,iBACN,WAAWC,EAAAJ,KAAKK,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEI,WAAY,WAAY,EAClDD,EAAAP,KAAKK,MAAMC,OAAG,MAAAC,SAAA,SAAAA,EAAEC,QAAQN,E,yCA6B4B,K,WAKtB,E,CA9BzBO,SACN,OACCC,EAAA,QAAMC,OAAO,OAAOV,SAAUD,KAAKC,SAAUO,QAASR,KAAKQ,QAASI,aAAa,MAAMC,WAAU,MAC/Fb,KAAKK,MAAMS,gBAAkB,KAC7BJ,EAAA,SACCA,EAAA,yBAAoBK,EAAU,iCAErBf,KAAKK,MAAMS,gBAAkB,UAAYd,KAAKK,MAAMS,cAAcE,OAAS,EACrFN,EAAA,SACCA,EAAA,yBAAoBV,KAAKK,MAAMS,gBAE7B,KACJJ,EAAA,a,CAwBIO,WAAWC,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChDlB,KAAKK,MAAKc,OAAAC,OAAAD,OAAAC,OAAA,GACNpB,KAAKK,OAAK,CACbC,IAAKY,G,EASDG,qBAAqBH,GAC3B,UAAWA,IAAU,UAAW,CAC/BI,EAAatB,KAAM,gBAAiBkB,E,KAC9B,CACNK,EAAYvB,KAAM,gBAAiBkB,E,EAO9BM,oBACNxB,KAAKiB,WAAWjB,KAAKM,KACrBN,KAAKqB,qBAAqBrB,KAAKc,c"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as s,H as i}from"./index-50adf9a0.js";import{w as e}from"./validation-fdaf7554.js";import{w as l}from"./prop.validators-8365f685.js";import"./index-676dbf61.js";import"./a11y.tipps-5cdbd5e2.js";import"./dev.utils-05f4e663.js";import"./reuse-56bb5a4b.js";const a=class{constructor(i){t(this,i),this.renderHeadline=(t,i)=>{switch(i){case 1:return s("h1",{class:"headline"},t,s("slot",null));case 2:return s("h2",{class:"headline"},t,s("slot",null));case 3:return s("h3",{class:"headline"},t,s("slot",null));case 4:return s("h4",{class:"headline"},t,s("slot",null));case 5:return s("h5",{class:"headline"},t,s("slot",null));case 6:return s("h6",{class:"headline"},t,s("slot",null));default:return s("strong",{class:"headline"},t,s("slot",null))}},this._level=1,this._label=void 0,this._overline="",this.state={_label:""}}validateLabel(t){l(this,"_label",t)}validateLevel(t){e(this,t)}validateOverline(t){l(this,"_overline",t)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateOverline(this._overline)}render(){return s(i,null,this.renderHeadline(this.state._label,this.state._level),this.state._overline&&s("span",{class:"overline"},this.state._overline))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_overline:["validateOverline"]}}},h=class{constructor(s){t(this,s),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 t,e,l,a;const r="string"==typeof this._error&&this._error.length>0&&!0===this._touched,n="string"==typeof this._hint&&this._hint.length>0,o=!0===this._hideLabel&&!0!==this._required;return s(i,{class:{disabled:!0===this._disabled,error:!0===r,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched}},!1===this._renderNoLabel&&s("label",{id:`${this._id}-label`,hidden:o,htmlFor:this._id},s("span",null,s("slot",{name:"label"}))),n&&s("span",{class:"hint",id:`${this._id}-hint`},this._hint),s("div",{class:{input:!0,"icon-left":"object"==typeof(null===(t=this._icon)||void 0===t?void 0:t.left),"icon-right":"object"==typeof(null===(e=this._icon)||void 0===e?void 0:e.right)}},s("div",{class:"icons"},(null===(l=this._icon)||void 0===l?void 0:l.left)?s("kol-icon",{_ariaLabel:"",_icon:this._icon.left.icon}):s("i",null),(null===(a=this._icon)||void 0===a?void 0:a.right)?s("kol-icon",{_ariaLabel:"",_icon:this._icon.right.icon}):s("i",null)),s("slot",{name:"input"}),"object"==typeof this._smartButton&&null!==this._smartButton&&s("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})),r&&s("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&&s("datalist",{id:`${this._id}-list`},this._list.map((t=>s("option",{value:t})))))}};export{a as kol_heading_wc,h as kol_input};
+import{r as s,h as t,H as i}from"./index-50adf9a0.js";import{w as e}from"./prop.validators-769a843a.js";import{w as l}from"./validation-d9821b54.js";import"./index-676dbf61.js";import"./a11y.tipps-5cdbd5e2.js";import"./dev.utils-05f4e663.js";import"./reuse-56bb5a4b.js";const a=class{constructor(e){s(this,e),this.renderHeadline=(e,i)=>{switch(i){case 1:return t("h1",{class:"headline"},e,t("slot",null));case 2:return t("h2",{class:"headline"},e,t("slot",null));case 3:return t("h3",{class:"headline"},e,t("slot",null));case 4:return t("h4",{class:"headline"},e,t("slot",null));case 5:return t("h5",{class:"headline"},e,t("slot",null));case 6:return t("h6",{class:"headline"},e,t("slot",null));default:return t("strong",{class:"headline"},e,t("slot",null))}},this.renderSecondaryHeadline=(e,i)=>{switch(i){case 1:return t("h1",{class:"secondary-headline"},e);case 2:return t("h2",{class:"secondary-headline"},e);case 3:return t("h3",{class:"secondary-headline"},e);case 4:return t("h4",{class:"secondary-headline"},e);case 5:return t("h5",{class:"secondary-headline"},e);case 6:return t("h6",{class:"secondary-headline"},e);default:return t("strong",{class:"secondary-headline"},e)}},this._headline=void 0,this._level=1,this._secondaryHeadline=void 0,this.state={_headline:"…",_level:1}}validateHeadline(t){e(this,"_headline",t)}validateLevel(t){l(this,t)}validateSecondaryHeadline(t){e(this,"_secondaryHeadline",t)}componentWillLoad(){this.validateHeadline(this._headline),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline)}render(){return t(i,null,"string"==typeof this.state._secondaryHeadline&&this.state._secondaryHeadline.length>0?t("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"]}}},n=class{constructor(t){s(this,t),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,s,a,l;const n="string"==typeof this._error&&this._error.length>0&&!0===this._touched,r="string"==typeof this._hint&&this._hint.length>0,d=!0===this._hideLabel&&!0!==this._required;return t(i,{class:{disabled:!0===this._disabled,error:!0===n,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched}},!1===this._renderNoLabel&&t("label",{id:`${this._id}-label`,hidden:d,htmlFor:this._id},t("span",null,t("slot",{name:"label"}))),r&&t("span",{class:"hint",id:`${this._id}-hint`},this._hint),t("div",{class:{input:!0,"icon-left":"object"==typeof(null===(e=this._icon)||void 0===e?void 0:e.left),"icon-right":"object"==typeof(null===(s=this._icon)||void 0===s?void 0:s.right)}},t("div",{class:"icons"},(null===(a=this._icon)||void 0===a?void 0:a.left)?t("kol-icon",{_ariaLabel:"",_icon:this._icon.left.icon}):t("i",null),(null===(l=this._icon)||void 0===l?void 0:l.right)?t("kol-icon",{_ariaLabel:"",_icon:this._icon.right.icon}):t("i",null)),t("slot",{name:"input"}),"object"==typeof this._smartButton&&null!==this._smartButton&&t("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})),n&&t("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&&t("datalist",{id:`${this._id}-list`},this._list.map((e=>t("option",{value:e})))))}};export{a as kol_heading_wc,n as kol_input};

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

@@ -1 +1 @@
-{"version":3,"names":["KolHeadingWc","this","renderHeadline","label","level","h","class","_label","validateLabel","value","watchString","validateLevel","watchHeadingLevel","validateOverline","componentWillLoad","_level","_overline","render","Host","state","KolInput","hasError","_error","length","_touched","hasHint","_hint","hideLabel","_hideLabel","_required","disabled","_disabled","error","_readOnly","required","touched","_renderNoLabel","id","_id","hidden","htmlFor","name","input","_a","_icon","left","_b","right","_c","_ariaLabel","icon","_d","_smartButton","_customClass","_iconOnly","_on","_tooltipAlign","_variant","_alert","_type","Array","isArray","_list","map","option"],"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 { watchHeadingLevel } from './validation';\nimport { watchString } from '../../utils/prop.validators';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tlabel: string;\n};\ntype OptionalProps = {\n\toverline: 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@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 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 Überschrift an.\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Gibt den Text der zusätzlichen Beschriftung an.\n\t */\n\t@Prop() public _overline?: string = '';\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_label: '',\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\twatchString(this, '_label', 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 (@Watch)\n\t */\n\t@Watch('_overline')\n\tpublic validateOverline(value?: string): void {\n\t\twatchString(this, '_overline', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOverline(this._overline);\n\t}\n\n\tprivate readonly renderHeadline = (label: string, level?: HeadingLevel): 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{label}\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{label}\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{label}\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{label}\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{label}\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{label}\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{label}\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\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.renderHeadline(this.state._label, this.state._level)}\n\t\t\t\t{this.state._overline && <span class=\"overline\">{this.state._overline}</span>}\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"],"mappings":"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"}
+{"version":3,"names":["KolHeadingWc","this","renderHeadline","headline","level","h","class","renderSecondaryHeadline","_headline","_level","validateHeadline","value","watchString","validateLevel","watchHeadingLevel","validateSecondaryHeadline","componentWillLoad","_secondaryHeadline","render","Host","state","length","KolInput","hasError","_error","_touched","hasHint","_hint","hideLabel","_hideLabel","_required","disabled","_disabled","error","_readOnly","required","touched","_renderNoLabel","id","_id","hidden","htmlFor","name","input","_a","_icon","left","_b","right","_c","_ariaLabel","icon","_d","_smartButton","_customClass","_iconOnly","_label","_on","_tooltipAlign","_variant","_alert","_type","Array","isArray","_list","map","option"],"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"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as o,h as i}from"./index-50adf9a0.js";const r=":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{font-family:inherit;font-size:inherit}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}:host{display:inline-block}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:inherit}*{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}a.icon-only>kol-span-wc>span>span,button.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}",n=class{constructor(i){o(this,i),this._level=void 0,this._label=void 0,this._overline=""}render(){return i("kol-heading-wc",{_label:this._label,_level:this._level,_overline:this._overline},i("slot",null))}};n.style={default:r};export{n as kol_heading};
+import{r as o,h as i}from"./index-50adf9a0.js";const r=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-black:#000;--kolibri-color-white:#fff;--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}:host{display:inline-flex}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;width:100%}kol-icon.external-link-icon{display:inline-flex}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}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{display:contents;padding:0 var(--kolibri-spacing)}a,button,input,select,textarea{appearance:none;cursor:pointer;font-family:var(--kolibri-font-family)}.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}",l=class{constructor(i){o(this,i),this._headline=void 0,this._level=void 0,this._secondaryHeadline=void 0}render(){return i("kol-heading-wc",{_headline:this._headline,_level:this._level,_secondaryHeadline:this._secondaryHeadline},i("slot",null))}};l.style={default:r};export{l as kol_heading};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolHeading","render","h","_label","this","_level","_overline"],"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 _label={this._label} _level={this._level} _overline={this._overline}>\n\t\t\t\t<slot />\n\t\t\t</kol-heading-wc>\n\t\t);\n\t}\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 Überschrift an.\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Gibt den Text der zusätzlichen Beschriftung an.\n\t */\n\t@Prop() public _overline?: string = '';\n}\n"],"mappings":";;;+CAAA,MAAMA,EAAkB,snD,MCYXC,EAAU,M,oFAsBc,E,CArB7BC,SACN,OACCC,EAAA,kBAAgBC,OAAQC,KAAKD,OAAQE,OAAQD,KAAKC,OAAQC,UAAWF,KAAKE,WACzEJ,EAAA,a"}
+{"version":3,"names":["defaultStyleCss","KolHeading","render","h","_headline","this","_level","_secondaryHeadline"],"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"],"mappings":";;;+CAAA,MAAMA,EAAkB,giD,MCYXC,EAAU,M,0GACfC,SACN,OACCC,EAAA,kBAAgBC,UAAWC,KAAKD,UAAWE,OAAQD,KAAKC,OAAQC,mBAAoBF,KAAKE,oBACxFJ,EAAA,a"}

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

@@ -1 +1 @@
-{"version":3,"names":["KolIconIcofont","render","h","exportparts","this","_part","_ariaLabel","_icon","undefined"],"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};\nexport 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"],"mappings":";;;qDAwBaA,EAAc,M,6FACnBC,SACN,OACCC,EAAA,YACCC,YAAa,cAAcC,KAAKC,QAAU,SAAW,IAAID,KAAKC,QAAU,KACxEC,WAAYF,KAAKE,WACjBC,aAAcH,KAAKG,QAAU,SAAW,WAAWH,KAAKG,QAAWC,UACnEH,MAAOD,KAAKC,O"}
+{"version":3,"names":["KolIconIcofont","render","h","exportparts","this","_part","_ariaLabel","_icon","undefined"],"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"],"mappings":";;;qDAwBaA,EAAc,M,6FACnBC,SACN,OACCC,EAAA,YACCC,YAAa,cAAcC,KAAKC,QAAU,SAAW,IAAID,KAAKC,QAAU,KACxEC,WAAYF,KAAKE,WACjBC,aAAcH,KAAKG,QAAU,SAAW,WAAWH,KAAKG,QAAWC,UACnEH,MAAOD,KAAKC,O"}