@public-ui/components 1.6.0-rc.3 → 1.6.0-rc.4

package/dist/components/kol-span.js.map

@@ -1 +1 @@
-{"file":"kol-span.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,srBAAsrB;;MCajsBA,SAAO;;;;;sBAYoC,KAAK;;qBAWN,KAAK;;;EAtBpD,MAAM;IACZ,QACC,mBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAC/E,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC5B,EACb;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolSpan"],"sources":["./src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","./src/components/span/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n","import { Component, h, JSX, Prop } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _hideLabel={this._hideLabel} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"version":3}
+{"file":"kol-span.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,srBAAsrB;;MCajsBA,SAAO;;;;;sBAYoC,KAAK;;;;;EAXrD,MAAM;IACZ,QACC,mBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAC/E,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC5B,EACb;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolSpan"],"sources":["./src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","./src/components/span/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n","import { Component, h, JSX, Prop } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _hideLabel={this._hideLabel} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"version":3}

package/dist/components/kol-split-button.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{w as watchString,B as a11yHintDisabled,l as watchBoolean,q as setState}from"./prop.validators.js";import{v as validateAriaLabelWithLabel,a as validateHideLabel,c as validateLabelWithAriaLabel,d as defineCustomElement$3}from"./component3.js";import{v as validateTabIndex}from"./tab-index.js";import{w as watchTooltipAlignment,d as defineCustomElement$2}from"./component.js";import{v as validateAriaExpanded,a as validateDisabled,b as watchButtonType,w as watchButtonVariant,d as defineCustomElement$5}from"./component5.js";import{d as defineCustomElement$4}from"./component2.js";import{v as validateAriaCurrent,a as validateAriaSelected}from"./aria-selected.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:flex;position:relative}.main-button{flex-grow:1;text-align:left}.main-button kol-span-wc{place-items:start}.secondary-button button{height:100%}.horizontal-line{background-color:rgba(0, 0, 0, 0.2);border-radius:2px;height:70%;margin-block:auto;width:1px}.popover{height:0;left:0;min-width:100%;overflow:hidden;position:absolute;top:100%;transition:height 0.3s ease-in-out}.popover-content{inset:0 0 auto 0;min-width:100%;position:absolute}",KolSplitButton$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.clickHandler=t=>{"function"==typeof this.state._on.onClick?this.state._on.onClick(t):this.toggleDropdown()},this.openDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height=`${this.dropdownContent.clientHeight}px`,this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!0}))},this.closeDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height="",this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!1}))},this.toggleDropdown=t=>{("boolean"==typeof t?t:!this.state._showDropdown)?this.openDropdown():this.closeDropdown()},this.forceCounter=100,this.forceOpenDropdown=()=>{var t;this.forceCounter>0&&((null===(t=this.dropdownContent)||void 0===t?void 0:t.clientHeight)?this.openDropdown():setTimeout(this.forceOpenDropdown,10),this.forceCounter--)},this.catchDropdownElements=t=>{t&&(this.dropdown=t,setTimeout((()=>{this.dropdownContent=t.firstChild,this._showDropdown&&this.forceOpenDropdown()})))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._iconOnly=!1,this._label=void 0,this._on=void 0,this._role=void 0,this._showDropdown=!1,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icon:"",_label:"",_on:{},_showDropdown:!1}}render(){return h(Host,null,h("kol-button-wc",{class:{"main-button":!0,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,_hideLabel:this._hideLabel,_label:this._label,_on:{onClick:this.clickHandler},_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),h("div",{class:"horizontal-line"}),h("kol-button-wc",{class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icon:"codicon codicon-triangle-down",_label:"dropdown "+(this.state._showDropdown?"schließen":"öffnen"),_on:{onClick:()=>this.toggleDropdown()}}),h("div",{class:"popover",ref:this.catchDropdownElements},h("div",{class:"popover-content"},h("slot",null))))}validateAccessKey(t){watchString(this,"_accessKey",t)}validateAriaControls(t){watchString(this,"_ariaControls",t)}validateAriaCurrent(t){validateAriaCurrent(this,t)}validateAriaExpanded(t){validateAriaExpanded(this,t)}validateAriaLabel(t){validateAriaLabelWithLabel(this,t)}validateAriaSelected(t){validateAriaSelected(this,t)}validateCustomClass(t){watchString(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){validateDisabled(this,t),t&&a11yHintDisabled()}validateHideLabel(t){validateHideLabel(this,t)}validateIcon(t){watchString(this,"_icon",t)}validateIconOnly(t){this.validateHideLabel(t)}validateLabel(t){validateLabelWithAriaLabel(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){watchString(this,"_role",t)}validateShowDropdown(t){watchBoolean(this,"_showDropdown",t),this.toggleDropdown(t)}validateTabIndex(t){validateTabIndex(this,t)}validateTooltipAlign(t){watchTooltipAlignment(this,"_tooltipAlign",t)}validateType(t){watchButtonType(this,"_type",t)}validateValue(t){setState(this,"_value",t)}validateVariant(t){watchButtonVariant(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcon(this._icon),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateShowDropdown(this._showDropdown),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_showDropdown:["validateShowDropdown"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-split-button",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[516,"_aria-expanded"],_ariaLabel:[1025,"_aria-label"],_ariaSelected:[516,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[516],_hideLabel:[516,"_hide-label"],_icon:[1],_iconOnly:[516,"_icon-only"],_label:[1025],_on:[16],_role:[1],_showDropdown:[1540,"_show-dropdown"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[16],_variant:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-split-button","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-split-button":customElements.get(t)||customElements.define(t,KolSplitButton$1);break;case"kol-button-wc":customElements.get(t)||defineCustomElement$5();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const KolSplitButton=KolSplitButton$1,defineCustomElement=defineCustomElement$1;export{KolSplitButton,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{w as watchString,B as a11yHintDisabled,l as watchBoolean,q as setState}from"./prop.validators.js";import{v as validateAriaLabelWithLabel,a as validateHideLabel,c as validateLabelWithAriaLabel,d as defineCustomElement$3}from"./component3.js";import{v as validateTabIndex}from"./tab-index.js";import{w as watchTooltipAlignment,d as defineCustomElement$2}from"./component.js";import{v as validateAriaExpanded,a as validateDisabled,b as watchButtonType,w as watchButtonVariant,d as defineCustomElement$5}from"./component5.js";import{d as defineCustomElement$4}from"./component2.js";import{v as validateAriaCurrent,a as validateAriaSelected}from"./aria-selected.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:flex;position:relative}.main-button{flex-grow:1;text-align:left}.main-button kol-span-wc{place-items:start}.secondary-button button{height:100%}.horizontal-line{background-color:rgba(0, 0, 0, 0.2);border-radius:2px;height:70%;margin-block:auto;width:1px}.popover{height:0;left:0;min-width:100%;overflow:hidden;position:absolute;top:100%;transition:height 0.3s ease-in-out}.popover-content{inset:0 0 auto 0;min-width:100%;position:absolute}",KolSplitButton$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.clickHandler=t=>{"function"==typeof this.state._on.onClick?this.state._on.onClick(t):this.toggleDropdown()},this.openDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height=`${this.dropdownContent.clientHeight}px`,this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!0}))},this.closeDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height="",this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!1}))},this.toggleDropdown=t=>{("boolean"==typeof t?t:!this.state._showDropdown)?this.openDropdown():this.closeDropdown()},this.forceCounter=100,this.forceOpenDropdown=()=>{var t;this.forceCounter>0&&((null===(t=this.dropdownContent)||void 0===t?void 0:t.clientHeight)?this.openDropdown():setTimeout(this.forceOpenDropdown,10),this.forceCounter--)},this.catchDropdownElements=t=>{t&&(this.dropdown=t,setTimeout((()=>{this.dropdownContent=t.firstChild,this._showDropdown&&this.forceOpenDropdown()})))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._showDropdown=!1,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icon:"",_label:"",_on:{},_showDropdown:!1}}render(){return h(Host,null,h("kol-button-wc",{class:{"main-button":!0,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,_hideLabel:this._hideLabel,_label:this._label,_on:{onClick:this.clickHandler},_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),h("div",{class:"horizontal-line"}),h("kol-button-wc",{class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icon:"codicon codicon-triangle-down",_label:"dropdown "+(this.state._showDropdown?"schließen":"öffnen"),_on:{onClick:()=>this.toggleDropdown()}}),h("div",{class:"popover",ref:this.catchDropdownElements},h("div",{class:"popover-content"},h("slot",null))))}validateAccessKey(t){watchString(this,"_accessKey",t)}validateAriaControls(t){watchString(this,"_ariaControls",t)}validateAriaCurrent(t){validateAriaCurrent(this,t)}validateAriaExpanded(t){validateAriaExpanded(this,t)}validateAriaLabel(t){validateAriaLabelWithLabel(this,t)}validateAriaSelected(t){validateAriaSelected(this,t)}validateCustomClass(t){watchString(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){validateDisabled(this,t),t&&a11yHintDisabled()}validateHideLabel(t){validateHideLabel(this,t)}validateIcon(t){watchString(this,"_icon",t)}validateIconOnly(t){this.validateHideLabel(t)}validateLabel(t){validateLabelWithAriaLabel(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){watchString(this,"_role",t)}validateShowDropdown(t){watchBoolean(this,"_showDropdown",t),this.toggleDropdown(t)}validateTabIndex(t){validateTabIndex(this,t)}validateTooltipAlign(t){watchTooltipAlignment(this,"_tooltipAlign",t)}validateType(t){watchButtonType(this,"_type",t)}validateValue(t){setState(this,"_value",t)}validateVariant(t){watchButtonVariant(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcon(this._icon),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateShowDropdown(this._showDropdown),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_showDropdown:["validateShowDropdown"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-split-button",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[516,"_aria-expanded"],_ariaLabel:[1025,"_aria-label"],_ariaSelected:[516,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[516],_hideLabel:[516,"_hide-label"],_icon:[1],_iconOnly:[516,"_icon-only"],_label:[1025],_on:[16],_role:[1],_showDropdown:[1540,"_show-dropdown"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[16],_variant:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-split-button","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-split-button":customElements.get(t)||customElements.define(t,KolSplitButton$1);break;case"kol-button-wc":customElements.get(t)||defineCustomElement$5();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const KolSplitButton=KolSplitButton$1,defineCustomElement=defineCustomElement$1;export{KolSplitButton,defineCustomElement};

package/dist/components/kol-split-button.js.map

@@ -1 +1 @@
-{"file":"kol-split-button.js","mappings":"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","names":["KolSplitButton"],"sources":["./src/components/split-button/style.css?tag=kol-split-button&mode=default&encapsulation=shadow","./src/components/split-button/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host {\n\tdisplay: flex;\n\tposition: relative;\n}\n.main-button {\n\tflex-grow: 1;\n\ttext-align: left;\n}\n.main-button kol-span-wc {\n\tplace-items: start;\n}\n.secondary-button button {\n\theight: 100%;\n}\n.horizontal-line {\n\tbackground-color: rgba(0, 0, 0, 0.2);\n\tborder-radius: 2px;\n\theight: 70%;\n\tmargin-block: auto;\n\twidth: 1px;\n}\n/* popover */\n.popover {\n\theight: 0;\n\tleft: 0;\n\tmin-width: 100%;\n\toverflow: hidden;\n\tposition: absolute;\n\ttop: 100%;\n\ttransition: height 0.3s ease-in-out;\n}\n.popover-content {\n\tinset: 0 0 auto 0;\n\tmin-width: 100%;\n\tposition: absolute;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { API, KoliBriSplitButtonCallback, States } from './types';\nimport { setState, watchBoolean, watchString } from '../../utils/prop.validators';\nimport { Align, AriaCurrent, validateAriaCurrent, validateAriaExpanded, validateAriaSelected, validateDisabled, validateHideLabel } from '../../types/props';\nimport { validateAriaLabelWithLabel, validateLabelWithAriaLabel } from '../../types/props/label';\nimport { a11yHintDisabled } from '../../utils/a11y.tipps';\nimport { validateTabIndex } from '../../utils/validators/tab-index';\nimport { AlternativButtonLinkRole, KoliBriButtonType, KoliBriButtonVariant, watchTooltipAlignment } from '../../types/button-link';\nimport { watchButtonType, watchButtonVariant } from '../button/controller';\nimport { Stringified } from '../../types/common';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in das dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSplitButton implements API {\n\tprivate dropdown: HTMLDivElement | undefined;\n\tprivate dropdownContent: HTMLDivElement | undefined;\n\n\tprivate readonly clickHandler = (e: Event) => {\n\t\tif (typeof this.state._on.onClick === 'function') this.state._on.onClick(e);\n\t\telse this.toggleDropdown();\n\t};\n\n\tprivate readonly openDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = `${this.dropdownContent.clientHeight}px`;\n\t\t\tthis.state = { ...this.state, _showDropdown: true };\n\t\t}\n\t};\n\tprivate readonly closeDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = ``;\n\t\t\tthis.state = { ...this.state, _showDropdown: false };\n\t\t}\n\t};\n\tprivate readonly toggleDropdown = (value?: boolean) => {\n\t\tconst openIt = typeof value === 'boolean' ? value : !this.state._showDropdown;\n\t\tif (openIt) this.openDropdown();\n\t\telse this.closeDropdown();\n\t};\n\tprivate forceCounter = 100; // because the dropdown could be empty\n\tprivate readonly forceOpenDropdown = () => {\n\t\tif (this.forceCounter > 0) {\n\t\t\tif (this.dropdownContent?.clientHeight) this.openDropdown();\n\t\t\telse setTimeout(this.forceOpenDropdown, 10);\n\t\t\tthis.forceCounter--;\n\t\t}\n\t};\n\n\tprivate readonly catchDropdownElements = (e?: HTMLDivElement | null) => {\n\t\tif (e) {\n\t\t\tthis.dropdown = e;\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.dropdownContent = e.firstChild as HTMLDivElement;\n\t\t\t\tif (this._showDropdown) this.forceOpenDropdown();\n\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<kol-button-wc\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'main-button': true,\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_hideLabel={this._hideLabel}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={{ onClick: this.clickHandler }}\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></kol-button-wc>\n\t\t\t\t<div class=\"horizontal-line\"></div>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass=\"secondary-button\"\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_icon=\"codicon codicon-triangle-down\"\n\t\t\t\t\t_label={`dropdown ${this.state._showDropdown ? 'schließen' : 'öffnen'}`}\n\t\t\t\t\t_on={{ onClick: () => this.toggleDropdown() }}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"popover\" ref={this.catchDropdownElements}>\n\t\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente 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 das interaktive Element der Komponente 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 das interaktive Element in der Komponente 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 * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. 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 * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: string;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\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?: { onClick: KoliBriSplitButtonCallback };\n\n\t/**\n\t * Gibt die Rolle des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt die Rolle des primären Elements in der Komponente an.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _showDropdown?: boolean = false;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente 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 bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/**\n\t * Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.\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 Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n\n\t@State() public state: States = {\n\t\t_icon: '',\n\t\t_label: '',\n\t\t_on: {},\n\t\t_showDropdown: false,\n\t};\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\twatchString(this, '_accessKey', value);\n\t}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\twatchString(this, '_ariaControls', value);\n\t}\n\n\t@Watch('_ariaCurrent')\n\tpublic validateAriaCurrent(value?: AriaCurrent): void {\n\t\tvalidateAriaCurrent(this, value);\n\t}\n\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: boolean): void {\n\t\tvalidateAriaExpanded(this, value);\n\t}\n\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tvalidateAriaLabelWithLabel(this, value);\n\t}\n\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: boolean): void {\n\t\tvalidateAriaSelected(this, value);\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: string): void {\n\t\twatchString(this, '_customClass', value, { defaultValue: undefined });\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tvalidateDisabled(this, value);\n\t\tif (value) a11yHintDisabled();\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: string): void {\n\t\twatchString(this, '_icon', value);\n\t}\n\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\tthis.validateHideLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tvalidateLabelWithAriaLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: { onClick: KoliBriSplitButtonCallback }): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_role')\n\tpublic validateRole(value?: AlternativButtonLinkRole): void {\n\t\twatchString(this, '_role', value);\n\t}\n\n\t@Watch('_showDropdown')\n\tpublic validateShowDropdown(value?: boolean): void {\n\t\twatchBoolean(this, '_showDropdown', value);\n\t\tthis.toggleDropdown(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this, value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Align): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriButtonType): void {\n\t\twatchButtonType(this, '_type', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown>): void {\n\t\tsetState(this, '_value', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriButtonVariant): void {\n\t\twatchButtonVariant(this, '_variant', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\n\t\tthis.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaCurrent(this._ariaCurrent);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHideLabel(this._hideLabel || this._iconOnly);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateShowDropdown(this._showDropdown);\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"],"version":3}
+{"file":"kol-split-button.js","mappings":"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","names":["KolSplitButton"],"sources":["./src/components/split-button/style.css?tag=kol-split-button&mode=default&encapsulation=shadow","./src/components/split-button/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host {\n\tdisplay: flex;\n\tposition: relative;\n}\n.main-button {\n\tflex-grow: 1;\n\ttext-align: left;\n}\n.main-button kol-span-wc {\n\tplace-items: start;\n}\n.secondary-button button {\n\theight: 100%;\n}\n.horizontal-line {\n\tbackground-color: rgba(0, 0, 0, 0.2);\n\tborder-radius: 2px;\n\theight: 70%;\n\tmargin-block: auto;\n\twidth: 1px;\n}\n/* popover */\n.popover {\n\theight: 0;\n\tleft: 0;\n\tmin-width: 100%;\n\toverflow: hidden;\n\tposition: absolute;\n\ttop: 100%;\n\ttransition: height 0.3s ease-in-out;\n}\n.popover-content {\n\tinset: 0 0 auto 0;\n\tmin-width: 100%;\n\tposition: absolute;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { API, KoliBriSplitButtonCallback, States } from './types';\nimport { setState, watchBoolean, watchString } from '../../utils/prop.validators';\nimport { Align, AriaCurrent, validateAriaCurrent, validateAriaExpanded, validateAriaSelected, validateDisabled, validateHideLabel } from '../../types/props';\nimport { validateAriaLabelWithLabel, validateLabelWithAriaLabel } from '../../types/props/label';\nimport { a11yHintDisabled } from '../../utils/a11y.tipps';\nimport { validateTabIndex } from '../../utils/validators/tab-index';\nimport { AlternativButtonLinkRole, KoliBriButtonType, KoliBriButtonVariant, watchTooltipAlignment } from '../../types/button-link';\nimport { watchButtonType, watchButtonVariant } from '../button/controller';\nimport { Stringified } from '../../types/common';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in das dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSplitButton implements API {\n\tprivate dropdown: HTMLDivElement | undefined;\n\tprivate dropdownContent: HTMLDivElement | undefined;\n\n\tprivate readonly clickHandler = (e: Event) => {\n\t\tif (typeof this.state._on.onClick === 'function') this.state._on.onClick(e);\n\t\telse this.toggleDropdown();\n\t};\n\n\tprivate readonly openDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = `${this.dropdownContent.clientHeight}px`;\n\t\t\tthis.state = { ...this.state, _showDropdown: true };\n\t\t}\n\t};\n\tprivate readonly closeDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = ``;\n\t\t\tthis.state = { ...this.state, _showDropdown: false };\n\t\t}\n\t};\n\tprivate readonly toggleDropdown = (value?: boolean) => {\n\t\tconst openIt = typeof value === 'boolean' ? value : !this.state._showDropdown;\n\t\tif (openIt) this.openDropdown();\n\t\telse this.closeDropdown();\n\t};\n\tprivate forceCounter = 100; // because the dropdown could be empty\n\tprivate readonly forceOpenDropdown = () => {\n\t\tif (this.forceCounter > 0) {\n\t\t\tif (this.dropdownContent?.clientHeight) this.openDropdown();\n\t\t\telse setTimeout(this.forceOpenDropdown, 10);\n\t\t\tthis.forceCounter--;\n\t\t}\n\t};\n\n\tprivate readonly catchDropdownElements = (e?: HTMLDivElement | null) => {\n\t\tif (e) {\n\t\t\tthis.dropdown = e;\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.dropdownContent = e.firstChild as HTMLDivElement;\n\t\t\t\tif (this._showDropdown) this.forceOpenDropdown();\n\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<kol-button-wc\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'main-button': true,\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_hideLabel={this._hideLabel}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={{ onClick: this.clickHandler }}\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></kol-button-wc>\n\t\t\t\t<div class=\"horizontal-line\"></div>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass=\"secondary-button\"\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_icon=\"codicon codicon-triangle-down\"\n\t\t\t\t\t_label={`dropdown ${this.state._showDropdown ? 'schließen' : 'öffnen'}`}\n\t\t\t\t\t_on={{ onClick: () => this.toggleDropdown() }}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"popover\" ref={this.catchDropdownElements}>\n\t\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente 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 das interaktive Element der Komponente 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 das interaktive Element in der Komponente 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 * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. 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 * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: string;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\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?: { onClick: KoliBriSplitButtonCallback };\n\n\t/**\n\t * Gibt die Rolle des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt die Rolle des primären Elements in der Komponente an.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _showDropdown?: boolean = false;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente 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 bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/**\n\t * Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.\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 Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n\n\t@State() public state: States = {\n\t\t_icon: '',\n\t\t_label: '',\n\t\t_on: {},\n\t\t_showDropdown: false,\n\t};\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\twatchString(this, '_accessKey', value);\n\t}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\twatchString(this, '_ariaControls', value);\n\t}\n\n\t@Watch('_ariaCurrent')\n\tpublic validateAriaCurrent(value?: AriaCurrent): void {\n\t\tvalidateAriaCurrent(this, value);\n\t}\n\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: boolean): void {\n\t\tvalidateAriaExpanded(this, value);\n\t}\n\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tvalidateAriaLabelWithLabel(this, value);\n\t}\n\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: boolean): void {\n\t\tvalidateAriaSelected(this, value);\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: string): void {\n\t\twatchString(this, '_customClass', value, { defaultValue: undefined });\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tvalidateDisabled(this, value);\n\t\tif (value) a11yHintDisabled();\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: string): void {\n\t\twatchString(this, '_icon', value);\n\t}\n\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\tthis.validateHideLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tvalidateLabelWithAriaLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: { onClick: KoliBriSplitButtonCallback }): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_role')\n\tpublic validateRole(value?: AlternativButtonLinkRole): void {\n\t\twatchString(this, '_role', value);\n\t}\n\n\t@Watch('_showDropdown')\n\tpublic validateShowDropdown(value?: boolean): void {\n\t\twatchBoolean(this, '_showDropdown', value);\n\t\tthis.toggleDropdown(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this, value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Align): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriButtonType): void {\n\t\twatchButtonType(this, '_type', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown>): void {\n\t\tsetState(this, '_value', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriButtonVariant): void {\n\t\twatchButtonVariant(this, '_variant', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\n\t\tthis.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaCurrent(this._ariaCurrent);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHideLabel(this._hideLabel || this._iconOnly);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateShowDropdown(this._showDropdown);\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"],"version":3}

package/dist/components/shadow2.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{x as propagateFocus}from"./prop.validators.js";import{d as defineCustomElement$4}from"./component2.js";import{d as defineCustomElement$3}from"./component8.js";import{d as defineCustomElement$2}from"./component3.js";import{d as defineCustomElement$1}from"./component.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){align-items:baseline;display:inline-flex;place-items:center;text-align:left;text-decoration-line:underline}:is(a,button):is(:focus,:hover){text-decoration-thickness:0.2em}.hidden{display:none;visibility:hidden}.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}.skip:focus{background-color:#fff;left:unset;padding:1em;position:unset}kol-icon.external-link-icon{display:inline-flex}",KolLink=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.ref=e,propagateFocus(this.host,this.ref)},this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._disabled=!1,this._download=!1,this._hideLabel=!1,this._href=void 0,this._icon=void 0,this._iconAlign=void 0,this._iconOnly=!1,this._label=void 0,this._on=void 0,this._role=void 0,this._selector=void 0,this._stealth=!1,this._tabIndex=void 0,this._target=void 0,this._targetDescription="Der Link wird in einem neuen Tab geöffnet.",this._tooltipAlign="right",this._useCase="text"}render(){return h(Host,null,h("kol-link-wc",{ref:this.catchRef,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icon:this._icon,_iconAlign:this._iconAlign,_label:this._label,_on:this._on,_role:this._role,_selector:this._selector,_stealth:this._stealth,_tabIndex:this._tabIndex,_target:this._target,_targetDescription:this._targetDescription,_tooltipAlign:this._tooltipAlign,_useCase:this._useCase},h("slot",{name:"expert",slot:"expert"}),h("slot",{slot:"expert"})))}get host(){return this}static get style(){return{default:defaultStyleCss}}},[33,"kol-link",{_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[516,"_aria-expanded"],_ariaLabel:[1,"_aria-label"],_ariaSelected:[516,"_aria-selected"],_disabled:[516],_download:[8],_hideLabel:[516,"_hide-label"],_href:[1],_icon:[1],_iconAlign:[1,"_icon-align"],_iconOnly:[516,"_icon-only"],_label:[1],_on:[16],_role:[1],_selector:[1],_stealth:[516],_tabIndex:[2,"_tab-index"],_target:[1],_targetDescription:[1,"_target-description"],_tooltipAlign:[1,"_tooltip-align"],_useCase:[1,"_use-case"]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-link","kol-icon","kol-link-wc","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-link":customElements.get(e)||customElements.define(e,KolLink);break;case"kol-icon":customElements.get(e)||defineCustomElement$4();break;case"kol-link-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$2();break;case"kol-tooltip":customElements.get(e)||defineCustomElement$1()}}))}export{KolLink as K,defineCustomElement as d};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{x as propagateFocus}from"./prop.validators.js";import{d as defineCustomElement$4}from"./component2.js";import{d as defineCustomElement$3}from"./component8.js";import{d as defineCustomElement$2}from"./component3.js";import{d as defineCustomElement$1}from"./component.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){align-items:baseline;display:inline-flex;place-items:center;text-align:left;text-decoration-line:underline}:is(a,button):is(:focus,:hover){text-decoration-thickness:0.2em}.hidden{display:none;visibility:hidden}.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}.skip:focus{background-color:#fff;left:unset;padding:1em;position:unset}kol-icon.external-link-icon{display:inline-flex}",KolLink=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.ref=e,propagateFocus(this.host,this.ref)},this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._disabled=!1,this._download=!1,this._hideLabel=!1,this._href=void 0,this._icon=void 0,this._iconAlign=void 0,this._iconOnly=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._selector=void 0,this._stealth=!1,this._tabIndex=void 0,this._target=void 0,this._targetDescription="Der Link wird in einem neuen Tab geöffnet.",this._tooltipAlign="right",this._useCase="text"}render(){return h(Host,null,h("kol-link-wc",{ref:this.catchRef,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icon:this._icon,_iconAlign:this._iconAlign,_label:this._label,_on:this._on,_role:this._role,_selector:this._selector,_stealth:this._stealth,_tabIndex:this._tabIndex,_target:this._target,_targetDescription:this._targetDescription,_tooltipAlign:this._tooltipAlign,_useCase:this._useCase},h("slot",{name:"expert",slot:"expert"}),h("slot",{slot:"expert"})))}get host(){return this}static get style(){return{default:defaultStyleCss}}},[33,"kol-link",{_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[516,"_aria-expanded"],_ariaLabel:[1,"_aria-label"],_ariaSelected:[516,"_aria-selected"],_disabled:[516],_download:[8],_hideLabel:[516,"_hide-label"],_href:[1],_icon:[1],_iconAlign:[1,"_icon-align"],_iconOnly:[516,"_icon-only"],_label:[1],_on:[16],_role:[1],_selector:[1],_stealth:[516],_tabIndex:[2,"_tab-index"],_target:[1],_targetDescription:[1,"_target-description"],_tooltipAlign:[1,"_tooltip-align"],_useCase:[1,"_use-case"]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-link","kol-icon","kol-link-wc","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-link":customElements.get(e)||customElements.define(e,KolLink);break;case"kol-icon":customElements.get(e)||defineCustomElement$4();break;case"kol-link-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$2();break;case"kol-tooltip":customElements.get(e)||defineCustomElement$1()}}))}export{KolLink as K,defineCustomElement as d};

