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

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as o,H as e}from"./index-50adf9a0.js";import{f as n}from"./a11y.tipps-5cdbd5e2.js";import{n as r}from"./dev.utils-05f4e663.js";import{w as t,s as a,b as s}from"./prop.validators-769a843a.js";import{w as l}from"./validation-d9821b54.js";import"./reuse-56bb5a4b.js";import"./index-676dbf61.js";const d=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}a,button{background-color:transparent;border:none;font-size:inherit;margin:0;padding:0;transition-duration:0.5s;transition-property:background-color, color, border-color}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>kol-icon,kol-span-wc>span>kol-icon{display:inline-grid;place-items:center;width:1em;height:1em}a,button,input,select,textarea{appearance:none;cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}h1,h2,h3,h4,h5,h6{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size);margin:0;padding:0}";n("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),n("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const c=class{constructor(o){i(this,o),this.nonce=r(),this.onClick=i=>{this._open=!1===this._open;const o=setTimeout((()=>{var e;clearTimeout(o),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&this.state._on.onClick(i,!0===this._open)}))},this._heading=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_heading:"…",_level:1}}render(){return o(e,null,o("div",{class:{accordion:!0,open:!0===this.state._open,close:!0!==this.state._open}},o("kol-heading-wc",{_headline:"",_level:this.state._level},o("kol-button-wc",{_ariaControls:this.nonce,_ariaExpanded:this.state._open,_icon:this.state._open?"fa-solid fa-minus":"fa-solid fa-plus",_label:this.state._heading,_on:{onClick:this.onClick}})),o("div",{class:"header"},o("slot",{name:"header"})),o("div",{"aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce,hidden:!1===this.state._open,style:!1===this.state._open?{display:"none",height:"0",visibility:"hidden"}:void 0},o("slot",{name:"content"}))))}validateHeading(i){t(this,"_heading",i,{required:!0})}validateLevel(i){l(this,i)}validateOn(i){"object"==typeof i&&null!==i&&"function"==typeof i.onClick&&a(this,"_on",i)}validateOpen(i){s(this,"_open",i)}componentWillLoad(){this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};c.style={default:d};export{c as kol_accordion};
+import{r as t,h as e,H as i}from"./index-50adf9a0.js";import{f as n}from"./a11y.tipps-1cea9822.js";import{n as o}from"./dev.utils-157f0499.js";import{b as s,w as a,s as r}from"./prop.validators-e402ad49.js";import{w as d}from"./validation-b331e3a7.js";import"./reuse-3a02afb9.js";import"./index-81bd9b41.js";const l=(e,t)=>{s(e,"_open",t)},p=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}.accordion kol-heading-wc kol-button-wc button kol-span-wc{justify-items:start}";n("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),n("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const c=class{constructor(e){t(this,e),this.nonce=o(),this.onClick=e=>{this._open=!1===this._open,setTimeout((()=>{var t;"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onClick)&&this.state._on.onClick(e,!0===this._open)}))},this._heading=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_heading:"…",_level:1}}render(){return e(i,null,e("div",{class:{accordion:!0,open:!0===this.state._open,close:!0!==this.state._open}},e("kol-heading-wc",{_headline:"",_level:this.state._level},e("kol-button-wc",{_ariaControls:this.nonce,_ariaExpanded:this.state._open,_icon:this.state._open?"codicon codicon-remove":"codicon codicon-add",_label:this.state._heading,_on:{onClick:this.onClick}})),e("div",{class:"header"},e("slot",{name:"header"})),e("div",{"aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce,hidden:!1===this.state._open,style:!1===this.state._open?{display:"none",height:"0",visibility:"hidden"}:void 0},e("slot",{name:"content"}))))}validateHeading(e){a(this,"_heading",e,{required:!0})}validateLevel(e){d(this,e)}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onClick&&r(this,"_on",e)}validateOpen(e){l(this,e)}componentWillLoad(){this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};c.style={default:p};export{c as kol_accordion};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","featureHint","KolAccordion","this","nonce","onClick","event","_open","timeout","setTimeout","clearTimeout","_a","state","_on","_heading","_level","render","h","Host","class","accordion","open","close","_headline","_ariaControls","_ariaExpanded","_icon","_label","name","undefined","id","hidden","style","display","height","visibility","validateHeading","value","watchString","required","validateLevel","watchHeadingLevel","validateOn","setState","validateOpen","watchBoolean","componentWillLoad"],"sources":["./src/components/accordion/style.css?tag=kol-accordion&mode=default&encapsulation=shadow","./src/components/accordion/component.tsx"],"sourcesContent":["@import '../style.css';\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\n\nimport { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\n\nimport { EventValueOrEventCallback } from '../../types/callbacks';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState, watchBoolean, watchString } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\n\nfeatureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend`);\nfeatureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);\n\nexport type KoliBriAccordionCallbacks = {\n\t[Events.onClick]?: EventValueOrEventCallback<Event, boolean>;\n};\n\n/**\n * API\n */\ntype RequiredProps = {\n\theading: string;\n};\ntype OptionalProps = {\n\tlevel: HeadingLevel;\n\topen: boolean;\n\ton: KoliBriAccordionCallbacks;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @part accordion - Ermöglicht das Stylen des äußeren Container des Accordions.\n * @part open - Ermöglicht das Stylen des geöffneten Zustands und Icons.\n * @part close - Ermöglicht das Stylen des geschlossenen Zustands und Icons.\n * @part icon - Ermöglicht das Stylen der Icons.\n * @part header - Ermöglicht das Stylen des Kopfbereichs.\n * @part content - Ermöglicht das Stylen des Inhaltsbereichs.\n *\n * @slot header - Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n */\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\t// const height = this.content?.getBoundingClientRect().height ?? 0;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\taccordion: true,\n\t\t\t\t\t\topen: this.state._open === true,\n\t\t\t\t\t\tclose: this.state._open !== true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-heading-wc _headline=\"\" _level={this.state._level}>\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t// slot=\"expert\"\n\t\t\t\t\t\t\t_ariaControls={this.nonce}\n\t\t\t\t\t\t\t_ariaExpanded={this.state._open}\n\t\t\t\t\t\t\t_icon={this.state._open ? 'fa-solid fa-minus' : 'fa-solid fa-plus'}\n\t\t\t\t\t\t\t_label={this.state._heading}\n\t\t\t\t\t\t\t_on={{ onClick: this.onClick }}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\taria-hidden={this.state._open === false ? 'true' : undefined}\n\t\t\t\t\t\tclass=\"content\"\n\t\t\t\t\t\tid={this.nonce}\n\t\t\t\t\t\thidden={this.state._open === false}\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tthis.state._open === false\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tdisplay: 'none',\n\t\t\t\t\t\t\t\t\t\theight: '0',\n\t\t\t\t\t\t\t\t\t\tvisibility: 'hidden',\n\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// style={\n\t\t\t\t\t\t// \tthis.state._open\n\t\t\t\t\t\t// \t\t? height > 0 && processEnv !== 'test' // TODO: remove this check when testing is fixed\n\t\t\t\t\t\t// \t\t\t? {\n\t\t\t\t\t\t// \t\t\t\theight: `${height}px`,\n\t\t\t\t\t\t// \t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t// \t\t\t}\n\t\t\t\t\t\t// \t\t\t: undefined\n\t\t\t\t\t\t// \t\t: {\n\t\t\t\t\t\t// \t\t\theight: '0',\n\t\t\t\t\t\t// \t\t\toverflow: 'hidden',\n\t\t\t\t\t\t// \t\t\tvisibility: 'hidden',\n\t\t\t\t\t\t// \t\t}\n\t\t\t\t\t\t// }\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"content\" />\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 die Überschrift des Accordions an.\n\t */\n\t@Prop() public _heading!: string;\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen an.\n\t */\n\t@Prop() public _on?: KoliBriAccordionCallbacks;\n\n\t/**\n\t * Gibt an, ob das Accordion geöffnet ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_heading: '…', // ⚠ required\n\t\t_level: 1,\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAccordionCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null && typeof value.onClick === 'function') {\n\t\t\tsetState(this, '_on', value);\n\t\t}\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\twatchBoolean(this, '_open', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n\n\tprivate onClick = (event: Event) => {\n\t\tthis._open = this._open === false;\n\n\t\t/**\n\t\t * Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tthis.state._on.onClick(event, this._open === true);\n\t\t\t}\n\t\t});\n\t};\n}\n"],"mappings":";;;oTAAA,MAAMA,EAAkB,w6CCaxBC,EAAY,+OAKZA,EAAY,mE,MAyCCC,EAAY,M,yBACPC,KAAAC,MAAQA,IAwIjBD,KAAAE,QAAWC,IAClBH,KAAKI,MAAQJ,KAAKI,QAAU,MAQ5B,MAAMC,EAAUC,YAAW,K,MAC1BC,aAAaF,GACb,WAAWG,EAAAR,KAAKS,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEN,WAAY,WAAY,CAClDF,KAAKS,MAAMC,IAAIR,QAAQC,EAAOH,KAAKI,QAAU,K,IAE7C,E,oCAhFoC,E,8BAU0B,M,WAKjC,CAC/BO,SAAU,IACVC,OAAQ,E,CArFFC,SAEN,OACCC,EAACC,EAAI,KACJD,EAAA,OACCE,MAAO,CACNC,UAAW,KACXC,KAAMlB,KAAKS,MAAML,QAAU,KAC3Be,MAAOnB,KAAKS,MAAML,QAAU,OAG7BU,EAAA,kBAAgBM,UAAU,GAAGR,OAAQZ,KAAKS,MAAMG,QAC/CE,EAAA,iBAECO,cAAerB,KAAKC,MACpBqB,cAAetB,KAAKS,MAAML,MAC1BmB,MAAOvB,KAAKS,MAAML,MAAQ,oBAAsB,mBAChDoB,OAAQxB,KAAKS,MAAME,SACnBD,IAAK,CAAER,QAASF,KAAKE,YAGvBY,EAAA,OAAKE,MAAM,UACVF,EAAA,QAAMW,KAAK,YAEZX,EAAA,qBACcd,KAAKS,MAAML,QAAU,MAAQ,OAASsB,UACnDV,MAAM,UACNW,GAAI3B,KAAKC,MACT2B,OAAQ5B,KAAKS,MAAML,QAAU,MAC7ByB,MACC7B,KAAKS,MAAML,QAAU,MAClB,CACA0B,QAAS,OACTC,OAAQ,IACRC,WAAY,UAEZN,WAiBJZ,EAAA,QAAMW,KAAK,c,CAuCTQ,gBAAgBC,GACtBC,EAAYnC,KAAM,WAAYkC,EAAO,CACpCE,SAAU,M,CAQLC,cAAcH,GACpBI,EAAkBtC,KAAMkC,E,CAOlBK,WAAWL,GACjB,UAAWA,IAAU,UAAYA,IAAU,aAAeA,EAAMhC,UAAY,WAAY,CACvFsC,EAASxC,KAAM,MAAOkC,E,EAQjBO,aAAaP,GACnBQ,EAAa1C,KAAM,QAASkC,E,CAMtBS,oBACN3C,KAAKiC,gBAAgBjC,KAAKW,UAC1BX,KAAKqC,cAAcrC,KAAKY,QACxBZ,KAAKuC,WAAWvC,KAAKU,KACrBV,KAAKyC,aAAazC,KAAKI,M"}
+{"version":3,"names":["validateOpen","component","value","watchBoolean","defaultStyleCss","featureHint","KolAccordion","this","nonce","onClick","event","_open","setTimeout","_a","state","_on","_heading","_level","render","h","Host","class","accordion","open","close","_headline","_ariaControls","_ariaExpanded","_icon","_label","name","undefined","id","hidden","style","display","height","visibility","validateHeading","watchString","required","validateLevel","watchHeadingLevel","validateOn","setState","componentWillLoad"],"sources":["./src/types/props/open.ts","./src/components/accordion/style.css?tag=kol-accordion&mode=default&encapsulation=shadow","./src/components/accordion/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Klappt das Element auf sofern gesetzt (oder true) und klappt es zu sofern nicht gesetzt (oder false).\n */\n/** en\n * If set (to true) opens/expands the element, closes if not set (or set to false).\n */\nexport type PropOpen = {\n\topen: boolean;\n};\n\n/* validator */\nexport const validateOpen = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_open', value);\n};\n","@import '../style.css';\n@import '../host-display-block.css';\n\n.accordion kol-heading-wc kol-button-wc button kol-span-wc {\n\tjustify-items: start;\n}\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\n\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { validateOpen } from '../../types/props';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState, watchString } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, KoliBriAccordionCallbacks, States } from './types';\n\nfeatureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend`);\nfeatureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);\n\n/**\n *\n * @slot header - Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n */\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements API {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\t// const height = this.content?.getBoundingClientRect().height ?? 0;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\taccordion: true,\n\t\t\t\t\t\topen: this.state._open === true,\n\t\t\t\t\t\tclose: this.state._open !== true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-heading-wc _headline=\"\" _level={this.state._level}>\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t// slot=\"expert\"\n\t\t\t\t\t\t\t_ariaControls={this.nonce}\n\t\t\t\t\t\t\t_ariaExpanded={this.state._open}\n\t\t\t\t\t\t\t_icon={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}\n\t\t\t\t\t\t\t_label={this.state._heading}\n\t\t\t\t\t\t\t_on={{ onClick: this.onClick }}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\taria-hidden={this.state._open === false ? 'true' : undefined}\n\t\t\t\t\t\tclass=\"content\"\n\t\t\t\t\t\tid={this.nonce}\n\t\t\t\t\t\thidden={this.state._open === false}\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tthis.state._open === false\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tdisplay: 'none',\n\t\t\t\t\t\t\t\t\t\theight: '0',\n\t\t\t\t\t\t\t\t\t\tvisibility: 'hidden',\n\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// style={\n\t\t\t\t\t\t// \tthis.state._open\n\t\t\t\t\t\t// \t\t? height > 0 && processEnv !== 'test' // TODO: remove this check when testing is fixed\n\t\t\t\t\t\t// \t\t\t? {\n\t\t\t\t\t\t// \t\t\t\theight: `${height}px`,\n\t\t\t\t\t\t// \t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t// \t\t\t}\n\t\t\t\t\t\t// \t\t\t: undefined\n\t\t\t\t\t\t// \t\t: {\n\t\t\t\t\t\t// \t\t\theight: '0',\n\t\t\t\t\t\t// \t\t\toverflow: 'hidden',\n\t\t\t\t\t\t// \t\t\tvisibility: 'hidden',\n\t\t\t\t\t\t// \t\t}\n\t\t\t\t\t\t// }\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"content\" />\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 die Überschrift des Accordions an.\n\t */\n\t@Prop() public _heading!: string;\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen an.\n\t */\n\t@Prop() public _on?: KoliBriAccordionCallbacks;\n\n\t/**\n\t * Gibt an, ob das Accordion geöffnet ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_heading: '…', // ⚠ required\n\t\t_level: 1,\n\t};\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAccordionCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null && typeof value.onClick === 'function') {\n\t\t\tsetState(this, '_on', value);\n\t\t}\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n\n\tprivate onClick = (event: Event) => {\n\t\tthis._open = this._open === false;\n\n\t\t/**\n\t\t * Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\t\tsetTimeout(() => {\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tthis.state._on.onClick(event, this._open === true);\n\t\t\t}\n\t\t});\n\t};\n}\n"],"mappings":";;;oTAeO,MAAMA,EAAe,CAACC,EAAsCC,KAClEC,EAAaF,EAAW,QAASC,EAAM,EChBxC,MAAME,EAAkB,4hCCYxBC,EAAY,+OAKZA,EAAY,mE,MAcCC,EAAY,M,yBACPC,KAAAC,MAAQA,IAsHjBD,KAAAE,QAAWC,IAClBH,KAAKI,MAAQJ,KAAKI,QAAU,MAQ5BC,YAAW,K,MACV,WAAWC,EAAAN,KAAKO,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEJ,WAAY,WAAY,CAClDF,KAAKO,MAAMC,IAAIN,QAAQC,EAAOH,KAAKI,QAAU,K,IAE7C,E,oCA7DoC,E,8BAU0B,M,WAEjC,CAC/BK,SAAU,IACVC,OAAQ,E,CAlFFC,SAEN,OACCC,EAACC,EAAI,KACJD,EAAA,OACCE,MAAO,CACNC,UAAW,KACXC,KAAMhB,KAAKO,MAAMH,QAAU,KAC3Ba,MAAOjB,KAAKO,MAAMH,QAAU,OAG7BQ,EAAA,kBAAgBM,UAAU,GAAGR,OAAQV,KAAKO,MAAMG,QAC/CE,EAAA,iBAECO,cAAenB,KAAKC,MACpBmB,cAAepB,KAAKO,MAAMH,MAC1BiB,MAAOrB,KAAKO,MAAMH,MAAQ,yBAA2B,sBACrDkB,OAAQtB,KAAKO,MAAME,SACnBD,IAAK,CAAEN,QAASF,KAAKE,YAGvBU,EAAA,OAAKE,MAAM,UACVF,EAAA,QAAMW,KAAK,YAEZX,EAAA,qBACcZ,KAAKO,MAAMH,QAAU,MAAQ,OAASoB,UACnDV,MAAM,UACNW,GAAIzB,KAAKC,MACTyB,OAAQ1B,KAAKO,MAAMH,QAAU,MAC7BuB,MACC3B,KAAKO,MAAMH,QAAU,MAClB,CACAwB,QAAS,OACTC,OAAQ,IACRC,WAAY,UAEZN,WAiBJZ,EAAA,QAAMW,KAAK,c,CAiCTQ,gBAAgBpC,GACtBqC,EAAYhC,KAAM,WAAYL,EAAO,CACpCsC,SAAU,M,CAKLC,cAAcvC,GACpBwC,EAAkBnC,KAAML,E,CAIlByC,WAAWzC,GACjB,UAAWA,IAAU,UAAYA,IAAU,aAAeA,EAAMO,UAAY,WAAY,CACvFmC,EAASrC,KAAM,MAAOL,E,EAKjBF,aAAaE,GACnBF,EAAaO,KAAML,E,CAGb2C,oBACNtC,KAAK+B,gBAAgB/B,KAAKS,UAC1BT,KAAKkC,cAAclC,KAAKU,QACxBV,KAAKoC,WAAWpC,KAAKQ,KACrBR,KAAKP,aAAaO,KAAKI,M"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as r,H as o}from"./index-50adf9a0.js";import{b as a,w as e,s as l,a as n}from"./prop.validators-769a843a.js";import{w as t}from"./validation-d9821b54.js";import{a as s}from"./i18n-8e14d822.js";import{L as c}from"./dev.utils-05f4e663.js";import"./index-676dbf61.js";import"./a11y.tipps-5cdbd5e2.js";import"./index-4f2a12cc.js";import"./reuse-56bb5a4b.js";const d=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}a,button{background-color:transparent;border:none;font-size:inherit;margin:0;padding:0;transition-duration:0.5s;transition-property:background-color, color, border-color}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>kol-icon,kol-span-wc>span>kol-icon{display:inline-grid;place-items:center;width:1em;height:1em}a,button,input,select,textarea{appearance:none;cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}h1,h2,h3,h4,h5,h6{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size);margin:0;padding:0}:host{display:inline-block}:host>div{background-color:white;border-radius:var(--kolibri-border-radius);border-style:solid;border-width:calc(2 * var(--kolibri-border-width));display:inline-grid;place-items:stretch;overflow:hidden;width:100%}.heading{display:flex;gap:var(--kolibri-spacing);place-items:center}.heading>div{display:grid;gap:var(--kolibri-spacing);margin:var(--kolibri-spacing) var(--kolibri-spacing) var(--kolibri-spacing) 0}.heading .heading-icon{align-items:center;align-self:stretch;display:inline-flex;color:white;padding:calc(2 * var(--kolibri-spacing))}.card>.heading .heading-icon{border-radius:0 0 var(--kolibri-border-radius) 0}.heading .close button{min-width:44px;min-height:44px}.card>.content{padding:var(--kolibri-spacing)}.default{border-color:var(--kolibri-color-normal)}.default .heading-icon{background-color:var(--kolibri-color-normal)}.error{border-color:var(--kolibri-color-error)}.error .heading-icon{background-color:var(--kolibri-color-error)}.info{border-color:var(--kolibri-color-info)}.info .heading-icon{background-color:var(--kolibri-color-info)}.success{border-color:var(--kolibri-color-success)}.success .heading-icon{background-color:var(--kolibri-color-success)}.warning{border-color:var(--kolibri-color-warning)}.warning .heading-icon{background-color:var(--kolibri-color-warning)}",h=i=>r("kol-icon",{class:"heading-icon",_ariaLabel:"string"==typeof i.heading&&i.heading.length>0?"":i.ariaLabel,_icon:i.icon}),b=i=>{switch(i.type){case"error":return r(h,{ariaLabel:s("kol-error"),icon:"fa-solid fa-circle-xmark",heading:i.heading});case"info":return r(h,{ariaLabel:s("kol-info"),icon:"fa-solid fa-circle-info",heading:i.heading});case"warning":return r(h,{ariaLabel:s("kol-warning"),icon:"fa-solid fa-triangle-exclamation",heading:i.heading});case"success":return r(h,{ariaLabel:s("kol-success"),icon:"fa-solid fa-circle-check",heading:i.heading});default:return r(h,{ariaLabel:s("kol-message"),icon:"fa-regular fa-comment",heading:i.heading})}},g=class{constructor(a){i(this,a),this.close=()=>{var i;void 0!==(null===(i=this._on)||void 0===i?void 0:i.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=i=>"object"==typeof i&&null!==i&&"function"==typeof i.onClose,this._alert=!1,this._hasCloser=!1,this._heading=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){var i;if(this.state._alert){try{c.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(i){c.debug("Navigator does not support vibration.")}setTimeout((()=>{this.validateAlert(!1)}),1e4)}return r(o,null,r("div",{class:{[this.state._type]:!0,[this.state._variant]:!0},role:this.state._alert?"alert":void 0},r("div",{class:"heading"},r(b,{heading:this.state._heading,type:this.state._type}),r("div",null,"string"==typeof this.state._heading&&(null===(i=this.state._heading)||void 0===i?void 0:i.length)>0&&r("kol-heading-wc",{_headline:this.state._heading,_level:this.state._level}),"msg"===this._variant&&r("div",{class:"content"},r("slot",null))),this.state._hasCloser&&r("kol-button-wc",{class:"close",_icon:{left:{icon:"fa-solid fa-xmark"}},_iconOnly:!0,_label:s("kol-close"),_on:this.on,_tooltipAlign:"left"})),"card"===this._variant&&r("div",{class:"content"},r("slot",null))))}validateAlert(i){a(this,"_alert",i)}validateHasCloser(i){a(this,"_hasCloser",i)}validateHeading(i){e(this,"_heading",i)}validateLevel(i){t(this,i)}validateOn(i){this.validateOnValue(i)&&l(this,"_on",{onClose:i.onClose})}validateType(i){n(this,"_type",(i=>"string"==typeof i&&("default"===i||"error"===i||"info"===i||"success"===i||"warning"===i)),new Set("String {success, info, warning, error}"),i)}validateVariant(i){n(this,"_variant",(i=>"card"===i||"msg"===i),new Set("AlertVariant {card, msg}"),i)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}};g.style={default:d};export{g as kol_alert};
+import{r as i,h as t,H as e}from"./index-50adf9a0.js";import{b as a,w as n,s,a as o}from"./prop.validators-e402ad49.js";import{w as r}from"./validation-b331e3a7.js";import{a as l}from"./i18n-c97dc260.js";import{L as d}from"./dev.utils-157f0499.js";import"./a11y.tipps-1cea9822.js";import"./index-81bd9b41.js";import"./index-a007a589.js";import"./reuse-3a02afb9.js";const c=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}:host>div{display:grid;place-items:stretch;overflow:hidden}.heading{display:grid;grid-template-columns:auto 1fr auto;place-items:center}.heading>div{display:grid;justify-self:start}.heading .heading-icon{align-items:center;align-self:stretch;display:inline-flex}",h=e=>t("kol-icon",{class:"heading-icon",_ariaLabel:"string"==typeof e.heading&&e.heading.length>0?"":e.ariaLabel,_icon:e.icon}),p=e=>{switch(e.type){case"error":return t(h,{ariaLabel:l("kol-error"),icon:"codicon codicon-error",heading:e.heading});case"info":return t(h,{ariaLabel:l("kol-info"),icon:"codicon codicon-info",heading:e.heading});case"warning":return t(h,{ariaLabel:l("kol-warning"),icon:"codicon codicon-warning",heading:e.heading});case"success":return t(h,{ariaLabel:l("kol-success"),icon:"codicon codicon-pass",heading:e.heading});default:return t(h,{ariaLabel:l("kol-message"),icon:"codicon codicon-comment",heading:e.heading})}},u=class{constructor(t){i(this,t),this.close=()=>{var t;void 0!==(null===(t=this._on)||void 0===t?void 0:t.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=t=>"object"==typeof t&&null!==t&&"function"==typeof t.onClose,this._alert=!1,this._hasCloser=!1,this._heading=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){var i;if(this.state._alert){try{d.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(i){d.debug("Navigator does not support vibration.")}setTimeout((()=>{this.validateAlert(!1)}),1e4)}return t(e,null,t("div",{class:{[this.state._type]:!0,[this.state._variant]:!0},role:this.state._alert?"alert":void 0},t("div",{class:"heading"},t(p,{heading:this.state._heading,type:this.state._type}),t("div",null,"string"==typeof this.state._heading&&(null===(i=this.state._heading)||void 0===i?void 0:i.length)>0&&t("kol-heading-wc",{_headline:this.state._heading,_level:this.state._level}),"msg"===this._variant&&t("div",{class:"content"},t("slot",null))),this.state._hasCloser&&t("kol-button-wc",{class:"close",_icon:{left:{icon:"codicon codicon-close"}},_iconOnly:!0,_label:l("kol-close"),_on:this.on,_tooltipAlign:"left"})),"card"===this._variant&&t("div",{class:"content"},t("slot",null))))}validateAlert(t){a(this,"_alert",t)}validateHasCloser(t){a(this,"_hasCloser",t)}validateHeading(t){n(this,"_heading",t)}validateLevel(t){r(this,t)}validateOn(t){this.validateOnValue(t)&&s(this,"_on",{onClose:t.onClose})}validateType(t){o(this,"_type",(t=>"string"==typeof t&&("default"===t||"error"===t||"info"===t||"success"===t||"warning"===t)),new Set("String {success, info, warning, error}"),t)}validateVariant(t){o(this,"_variant",(t=>"card"===t||"msg"===t),new Set("AlertVariant {card, msg}"),t)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}};u.style={default:c};export{u as kol_alert};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","Icon","props","h","class","_ariaLabel","heading","length","ariaLabel","_icon","icon","AlertIcon","type","translate","KolAlert","this","close","_a","_on","onClose","undefined","Event","on","onClick","validateOnValue","value","_level","render","state","_alert","Log","debug","navigator","vibrate","e","setTimeout","validateAlert","Host","_type","_variant","role","_heading","_headline","_hasCloser","left","_iconOnly","_label","_tooltipAlign","watchBoolean","validateHasCloser","validateHeading","watchString","validateLevel","watchHeadingLevel","validateOn","setState","validateType","watchValidator","Set","validateVariant","componentWillLoad"],"sources":["./src/components/alert/style.css?tag=kol-alert&mode=default&encapsulation=shadow","./src/components/alert/component.tsx"],"sourcesContent":["@import '../style.css';\n\n:host {\n\tdisplay: inline-block;\n}\n:host > div {\n\tbackground-color: white;\n\tborder-radius: var(--kolibri-border-radius);\n\tborder-style: solid;\n\tborder-width: calc(2 * var(--kolibri-border-width));\n\tdisplay: inline-grid;\n\tplace-items: stretch;\n\toverflow: hidden;\n\twidth: 100%;\n}\n\n.heading {\n\tdisplay: flex;\n\tgap: var(--kolibri-spacing);\n\tplace-items: center;\n}\n.heading > div {\n\tdisplay: grid;\n\tgap: var(--kolibri-spacing);\n\tmargin: var(--kolibri-spacing) var(--kolibri-spacing) var(--kolibri-spacing) 0;\n}\n.heading .heading-icon {\n\talign-items: center;\n\talign-self: stretch;\n\tdisplay: inline-flex;\n\tcolor: white;\n\tpadding: calc(2 * var(--kolibri-spacing));\n}\n.card > .heading .heading-icon {\n\tborder-radius: 0 0 var(--kolibri-border-radius) 0;\n}\n.heading .close button {\n\tmin-width: 44px;\n\tmin-height: 44px;\n}\n.card > .content {\n\tpadding: var(--kolibri-spacing);\n}\n.default {\n\tborder-color: var(--kolibri-color-normal);\n}\n.default .heading-icon {\n\tbackground-color: var(--kolibri-color-normal);\n}\n.error {\n\tborder-color: var(--kolibri-color-error);\n}\n.error .heading-icon {\n\tbackground-color: var(--kolibri-color-error);\n}\n.info {\n\tborder-color: var(--kolibri-color-info);\n}\n.info .heading-icon {\n\tbackground-color: var(--kolibri-color-info);\n}\n.success {\n\tborder-color: var(--kolibri-color-success);\n}\n.success .heading-icon {\n\tbackground-color: var(--kolibri-color-success);\n}\n.warning {\n\tborder-color: var(--kolibri-color-warning);\n}\n.warning .heading-icon {\n\tbackground-color: var(--kolibri-color-warning);\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { AlertType, AlertVariant, KoliBriAlertEventCallbacks } from '../../types/alert';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { setState, watchBoolean, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { translate } from '../../i18n';\nimport { Log } from '../../utils/dev.utils';\n\n/**\n * API\n */\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\talert: boolean;\n\thasCloser: boolean;\n\theading: string;\n\tlevel: HeadingLevel;\n\ton: KoliBriAlertEventCallbacks;\n\ttype: AlertType;\n\tvariant: AlertVariant;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst Icon = (props: { ariaLabel: string; icon: string; heading?: string }) => {\n\treturn <kol-icon class=\"heading-icon\" _ariaLabel={typeof props.heading === 'string' && props.heading.length > 0 ? '' : props.ariaLabel} _icon={props.icon} />;\n};\n\nconst AlertIcon = (props: { heading?: string; type?: AlertType }) => {\n\tswitch (props.type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"fa-solid fa-circle-xmark\" heading={props.heading} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"fa-solid fa-circle-info\" heading={props.heading} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"fa-solid fa-triangle-exclamation\" heading={props.heading} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"fa-solid fa-circle-check\" heading={props.heading} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"fa-regular fa-comment\" heading={props.heading} />;\n\t}\n};\n\n@Component({\n\ttag: 'kol-alert',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAlert implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tif (this.state._alert) {\n\t\t\t/**\n\t\t\t * - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n\t\t\t * - https://googlechrome.github.io/samples/vibration/\n\t\t\t */\n\t\t\ttry {\n\t\t\t\tLog.debug(['Navigator should vibrate ...', navigator.vibrate([100, 75, 100, 75, 100])]);\n\t\t\t} catch (e) {\n\t\t\t\tLog.debug('Navigator does not support vibration.');\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.validateAlert(false);\n\t\t\t}, 10000);\n\t\t}\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._type as string]: true,\n\t\t\t\t\t\t[this.state._variant as string]: true,\n\t\t\t\t\t}}\n\t\t\t\t\trole={this.state._alert ? 'alert' : undefined}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"heading\">\n\t\t\t\t\t\t<AlertIcon heading={this.state._heading} type={this.state._type} />\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t{typeof this.state._heading === 'string' && this.state._heading?.length > 0 && (\n\t\t\t\t\t\t\t\t<kol-heading-wc _headline={this.state._heading} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this._variant === 'msg' && (\n\t\t\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t\t_icon={{\n\t\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\t\ticon: 'fa-solid fa-xmark',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t\t_label={translate('kol-close')}\n\t\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this._variant === 'card' && (\n\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung vorlesen soll.\n\t */\n\t@Prop({ reflect: true }) public _alert?: boolean = false;\n\n\t/**\n\t * Gibt an, ob der Alert ein Schließen-Icon hat.\n\t */\n\t@Prop({ reflect: true }) public _hasCloser?: boolean = false;\n\n\t/**\n\t * Gibt den Titel der Meldung an.\n\t */\n\t@Prop() public _heading?: string;\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t */\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\n\n\t/**\n\t * Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt.\n\t */\n\t@Prop() public _type?: AlertType = 'default';\n\n\t/**\n\t * Gibt an, welche Benachrichtigungsvariante dargestellt wird.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_level: 1,\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: boolean): void {\n\t\twatchBoolean(this, '_hasCloser', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriAlertEventCallbacks).onClose === 'function';\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAlertEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriAlertEventCallbacks>(\n\t\t\t\tthis,\n\t\t\t\t'_on',\n\t\t\t\t{\n\t\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t\t}\n\t\t\t\t// {\n\t\t\t\t// \tafterPatch: (value: unknown) => {\n\t\t\t\t// \t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t\t// \t},\n\t\t\t\t// }\n\t\t\t);\n\t\t\t// } else {\n\t\t\t// \tsetState<KoliBriAlertEventCallbacks>(this, '_on', null, {\n\t\t\t// \t\tafterPatch: (value: unknown) => {\n\t\t\t// \t\t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t// \t\t},\n\t\t\t// \t});\n\t\t}\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'),\n\t\t\tnew Set('String {success, info, warning, error}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_variant')\n\tpublic validateVariant(value?: AlertVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'card' || value === 'msg', new Set('AlertVariant {card, msg}'), value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateType(this._type);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["defaultStyleCss","Icon","props","h","class","_ariaLabel","heading","length","ariaLabel","_icon","icon","AlertIcon","type","translate","KolAlert","this","close","_a","_on","onClose","undefined","Event","on","onClick","validateOnValue","value","_level","render","state","_alert","Log","debug","navigator","vibrate","e","setTimeout","validateAlert","Host","_type","_variant","role","_heading","_headline","_hasCloser","left","_iconOnly","_label","_tooltipAlign","watchBoolean","validateHasCloser","validateHeading","watchString","validateLevel","watchHeadingLevel","validateOn","setState","validateType","watchValidator","Set","validateVariant","componentWillLoad"],"sources":["./src/components/alert/style.css?tag=kol-alert&mode=default&encapsulation=shadow","./src/components/alert/component.tsx"],"sourcesContent":["@import '../style.css';\n@import '../host-display-block.css';\n\n:host > div {\n\tdisplay: grid;\n\tplace-items: stretch;\n\toverflow: hidden;\n}\n\n.heading {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr auto;\n\tplace-items: center;\n}\n.heading > div {\n\tdisplay: grid;\n\tjustify-self: start;\n}\n.heading .heading-icon {\n\talign-items: center;\n\talign-self: stretch;\n\tdisplay: inline-flex;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { API, States, AlertType, AlertVariant, KoliBriAlertEventCallbacks } from './types';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { setState, watchBoolean, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { translate } from '../../i18n';\nimport { Log } from '../../utils/dev.utils';\n\nconst Icon = (props: { ariaLabel: string; icon: string; heading?: string }) => {\n\treturn <kol-icon class=\"heading-icon\" _ariaLabel={typeof props.heading === 'string' && props.heading.length > 0 ? '' : props.ariaLabel} _icon={props.icon} />;\n};\n\nconst AlertIcon = (props: { heading?: string; type?: AlertType }) => {\n\tswitch (props.type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"codicon codicon-error\" heading={props.heading} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"codicon codicon-info\" heading={props.heading} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"codicon codicon-warning\" heading={props.heading} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"codicon codicon-pass\" heading={props.heading} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"codicon codicon-comment\" heading={props.heading} />;\n\t}\n};\n\n@Component({\n\ttag: 'kol-alert',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAlert implements API {\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tif (this.state._alert) {\n\t\t\t/**\n\t\t\t * - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n\t\t\t * - https://googlechrome.github.io/samples/vibration/\n\t\t\t */\n\t\t\ttry {\n\t\t\t\tLog.debug(['Navigator should vibrate ...', navigator.vibrate([100, 75, 100, 75, 100])]);\n\t\t\t} catch (e) {\n\t\t\t\tLog.debug('Navigator does not support vibration.');\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.validateAlert(false);\n\t\t\t}, 10000);\n\t\t}\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._type as string]: true,\n\t\t\t\t\t\t[this.state._variant as string]: true,\n\t\t\t\t\t}}\n\t\t\t\t\trole={this.state._alert ? 'alert' : undefined}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"heading\">\n\t\t\t\t\t\t<AlertIcon heading={this.state._heading} type={this.state._type} />\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t{typeof this.state._heading === 'string' && this.state._heading?.length > 0 && (\n\t\t\t\t\t\t\t\t<kol-heading-wc _headline={this.state._heading} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this._variant === 'msg' && (\n\t\t\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t\t_icon={{\n\t\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t\t_label={translate('kol-close')}\n\t\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this._variant === 'card' && (\n\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung vorlesen soll.\n\t */\n\t@Prop({ reflect: true }) public _alert?: boolean = false;\n\n\t/**\n\t * Gibt an, ob der Alert ein Schließen-Icon hat.\n\t */\n\t@Prop({ reflect: true }) public _hasCloser?: boolean = false;\n\n\t/**\n\t * Gibt den Titel der Meldung an.\n\t */\n\t@Prop() public _heading?: string;\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t */\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\n\n\t/**\n\t * Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt.\n\t */\n\t@Prop() public _type?: AlertType = 'default';\n\n\t/**\n\t * Gibt an, welche Benachrichtigungsvariante dargestellt wird.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: States = {\n\t\t_level: 1,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: boolean): void {\n\t\twatchBoolean(this, '_hasCloser', value);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriAlertEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAlertEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriAlertEventCallbacks>(\n\t\t\t\tthis,\n\t\t\t\t'_on',\n\t\t\t\t{\n\t\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t\t}\n\t\t\t\t// {\n\t\t\t\t// \tafterPatch: (value: unknown) => {\n\t\t\t\t// \t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t\t// \t},\n\t\t\t\t// }\n\t\t\t);\n\t\t\t// } else {\n\t\t\t// \tsetState<KoliBriAlertEventCallbacks>(this, '_on', null, {\n\t\t\t// \t\tafterPatch: (value: unknown) => {\n\t\t\t// \t\t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t// \t\t},\n\t\t\t// \t});\n\t\t}\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'),\n\t\t\tnew Set('String {success, info, warning, error}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: AlertVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'card' || value === 'msg', new Set('AlertVariant {card, msg}'), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateType(this._type);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as o,h as i,H as t}from"./index-50adf9a0.js";import{f as r,d as a,a as s}from"./a11y.tipps-5cdbd5e2.js";import{r as e,c as n,a as l,o as c,p as d,s as p}from"./prop.validators-769a843a.js";import{v as b}from"./label-ea9f2a1a.js";import{c as h}from"./index-d14da386.js";import"./dev.utils-05f4e663.js";import"./reuse-56bb5a4b.js";import"./index-676dbf61.js";const f=(o,t,r)=>(299*o+587*t+114*r)/1e3>=128?-1:1,g=(o,t,r,a=1)=>{const i=[Math.max(Math.min(Math.round(t[0]+a*Math.max(1,t[0]/100)),255),0),Math.max(Math.min(Math.round(t[1]+a*Math.max(1,t[1]/100)),255),0),Math.max(Math.min(Math.round(t[2]+a*Math.max(1,t[2]/100)),255),0)],s=n(e.hex(`rgba(${o.join(",")},1)`),e.hex(`rgba(${i.join(",")},1)`)),l=i[0]+i[1]+i[2];return 0===l||765===l||s>r?{background:o,foreground:i,contrast:s}:g(o,i,r,a)},k=new Map,u=(o,t,r,a=1)=>{if(k.has(o))return k.get(o);const i=g(o,t,r,a);return k.set(o,i),i},m=(o,t=7)=>{let r=[0,0,0,1],a=[255,255,255,1];"string"==typeof o?(r=h(o),a=r):"object"==typeof o&&null!==o&&"string"==typeof o.background&&"string"==typeof o.foreground&&(r=h(o.background),a="string"==typeof o.foreground?h(o.foreground):r);const i=f(r[0],r[1],r[2]),s=u([r[0],r[1],r[2]],[a[0],a[1],a[2]],t,i);return a=[...s.foreground,1],{background:e.hex(`rgba(${r.join(",")})`),foreground:e.hex(`rgba(${a.join(",")})`),contrast:s.contrast}},y=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}a,button{background-color:transparent;border:none;font-size:inherit;margin:0;padding:0;transition-duration:0.5s;transition-property:background-color, color, border-color}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>kol-icon,kol-span-wc>span>kol-icon{display:inline-grid;place-items:center;width:1em;height:1em}a,button,input,select,textarea{appearance:none;cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}h1,h2,h3,h4,h5,h6{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size);margin:0;padding:0}:host{display:inline-block}:host>span{border-radius:var(--kolibri-border-radius);display:flex;line-height:calc(1rem + var(--kolibri-spacing));place-items:center}:host>span kol-span-wc{padding:var(--kolibri-spacing) calc(2 * var(--kolibri-spacing))}:host>span>kol-span-wc{align-items:center;font-style:normal;gap:calc(2 * var(--kolibri-spacing))}:host>span.smart-button>kol-span-wc{border-right:1px solid rgba(0, 0, 0, 0.25)}:host>span>kol-span-wc>span{display:flex;gap:var(--kolibri-spacing)}:host>span>kol-button-wc button{border-radius:0 var(--kolibri-spacing) var(--kolibri-spacing) 0;color:inherit}";r("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const v=/^([a-f0-9]{3}|[a-f0-9]{6})$/,w=class{constructor(t){o(this,t),this.bgColorStr="#000",this.colorStr="#fff",this.handleColorChange=o=>{let t,r=o;"string"==typeof r?(v.test(r)&&(a("[KolBadge] Bitte verwenden Sie zukünftig nur noch das Standard-Farbformat für CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."),r=`#${r}`),t=m(r)):t=m({background:r.backgroundColor,foreground:r.color}),t.contrast<7&&s(`[KolBadge] The contrast of ${t.contrast} (≥7, AAA) is too low, between the color pair ${t.background} and ${t.foreground}.`),this.bgColorStr=t.background,this.colorStr=t.foreground},this._color="#000",this._icon=void 0,this._iconOnly=!1,this._label=void 0,this._smartButton=void 0,this.state={_color:"#000",_label:"…"}}render(){return i(t,null,i("span",{class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},i("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._label}),"object"==typeof this.state._smartButton&&null!==this.state._smartButton&&i("kol-button-wc",{_ariaLabel:this.state._smartButton._ariaLabel,_customClass:this.state._smartButton._customClass,_disabled:this.state._smartButton._disabled,_icon:this.state._smartButton._icon,_iconOnly:!0,_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(o){l(this,"_color",(o=>"string"==typeof o||"object"==typeof o&&null!==o&&"string"==typeof o.backgroundColor&&"string"==typeof o.color),new Set(["string","KoliBriColor"]),o,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateLabel(o){b(this,o,{hooks:{afterPatch:o=>{"string"==typeof o&&o.length>32&&s(`[KolBadge] The label is too long for a badge (${o.length} > 32).`)}}})}validateSmartButton(o){c(o,(()=>{try{o=d(o)}catch(o){}p(this,"_smartButton",o)}))}componentWillLoad(){this.validateColor(this._color),this.validateLabel(this._label),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_label:["validateLabel"],_smartButton:["validateSmartButton"]}}};w.style={default:y};export{w as kol_badge};
+import{r as t,h as e,H as o}from"./index-50adf9a0.js";import{f as i,d as n,a as s}from"./a11y.tipps-1cea9822.js";import{r as a,c as r,a as l,o as p,p as h,s as c}from"./prop.validators-e402ad49.js";import{v as d}from"./label-d51b1a57.js";import{c as u}from"./index-d14da386.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-81bd9b41.js";const f=(t,o,a)=>(299*t+587*o+114*a)/1e3>=128?-1:1,b=(t,o,e,n=1)=>{const s=[Math.max(Math.min(Math.round(o[0]+n*Math.max(1,o[0]/100)),255),0),Math.max(Math.min(Math.round(o[1]+n*Math.max(1,o[1]/100)),255),0),Math.max(Math.min(Math.round(o[2]+n*Math.max(1,o[2]/100)),255),0)],i=r(a.hex(`rgba(${t.join(",")},1)`),a.hex(`rgba(${s.join(",")},1)`)),l=s[0]+s[1]+s[2];return 0===l||765===l||i>e?{background:t,foreground:s,contrast:i}:b(t,s,e,n)},y=new Map,g=(t,o,a,e=1)=>{if(y.has(t))return y.get(t);const r=b(t,o,a,e);return y.set(t,r),r},m=(t,o=7)=>{let e=[0,0,0,1],r=[255,255,255,1];"string"==typeof t?(e=u(t),r=e):"object"==typeof t&&null!==t&&"string"==typeof t.background&&"string"==typeof t.foreground&&(e=u(t.background),r="string"==typeof t.foreground?u(t.foreground):e);const n=f(e[0],e[1],e[2]),s=g([e[0],e[1],e[2]],[r[0],r[1],r[2]],o,n);return r=[...s.foreground,1],{background:a.hex(`rgba(${e.join(",")})`),foreground:a.hex(`rgba(${r.join(",")})`),contrast:s.contrast}},_=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>span{display:inline-flex;place-items:center}:host>span>kol-button-wc button{color:inherit}";i("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const w=/^([a-f0-9]{3}|[a-f0-9]{6})$/,k=class{constructor(o){t(this,o),this.bgColorStr="#000",this.colorStr="#fff",this.handleColorChange=t=>{let o,a=t;"string"==typeof a?(w.test(a)&&(n("[KolBadge] Bitte verwenden Sie zukünftig nur noch das Standard-Farbformat für CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."),a=`#${a}`),o=m(a)):o=m({background:a.backgroundColor,foreground:a.color}),o.contrast<7&&s(`[KolBadge] The contrast of ${o.contrast} (≥7, AAA) is too low, between the color pair ${o.background} and ${o.foreground}.`),this.bgColorStr=o.background,this.colorStr=o.foreground},this._color="#000",this._icon=void 0,this._iconOnly=!1,this._label=void 0,this._smartButton=void 0,this.state={_color:"#000",_label:"…"}}render(){return e(o,null,e("span",{class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},e("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._label}),"object"==typeof this.state._smartButton&&null!==this.state._smartButton&&e("kol-button-wc",{_ariaLabel:this.state._smartButton._ariaLabel,_customClass:this.state._smartButton._customClass,_disabled:this.state._smartButton._disabled,_icon:this.state._smartButton._icon,_iconOnly:!0,_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){l(this,"_color",(t=>"string"==typeof t||"object"==typeof t&&null!==t&&"string"==typeof t.backgroundColor&&"string"==typeof t.color),new Set(["string","KoliBriColor"]),t,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateLabel(t){d(this,t,{hooks:{afterPatch:t=>{"string"==typeof t&&t.length>32&&s(`[KolBadge] The label is too long for a badge (${t.length} > 32).`)}}})}validateSmartButton(t){p(t,(()=>{try{t=h(t)}catch(t){}c(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"]}}};k.style={default:_};export{k as kol_badge};

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

@@ -1 +1 @@
-{"version":3,"names":["getContrastYIQ","r","g","b","yiq","calcColorContrast","baseColor","contrastColor","ratio","dir","color","Math","max","min","round","contrast","hex","rgbaConvert","join","summe","background","foreground","cache","Map","getColorContrast","has","get","set","createContrastColorPair","contrastRatio","colorRgba","colorContrast","defaultStyleCss","featureHint","HACK_REG_EX","KolBadge","this","bgColorStr","colorStr","handleColorChange","value","test","devHint","backgroundColor","a11yHint","_color","_label","render","h","Host","class","state","_smartButton","style","_icon","_iconOnly","_ariaLabel","_customClass","_disabled","_id","_on","_tooltipAlign","_variant","validateColor","watchValidator","Set","defaultValue","hooks","beforePatch","validateLabel","afterPatch","length","validateSmartButton","objectObjectHandler","parseJson","e","setState","componentWillLoad"],"sources":["./src/components/badge/contrast.ts","./src/components/badge/style.css?tag=kol-badge&mode=default&encapsulation=shadow","./src/components/badge/component.tsx"],"sourcesContent":["import { rgbaConvert } from './rgba-convert';\nimport { hex } from 'wcag-contrast';\nimport { colorRgba } from './color-rgba';\nimport { RGB } from 'color-convert/conversions';\n\ntype RGBA = [number, number, number, number];\n\n// const calcColor = (color: RGBA, diff: number): RGBA => [\n//   Math.max(Math.min(Math.round(color[0] + (color[0] / 100 + 1) * diff), 255), 0),\n//   Math.max(Math.min(Math.round(color[1] + (color[1] / 100 + 1) * diff), 255), 0),\n//   Math.max(Math.min(Math.round(color[2] + (color[2] / 100 + 1) * diff), 255), 0),\n//   color[3],\n// ];\n\n// const relativeLuminanceFormel = (c: number): number => {\n//   if (c <= 0.03928) {\n//     return c / 12.92;\n//   } else {\n//     return ((c + 0.055) / 1.055) ** 2.4;\n//   }\n// };\n// // https://www.w3.org/TR/WCAG20/#contrast-ratiodef\n// const relativeLuminance = (r: number, g: number, b: number): number => {\n//   return (\n//     0.2126 * relativeLuminanceFormel(r) + 0.7152 * relativeLuminanceFormel(g) + 0.0722 * relativeLuminanceFormel(b)\n//   );\n// };\n\n// https://css-tricks.com/snippets/javascript/random-hex-color/\n// const randomColor = () => Math.floor(Math.random() * 16777215).toString(16);\n\n// https://24ways.org/2010/calculating-color-contrast/\n// ts-prune-ignore-next\nexport const getContrastYIQ = (r: number, g: number, b: number): number => {\n\tconst yiq = (r * 299 + g * 587 + b * 114) / 1000;\n\treturn yiq >= 128 ? -1 : 1;\n};\n\ntype ColorPair<T> = {\n\tbackground: T;\n\tforeground: T;\n};\n\nexport type ColorContrast<T> = ColorPair<T> & {\n\tcontrast: number;\n};\n\n// ts-prune-ignore-next\nexport const calcColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {\n\tconst color: RGB = [\n\t\tMath.max(Math.min(Math.round(contrastColor[0] + dir * Math.max(1, contrastColor[0] / 100)), 255), 0),\n\t\tMath.max(Math.min(Math.round(contrastColor[1] + dir * Math.max(1, contrastColor[1] / 100)), 255), 0),\n\t\tMath.max(Math.min(Math.round(contrastColor[2] + dir * Math.max(1, contrastColor[2] / 100)), 255), 0),\n\t];\n\tconst contrast = hex(rgbaConvert.hex(`rgba(${baseColor.join(',')},1)`), rgbaConvert.hex(`rgba(${color.join(',')},1)`));\n\tconst summe = color[0] + color[1] + color[2];\n\tif (summe === 0 || summe === 765 || contrast > ratio) {\n\t\treturn {\n\t\t\tbackground: baseColor,\n\t\t\tforeground: color,\n\t\t\tcontrast,\n\t\t};\n\t} else {\n\t\treturn calcColorContrast(baseColor, color, ratio, dir);\n\t}\n};\n\nconst cache: Map<unknown, ColorContrast<RGB>> = new Map();\n\n// ts-prune-ignore-next\nexport const getColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {\n\tif (cache.has(baseColor)) {\n\t\treturn cache.get(baseColor) as ColorContrast<RGB>;\n\t}\n\tconst color = calcColorContrast(baseColor, contrastColor, ratio, dir);\n\tcache.set(baseColor, color);\n\treturn color;\n};\n\nexport const createContrastColorPair = (color: string | ColorPair<string>, contrastRatio = 7): ColorContrast<string> => {\n\tlet baseColor: RGBA = [0, 0, 0, 1];\n\tlet contrastColor: RGBA = [255, 255, 255, 1];\n\tif (typeof color === 'string') {\n\t\tbaseColor = colorRgba(color);\n\t\tcontrastColor = baseColor;\n\t} else if (typeof color === 'object' && color !== null && typeof color.background === 'string' && typeof color.foreground === 'string') {\n\t\tbaseColor = colorRgba(color.background);\n\t\tif (typeof color.foreground === 'string') {\n\t\t\tcontrastColor = colorRgba(color.foreground);\n\t\t} else {\n\t\t\tcontrastColor = baseColor;\n\t\t}\n\t}\n\tconst yiq = getContrastYIQ(baseColor[0], baseColor[1], baseColor[2]);\n\tconst colorContrast = getColorContrast(\n\t\t[baseColor[0], baseColor[1], baseColor[2]],\n\t\t[contrastColor[0], contrastColor[1], contrastColor[2]],\n\t\tcontrastRatio,\n\t\tyiq\n\t);\n\tcontrastColor = [...colorContrast.foreground, 1];\n\n\treturn {\n\t\tbackground: rgbaConvert.hex(`rgba(${baseColor.join(',')})`),\n\t\tforeground: rgbaConvert.hex(`rgba(${contrastColor.join(',')})`),\n\t\tcontrast: colorContrast.contrast,\n\t};\n};\n","@import '../style.css';\n\n:host {\n\tdisplay: inline-block;\n}\n:host > span {\n\tborder-radius: var(--kolibri-border-radius);\n\tdisplay: flex;\n\t/* height: calc(1rem + 3 * var(--kolibri-spacing)); we could not limited the height */\n\tline-height: calc(1rem + var(--kolibri-spacing));\n\tplace-items: center;\n}\n:host > span kol-span-wc {\n\tpadding: var(--kolibri-spacing) calc(2 * var(--kolibri-spacing));\n}\n:host > span > kol-span-wc {\n\talign-items: center;\n\tfont-style: normal;\n\tgap: calc(2 * var(--kolibri-spacing));\n}\n:host > span.smart-button > kol-span-wc {\n\tborder-right: 1px solid rgba(0, 0, 0, 0.25);\n}\n:host > span > kol-span-wc > span {\n\tdisplay: flex;\n\tgap: var(--kolibri-spacing);\n}\n:host > span > kol-button-wc button {\n\tborder-radius: 0 var(--kolibri-spacing) var(--kolibri-spacing) 0;\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 { a11yHint, devHint, featureHint } from '../../utils/a11y.tipps';\nimport { objectObjectHandler, parseJson, setState, watchValidator } from '../../utils/prop.validators';\nimport { validateLabel } from '../../utils/validators/label';\nimport { ColorContrast, createContrastColorPair } from './contrast';\n\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\nconst HACK_REG_EX = /^([a-f0-9]{3}|[a-f0-9]{6})$/;\n\nexport type KoliBriColor = {\n\tbackgroundColor: string;\n\tcolor: string;\n};\n\n/**\n * API\n */\ntype RequiredProps = {\n\tlabel: string;\n};\ntype OptionalProps = {\n\tcolor: Stringified<KoliBriColor>;\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n\tsmartButton: Stringified<ButtonProps>;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tcolor: Stringified<KoliBriColor>;\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\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 _icon={this._icon} _iconOnly={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_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_icon={this.state._smartButton._icon}\n\t\t\t\t\t\t\t_iconOnly={true}\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 * Gibt die Farbe des Hintergrundes bzw. der Schrift an.\n\t */\n\t@Prop() public _color?: string | KoliBriColor = '#000';\n\n\t/**\n\t * Gibt einen Identifier eines Icons aus den Icofont's an. (https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt den Label-Text des Badges an.\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/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_color: '#000',\n\t\t_label: '…', // ⚠ required\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tlet color = value as string | KoliBriColor;\n\t\tlet colorContrast: ColorContrast<string>;\n\t\tif (typeof color === 'string') {\n\t\t\tif (HACK_REG_EX.test(color)) {\n\t\t\t\t// Catch Breaking Change - remove next Major\n\t\t\t\tdevHint(\n\t\t\t\t\t`[KolBadge] Bitte verwenden Sie zukünftig nur noch das Standard-Farbformat für CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).`\n\t\t\t\t);\n\t\t\t\tcolor = `#${color}`;\n\t\t\t}\n\t\t\tcolorContrast = createContrastColorPair(color);\n\t\t} else {\n\t\t\tcolorContrast = createContrastColorPair({\n\t\t\t\tbackground: color.backgroundColor,\n\t\t\t\tforeground: color.color,\n\t\t\t});\n\t\t}\n\t\tif (colorContrast.contrast < 7) {\n\t\t\ta11yHint(\n\t\t\t\t`[KolBadge] The contrast of ${colorContrast.contrast} (≥7, AAA) is too low, between the color pair ${colorContrast.background} and ${colorContrast.foreground}.`\n\t\t\t);\n\t\t}\n\t\tthis.bgColorStr = colorContrast.background;\n\t\tthis.colorStr = colorContrast.foreground;\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_color')\n\tpublic validateColor(value?: string | KoliBriColor): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_color',\n\t\t\t(value) =>\n\t\t\t\ttypeof value === 'string' ||\n\t\t\t\t(typeof value === 'object' && value !== null && typeof value.backgroundColor === 'string' && typeof value.color === 'string'),\n\t\t\tnew Set(['string', 'KoliBriColor']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: '#000',\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\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"],"mappings":"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"}
+{"version":3,"names":["getContrastYIQ","r","g","b","yiq","calcColorContrast","baseColor","contrastColor","ratio","dir","color","Math","max","min","round","contrast","hex","rgbaConvert","join","summe","background","foreground","cache","Map","getColorContrast","has","get","set","createContrastColorPair","contrastRatio","colorRgba","colorContrast","defaultStyleCss","featureHint","HACK_REG_EX","KolBadge","this","bgColorStr","colorStr","handleColorChange","value","test","devHint","backgroundColor","a11yHint","_color","_label","render","h","Host","class","state","_smartButton","style","_icon","_iconOnly","_ariaLabel","_customClass","_disabled","_id","_on","_tooltipAlign","_variant","validateColor","watchValidator","Set","defaultValue","hooks","beforePatch","validateLabel","afterPatch","length","validateSmartButton","objectObjectHandler","parseJson","e","setState","componentWillLoad"],"sources":["./src/components/badge/contrast.ts","./src/components/badge/style.css?tag=kol-badge&mode=default&encapsulation=shadow","./src/components/badge/component.tsx"],"sourcesContent":["import { rgbaConvert } from './rgba-convert';\nimport { hex } from 'wcag-contrast';\nimport { colorRgba } from './color-rgba';\nimport { RGB } from 'color-convert/conversions';\n\ntype RGBA = [number, number, number, number];\n\n// const calcColor = (color: RGBA, diff: number): RGBA => [\n//   Math.max(Math.min(Math.round(color[0] + (color[0] / 100 + 1) * diff), 255), 0),\n//   Math.max(Math.min(Math.round(color[1] + (color[1] / 100 + 1) * diff), 255), 0),\n//   Math.max(Math.min(Math.round(color[2] + (color[2] / 100 + 1) * diff), 255), 0),\n//   color[3],\n// ];\n\n// const relativeLuminanceFormel = (c: number): number => {\n//   if (c <= 0.03928) {\n//     return c / 12.92;\n//   } else {\n//     return ((c + 0.055) / 1.055) ** 2.4;\n//   }\n// };\n// // https://www.w3.org/TR/WCAG20/#contrast-ratiodef\n// const relativeLuminance = (r: number, g: number, b: number): number => {\n//   return (\n//     0.2126 * relativeLuminanceFormel(r) + 0.7152 * relativeLuminanceFormel(g) + 0.0722 * relativeLuminanceFormel(b)\n//   );\n// };\n\n// https://css-tricks.com/snippets/javascript/random-hex-color/\n// const randomColor = () => Math.floor(Math.random() * 16777215).toString(16);\n\n// https://24ways.org/2010/calculating-color-contrast/\n// ts-prune-ignore-next\nexport const getContrastYIQ = (r: number, g: number, b: number): number => {\n\tconst yiq = (r * 299 + g * 587 + b * 114) / 1000;\n\treturn yiq >= 128 ? -1 : 1;\n};\n\ntype ColorPair<T> = {\n\tbackground: T;\n\tforeground: T;\n};\n\nexport type ColorContrast<T> = ColorPair<T> & {\n\tcontrast: number;\n};\n\n// ts-prune-ignore-next\nexport const calcColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {\n\tconst color: RGB = [\n\t\tMath.max(Math.min(Math.round(contrastColor[0] + dir * Math.max(1, contrastColor[0] / 100)), 255), 0),\n\t\tMath.max(Math.min(Math.round(contrastColor[1] + dir * Math.max(1, contrastColor[1] / 100)), 255), 0),\n\t\tMath.max(Math.min(Math.round(contrastColor[2] + dir * Math.max(1, contrastColor[2] / 100)), 255), 0),\n\t];\n\tconst contrast = hex(rgbaConvert.hex(`rgba(${baseColor.join(',')},1)`), rgbaConvert.hex(`rgba(${color.join(',')},1)`));\n\tconst summe = color[0] + color[1] + color[2];\n\tif (summe === 0 || summe === 765 || contrast > ratio) {\n\t\treturn {\n\t\t\tbackground: baseColor,\n\t\t\tforeground: color,\n\t\t\tcontrast,\n\t\t};\n\t} else {\n\t\treturn calcColorContrast(baseColor, color, ratio, dir);\n\t}\n};\n\nconst cache: Map<unknown, ColorContrast<RGB>> = new Map();\n\n// ts-prune-ignore-next\nexport const getColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {\n\tif (cache.has(baseColor)) {\n\t\treturn cache.get(baseColor) as ColorContrast<RGB>;\n\t}\n\tconst color = calcColorContrast(baseColor, contrastColor, ratio, dir);\n\tcache.set(baseColor, color);\n\treturn color;\n};\n\nexport const createContrastColorPair = (color: string | ColorPair<string>, contrastRatio = 7): ColorContrast<string> => {\n\tlet baseColor: RGBA = [0, 0, 0, 1];\n\tlet contrastColor: RGBA = [255, 255, 255, 1];\n\tif (typeof color === 'string') {\n\t\tbaseColor = colorRgba(color);\n\t\tcontrastColor = baseColor;\n\t} else if (typeof color === 'object' && color !== null && typeof color.background === 'string' && typeof color.foreground === 'string') {\n\t\tbaseColor = colorRgba(color.background);\n\t\tif (typeof color.foreground === 'string') {\n\t\t\tcontrastColor = colorRgba(color.foreground);\n\t\t} else {\n\t\t\tcontrastColor = baseColor;\n\t\t}\n\t}\n\tconst yiq = getContrastYIQ(baseColor[0], baseColor[1], baseColor[2]);\n\tconst colorContrast = getColorContrast(\n\t\t[baseColor[0], baseColor[1], baseColor[2]],\n\t\t[contrastColor[0], contrastColor[1], contrastColor[2]],\n\t\tcontrastRatio,\n\t\tyiq\n\t);\n\tcontrastColor = [...colorContrast.foreground, 1];\n\n\treturn {\n\t\tbackground: rgbaConvert.hex(`rgba(${baseColor.join(',')})`),\n\t\tforeground: rgbaConvert.hex(`rgba(${contrastColor.join(',')})`),\n\t\tcontrast: colorContrast.contrast,\n\t};\n};\n","@import '../style.css';\n\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 { a11yHint, devHint, featureHint } from '../../utils/a11y.tipps';\nimport { objectObjectHandler, parseJson, setState, watchValidator } from '../../utils/prop.validators';\nimport { validateLabel } from '../../types/props/label';\nimport { ColorContrast, createContrastColorPair } from './contrast';\n\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\nconst HACK_REG_EX = /^([a-f0-9]{3}|[a-f0-9]{6})$/;\n\nexport type KoliBriColor = {\n\tbackgroundColor: string;\n\tcolor: string;\n};\n\ntype RequiredProps = {\n\tlabel: string;\n};\ntype OptionalProps = {\n\tcolor: Stringified<KoliBriColor>;\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n\tsmartButton: Stringified<ButtonProps>;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tcolor: Stringified<KoliBriColor>;\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\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 _icon={this._icon} _iconOnly={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_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_icon={this.state._smartButton._icon}\n\t\t\t\t\t\t\t_iconOnly={true}\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 * Gibt die Farbe des Hintergrundes bzw. der Schrift an.\n\t */\n\t@Prop() public _color?: string | KoliBriColor = '#000';\n\n\t/**\n\t * Gibt einen Identifier eines Icons aus den Icofont's an. (https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt den Label-Text des Badges an.\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: '#000',\n\t\t_label: '…', // ⚠ required\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tlet color = value as string | KoliBriColor;\n\t\tlet colorContrast: ColorContrast<string>;\n\t\tif (typeof color === 'string') {\n\t\t\tif (HACK_REG_EX.test(color)) {\n\t\t\t\t// Catch Breaking Change - remove next Major\n\t\t\t\tdevHint(\n\t\t\t\t\t`[KolBadge] Bitte verwenden Sie zukünftig nur noch das Standard-Farbformat für CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).`\n\t\t\t\t);\n\t\t\t\tcolor = `#${color}`;\n\t\t\t}\n\t\t\tcolorContrast = createContrastColorPair(color);\n\t\t} else {\n\t\t\tcolorContrast = createContrastColorPair({\n\t\t\t\tbackground: color.backgroundColor,\n\t\t\t\tforeground: color.color,\n\t\t\t});\n\t\t}\n\t\tif (colorContrast.contrast < 7) {\n\t\t\ta11yHint(\n\t\t\t\t`[KolBadge] The contrast of ${colorContrast.contrast} (≥7, AAA) is too low, between the color pair ${colorContrast.background} and ${colorContrast.foreground}.`\n\t\t\t);\n\t\t}\n\t\tthis.bgColorStr = colorContrast.background;\n\t\tthis.colorStr = colorContrast.foreground;\n\t};\n\n\t@Watch('_color')\n\tpublic validateColor(value?: string | KoliBriColor): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_color',\n\t\t\t(value) =>\n\t\t\t\ttypeof value === 'string' ||\n\t\t\t\t(typeof value === 'object' && value !== null && typeof value.backgroundColor === 'string' && typeof value.color === 'string'),\n\t\t\tnew Set(['string', 'KoliBriColor']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: '#000',\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t\t},\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"],"mappings":";;;8WAiCO,MAAMA,EAAiB,CAACC,EAAWC,EAAWC,KACpD,MAAMC,GAAOH,EAAI,IAAMC,EAAI,IAAMC,EAAI,KAAO,IAC5C,OAAOC,GAAO,KAAO,EAAI,CAAC,EAapB,MAAMC,EAAoB,CAACC,EAAgBC,EAAoBC,EAAeC,EAAM,KAC1F,MAAMC,EAAa,CAClBC,KAAKC,IAAID,KAAKE,IAAIF,KAAKG,MAAMP,EAAc,GAAKE,EAAME,KAAKC,IAAI,EAAGL,EAAc,GAAK,MAAO,KAAM,GAClGI,KAAKC,IAAID,KAAKE,IAAIF,KAAKG,MAAMP,EAAc,GAAKE,EAAME,KAAKC,IAAI,EAAGL,EAAc,GAAK,MAAO,KAAM,GAClGI,KAAKC,IAAID,KAAKE,IAAIF,KAAKG,MAAMP,EAAc,GAAKE,EAAME,KAAKC,IAAI,EAAGL,EAAc,GAAK,MAAO,KAAM,IAEnG,MAAMQ,EAAWC,EAAIC,EAAYD,IAAI,QAAQV,EAAUY,KAAK,WAAYD,EAAYD,IAAI,QAAQN,EAAMQ,KAAK,YAC3G,MAAMC,EAAQT,EAAM,GAAKA,EAAM,GAAKA,EAAM,GAC1C,GAAIS,IAAU,GAAKA,IAAU,KAAOJ,EAAWP,EAAO,CACrD,MAAO,CACNY,WAAYd,EACZe,WAAYX,EACZK,W,KAEK,CACN,OAAOV,EAAkBC,EAAWI,EAAOF,EAAOC,E,GAIpD,MAAMa,EAA0C,IAAIC,IAG7C,MAAMC,EAAmB,CAAClB,EAAgBC,EAAoBC,EAAeC,EAAM,KACzF,GAAIa,EAAMG,IAAInB,GAAY,CACzB,OAAOgB,EAAMI,IAAIpB,E,CAElB,MAAMI,EAAQL,EAAkBC,EAAWC,EAAeC,EAAOC,GACjEa,EAAMK,IAAIrB,EAAWI,GACrB,OAAOA,CAAK,EAGN,MAAMkB,EAA0B,CAAClB,EAAmCmB,EAAgB,KAC1F,IAAIvB,EAAkB,CAAC,EAAG,EAAG,EAAG,GAChC,IAAIC,EAAsB,CAAC,IAAK,IAAK,IAAK,GAC1C,UAAWG,IAAU,SAAU,CAC9BJ,EAAYwB,EAAUpB,GACtBH,EAAgBD,C,MACV,UAAWI,IAAU,UAAYA,IAAU,aAAeA,EAAMU,aAAe,iBAAmBV,EAAMW,aAAe,SAAU,CACvIf,EAAYwB,EAAUpB,EAAMU,YAC5B,UAAWV,EAAMW,aAAe,SAAU,CACzCd,EAAgBuB,EAAUpB,EAAMW,W,KAC1B,CACNd,EAAgBD,C,EAGlB,MAAMF,EAAMJ,EAAeM,EAAU,GAAIA,EAAU,GAAIA,EAAU,IACjE,MAAMyB,EAAgBP,EACrB,CAAClB,EAAU,GAAIA,EAAU,GAAIA,EAAU,IACvC,CAACC,EAAc,GAAIA,EAAc,GAAIA,EAAc,IACnDsB,EACAzB,GAEDG,EAAgB,IAAIwB,EAAcV,WAAY,GAE9C,MAAO,CACND,WAAYH,EAAYD,IAAI,QAAQV,EAAUY,KAAK,SACnDG,WAAYJ,EAAYD,IAAI,QAAQT,EAAcW,KAAK,SACvDH,SAAUgB,EAAchB,SACxB,EC1GF,MAAMiB,EAAkB,yhCCWxBC,EAAY,uEAEZ,MAAMC,EAAc,8B,MAkCPC,EAAQ,M,yBACZC,KAAAC,WAAa,OACbD,KAAAE,SAAW,OAgEXF,KAAAG,kBAAqBC,IAC5B,IAAI9B,EAAQ8B,EACZ,IAAIT,EACJ,UAAWrB,IAAU,SAAU,CAC9B,GAAIwB,EAAYO,KAAK/B,GAAQ,CAE5BgC,EACC,qJAEDhC,EAAQ,IAAIA,G,CAEbqB,EAAgBH,EAAwBlB,E,KAClC,CACNqB,EAAgBH,EAAwB,CACvCR,WAAYV,EAAMiC,gBAClBtB,WAAYX,EAAMA,O,CAGpB,GAAIqB,EAAchB,SAAW,EAAG,CAC/B6B,EACC,8BAA8Bb,EAAchB,yDAAyDgB,EAAcX,kBAAkBW,EAAcV,c,CAGrJe,KAAKC,WAAaN,EAAcX,WAChCgB,KAAKE,SAAWP,EAAcV,UAAU,E,YAnDO,O,oCAUM,M,6DAYtB,CAC/BwB,OAAQ,OACRC,OAAQ,I,CA3DFC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,QACCE,MAAO,CACN,sBAAuBd,KAAKe,MAAMC,eAAiB,UAAYhB,KAAKe,MAAMC,eAAiB,MAE5FC,MAAO,CACNV,gBAAiBP,KAAKC,WACtB3B,MAAO0B,KAAKE,WAGbU,EAAA,eAAaM,MAAOlB,KAAKkB,MAAOC,UAAWnB,KAAKmB,UAAWT,OAAQV,KAAKe,MAAML,gBACtEV,KAAKe,MAAMC,eAAiB,UAAYhB,KAAKe,MAAMC,eAAiB,MAC3EJ,EAAA,iBACCQ,WAAYpB,KAAKe,MAAMC,aAAaI,WACpCC,aAAcrB,KAAKe,MAAMC,aAAaK,aACtCC,UAAWtB,KAAKe,MAAMC,aAAaM,UACnCJ,MAAOlB,KAAKe,MAAMC,aAAaE,MAC/BC,UAAW,KACXI,IAAKvB,KAAKe,MAAMC,aAAaO,IAC7Bb,OAAQV,KAAKe,MAAMC,aAAaN,OAChCc,IAAKxB,KAAKe,MAAMC,aAAaQ,IAC7BC,cAAezB,KAAKe,MAAMC,aAAaS,cACvCC,SAAU1B,KAAKe,MAAMC,aAAaU,Y,CAkEjCC,cAAcvB,GACpBwB,EACC5B,KACA,UACCI,UACOA,IAAU,iBACTA,IAAU,UAAYA,IAAU,aAAeA,EAAMG,kBAAoB,iBAAmBH,EAAM9B,QAAU,UACrH,IAAIuD,IAAI,CAAC,SAAU,iBACnBzB,EACA,CACC0B,aAAc,OACdC,MAAO,CACNC,YAAahC,KAAKG,oB,CAOf8B,cAAc7B,GACpB6B,EAAcjC,KAAMI,EAAO,CAC1B2B,MAAO,CACNG,WAAa9B,IACZ,UAAWA,IAAU,UAAYA,EAAM+B,OAAS,GAAI,CACnD3B,EAAS,iDAAiDJ,EAAM+B,gB,MAQ9DC,oBAAoBhC,GAC1BiC,EAAoBjC,GAAO,KAC1B,IACCA,EAAQkC,EAAuBlC,E,CAE9B,MAAOmC,G,CAGTC,EAASxC,KAAM,eAAgBI,EAAM,G,CAIhCqC,oBACNzC,KAAK2B,cAAc3B,KAAKS,QACxBT,KAAKiC,cAAcjC,KAAKU,QACxBV,KAAKoC,oBAAoBpC,KAAKgB,a"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as o,F as r,H as a}from"./index-50adf9a0.js";import{b as e}from"./a11y.tipps-5cdbd5e2.js";import{w as l}from"./prop.validators-769a843a.js";import{w as n}from"./validation-f13f1eed.js";import"./dev.utils-05f4e663.js";import"./reuse-56bb5a4b.js";import"./index-676dbf61.js";const t=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}a,button{background-color:transparent;border:none;font-size:inherit;margin:0;padding:0;transition-duration:0.5s;transition-property:background-color, color, border-color}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>kol-icon,kol-span-wc>span>kol-icon{display:inline-grid;place-items:center;width:1em;height:1em}a,button,input,select,textarea{appearance:none;cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}h1,h2,h3,h4,h5,h6{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size);margin:0;padding:0}ul,li{margin:0;padding:0;list-style:none;display:flex;gap:0.5em;flex-wrap:wrap;place-items:center}kol-icon::part(separator){font-weight:900;font-size:0.7em}kol-icon::part(separator)::before{content:'\\f054';font-family:'Font Awesome 6 Free'}",s=class{constructor(a){i(this,a),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){const i=this.state._links.length-1;return o(a,null,o("nav",{"aria-label":this.state._ariaLabel},o("ul",null,0===this.state._links.length&&o("li",null,o("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-house"}),"…"),this.state._links.map(((a,l)=>o("li",{key:l},0!==l&&o("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-angle-right",_part:"separator",exportparts:"separator"}),l===i?o("span",null,a._iconOnly?o("kol-icon",{_ariaLabel:a._label,_icon:"string"==typeof a._icon?a._icon:"fa-solid fa-link-slash"}):o(r,null,a._label)):o("kol-link",Object.assign({exportparts:"link",_useCase:"nav"},a,{_ariaLabel:a._label}),a._label)))))))}validateAriaLabel(i){l(this,"_ariaLabel",i,{required:!0}),e(i)}validateLinks(i){n("KolBreadcrumb",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};s.style={default:t};export{s as kol_breadcrumb};
+import{r as t,h as i,F as e,H as a}from"./index-50adf9a0.js";import{b as n}from"./a11y.tipps-1cea9822.js";import{w as o}from"./prop.validators-e402ad49.js";import{w as r}from"./validation-ab9a6c0d.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-81bd9b41.js";const s=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}ul,li{margin:0;padding:0;list-style:none;display:flex;gap:0.5em;flex-wrap:wrap;place-items:center}kol-icon::part(separator){font-weight:900;font-size:0.7em}kol-icon::part(separator)::before{content:'\\f054';font-family:'Font Awesome 6 Free'}",l=class{constructor(i){t(this,i),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){const t=this.state._links.length-1;return i(a,null,i("nav",{"aria-label":this.state._ariaLabel},i("ul",null,0===this.state._links.length&&i("li",null,i("kol-icon",{_ariaLabel:"",_icon:"codicon codicon-home"}),"…"),this.state._links.map(((a,n)=>i("li",{key:n},0!==n&&i("kol-icon",{_ariaLabel:"",_icon:"codicon codicon-chevron-right"}),n===t?i("span",null,a._iconOnly?i("kol-icon",{_ariaLabel:a._label,_icon:"string"==typeof a._icon?a._icon:"codicon codicon-symbol-event"}):i(e,null,a._label)):i("kol-link",Object.assign({_useCase:"nav"},a,{_ariaLabel:a._label}),a._label)))))))}validateAriaLabel(i){o(this,"_ariaLabel",i,{required:!0}),n(i)}validateLinks(i){r("KolBreadcrumb",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};l.style={default:s};export{l as kol_breadcrumb};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolBreadcrumb","_ariaLabel","_links","render","lastIndex","this","state","length","h","Host","_icon","map","link","index","key","_part","exportparts","_iconOnly","_label","Fragment","Object","assign","_useCase","validateAriaLabel","value","watchString","required","a11yHintLabelingLandmarks","validateLinks","watchNavLinks","componentWillLoad"],"sources":["./src/components/breadcrumb/style.css?tag=kol-breadcrumb&mode=default&encapsulation=shadow","./src/components/breadcrumb/component.tsx"],"sourcesContent":["@import '../style.css';\n\nul,\nli {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tdisplay: flex;\n\tgap: 0.5em;\n\tflex-wrap: wrap;\n\tplace-items: center;\n}\n\nkol-icon::part(separator) {\n\tfont-weight: 900;\n\tfont-size: 0.7em;\n}\n\nkol-icon::part(separator)::before {\n\tcontent: '\\f054';\n\tfont-family: 'Font Awesome 6 Free';\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { NavLinkProps } from '../link/component';\nimport { watchNavLinks } from '../nav/validation';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<NavLinkProps[]>;\n};\ntype OptionalProps = unknown;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: NavLinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @part link - Ermöglicht das Stylen der Links.\n * @part separator - Ermöglicht das Ändern des Separator-Icons.\n */\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-house\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map((link, index: number) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t{index !== 0 && <kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-angle-right\" _part=\"separator\" exportparts=\"separator\" />}\n\t\t\t\t\t\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t{link._iconOnly ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<kol-icon _ariaLabel={link._label} _icon={typeof link._icon === 'string' ? link._icon : 'fa-solid fa-link-slash'} />\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<Fragment>{link._label}</Fragment>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<kol-link exportparts=\"link\" _useCase=\"nav\" {...link} _ariaLabel={link._label}>\n\t\t\t\t\t\t\t\t\t\t\t{link._label}\n\t\t\t\t\t\t\t\t\t\t</kol-link>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Gibt die geordnete Liste der Seitenhierarchie in Links an.\n\t */\n\t@Prop() public _links!: Stringified<NavLinkProps[]>;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<NavLinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;iSAAA,MAAMA,EAAkB,ypD,MCqCXC,EAAa,M,oFAmDO,CAC/BC,WAAY,IACZC,OAAQ,G,CApDFC,SACN,MAAMC,EAAYC,KAAKC,MAAMJ,OAAOK,OAAS,EAC7C,OACCC,EAACC,EAAI,KACJD,EAAA,oBAAiBH,KAAKC,MAAML,YAC3BO,EAAA,UACEH,KAAKC,MAAMJ,OAAOK,SAAW,GAC7BC,EAAA,UACCA,EAAA,YAAUP,WAAW,GAAGS,MAAM,sBAAsB,KAGrDL,KAAKC,MAAMJ,OAAOS,KAAI,CAACC,EAAMC,IAE5BL,EAAA,MAAIM,IAAKD,GACPA,IAAU,GAAKL,EAAA,YAAUP,WAAW,GAAGS,MAAM,0BAA0BK,MAAM,YAAYC,YAAY,cACrGH,IAAUT,EACVI,EAAA,YACEI,EAAKK,UACLT,EAAA,YAAUP,WAAYW,EAAKM,OAAQR,aAAcE,EAAKF,QAAU,SAAWE,EAAKF,MAAQ,2BAExFF,EAACW,EAAQ,KAAEP,EAAKM,SAIlBV,EAAA,WAAAY,OAAAC,OAAA,CAAUL,YAAY,OAAOM,SAAS,OAAUV,EAAI,CAAEX,WAAYW,EAAKM,SACrEN,EAAKM,a,CAkCTK,kBAAkBC,GACxBC,EAAYpB,KAAM,aAAcmB,EAAO,CACtCE,SAAU,OAEXC,EAA0BH,E,CAOpBI,cAAcJ,GACpBK,EAAc,gBAAiBxB,KAAMmB,E,CAM/BM,oBACNzB,KAAKkB,kBAAkBlB,KAAKJ,YAC5BI,KAAKuB,cAAcvB,KAAKH,O"}
+{"version":3,"names":["defaultStyleCss","KolBreadcrumb","_ariaLabel","_links","render","lastIndex","this","state","length","h","Host","_icon","map","link","index","key","_iconOnly","_label","Fragment","Object","assign","_useCase","validateAriaLabel","value","watchString","required","a11yHintLabelingLandmarks","validateLinks","watchNavLinks","componentWillLoad"],"sources":["./src/components/breadcrumb/style.css?tag=kol-breadcrumb&mode=default&encapsulation=shadow","./src/components/breadcrumb/component.tsx"],"sourcesContent":["@import '../style.css';\n\nul,\nli {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tdisplay: flex;\n\tgap: 0.5em;\n\tflex-wrap: wrap;\n\tplace-items: center;\n}\n\nkol-icon::part(separator) {\n\tfont-weight: 900;\n\tfont-size: 0.7em;\n}\n\nkol-icon::part(separator)::before {\n\tcontent: '\\f054';\n\tfont-family: 'Font Awesome 6 Free';\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { LinkProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { watchNavLinks } from '../nav/validation';\n\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<LinkProps[]>;\n};\ntype OptionalProps = unknown;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: LinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-icon _ariaLabel=\"\" _icon=\"codicon codicon-home\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map((link, index: number) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t{index !== 0 && <kol-icon _ariaLabel=\"\" _icon=\"codicon codicon-chevron-right\" />}\n\t\t\t\t\t\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t{link._iconOnly ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<kol-icon _ariaLabel={link._label} _icon={typeof link._icon === 'string' ? link._icon : 'codicon codicon-symbol-event'} />\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<Fragment>{link._label}</Fragment>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<kol-link _useCase=\"nav\" {...link} _ariaLabel={link._label}>\n\t\t\t\t\t\t\t\t\t\t\t{link._label}\n\t\t\t\t\t\t\t\t\t\t</kol-link>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Gibt die geordnete Liste der Seitenhierarchie in Links an.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;iSAAA,MAAMA,EAAkB,0qC,MC8BXC,EAAa,M,oFAgDO,CAC/BC,WAAY,IACZC,OAAQ,G,CAjDFC,SACN,MAAMC,EAAYC,KAAKC,MAAMJ,OAAOK,OAAS,EAC7C,OACCC,EAACC,EAAI,KACJD,EAAA,oBAAiBH,KAAKC,MAAML,YAC3BO,EAAA,UACEH,KAAKC,MAAMJ,OAAOK,SAAW,GAC7BC,EAAA,UACCA,EAAA,YAAUP,WAAW,GAAGS,MAAM,yBAAyB,KAGxDL,KAAKC,MAAMJ,OAAOS,KAAI,CAACC,EAAMC,IAE5BL,EAAA,MAAIM,IAAKD,GACPA,IAAU,GAAKL,EAAA,YAAUP,WAAW,GAAGS,MAAM,kCAC7CG,IAAUT,EACVI,EAAA,YACEI,EAAKG,UACLP,EAAA,YAAUP,WAAYW,EAAKI,OAAQN,aAAcE,EAAKF,QAAU,SAAWE,EAAKF,MAAQ,iCAExFF,EAACS,EAAQ,KAAEL,EAAKI,SAIlBR,EAAA,WAAAU,OAAAC,OAAA,CAAUC,SAAS,OAAUR,EAAI,CAAEX,WAAYW,EAAKI,SAClDJ,EAAKI,a,CA4BTK,kBAAkBC,GACxBC,EAAYlB,KAAM,aAAciB,EAAO,CACtCE,SAAU,OAEXC,EAA0BH,E,CAIpBI,cAAcJ,GACpBK,EAAc,gBAAiBtB,KAAMiB,E,CAG/BM,oBACNvB,KAAKgB,kBAAkBhB,KAAKJ,YAC5BI,KAAKqB,cAAcrB,KAAKH,O"}

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

@@ -1 +1 @@
-{"version":3,"names":["KolButtonGroupWc","render","h","Host"],"sources":["./src/components/button-group/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, State } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\n\n/**\n * API\n */\ntype RequiredProps = unknown;\ntype OptionalProps = unknown;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-button-group-wc',\n\tshadow: false,\n})\nexport class KolButtonGroupWc implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {};\n}\n"],"mappings":";;;uDAmBaA,EAAgB,M,oCAYI,E,CAXzBC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,a"}
+{"version":3,"names":["KolButtonGroupWc","render","h","Host"],"sources":["./src/components/button-group/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, State } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\n\ntype RequiredProps = unknown;\ntype OptionalProps = unknown;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-button-group-wc',\n\tshadow: false,\n})\nexport class KolButtonGroupWc implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: States = {};\n}\n"],"mappings":";;;uDAgBaA,EAAgB,M,oCASI,E,CARzBC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,a"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButtonGroup","render","h","Host"],"sources":["./src/components/button-group/style.css?tag=kol-button-group&mode=default&encapsulation=shadow","./src/components/button-group/shadow.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > kol-button-group-wc {\n\tdisplay: inline-flex;\n\tflex-wrap: wrap;\n\tgap: calc(2 * var(--kolibri-spacing));\n}\n","import { Component, h, Host, JSX } from '@stencil/core';\n\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-group-wc>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-button-group-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,0gD,MCWXC,EAAc,M,yBACnBC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,2BACCA,EAAA,c"}
+{"version":3,"names":["defaultStyleCss","KolButtonGroup","render","h","Host"],"sources":["./src/components/button-group/style.css?tag=kol-button-group&mode=default&encapsulation=shadow","./src/components/button-group/shadow.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > kol-button-group-wc {\n\tdisplay: inline-flex;\n\tflex-wrap: wrap;\n}\n","import { Component, h, Host, JSX } from '@stencil/core';\n\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-group-wc>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-button-group-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,s/B,MCWXC,EAAc,M,yBACnBC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,2BACCA,EAAA,c"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as o,H as e,g as n}from"./index-50adf9a0.js";import{a as r}from"./reuse-56bb5a4b.js";const t=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}a,button{background-color:transparent;border:none;font-size:inherit;margin:0;padding:0;transition-duration:0.5s;transition-property:background-color, color, border-color}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>kol-icon,kol-span-wc>span>kol-icon{display:inline-grid;place-items:center;width:1em;height:1em}a,button,input,select,textarea{appearance:none;cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}h1,h2,h3,h4,h5,h6{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size);margin:0;padding:0}a,button{text-decoration-line:underline}a{display:inline-flex}:is(a,button):is(:focus,:hover){text-decoration-thickness:0.2em}kol-icon{padding:0 var(--kolibri-spacing)}.hidden{display:none;visibility:hidden}.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}.skip:focus{background-color:white;box-shadow:0 0 calc(2 * var(--kolibri-spacing)) calc(2 * var(--kolibri-spacing)) white;left:unset;position:unset}",s=class{constructor(o){i(this,o),this.catchRef=i=>{this.ref=i,r(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._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 o(e,null,o("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,_iconOnly: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},o("slot",{name:"expert",slot:"expert"})))}get host(){return n(this)}};s.style={default:t};export{s as kol_button_link};
+import{r as t,h as i,H as e,g as n}from"./index-50adf9a0.js";import{a as s}from"./reuse-3a02afb9.js";const o=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){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:white;left:unset;padding:1em;position:unset}kol-icon.external-link-icon{display:inline-flex}",a=class{constructor(i){t(this,i),this.catchRef=i=>{this.ref=i,s(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._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 i(e,null,i("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,_iconOnly: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},i("slot",{name:"expert",slot:"expert"})))}get host(){return n(this)}};a.style={default:o};export{a as kol_button_link};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButtonLink","this","catchRef","ref","propergateFocus","host","render","h","Host","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_icon","_iconOnly","_id","_label","_on","_role","_tabIndex","_tooltipAlign","_type","_value","name","slot"],"sources":["./src/components/button-link/style.css?tag=kol-button-link&mode=default&encapsulation=shadow","./src/components/button-link/component.tsx"],"sourcesContent":["@import '../link.css';\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tOptionalButtonLinkProps,\n\tRequiredButtonLinkProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { propergateFocus } from '../../utils/reuse';\nimport { Alignment } from '../../types/props/alignment';\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\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\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_iconOnly={this._iconOnly}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role=\"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{/*\n\t\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t*/}\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Gibt an, welchen aktuellen Auswahlstatus der Button hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/**\n\t * Gibt an, ob durch den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop({ reflect: true }) public _ariaExpanded?: boolean;\n\n\t/**\n\t * Gibt einen beschreibenden Text für den Screenreader an. Damit die\n\t * Sprachsteuerung von interaktiven Elementen funktioniert, muss der\n\t * Aria-Label-Text mit dem Label-Text des Buttons beginnen.\n\t *\n\t * - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop({ reflect: true }) public _ariaSelected?: boolean;\n\n\t/**\n\t * Gibt an, ob der Button deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt die ID der Schaltfläche an. (Selection, Testing)\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt einen beschreibenden Text für das Text-Element an.\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: KoliBriButtonCallbacks<unknown>;\n\n\t/**\n\t * Gibt an, welche Role der Schalter hat.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/**\n\t * Gibt an, welche Typ der Button hat.\n\t */\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/**\n\t * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<unknown>;\n}\n"],"mappings":";;;qGAAA,MAAMA,EAAkB,i2D,MCuBXC,EAAa,M,yBAIRC,KAAAC,SAAYC,IAC5BF,KAAKE,IAAMA,EACXC,EAAgBH,KAAKI,KAAMJ,KAAKE,IAAI,E,sLAyEiB,M,oCAUA,M,6HA8BX,M,WAKA,S,sBAnHpCG,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBACCJ,IAAKF,KAAKC,SACVO,WAAYR,KAAKQ,WACjBC,cAAeT,KAAKS,cACpBC,aAAcV,KAAKU,aACnBC,cAAeX,KAAKW,cACpBC,WAAYZ,KAAKY,WACjBC,cAAeb,KAAKa,cACpBC,UAAWd,KAAKc,UAChBC,MAAOf,KAAKe,MACZC,UAAWhB,KAAKgB,UAChBC,IAAKjB,KAAKiB,IACVC,OAAQlB,KAAKkB,OACbC,IAAKnB,KAAKmB,IACVC,MAAM,OACNC,UAAWrB,KAAKqB,UAChBC,cAAetB,KAAKsB,cACpBC,MAAOvB,KAAKuB,MACZC,OAAQxB,KAAKwB,QAMblB,EAAA,QAAMmB,KAAK,SAASC,KAAK,Y"}
+{"version":3,"names":["defaultStyleCss","KolButtonLink","this","catchRef","ref","propagateFocus","host","render","h","Host","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_icon","_iconOnly","_id","_label","_on","_role","_tabIndex","_tooltipAlign","_type","_value","name","slot"],"sources":["./src/components/button-link/style.css?tag=kol-button-link&mode=default&encapsulation=shadow","./src/components/button-link/component.tsx"],"sourcesContent":["@import '../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, PropAlignment } 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_iconOnly={this._iconOnly}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role=\"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{/*\n\t\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t*/}\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Gibt an, welchen aktuellen Auswahlstatus der Button hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/**\n\t * Gibt an, ob durch den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop({ reflect: true }) public _ariaExpanded?: boolean;\n\n\t/**\n\t * Gibt einen beschreibenden Text für den Screenreader an. Damit die\n\t * Sprachsteuerung von interaktiven Elementen funktioniert, muss der\n\t * Aria-Label-Text mit dem Label-Text des Buttons beginnen.\n\t *\n\t * - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop({ reflect: true }) public _ariaSelected?: boolean;\n\n\t/**\n\t * Gibt an, ob der Button deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt die ID der Schaltfläche an. (Selection, Testing)\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt einen beschreibenden Text für das Text-Element an.\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: KoliBriButtonCallbacks<unknown>;\n\n\t/**\n\t * Gibt an, welche Role der Schalter hat.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: PropAlignment = 'top';\n\n\t/**\n\t * Gibt an, welche Typ der Button hat.\n\t */\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/**\n\t * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<unknown>;\n}\n"],"mappings":";;;qGAAA,MAAMA,EAAkB,m4C,MCgBXC,EAAa,M,yBAIRC,KAAAC,SAAYC,IAC5BF,KAAKE,IAAMA,EACXC,EAAeH,KAAKI,KAAMJ,KAAKE,IAAI,E,sLAyEkB,M,oCAUA,M,6HA8BP,M,WAKJ,S,sBAnHpCG,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBACCJ,IAAKF,KAAKC,SACVO,WAAYR,KAAKQ,WACjBC,cAAeT,KAAKS,cACpBC,aAAcV,KAAKU,aACnBC,cAAeX,KAAKW,cACpBC,WAAYZ,KAAKY,WACjBC,cAAeb,KAAKa,cACpBC,UAAWd,KAAKc,UAChBC,MAAOf,KAAKe,MACZC,UAAWhB,KAAKgB,UAChBC,IAAKjB,KAAKiB,IACVC,OAAQlB,KAAKkB,OACbC,IAAKnB,KAAKmB,IACVC,MAAM,OACNC,UAAWrB,KAAKqB,UAChBC,cAAetB,KAAKsB,cACpBC,MAAOvB,KAAKuB,MACZC,OAAQxB,KAAKwB,QAMblB,EAAA,QAAMmB,KAAK,SAASC,KAAK,Y"}

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

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