package/dist/components/shadow2.js.map

@@ -1 +1 @@
-{"file":"shadow2.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,+nCAA+nC;;MCe1oC,OAAO;;;;;IAIF,aAAQ,GAAG,CAAC,GAA0B;MACtD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;;;;;;qBAqEoD,KAAK;qBAKb,KAAK;sBAKI,KAAK;;;;qBAsBN,KAAK;;;;;oBA8BN,KAAK;;;8BAeb,4CAA4C;yBAKlD,OAAO;oBAON,MAAM;;EA5JvC,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,mBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAMvB,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,EAEzC,YAAM,IAAI,EAAC,QAAQ,GAAG,CACT,CACR,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/link/style.css?tag=kol-link&mode=default&encapsulation=shadow","./src/components/link/shadow.tsx"],"sourcesContent":["@import url(../link.css);\n","import { Generic } from '@a11y-ui/core';\nimport { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\nimport { AlternativButtonLinkRole, LinkOnCallbacks, LinkTarget, LinkUseCase, OptionalLinkProps, RequiredLinkProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { AriaCurrent, Align } from '../../types/props';\nimport { propagateFocus } from '../../utils/reuse';\n\n@Component({\n\ttag: 'kol-link',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLink implements Generic.Element.Members<RequiredLinkProps, OptionalLinkProps> {\n\t@Element() private readonly host?: HTMLKolLinkElement;\n\tprivate ref?: HTMLKolLinkWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-link-wc\n\t\t\t\t\tref={this.catchRef}\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_disabled={this._disabled}\n\t\t\t\t\t_download={this._download}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_href={this._href}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconAlign={this._iconAlign}\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_selector={this._selector}\n\t\t\t\t\t_stealth={this._stealth}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_target={this._target}\n\t\t\t\t\t_targetDescription={this._targetDescription}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_useCase={this._useCase}\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\"></slot>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<slot slot=\"expert\" />\n\t\t\t\t</kol-link-wc>\n\t\t\t</Host>\n\t\t);\n\t}\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 das interaktive Element der Komponente 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 das interaktive Element in der Komponente 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 * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. 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 * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.\n\t */\n\t@Prop() public _download?: boolean | string = false;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Gibt die Ziel-Url des Links an.\n\t */\n\t@Prop() public _href!: string;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Deprecated: Gibt an, ob das Icon links oder rechts von der Beschriftung angezeigt werden soll.\n\t *\n\t * @deprecated Wird durch das neue flexibleren Icon-Typ abgedeckt.\n\t */\n\t@Prop() public _iconAlign?: Align;\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für den Link an.\n\t * @deprecated\n\t */\n\t@Prop() public _on?: LinkOnCallbacks;\n\n\t/**\n\t * Gibt die Rolle des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.\n\t *\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\t@Prop() public _selector?: string;\n\n\t/**\n\t * Gibt an, ob der Link nur beim Fokus sichtbar ist.\n\t *\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\t@Prop({ reflect: true }) public _stealth?: boolean = false;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente 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 wo der Link geöffnet werden soll.\n\t */\n\t@Prop() public _target?: LinkTarget;\n\n\t/**\n\t * Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.\n\t */\n\t@Prop() public _targetDescription?: string = 'Der Link wird in einem neuen Tab geöffnet.';\n\n\t/**\n\t * Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'right';\n\n\t/**\n\t * Gibt den Verwendungsfall des Links an.\n\t *\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\t@Prop() public _useCase?: LinkUseCase = 'text';\n}\n"],"version":3}
+{"file":"shadow2.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,+nCAA+nC;;MCe1oC,OAAO;;;;;IAIF,aAAQ,GAAG,CAAC,GAA0B;MACtD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;;;;;;qBAqEoD,KAAK;qBAKb,KAAK;sBAKI,KAAK;;;;;;;;;oBAoDP,KAAK;;;8BAeb,4CAA4C;yBAKlD,OAAO;oBAON,MAAM;;EA5JvC,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,mBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAMvB,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,EAEzC,YAAM,IAAI,EAAC,QAAQ,GAAG,CACT,CACR,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/link/style.css?tag=kol-link&mode=default&encapsulation=shadow","./src/components/link/shadow.tsx"],"sourcesContent":["@import url(../link.css);\n","import { Generic } from '@a11y-ui/core';\nimport { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\nimport { AlternativButtonLinkRole, LinkOnCallbacks, LinkTarget, LinkUseCase, OptionalLinkProps, RequiredLinkProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { AriaCurrent, Align } from '../../types/props';\nimport { propagateFocus } from '../../utils/reuse';\n\n@Component({\n\ttag: 'kol-link',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLink implements Generic.Element.Members<RequiredLinkProps, OptionalLinkProps> {\n\t@Element() private readonly host?: HTMLKolLinkElement;\n\tprivate ref?: HTMLKolLinkWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-link-wc\n\t\t\t\t\tref={this.catchRef}\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_disabled={this._disabled}\n\t\t\t\t\t_download={this._download}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_href={this._href}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconAlign={this._iconAlign}\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_selector={this._selector}\n\t\t\t\t\t_stealth={this._stealth}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_target={this._target}\n\t\t\t\t\t_targetDescription={this._targetDescription}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_useCase={this._useCase}\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\"></slot>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<slot slot=\"expert\" />\n\t\t\t\t</kol-link-wc>\n\t\t\t</Host>\n\t\t);\n\t}\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 das interaktive Element der Komponente 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 das interaktive Element in der Komponente 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 * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. 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 * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.\n\t */\n\t@Prop() public _download?: boolean | string = false;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Gibt die Ziel-Url des Links an.\n\t */\n\t@Prop() public _href!: string;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Deprecated: Gibt an, ob das Icon links oder rechts von der Beschriftung angezeigt werden soll.\n\t *\n\t * @deprecated Wird durch das neue flexibleren Icon-Typ abgedeckt.\n\t */\n\t@Prop() public _iconAlign?: Align;\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für den Link an.\n\t * @deprecated\n\t */\n\t@Prop() public _on?: LinkOnCallbacks;\n\n\t/**\n\t * Gibt die Rolle des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.\n\t *\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\t@Prop() public _selector?: string;\n\n\t/**\n\t * Gibt an, ob der Link nur beim Fokus sichtbar ist.\n\t *\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\t@Prop({ reflect: true }) public _stealth?: boolean = false;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente 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 wo der Link geöffnet werden soll.\n\t */\n\t@Prop() public _target?: LinkTarget;\n\n\t/**\n\t * Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.\n\t */\n\t@Prop() public _targetDescription?: string = 'Der Link wird in einem neuen Tab geöffnet.';\n\n\t/**\n\t * Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'right';\n\n\t/**\n\t * Gibt den Verwendungsfall des Links an.\n\t *\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\t@Prop() public _useCase?: LinkUseCase = 'text';\n}\n"],"version":3}

package/dist/components/shadow3.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{x as propagateFocus}from"./prop.validators.js";import{d as defineCustomElement$4}from"./component5.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";import{d as defineCustomElement$1}from"./component.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){display:inline-flex;place-items:center;text-align:center;text-decoration-line:none}:is(a,button)>kol-span-wc{margin:auto;width:100%}:is(button):disabled{cursor:not-allowed;opacity:0.5}",KolButton=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._iconAlign=void 0,this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}render(){return h(Host,null,h("kol-button-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel||this._iconOnly,_icon:this._icon,_iconAlign:this._iconAlign,_id:this._id,_label:this._label,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},h("slot",{name:"expert",slot:"expert"})))}get host(){return this}static get style(){return{default:defaultStyleCss}}},[33,"kol-button",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[516,"_aria-expanded"],_ariaLabel:[1,"_aria-label"],_ariaSelected:[516,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[516],_hideLabel:[516,"_hide-label"],_icon:[1],_iconAlign:[1,"_icon-align"],_iconOnly:[516,"_icon-only"],_id:[1],_label:[1],_on:[16],_role:[1],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[16],_variant:[1]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-button","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-button":customElements.get(t)||customElements.define(t,KolButton);break;case"kol-button-wc":customElements.get(t)||defineCustomElement$4();break;case"kol-icon":customElements.get(t)||defineCustomElement$3();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$2();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$1()}}))}export{KolButton as K,defineCustomElement as d};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{x as propagateFocus}from"./prop.validators.js";import{d as defineCustomElement$4}from"./component5.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";import{d as defineCustomElement$1}from"./component.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){display:inline-flex;place-items:center;text-align:center;text-decoration-line:none}:is(a,button)>kol-span-wc{margin:auto;width:100%}:is(button):disabled{cursor:not-allowed;opacity:0.5}",KolButton=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._iconAlign=void 0,this._iconOnly=void 0,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}render(){return h(Host,null,h("kol-button-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel||this._iconOnly,_icon:this._icon,_iconAlign:this._iconAlign,_id:this._id,_label:this._label,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},h("slot",{name:"expert",slot:"expert"})))}get host(){return this}static get style(){return{default:defaultStyleCss}}},[33,"kol-button",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[516,"_aria-expanded"],_ariaLabel:[1,"_aria-label"],_ariaSelected:[516,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[516],_hideLabel:[516,"_hide-label"],_icon:[1],_iconAlign:[1,"_icon-align"],_iconOnly:[516,"_icon-only"],_id:[1],_label:[1],_on:[16],_role:[1],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[16],_variant:[1]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-button","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-button":customElements.get(t)||customElements.define(t,KolButton);break;case"kol-button-wc":customElements.get(t)||defineCustomElement$4();break;case"kol-icon":customElements.get(t)||defineCustomElement$3();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$2();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$1()}}))}export{KolButton as K,defineCustomElement as d};

package/dist/components/shadow3.js.map

@@ -1 +1 @@
-{"file":"shadow3.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,u5BAAu5B;;MCuBl6B,SAAS;;;;;IAIJ,aAAQ,GAAG,CAAC,GAA4B;MACxD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;;;;;;;;qBA6EoD,KAAK;sBAKJ,KAAK;;;qBAkBN,KAAK;;;;;;yBA8BpB,KAAK;iBAKD,QAAQ;;oBAUF,QAAQ;;EA/IlD,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,qBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAE;QACN,MAAM,EAAE,IAAI;QACZ,CAAC,IAAI,CAAC,QAAkB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ;QACrD,CAAC,IAAI,CAAC,YAAsB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;OAClI,EACD,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EAC7C,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC1B,CACV,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/button/style.css?tag=kol-button&mode=default&encapsulation=shadow","./src/components/button/shadow.tsx"],"sourcesContent":["@import url(../button.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tKoliBriButtonVariant,\n\tOptionalButtonProps,\n\tRequiredButtonProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { AriaCurrent, Align } from '../../types/props';\nimport { propagateFocus } from '../../utils/reuse';\n\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements Generic.Element.Members<RequiredButtonProps, OptionalButtonProps> {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel || this._iconOnly}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconAlign={this._iconAlign}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_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<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente 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 das interaktive Element der Komponente 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 das interaktive Element in der Komponente 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 * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. 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 * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Deprecated: Gibt an, ob das Icon links oder rechts von der Beschriftung angezeigt werden soll.\n\t *\n\t * @deprecated\n\t */\n\t@Prop() public _iconAlign?: Align;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\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 die Rolle des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente 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 bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/**\n\t * Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.\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 Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n}\n"],"version":3}
+{"file":"shadow3.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,u5BAAu5B;;MCuBl6B,SAAS;;;;;IAIJ,aAAQ,GAAG,CAAC,GAA4B;MACxD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;;;;;;;;qBA6EoD,KAAK;sBAKJ,KAAK;;;;;;;;;yBAgDrB,KAAK;iBAKD,QAAQ;;oBAUF,QAAQ;;EA/IlD,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,qBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAE;QACN,MAAM,EAAE,IAAI;QACZ,CAAC,IAAI,CAAC,QAAkB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ;QACrD,CAAC,IAAI,CAAC,YAAsB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;OAClI,EACD,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EAC7C,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC1B,CACV,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/button/style.css?tag=kol-button&mode=default&encapsulation=shadow","./src/components/button/shadow.tsx"],"sourcesContent":["@import url(../button.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tKoliBriButtonVariant,\n\tOptionalButtonProps,\n\tRequiredButtonProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { AriaCurrent, Align } from '../../types/props';\nimport { propagateFocus } from '../../utils/reuse';\n\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements Generic.Element.Members<RequiredButtonProps, OptionalButtonProps> {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel || this._iconOnly}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconAlign={this._iconAlign}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_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<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente 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 das interaktive Element der Komponente 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 das interaktive Element in der Komponente 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 * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. 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 * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Deprecated: Gibt an, ob das Icon links oder rechts von der Beschriftung angezeigt werden soll.\n\t *\n\t * @deprecated\n\t */\n\t@Prop() public _iconAlign?: Align;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean;\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\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 die Rolle des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente 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 bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/**\n\t * Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.\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 Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,H as Host}from"./index-6ad587d0.js";import{h as handleColorChange,v as validateColor}from"./color-abc2fa9c.js";import{f as featureHint,a as a11yHint}from"./a11y.tipps-2e27f8e6.js";import{o as objectObjectHandler,p as parseJson,s as setState}from"./prop.validators-f81af56e.js";import{n as nonce}from"./dev.utils-157f0499.js";import{v as validateLabel}from"./label-559ca626.js";import"./index-ff788b4b.js";import"./reuse-3a02afb9.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>span{display:inline-flex;place-items:center}:host>span>kol-button-wc button{color:inherit}";featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const KolBadge=class{constructor(t){registerInstance(this,t),this.bgColorStr="#000",this.colorStr="#fff",this.id=nonce(),this.handleColorChange=t=>{const a=handleColorChange(t);this.bgColorStr=a.backgroundColor,this.colorStr=a.foregroundColor},this._color="#000",this._hideLabel=!1,this._icon=void 0,this._iconOnly=!1,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"},_label:"…"}}render(){return h(Host,null,h("span",{class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},h("kol-span-wc",{id:this.id,_icon:this._icon,_hideLabel:this._hideLabel||this._iconOnly,_label:this.state._label}),"object"==typeof this.state._smartButton&&null!==this.state._smartButton&&h("kol-button-wc",{_ariaControls:this.id,_ariaLabel:this.state._smartButton._ariaLabel,_customClass:this.state._smartButton._customClass,_disabled:this.state._smartButton._disabled,_hideLabel:!0,_icon:this.state._smartButton._icon,_id:this.state._smartButton._id,_label:this.state._smartButton._label,_on:this.state._smartButton._on,_tooltipAlign:this.state._smartButton._tooltipAlign,_variant:this.state._smartButton._variant})))}validateColor(t){validateColor(this,t,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateLabel(t){validateLabel(this,t,{hooks:{afterPatch:t=>{"string"==typeof t&&t.length>32&&a11yHint(`[KolBadge] The label is too long for a badge (${t.length} > 32).`)}}})}validateSmartButton(t){objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}setState(this,"_smartButton",t)}))}componentWillLoad(){this.validateColor(this._color),this.validateLabel(this._label),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_label:["validateLabel"],_smartButton:["validateSmartButton"]}}};KolBadge.style={default:defaultStyleCss};export{KolBadge as kol_badge};
+import{r as registerInstance,h,H as Host}from"./index-6ad587d0.js";import{h as handleColorChange,v as validateColor}from"./color-abc2fa9c.js";import{f as featureHint,a as a11yHint}from"./a11y.tipps-2e27f8e6.js";import{o as objectObjectHandler,p as parseJson,s as setState}from"./prop.validators-f81af56e.js";import{n as nonce}from"./dev.utils-157f0499.js";import{v as validateLabel}from"./label-559ca626.js";import"./index-ff788b4b.js";import"./reuse-3a02afb9.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>span{display:inline-flex;place-items:center}:host>span>kol-button-wc button{color:inherit}";featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const KolBadge=class{constructor(t){registerInstance(this,t),this.bgColorStr="#000",this.colorStr="#fff",this.id=nonce(),this.handleColorChange=t=>{const a=handleColorChange(t);this.bgColorStr=a.backgroundColor,this.colorStr=a.foregroundColor},this._color="#000",this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"},_label:"…"}}render(){return h(Host,null,h("span",{class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},h("kol-span-wc",{id:this.id,_icon:this._icon,_hideLabel:this._hideLabel||this._iconOnly,_label:this.state._label}),"object"==typeof this.state._smartButton&&null!==this.state._smartButton&&h("kol-button-wc",{_ariaControls:this.id,_ariaLabel:this.state._smartButton._ariaLabel,_customClass:this.state._smartButton._customClass,_disabled:this.state._smartButton._disabled,_hideLabel:!0,_icon:this.state._smartButton._icon,_id:this.state._smartButton._id,_label:this.state._smartButton._label,_on:this.state._smartButton._on,_tooltipAlign:this.state._smartButton._tooltipAlign,_variant:this.state._smartButton._variant})))}validateColor(t){validateColor(this,t,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateLabel(t){validateLabel(this,t,{hooks:{afterPatch:t=>{"string"==typeof t&&t.length>32&&a11yHint(`[KolBadge] The label is too long for a badge (${t.length} > 32).`)}}})}validateSmartButton(t){objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}setState(this,"_smartButton",t)}))}componentWillLoad(){this.validateColor(this._color),this.validateLabel(this._label),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_label:["validateLabel"],_smartButton:["validateSmartButton"]}}};KolBadge.style={default:defaultStyleCss};export{KolBadge as kol_badge};

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

@@ -1 +1 @@
-{"file":"kol-badge.entry.js","mappings":"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","names":[],"sources":["./src/components/badge/style.css?tag=kol-badge&mode=default&encapsulation=shadow","./src/components/badge/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host > span {\n\tdisplay: inline-flex;\n\tplace-items: center;\n}\n:host > span > kol-button-wc button {\n\tcolor: inherit;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { ColorPair, handleColorChange, PropColor, validateColor } from '../../types/props/color';\nimport { a11yHint, featureHint } from '../../utils/a11y.tipps';\nimport { objectObjectHandler, parseJson, setState } from '../../utils/prop.validators';\nimport { PropHideLabel, validateLabel } from '../../types/props';\nimport { nonce } from '../../utils/dev.utils';\n\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\ntype RequiredProps = {\n\tlabel: string;\n};\ntype OptionalProps = {\n\tcolor: Stringified<PropColor>;\n\ticon: Stringified<KoliBriIconProp>;\n\t/**\n\t * @deprecated\n\t */\n\ticonOnly: boolean;\n\tsmartButton: Stringified<ButtonProps>;\n} & PropHideLabel;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tcolor: ColorPair;\n\tlabel: string;\n};\ntype OptionalStates = {\n\tsmartButton: ButtonProps;\n};\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements Props {\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-span-wc id={this.id} _icon={this._icon} _hideLabel={this._hideLabel || this._iconOnly} _label={this.state._label}></kol-span-wc>\n\t\t\t\t\t{typeof this.state._smartButton === 'object' && this.state._smartButton !== null && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t_ariaControls={this.id}\n\t\t\t\t\t\t\t_ariaLabel={this.state._smartButton._ariaLabel}\n\t\t\t\t\t\t\t_customClass={this.state._smartButton._customClass}\n\t\t\t\t\t\t\t_disabled={this.state._smartButton._disabled}\n\t\t\t\t\t\t\t_hideLabel={true}\n\t\t\t\t\t\t\t_icon={this.state._smartButton._icon}\n\t\t\t\t\t\t\t_id={this.state._smartButton._id}\n\t\t\t\t\t\t\t_label={this.state._smartButton._label}\n\t\t\t\t\t\t\t_on={this.state._smartButton._on}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._smartButton._tooltipAlign}\n\t\t\t\t\t\t\t_variant={this.state._smartButton._variant}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die Hintergrundfarbe.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: string;\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?: Stringified<ButtonProps>;\n\n\t@State() public state: States = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t\t_label: '…', // ⚠ required\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tconst colorPair = handleColorChange(value);\n\t\tthis.bgColorStr = colorPair.backgroundColor;\n\t\tthis.colorStr = colorPair.foregroundColor as string;\n\t};\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#000',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tvalidateLabel(this, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: (value) => {\n\t\t\t\t\tif (typeof value === 'string' && value.length > 32) {\n\t\t\t\t\t\ta11yHint(`[KolBadge] The label is too long for a badge (${value.length} > 32).`);\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateColor(this._color);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"],"version":3}
+{"file":"kol-badge.entry.js","mappings":"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","names":[],"sources":["./src/components/badge/style.css?tag=kol-badge&mode=default&encapsulation=shadow","./src/components/badge/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host > span {\n\tdisplay: inline-flex;\n\tplace-items: center;\n}\n:host > span > kol-button-wc button {\n\tcolor: inherit;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { ColorPair, handleColorChange, PropColor, validateColor } from '../../types/props/color';\nimport { a11yHint, featureHint } from '../../utils/a11y.tipps';\nimport { objectObjectHandler, parseJson, setState } from '../../utils/prop.validators';\nimport { PropHideLabel, validateLabel } from '../../types/props';\nimport { nonce } from '../../utils/dev.utils';\n\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\ntype RequiredProps = {\n\tlabel: string;\n};\ntype OptionalProps = {\n\tcolor: Stringified<PropColor>;\n\ticon: Stringified<KoliBriIconProp>;\n\t/**\n\t * @deprecated\n\t */\n\ticonOnly: boolean;\n\tsmartButton: Stringified<ButtonProps>;\n} & PropHideLabel;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tcolor: ColorPair;\n\tlabel: string;\n};\ntype OptionalStates = {\n\tsmartButton: ButtonProps;\n};\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements Props {\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-span-wc id={this.id} _icon={this._icon} _hideLabel={this._hideLabel || this._iconOnly} _label={this.state._label}></kol-span-wc>\n\t\t\t\t\t{typeof this.state._smartButton === 'object' && this.state._smartButton !== null && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t_ariaControls={this.id}\n\t\t\t\t\t\t\t_ariaLabel={this.state._smartButton._ariaLabel}\n\t\t\t\t\t\t\t_customClass={this.state._smartButton._customClass}\n\t\t\t\t\t\t\t_disabled={this.state._smartButton._disabled}\n\t\t\t\t\t\t\t_hideLabel={true}\n\t\t\t\t\t\t\t_icon={this.state._smartButton._icon}\n\t\t\t\t\t\t\t_id={this.state._smartButton._id}\n\t\t\t\t\t\t\t_label={this.state._smartButton._label}\n\t\t\t\t\t\t\t_on={this.state._smartButton._on}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._smartButton._tooltipAlign}\n\t\t\t\t\t\t\t_variant={this.state._smartButton._variant}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die Hintergrundfarbe.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: string;\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?: Stringified<ButtonProps>;\n\n\t@State() public state: States = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t\t_label: '…', // ⚠ required\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tconst colorPair = handleColorChange(value);\n\t\tthis.bgColorStr = colorPair.backgroundColor;\n\t\tthis.colorStr = colorPair.foregroundColor as string;\n\t};\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#000',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tvalidateLabel(this, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: (value) => {\n\t\t\t\t\tif (typeof value === 'string' && value.length > 32) {\n\t\t\t\t\t\ta11yHint(`[KolBadge] The label is too long for a badge (${value.length} > 32).`);\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateColor(this._color);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-6ad587d0.js";import{a as propagateFocus}from"./reuse-3a02afb9.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){align-items:baseline;display:inline-flex;place-items:center;text-align:left;text-decoration-line:underline}:is(a,button):is(:focus,:hover){text-decoration-thickness:0.2em}.hidden{display:none;visibility:hidden}.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}.skip:focus{background-color:#fff;left:unset;padding:1em;position:unset}kol-icon.external-link-icon{display:inline-flex}",KolButtonLink=class{constructor(i){registerInstance(this,i),this.catchRef=i=>{this.ref=i,propagateFocus(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=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}render(){return h(Host,null,h("kol-button-wc",{ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icon:this._icon,_hideLabel:this._hideLabel||this._iconOnly,_id:this._id,_label:this._label,_on:this._on,_role:"link",_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},h("slot",{name:"expert",slot:"expert"})))}get host(){return getElement(this)}};KolButtonLink.style={default:defaultStyleCss};export{KolButtonLink as kol_button_link};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-6ad587d0.js";import{a as propagateFocus}from"./reuse-3a02afb9.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){align-items:baseline;display:inline-flex;place-items:center;text-align:left;text-decoration-line:underline}:is(a,button):is(:focus,:hover){text-decoration-thickness:0.2em}.hidden{display:none;visibility:hidden}.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}.skip:focus{background-color:#fff;left:unset;padding:1em;position:unset}kol-icon.external-link-icon{display:inline-flex}",KolButtonLink=class{constructor(i){registerInstance(this,i),this.catchRef=i=>{this.ref=i,propagateFocus(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,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}render(){return h(Host,null,h("kol-button-wc",{ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icon:this._icon,_hideLabel:this._hideLabel||this._iconOnly,_id:this._id,_label:this._label,_on:this._on,_role:"link",_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},h("slot",{name:"expert",slot:"expert"})))}get host(){return getElement(this)}};KolButtonLink.style={default:defaultStyleCss};export{KolButtonLink as kol_button_link};

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

@@ -1 +1 @@
-{"file":"kol-button-link.entry.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,+nCAA+nC;;MCgB1oC,aAAa;;;IAIR,aAAQ,GAAG,CAAC,GAA4B;MACxD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;;;;;;;qBAgEoD,KAAK;sBAKJ,KAAK;;qBAWN,KAAK;;;;;;yBA8BpB,KAAK;iBAKD,QAAQ;;;EAjH5C,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,qBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EAC7C,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC1B,CACV,EACN;GACF;;;;;;;;;","names":[],"sources":["./src/components/button-link/style.css?tag=kol-button-link&mode=default&encapsulation=shadow","./src/components/button-link/component.tsx"],"sourcesContent":["@import url(../link.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { AlternativButtonLinkRole, KoliBriButtonCallbacks, KoliBriButtonType, OptionalButtonLinkProps, RequiredButtonLinkProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { propagateFocus } from '../../utils/reuse';\nimport { AriaCurrent, Align } from '../../types/props';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonLink implements Generic.Element.Members<RequiredButtonLinkProps, OptionalButtonLinkProps> {\n\t@Element() private readonly host?: HTMLKolButtonLinkElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\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_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_hideLabel={this._hideLabel || 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=\"link\"\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>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente 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 das interaktive Element der Komponente 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 das interaktive Element in der Komponente 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 * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. 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 * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\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 die Rolle des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente 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 bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/**\n\t * Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.\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"],"version":3}
+{"file":"kol-button-link.entry.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,+nCAA+nC;;MCgB1oC,aAAa;;;IAIR,aAAQ,GAAG,CAAC,GAA4B;MACxD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;;;;;;;qBAgEoD,KAAK;sBAKJ,KAAK;;;;;;;;yBAyCrB,KAAK;iBAKD,QAAQ;;;EAjH5C,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,qBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EAC7C,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC1B,CACV,EACN;GACF;;;;;;;;;","names":[],"sources":["./src/components/button-link/style.css?tag=kol-button-link&mode=default&encapsulation=shadow","./src/components/button-link/component.tsx"],"sourcesContent":["@import url(../link.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { AlternativButtonLinkRole, KoliBriButtonCallbacks, KoliBriButtonType, OptionalButtonLinkProps, RequiredButtonLinkProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { propagateFocus } from '../../utils/reuse';\nimport { AriaCurrent, Align } from '../../types/props';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonLink implements Generic.Element.Members<RequiredButtonLinkProps, OptionalButtonLinkProps> {\n\t@Element() private readonly host?: HTMLKolButtonLinkElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\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_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_hideLabel={this._hideLabel || 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=\"link\"\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>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente 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 das interaktive Element der Komponente 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 das interaktive Element in der Komponente 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 * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. 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 * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean;\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\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 die Rolle des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente 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 bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/**\n\t * Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.\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"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-6ad587d0.js";import{w as watchTooltipAlignment}from"./button-link-283b2d32.js";import{h as devWarning,g as a11yHintDisabled}from"./a11y.tipps-2e27f8e6.js";import{n as nonce}from"./dev.utils-157f0499.js";import{f as setEventTarget,j as mapStringOrBoolean2String,h as mapBoolean2String,w as watchString,a as watchValidator,b as watchBoolean,s as setState}from"./prop.validators-f81af56e.js";import{a as propagateFocus}from"./reuse-3a02afb9.js";import{v as validateIcon,w as watchIconAlign}from"./icon-83ced735.js";import{a as validateAriaLabelWithLabel,b as validateLabelWithAriaLabel}from"./label-559ca626.js";import{v as validateTabIndex}from"./tab-index-ff5374b8.js";import{p as propagateSubmitEventToForm,a as propagateResetEventToForm}from"./controller-cad0ac5e.js";import{a as watchButtonType,w as watchButtonVariant}from"./controller-ec771280.js";import{v as validateAriaExpanded,a as validateDisabled}from"./disabled-6200e69c.js";import{v as validateHideLabel}from"./hide-label-2baeb5c5.js";import{w as watchHeadingLevel}from"./validation-2cc1bb89.js";import"./index-ff788b4b.js";const KolButtonWc=class{constructor(a){registerInstance(this,a),this.nonce=nonce(),this.catchRef=a=>{this.ref=a,propagateFocus(this.host,this.ref)},this.onClick=a=>{var t,e;"submit"===this.state._type?propagateSubmitEventToForm({form:this.host,ref:this.ref}):"reset"===this.state._type?propagateResetEventToForm({form:this.host,ref:this.ref}):"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onClick)?(a.stopPropagation(),setEventTarget(a,this.ref),null===(e=this.state._on)||void 0===e||e.onClick(a,this.state._value)):devWarning("There was no button click callback configured! (_on.onClick)")},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._iconAlign=void 0,this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icon:{},_label:"…",_on:{},_type:"button",_variant:"normal"}}render(){return h(Host,null,h("button",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-current":mapStringOrBoolean2String(this.state._ariaCurrent),"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-label":!1===this.state._hideLabel?this.state._ariaLabel:void 0,"aria-labelledby":!0===this.state._hideLabel?this.nonce:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:{[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"icon-only":!0===this.state._hideLabel,"hide-label":!0===this.state._hideLabel},disabled:this.state._disabled,id:this.state._id},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),h("kol-span-wc",{_icon:this._icon,_hideLabel:this.state._hideLabel,_label:this.state._label},h("slot",{name:"expert",slot:"expert"}))),!0===this.state._hideLabel&&h("kol-tooltip",{"aria-hidden":"true",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._ariaLabel||this.state._label}))}validateAccessKey(a){watchString(this,"_accessKey",a)}validateAriaControls(a){watchString(this,"_ariaControls",a)}validateAriaCurrent(a){watchValidator(this,"_ariaControls",(a=>!0===a||"date"===a||"location"===a||"page"===a||"step"===a||"time"===a),new Set(["boolean","String {data, location, page, step, time}"]),a)}validateAriaExpanded(a){validateAriaExpanded(this,a)}validateAriaLabel(a){validateAriaLabelWithLabel(this,a)}validateAriaSelected(a){watchBoolean(this,"_ariaSelected",a)}validateCustomClass(a){watchString(this,"_customClass",a,{defaultValue:void 0})}validateDisabled(a){validateDisabled(this,a),!0===a&&a11yHintDisabled()}validateHideLabel(a){validateHideLabel(this,a)}validateIcon(a){validateIcon(this,a)}validateIconAlign(a){watchIconAlign(this,a)}validateIconOnly(a){this.validateHideLabel(a)}validateId(a){watchString(this,"_id",a)}validateLabel(a){validateLabelWithAriaLabel(this,a)}validateOn(a){"object"==typeof a&&null!==a&&(this.state=Object.assign(Object.assign({},this.state),{_on:a}))}validateRole(a){watchString(this,"_role",a)}validateTabIndex(a){validateTabIndex(this,a)}validateTooltipAlign(a){watchTooltipAlignment(this,"_tooltipAlign",a)}validateType(a){watchButtonType(this,"_type",a)}validateValue(a){setState(this,"_value",a)}validateVariant(a){watchButtonVariant(this,"_variant",a)}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.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcon(this._icon),this.validateIconAlign(this._iconAlign),this.validateId(this._id),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_id:["validateId"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}},KolHeadingWc=class{constructor(a){registerInstance(this,a),this.renderHeadline=(a,t)=>{switch(t){case 1:return h("h1",{class:"headline"},a,h("slot",null));case 2:return h("h2",{class:"headline"},a,h("slot",null));case 3:return h("h3",{class:"headline"},a,h("slot",null));case 4:return h("h4",{class:"headline"},a,h("slot",null));case 5:return h("h5",{class:"headline"},a,h("slot",null));case 6:return h("h6",{class:"headline"},a,h("slot",null));default:return h("strong",{class:"headline"},a,h("slot",null))}},this.renderSecondaryHeadline=(a,t)=>{switch(t){case 1:return h("span",{class:"secondary-headline"},a);case 2:return h("h2",{class:"secondary-headline"},a);case 3:return h("h3",{class:"secondary-headline"},a);case 4:return h("h4",{class:"secondary-headline"},a);case 5:return h("h5",{class:"secondary-headline"},a);case 6:return h("h6",{class:"secondary-headline"},a);default:return h("strong",{class:"secondary-headline"},a)}},this._label=void 0,this._level=1,this._secondaryHeadline=void 0,this.state={_label:"…",_level:1}}validateLabel(a){watchString(this,"_label",a)}validateLevel(a){watchHeadingLevel(this,a)}validateSecondaryHeadline(a){watchString(this,"_secondaryHeadline",a)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline)}render(){return h(Host,null,"string"==typeof this.state._secondaryHeadline&&this.state._secondaryHeadline.length>0?h("hgroup",null,this.renderHeadline(this.state._label,this.state._level),this.state._secondaryHeadline&&this.renderSecondaryHeadline(this.state._secondaryHeadline,this.state._level+1)):this.renderHeadline(this.state._label,this.state._level))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"]}}};export{KolButtonWc as kol_button_wc,KolHeadingWc as kol_heading_wc};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-6ad587d0.js";import{w as watchTooltipAlignment}from"./button-link-283b2d32.js";import{h as devWarning,g as a11yHintDisabled}from"./a11y.tipps-2e27f8e6.js";import{n as nonce}from"./dev.utils-157f0499.js";import{f as setEventTarget,j as mapStringOrBoolean2String,h as mapBoolean2String,w as watchString,a as watchValidator,b as watchBoolean,s as setState}from"./prop.validators-f81af56e.js";import{a as propagateFocus}from"./reuse-3a02afb9.js";import{v as validateIcon,w as watchIconAlign}from"./icon-83ced735.js";import{a as validateAriaLabelWithLabel,b as validateLabelWithAriaLabel}from"./label-559ca626.js";import{v as validateTabIndex}from"./tab-index-ff5374b8.js";import{p as propagateSubmitEventToForm,a as propagateResetEventToForm}from"./controller-cad0ac5e.js";import{a as watchButtonType,w as watchButtonVariant}from"./controller-ec771280.js";import{v as validateAriaExpanded,a as validateDisabled}from"./disabled-6200e69c.js";import{v as validateHideLabel}from"./hide-label-2baeb5c5.js";import{w as watchHeadingLevel}from"./validation-2cc1bb89.js";import"./index-ff788b4b.js";const KolButtonWc=class{constructor(a){registerInstance(this,a),this.nonce=nonce(),this.catchRef=a=>{this.ref=a,propagateFocus(this.host,this.ref)},this.onClick=a=>{var t,e;"submit"===this.state._type?propagateSubmitEventToForm({form:this.host,ref:this.ref}):"reset"===this.state._type?propagateResetEventToForm({form:this.host,ref:this.ref}):"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onClick)?(a.stopPropagation(),setEventTarget(a,this.ref),null===(e=this.state._on)||void 0===e||e.onClick(a,this.state._value)):devWarning("There was no button click callback configured! (_on.onClick)")},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._iconAlign=void 0,this._iconOnly=void 0,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icon:{},_label:"…",_on:{},_type:"button",_variant:"normal"}}render(){return h(Host,null,h("button",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-current":mapStringOrBoolean2String(this.state._ariaCurrent),"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-label":!1===this.state._hideLabel?this.state._ariaLabel:void 0,"aria-labelledby":!0===this.state._hideLabel?this.nonce:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:{[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"icon-only":!0===this.state._hideLabel,"hide-label":!0===this.state._hideLabel},disabled:this.state._disabled,id:this.state._id},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),h("kol-span-wc",{_icon:this._icon,_hideLabel:this.state._hideLabel,_label:this.state._label},h("slot",{name:"expert",slot:"expert"}))),!0===this.state._hideLabel&&h("kol-tooltip",{"aria-hidden":"true",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._ariaLabel||this.state._label}))}validateAccessKey(a){watchString(this,"_accessKey",a)}validateAriaControls(a){watchString(this,"_ariaControls",a)}validateAriaCurrent(a){watchValidator(this,"_ariaControls",(a=>!0===a||"date"===a||"location"===a||"page"===a||"step"===a||"time"===a),new Set(["boolean","String {data, location, page, step, time}"]),a)}validateAriaExpanded(a){validateAriaExpanded(this,a)}validateAriaLabel(a){validateAriaLabelWithLabel(this,a)}validateAriaSelected(a){watchBoolean(this,"_ariaSelected",a)}validateCustomClass(a){watchString(this,"_customClass",a,{defaultValue:void 0})}validateDisabled(a){validateDisabled(this,a),!0===a&&a11yHintDisabled()}validateHideLabel(a){validateHideLabel(this,a)}validateIcon(a){validateIcon(this,a)}validateIconAlign(a){watchIconAlign(this,a)}validateIconOnly(a){this.validateHideLabel(a)}validateId(a){watchString(this,"_id",a)}validateLabel(a){validateLabelWithAriaLabel(this,a)}validateOn(a){"object"==typeof a&&null!==a&&(this.state=Object.assign(Object.assign({},this.state),{_on:a}))}validateRole(a){watchString(this,"_role",a)}validateTabIndex(a){validateTabIndex(this,a)}validateTooltipAlign(a){watchTooltipAlignment(this,"_tooltipAlign",a)}validateType(a){watchButtonType(this,"_type",a)}validateValue(a){setState(this,"_value",a)}validateVariant(a){watchButtonVariant(this,"_variant",a)}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.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcon(this._icon),this.validateIconAlign(this._iconAlign),this.validateId(this._id),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_id:["validateId"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}},KolHeadingWc=class{constructor(a){registerInstance(this,a),this.renderHeadline=(a,t)=>{switch(t){case 1:return h("h1",{class:"headline"},a,h("slot",null));case 2:return h("h2",{class:"headline"},a,h("slot",null));case 3:return h("h3",{class:"headline"},a,h("slot",null));case 4:return h("h4",{class:"headline"},a,h("slot",null));case 5:return h("h5",{class:"headline"},a,h("slot",null));case 6:return h("h6",{class:"headline"},a,h("slot",null));default:return h("strong",{class:"headline"},a,h("slot",null))}},this.renderSecondaryHeadline=(a,t)=>{switch(t){case 1:return h("span",{class:"secondary-headline"},a);case 2:return h("h2",{class:"secondary-headline"},a);case 3:return h("h3",{class:"secondary-headline"},a);case 4:return h("h4",{class:"secondary-headline"},a);case 5:return h("h5",{class:"secondary-headline"},a);case 6:return h("h6",{class:"secondary-headline"},a);default:return h("strong",{class:"secondary-headline"},a)}},this._label=void 0,this._level=1,this._secondaryHeadline=void 0,this.state={_label:"…",_level:1}}validateLabel(a){watchString(this,"_label",a)}validateLevel(a){watchHeadingLevel(this,a)}validateSecondaryHeadline(a){watchString(this,"_secondaryHeadline",a)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline)}render(){return h(Host,null,"string"==typeof this.state._secondaryHeadline&&this.state._secondaryHeadline.length>0?h("hgroup",null,this.renderHeadline(this.state._label,this.state._level),this.state._secondaryHeadline&&this.renderSecondaryHeadline(this.state._secondaryHeadline,this.state._level+1)):this.renderHeadline(this.state._label,this.state._level))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"]}}};export{KolButtonWc as kol_button_wc,KolHeadingWc as kol_heading_wc};