@public-ui/components 1.4.0-rc.2 → 1.4.0-rc.4

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-0dce65d2.js";const l=":host{--kolibri-border-color:#e0e0e0;--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-spacing:0.25rem}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}:host>kol-button-group-wc{display:inline-flex;flex-wrap:wrap;gap:calc(2 * var(--kolibri-spacing))}",e=class{constructor(r){o(this,r)}render(){return r(i,null,r("kol-button-group-wc",null,r("slot",null)))}};e.style={default:l};export{e as kol_button_group};
+import{r as o,h as r,H as i}from"./index-0dce65d2.js";const l=":host{--kolibri-border-color:#e0e0e0;--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}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}:host>kol-button-group-wc{display:inline-flex;flex-wrap:wrap;gap:calc(2 * var(--kolibri-spacing))}",e=class{constructor(r){o(this,r)}render(){return r(i,null,r("kol-button-group-wc",null,r("slot",null)))}};e.style={default:l};export{e 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,2iC,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\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,usC,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 e,H as o,g as t}from"./index-0dce65d2.js";import{a as r}from"./reuse-2b3b6999.js";const s=":host{--kolibri-border-color:#e0e0e0;--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-spacing:0.25rem}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}",n=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="",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 e(o,null,e("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:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},e("slot",{name:"expert",slot:"expert"})))}get host(){return t(this)}};n.style={default:s};export{n as kol_button_link};
+import{r as i,h as o,H as e,g as t}from"./index-0dce65d2.js";import{a as r}from"./reuse-2b3b6999.js";const n=":host{--kolibri-border-color:#e0e0e0;--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}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}:host>kol-link-wc a{display:inline-flex;gap:0.25rem;place-items:center;text-decoration:none}button{background-color:transparent}a,button{background-image:repeating-linear-gradient(to right, #66ddec, #66ddec);background-repeat:no-repeat;background-position:left 0 bottom 0;background-size:25% 0.25ex;border-radius:var(--spacing);color:var(--color-petrol);font-family:var(--font-family-sans);font-size:inherit;text-transform:uppercase;transition-delay:0;transition-timing-function:ease-in-out;transition-duration:0.5s;transition-property:background-color, border-color, color}a:focus,a:hover,button:focus,button:hover{background-size:100% 0.25ex;color:var(--color-achat)}a>kol-span-wc,button>kol-span-wc{gap:0.25em}.hidden{display:none;visibility:hidden}a.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999}a.skip:focus{background-color:white;box-shadow:0 0 0.5rem 0.5rem 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="",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:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},o("slot",{name:"expert",slot:"expert"})))}get host(){return t(this)}};s.style={default:n};export{s 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 '../style.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={this._role}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t>\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,y8B,MCuBXC,EAAa,M,yBAIRC,KAAAC,SAAYC,IAC5BF,KAAKE,IAAMA,EACXC,EAAgBH,KAAKI,KAAMJ,KAAKE,IAAI,E,gIA2DiC,G,4CAUhB,M,oCAUA,M,6HA8BX,M,WAKA,S,sBA/GpCG,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,MAAOpB,KAAKoB,MACZC,UAAWrB,KAAKqB,UAChBC,cAAetB,KAAKsB,cACpBC,MAAOvB,KAAKuB,MACZC,OAAQxB,KAAKwB,QAEblB,EAAA,QAAMmB,KAAK,SAASC,KAAK,Y"}
+{"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={this._role}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t>\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,6/D,MCuBXC,EAAa,M,yBAIRC,KAAAC,SAAYC,IAC5BF,KAAKE,IAAMA,EACXC,EAAgBH,KAAKI,KAAMJ,KAAKE,IAAI,E,gIA2DiC,G,4CAUhB,M,oCAUA,M,6HA8BX,M,WAKA,S,sBA/GpCG,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,MAAOpB,KAAKoB,MACZC,UAAWrB,KAAKqB,UAChBC,cAAetB,KAAKsB,cACpBC,MAAOvB,KAAKuB,MACZC,OAAQxB,KAAKwB,QAEblB,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-0dce65d2.js";import{w as e}from"./button-link-5bb8204c.js";import{d as l,e as n}from"./a11y.tipps-353a7f35.js";import{n as h}from"./dev.utils-3ec9f837.js";import{f as o,j as d,h as r,w as c,a as u,b as _,s as v}from"./prop.validators-c2234525.js";import{a as f}from"./reuse-2b3b6999.js";import{v as b,w as p}from"./icon-4f6266ca.js";import{v as m,a as y}from"./label-eaabc3d3.js";import{v as A}from"./tab-index-1bc7d9c1.js";import{p as g,a as j}from"./controller-b8a587ec.js";import{a as I,w as x}from"./controller-059a3921.js";import"./index-2a11dd6d.js";const C=class{constructor(t){i(this,t),this.nonce=h(),this.catchRef=t=>{this.ref=t,f(this.host,this.ref)},this.onClick=t=>{var a,i;"submit"===this.state._type?g({form:this.host,ref:this.ref}):"reset"===this.state._type?j({form:this.host,ref:this.ref}):"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)?(o(t,this.ref),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._value)):l("It was no button click callback configured!")},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._icon=void 0,this._iconAlign="left",this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_ariaLabel:"",_icon:{},_iconAlign:"left",_label:"",_on:{},_type:"button"}}render(){return t(s,null,t("button",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-current":d(this.state._ariaCurrent),"aria-expanded":r(this.state._ariaExpanded),"aria-label":!1===this.state._iconOnly?this.state._ariaLabel||this.state._label:void 0,"aria-labelledby":!0===this.state._iconOnly?this.nonce:void 0,"aria-selected":d(this.state._ariaSelected),class:{[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"icon-only":!0===this.state._iconOnly},disabled:this.state._disabled,id:this.state._id},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),t("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._ariaLabel||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){v(this,"_value",t)}validateVariant(t){x(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateIcon(this._icon),this.validateIconAlign(this._iconAlign),this.validateIconOnly(this._iconOnly),this.validateId(this._id),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_icon:["validateIcon"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_id:["validateId"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}},O=t=>{t instanceof Node&&setTimeout((()=>{var a,i;null===(a=t.parentElement)||void 0===a||a.removeChild(t),null===(i=t.parentNode)||void 0===i||i.removeChild(t)}))},L=class{constructor(t){i(this,t),this._icon=void 0,this._iconOnly=!1,this._label=void 0,this.state={_icon:{},_iconOnly:!1,_label:""}}render(){return t(s,{class:{"icon-only":this.state._iconOnly}},this.state._icon.top&&t("kol-icon",{class:{"icon top":!0},style:this.state._icon.top.style,_ariaLabel:"",_icon:this.state._icon.top.icon}),t("span",null,this.state._icon.left&&t("kol-icon",{class:{"icon left":!0},style:this.state._icon.left.style,_ariaLabel:"",_icon:this.state._icon.left.icon}),!0!==this.state._iconOnly&&this.state._label.length>0?t("span",null,this.state._label):"",t("span",{ref:this.state._label.length>0||!0===this.state._iconOnly?O:void 0},t("slot",{name:"expert"})),this.state._icon.right&&t("kol-icon",{class:{"icon right":!0},style:this.state._icon.right.style,_ariaLabel:"",_icon:this.state._icon.right.icon})),this.state._icon.bottom&&t("kol-icon",{class:{"icon bottom":!0},style:this.state._icon.bottom.style,_ariaLabel:"",_icon:this.state._icon.bottom.icon}))}validateIcon(t){b(this,t)}validateIconOnly(t){_(this,"_iconOnly",t)}validateLabel(t){y(this,t)}componentWillLoad(){this.validateIcon(this._icon),this.validateIconOnly(this._iconOnly),this.validateLabel(this._label)}static get watchers(){return{_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"]}}};export{C as kol_button_wc,L as kol_span_wc};
+import{r as i,h as t,H as s,g as a}from"./index-0dce65d2.js";import{w as e}from"./button-link-48807a8e.js";import{d as l,e as n}from"./a11y.tipps-353a7f35.js";import{n as h}from"./dev.utils-3ec9f837.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-a08ab31d.js";import{a as v}from"./reuse-2b3b6999.js";import{v as p,w as b}from"./icon-0aafa630.js";import{v as m,a as y}from"./label-afa637a6.js";import{v as A}from"./tab-index-efc151a2.js";import{p as g,a as j}from"./controller-c1b61a94.js";import{a as I,w as x}from"./controller-04147a1e.js";import"./index-c40aa715.js";const C=class{constructor(t){i(this,t),this.nonce=h(),this.catchRef=t=>{this.ref=t,v(this.host,this.ref)},this.onClick=t=>{var a,i;"submit"===this.state._type?g({form:this.host,ref:this.ref}):"reset"===this.state._type?j({form:this.host,ref:this.ref}):"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)?(o(t,this.ref),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._value)):l("It was no button click callback configured!")},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._icon=void 0,this._iconAlign="left",this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_ariaLabel:"",_icon:{},_iconAlign:"left",_label:"",_on:{},_type:"button"}}render(){return t(s,null,t("button",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-current":d(this.state._ariaCurrent),"aria-expanded":r(this.state._ariaExpanded),"aria-label":!1===this.state._iconOnly?this.state._ariaLabel||this.state._label:void 0,"aria-labelledby":!0===this.state._iconOnly?this.nonce:void 0,"aria-selected":d(this.state._ariaSelected),class:{[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"icon-only":!0===this.state._iconOnly},disabled:this.state._disabled,id:this.state._id},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),t("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._ariaLabel||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){p(this,t)}validateIconAlign(t){b(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=t=>{t instanceof Node&&setTimeout((()=>{var a,i;null===(a=t.parentElement)||void 0===a||a.removeChild(t),null===(i=t.parentNode)||void 0===i||i.removeChild(t)}))},L=class{constructor(t){i(this,t),this._icon=void 0,this._iconOnly=!1,this._label=void 0,this.state={_icon:{},_iconOnly:!1,_label:""}}render(){return t(s,{class:{"icon-only":this.state._iconOnly}},this.state._icon.top&&t("kol-icon",{class:{"icon top":!0},style:this.state._icon.top.style,_ariaLabel:"",_icon:this.state._icon.top.icon}),t("span",null,this.state._icon.left&&t("kol-icon",{class:{"icon left":!0},style:this.state._icon.left.style,_ariaLabel:"",_icon:this.state._icon.left.icon}),!0!==this.state._iconOnly&&this.state._label.length>0?t("span",null,this.state._label):"",t("span",{ref:this.state._label.length>0||!0===this.state._iconOnly?O:void 0},t("slot",{name:"expert"})),this.state._icon.right&&t("kol-icon",{class:{"icon right":!0},style:this.state._icon.right.style,_ariaLabel:"",_icon:this.state._icon.right.icon})),this.state._icon.bottom&&t("kol-icon",{class:{"icon bottom":!0},style:this.state._icon.bottom.style,_ariaLabel:"",_icon:this.state._icon.bottom.icon}))}validateIcon(t){p(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,L as kol_span_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as o,g as s}from"./index-0dce65d2.js";import{a as n}from"./reuse-2b3b6999.js";const e=":host{--kolibri-border-color:#e0e0e0;--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-spacing:0.25rem}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}:host{display:inline-block}:host>kol-button-wc,:host>kol-link-wc{width:inherit}:host>kol-button-wc a,:host>kol-button-wc button,:host>kol-link-wc a,:host>kol-link-wc button{cursor:pointer;display:inline-block;min-height:44px;min-width:44px;padding:0;text-align:center;transition-duration:0.5s;transition-property:background-color, color, border-color;width:inherit}:host>kol-button-wc a:active,:host>kol-button-wc button:active,:host>kol-link-wc a:active,:host>kol-link-wc button:active{outline:0 !important;box-shadow:none !important}:host>kol-button-wc a:disabled,:host>kol-button-wc button:disabled,:host>kol-link-wc a:disabled,:host>kol-link-wc button:disabled{box-shadow:none;cursor:not-allowed;opacity:0.5}",r=class{constructor(t){i(this,t),this.catchRef=i=>{this.ref=i,n(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._icon=void 0,this._iconAlign="left",this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}render(){return t(o,null,t("kol-button-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icon:this._icon,_iconAlign:this._iconAlign,_iconOnly:this._iconOnly,_id:this._id,_label:this._label,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},t("slot",{name:"expert",slot:"expert"})))}get host(){return s(this)}};r.style={default:e};export{r as kol_button};
+import{r as i,h as t,H as o,g as s}from"./index-0dce65d2.js";import{a as n}from"./reuse-2b3b6999.js";const e=":host{--kolibri-border-color:#e0e0e0;--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}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}:host{display:inline-block}:host>kol-button-wc,:host>kol-link-wc{width:inherit}:host>kol-button-wc a,:host>kol-button-wc button,:host>kol-link-wc a,:host>kol-link-wc button{cursor:pointer;display:inline-block;min-height:44px;min-width:44px;padding:0;text-align:center;transition-duration:0.5s;transition-property:background-color, color, border-color;width:inherit}:host>kol-button-wc a:active,:host>kol-button-wc button:active,:host>kol-link-wc a:active,:host>kol-link-wc button:active{outline:0 !important;box-shadow:none !important}:host>kol-button-wc a:disabled,:host>kol-button-wc button:disabled,:host>kol-link-wc a:disabled,:host>kol-link-wc button:disabled{box-shadow:none;cursor:not-allowed;opacity:0.5}",r=class{constructor(o){i(this,o),this.catchRef=i=>{this.ref=i,n(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._icon=void 0,this._iconAlign="left",this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}render(){return t(o,null,t("kol-button-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icon:this._icon,_iconAlign:this._iconAlign,_iconOnly:this._iconOnly,_id:this._id,_label:this._label,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},t("slot",{name:"expert",slot:"expert"})))}get host(){return s(this)}};r.style={default:e};export{r as kol_button};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButton","this","catchRef","ref","propergateFocus","host","render","h","Host","class","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_icon","_iconAlign","_iconOnly","_id","_label","_on","_role","_tabIndex","_tooltipAlign","_type","_value","name","slot"],"sources":["./src/components/button/style.css?tag=kol-button&mode=default&encapsulation=shadow","./src/components/button/shadow.tsx"],"sourcesContent":["@import '../style.css';\n\n:host {\n\tdisplay: inline-block;\n}\n:host > kol-button-wc,\n:host > kol-link-wc {\n\twidth: inherit;\n}\n:host > kol-button-wc a,\n:host > kol-button-wc button,\n:host > kol-link-wc a,\n:host > kol-link-wc button {\n\tcursor: pointer;\n\tdisplay: inline-block;\n\tmin-height: 44px;\n\tmin-width: 44px;\n\tpadding: 0;\n\ttext-align: center;\n\ttransition-duration: 0.5s;\n\ttransition-property: background-color, color, border-color;\n\twidth: inherit;\n}\n:host > kol-button-wc a:active,\n:host > kol-button-wc button:active,\n:host > kol-link-wc a:active,\n:host > kol-link-wc button:active {\n\toutline: 0 !important;\n\tbox-shadow: none !important;\n}\n:host > kol-button-wc a:disabled,\n:host > kol-button-wc button:disabled,\n:host > kol-link-wc a:disabled,\n:host > kol-link-wc button:disabled {\n\tbox-shadow: none;\n\tcursor: not-allowed;\n\topacity: 0.5;\n}\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tKoliBriButtonVariant,\n\tOptionalButtonProps,\n\tRequiredButtonProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Alignment } from '../../types/props/alignment';\nimport { propergateFocus } from '../../utils/reuse';\n\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements Generic.Element.Members<RequiredButtonProps, OptionalButtonProps> {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconAlign={this._iconAlign}\n\t\t\t\t\t_iconOnly={this._iconOnly}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Gibt an, welchen aktuellen Auswahlstatus der Button hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/**\n\t * Gibt an, ob durch den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop({ reflect: true }) public _ariaExpanded?: boolean;\n\n\t/**\n\t * Gibt einen beschreibenden Text des Buttons an.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)\n\t */\n\t@Prop() public _ariaLabel?: string = '';\n\n\t/**\n\t * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop({ reflect: true }) public _ariaSelected?: boolean;\n\n\t/**\n\t * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t */\n\t@Prop() public _customClass?: string;\n\n\t/**\n\t * Gibt an, ob der Button deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob das Icon links oder rechts dargestellt werden soll.\n\t *\n\t * @deprecated\n\t */\n\t@Prop() public _iconAlign?: Alignment = 'left';\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt die ID der Schaltfläche an. (Selection, Testing)\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt den Label für die Beschriftung der Schaltfläche an.\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: KoliBriButtonCallbacks<unknown>;\n\n\t/**\n\t * Gibt an, welche Role der Schalter hat.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/**\n\t * Gibt an, welche Typ der Button hat.\n\t */\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/**\n\t * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<unknown>;\n\n\t/**\n\t * Gibt an, welche Ausprägung der Button hat.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n}\n"],"mappings":";;;qGAAA,MAAMA,EAAkB,ipD,MCwBXC,EAAS,M,yBAIJC,KAAAC,SAAYC,IAC5BF,KAAKE,IAAMA,EACXC,EAAgBH,KAAKI,KAAMJ,KAAKE,IAAI,E,gIA+DA,G,wEAeiB,M,qCAYd,O,eAKc,M,6HA8BX,M,WAKA,S,oCAUM,Q,CAzI1CG,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBACCJ,IAAKF,KAAKC,SACVO,MAAO,CACNC,OAAQ,KACR,CAACT,KAAKU,UAAqBV,KAAKU,WAAa,SAC7C,CAACV,KAAKW,cAAyBX,KAAKU,WAAa,iBAAmBV,KAAKW,eAAiB,UAAYX,KAAKW,aAAaC,OAAS,GAElIC,WAAYb,KAAKa,WACjBC,cAAed,KAAKc,cACpBC,aAAcf,KAAKe,aACnBC,cAAehB,KAAKgB,cACpBC,WAAYjB,KAAKiB,WACjBC,cAAelB,KAAKkB,cACpBP,aAAcX,KAAKW,aACnBQ,UAAWnB,KAAKmB,UAChBC,MAAOpB,KAAKoB,MACZC,WAAYrB,KAAKqB,WACjBC,UAAWtB,KAAKsB,UAChBC,IAAKvB,KAAKuB,IACVC,OAAQxB,KAAKwB,OACbC,IAAKzB,KAAKyB,IACVC,MAAO1B,KAAK0B,MACZC,UAAW3B,KAAK2B,UAChBC,cAAe5B,KAAK4B,cACpBC,MAAO7B,KAAK6B,MACZC,OAAQ9B,KAAK8B,OACbpB,SAAUV,KAAKU,UAEfJ,EAAA,QAAMyB,KAAK,SAASC,KAAK,Y"}
+{"version":3,"names":["defaultStyleCss","KolButton","this","catchRef","ref","propergateFocus","host","render","h","Host","class","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_icon","_iconAlign","_iconOnly","_id","_label","_on","_role","_tabIndex","_tooltipAlign","_type","_value","name","slot"],"sources":["./src/components/button/style.css?tag=kol-button&mode=default&encapsulation=shadow","./src/components/button/shadow.tsx"],"sourcesContent":["@import '../button.css';\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tKoliBriButtonVariant,\n\tOptionalButtonProps,\n\tRequiredButtonProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Alignment } from '../../types/props/alignment';\nimport { propergateFocus } from '../../utils/reuse';\n\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements Generic.Element.Members<RequiredButtonProps, OptionalButtonProps> {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconAlign={this._iconAlign}\n\t\t\t\t\t_iconOnly={this._iconOnly}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Gibt an, welchen aktuellen Auswahlstatus der Button hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/**\n\t * Gibt an, ob durch den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop({ reflect: true }) public _ariaExpanded?: boolean;\n\n\t/**\n\t * Gibt einen beschreibenden Text des Buttons an.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)\n\t */\n\t@Prop() public _ariaLabel?: string = '';\n\n\t/**\n\t * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop({ reflect: true }) public _ariaSelected?: boolean;\n\n\t/**\n\t * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t */\n\t@Prop() public _customClass?: string;\n\n\t/**\n\t * Gibt an, ob der Button deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob das Icon links oder rechts dargestellt werden soll.\n\t *\n\t * @deprecated\n\t */\n\t@Prop() public _iconAlign?: Alignment = 'left';\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt die ID der Schaltfläche an. (Selection, Testing)\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt den Label für die Beschriftung der Schaltfläche an.\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: KoliBriButtonCallbacks<unknown>;\n\n\t/**\n\t * Gibt an, welche Role der Schalter hat.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/**\n\t * Gibt an, welche Typ der Button hat.\n\t */\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/**\n\t * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<unknown>;\n\n\t/**\n\t * Gibt an, welche Ausprägung der Button hat.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n}\n"],"mappings":";;;qGAAA,MAAMA,EAAkB,6yD,MCwBXC,EAAS,M,yBAIJC,KAAAC,SAAYC,IAC5BF,KAAKE,IAAMA,EACXC,EAAgBH,KAAKI,KAAMJ,KAAKE,IAAI,E,gIA+DA,G,wEAeiB,M,qCAYd,O,eAKc,M,6HA8BX,M,WAKA,S,oCAUM,Q,CAzI1CG,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBACCJ,IAAKF,KAAKC,SACVO,MAAO,CACNC,OAAQ,KACR,CAACT,KAAKU,UAAqBV,KAAKU,WAAa,SAC7C,CAACV,KAAKW,cAAyBX,KAAKU,WAAa,iBAAmBV,KAAKW,eAAiB,UAAYX,KAAKW,aAAaC,OAAS,GAElIC,WAAYb,KAAKa,WACjBC,cAAed,KAAKc,cACpBC,aAAcf,KAAKe,aACnBC,cAAehB,KAAKgB,cACpBC,WAAYjB,KAAKiB,WACjBC,cAAelB,KAAKkB,cACpBP,aAAcX,KAAKW,aACnBQ,UAAWnB,KAAKmB,UAChBC,MAAOpB,KAAKoB,MACZC,WAAYrB,KAAKqB,WACjBC,UAAWtB,KAAKsB,UAChBC,IAAKvB,KAAKuB,IACVC,OAAQxB,KAAKwB,OACbC,IAAKzB,KAAKyB,IACVC,MAAO1B,KAAK0B,MACZC,UAAW3B,KAAK2B,UAChBC,cAAe5B,KAAK4B,cACpBC,MAAO7B,KAAK6B,MACZC,OAAQ9B,KAAK8B,OACbpB,SAAUV,KAAKU,UAEfJ,EAAA,QAAMyB,KAAK,SAASC,KAAK,Y"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as e,H as o}from"./index-0dce65d2.js";import{b as r,w as a}from"./prop.validators-c2234525.js";import{w as t}from"./validation-d17349fa.js";import"./index-2a11dd6d.js";import"./a11y.tipps-353a7f35.js";import"./dev.utils-3ec9f837.js";import"./reuse-2b3b6999.js";const l=":host{--kolibri-border-color:#e0e0e0;--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-spacing:0.25rem}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}",s=class{constructor(e){i(this,e),this._hasFooter=!1,this._heading=void 0,this._headline=void 0,this._level=1,this.state={_heading:"…"}}render(){return e(o,null,e("div",null,e("div",{class:"header"},e("kol-heading-wc",{_label:this.state._heading,_level:this.state._level}),e("slot",{name:"header"})),e("div",{class:"content"},e("slot",{name:"content"})),!0===this.state._hasFooter&&e("div",{class:"footer"},e("slot",{name:"footer"}))))}validateHasFooter(e){r(this,"_hasFooter",e)}validateHeading(e){a(this,"_heading",e,{required:!0})}validateHeadline(e){this.validateHeading(e)}validateLevel(e){t(this,e)}componentWillLoad(){this.validateHasFooter(this._hasFooter),this.validateHeading(this._heading||this._headline),this.validateLevel(this._level)}static get watchers(){return{_hasFooter:["validateHasFooter"],_heading:["validateHeading"],_headline:["validateHeadline"],_level:["validateLevel"]}}};s.style={default:l};export{s as kol_card};
+import{r as i,h as o,H as e}from"./index-0dce65d2.js";import{b as r,w as a}from"./prop.validators-a08ab31d.js";import{w as t}from"./validation-fbd9c031.js";import"./index-c40aa715.js";import"./a11y.tipps-353a7f35.js";import"./dev.utils-3ec9f837.js";import"./reuse-2b3b6999.js";const l=":host{--kolibri-border-color:#e0e0e0;--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}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}",s=class{constructor(e){i(this,e),this._hasFooter=!1,this._heading=void 0,this._headline=void 0,this._level=1,this.state={_heading:"…"}}render(){return o(e,null,o("div",null,o("div",{class:"header"},o("kol-heading-wc",{_label:this.state._heading,_level:this.state._level}),o("slot",{name:"header"})),o("div",{class:"content"},o("slot",{name:"content"})),!0===this.state._hasFooter&&o("div",{class:"footer"},o("slot",{name:"footer"}))))}validateHasFooter(i){r(this,"_hasFooter",i)}validateHeading(i){a(this,"_heading",i,{required:!0})}validateHeadline(i){this.validateHeading(i)}validateLevel(i){t(this,i)}componentWillLoad(){this.validateHasFooter(this._hasFooter),this.validateHeading(this._heading||this._headline),this.validateLevel(this._level)}static get watchers(){return{_hasFooter:["validateHasFooter"],_heading:["validateHeading"],_headline:["validateHeadline"],_level:["validateLevel"]}}};s.style={default:l};export{s as kol_card};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolCard","_heading","render","h","Host","class","_label","this","state","_level","name","_hasFooter","validateHasFooter","value","watchBoolean","validateHeading","watchString","required","validateHeadline","validateLevel","watchHeadingLevel","componentWillLoad","_headline"],"sources":["./src/components/card/style.css?tag=kol-card&mode=default&encapsulation=shadow","./src/components/card/component.tsx"],"sourcesContent":["@import '../style.css';\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\n\n/**\n * API\n */\ntype RequiredProps = {\n\theading: string;\n};\ntype OptionalProps = {\n\thasFooter: boolean;\n\t/**\n\t * @deprecated Use _headline instead\n\t */\n\theadline: string;\n\tlevel: HeadingLevel;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @part card - TBD\n *\n * @slot header - Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card.\n * @slot footer - Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n */\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<kol-heading-wc _label={this.state._heading} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot name=\"content\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasFooter === true && (\n\t\t\t\t\t\t<div class=\"footer\">\n\t\t\t\t\t\t\t<slot name=\"footer\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Card einen Footer-Bereich hat.\n\t */\n\t@Prop({ reflect: true }) public _hasFooter?: boolean = false;\n\n\t/**\n\t * Gibt die Überschrift der Card an.\n\t */\n\t@Prop() public _heading!: string;\n\n\t/**\n\t * Gibt die Überschrift der Card an.\n\t *\n\t * @deprecated Verwende stattdessen das Property _heading.\n\t */\n\t@Prop() public _headline?: string;\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_heading: '…', // '⚠'\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hasFooter')\n\tpublic validateHasFooter(value?: boolean): void {\n\t\twatchBoolean(this, '_hasFooter', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t */\n\t@Watch('_headline')\n\tpublic validateHeadline(value?: string): void {\n\t\tthis.validateHeading(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasFooter(this._hasFooter);\n\t\tthis.validateHeading(this._heading || this._headline);\n\t\tthis.validateLevel(this._level);\n\t}\n}\n"],"mappings":";;;qRAAA,MAAMA,EAAkB,y8B,MCyCXC,EAAO,M,yCAyBoC,M,6DAiBhB,E,WAKP,CAC/BC,SAAU,I,CA/CJC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,WACCA,EAAA,OAAKE,MAAM,UACVF,EAAA,kBAAgBG,OAAQC,KAAKC,MAAMP,SAAUQ,OAAQF,KAAKC,MAAMC,SAChEN,EAAA,QAAMO,KAAK,YAEZP,EAAA,OAAKE,MAAM,WACVF,EAAA,QAAMO,KAAK,aAEXH,KAAKC,MAAMG,aAAe,MAC1BR,EAAA,OAAKE,MAAM,UACVF,EAAA,QAAMO,KAAK,a,CAyCVE,kBAAkBC,GACxBC,EAAaP,KAAM,aAAcM,E,CAO3BE,gBAAgBF,GACtBG,EAAYT,KAAM,WAAYM,EAAO,CACpCI,SAAU,M,CASLC,iBAAiBL,GACvBN,KAAKQ,gBAAgBF,E,CAOfM,cAAcN,GACpBO,EAAkBb,KAAMM,E,CAMlBQ,oBACNd,KAAKK,kBAAkBL,KAAKI,YAC5BJ,KAAKQ,gBAAgBR,KAAKN,UAAYM,KAAKe,WAC3Cf,KAAKY,cAAcZ,KAAKE,O"}
+{"version":3,"names":["defaultStyleCss","KolCard","_heading","render","h","Host","class","_label","this","state","_level","name","_hasFooter","validateHasFooter","value","watchBoolean","validateHeading","watchString","required","validateHeadline","validateLevel","watchHeadingLevel","componentWillLoad","_headline"],"sources":["./src/components/card/style.css?tag=kol-card&mode=default&encapsulation=shadow","./src/components/card/component.tsx"],"sourcesContent":["@import '../style.css';\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\n\n/**\n * API\n */\ntype RequiredProps = {\n\theading: string;\n};\ntype OptionalProps = {\n\thasFooter: boolean;\n\t/**\n\t * @deprecated Use _headline instead\n\t */\n\theadline: string;\n\tlevel: HeadingLevel;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @part card - TBD\n *\n * @slot header - Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card.\n * @slot footer - Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n */\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<kol-heading-wc _label={this.state._heading} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot name=\"content\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasFooter === true && (\n\t\t\t\t\t\t<div class=\"footer\">\n\t\t\t\t\t\t\t<slot name=\"footer\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Card einen Footer-Bereich hat.\n\t */\n\t@Prop({ reflect: true }) public _hasFooter?: boolean = false;\n\n\t/**\n\t * Gibt die Überschrift der Card an.\n\t */\n\t@Prop() public _heading!: string;\n\n\t/**\n\t * Gibt die Überschrift der Card an.\n\t *\n\t * @deprecated Verwende stattdessen das Property _heading.\n\t */\n\t@Prop() public _headline?: string;\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_heading: '…', // '⚠'\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hasFooter')\n\tpublic validateHasFooter(value?: boolean): void {\n\t\twatchBoolean(this, '_hasFooter', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t */\n\t@Watch('_headline')\n\tpublic validateHeadline(value?: string): void {\n\t\tthis.validateHeading(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasFooter(this._hasFooter);\n\t\tthis.validateHeading(this._heading || this._headline);\n\t\tthis.validateLevel(this._level);\n\t}\n}\n"],"mappings":";;;qRAAA,MAAMA,EAAkB,qmC,MCyCXC,EAAO,M,yCAyBoC,M,6DAiBhB,E,WAKP,CAC/BC,SAAU,I,CA/CJC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,WACCA,EAAA,OAAKE,MAAM,UACVF,EAAA,kBAAgBG,OAAQC,KAAKC,MAAMP,SAAUQ,OAAQF,KAAKC,MAAMC,SAChEN,EAAA,QAAMO,KAAK,YAEZP,EAAA,OAAKE,MAAM,WACVF,EAAA,QAAMO,KAAK,aAEXH,KAAKC,MAAMG,aAAe,MAC1BR,EAAA,OAAKE,MAAM,UACVF,EAAA,QAAMO,KAAK,a,CAyCVE,kBAAkBC,GACxBC,EAAaP,KAAM,aAAcM,E,CAO3BE,gBAAgBF,GACtBG,EAAYT,KAAM,WAAYM,EAAO,CACpCI,SAAU,M,CASLC,iBAAiBL,GACvBN,KAAKQ,gBAAgBF,E,CAOfM,cAAcN,GACpBO,EAAkBb,KAAMM,E,CAMlBQ,oBACNd,KAAKK,kBAAkBL,KAAKI,YAC5BJ,KAAKQ,gBAAgBR,KAAKN,UAAYM,KAAKe,WAC3Cf,KAAKY,cAAcZ,KAAKE,O"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as o,H as r}from"./index-0dce65d2.js";import{b as e,w as a}from"./prop.validators-c2234525.js";import"./index-2a11dd6d.js";import"./a11y.tipps-353a7f35.js";import"./dev.utils-3ec9f837.js";import"./reuse-2b3b6999.js";const t=":host{--kolibri-border-color:#e0e0e0;--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-spacing:0.25rem}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}:host details{display:grid;width:100%}:host details>kol-indented-text{margin:var(--kolibri-spacing) 0 0 var(--kolibri-spacing)}:host summary{cursor:pointer;display:flow-root;margin:0;padding:0}:host summary span{margin-left:var(--kolibri-spacing);text-decoration:underline}:host summary:hover{text-decoration-thickness:var(--kolibri-spacing)}",s=class{constructor(o){i(this,o),this.onClick=()=>{setTimeout((()=>{var i;this._open=null===(i=this.htmlDetailsElement)||void 0===i?void 0:i.open}),25)},this._open=!1,this._summary=void 0,this.state={_summary:"…"}}render(){return o(r,null,o("details",{ref:i=>{this.htmlDetailsElement=i},open:this.state._open},o("summary",{onClick:this.onClick},this.state._open?o("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-angle-down"}):o("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-angle-right"}),o("span",null,this.state._summary)),o("kol-indented-text",null,o("slot",null))))}validateOpen(i){e(this,"_open",i)}validateSummary(i){a(this,"_summary",i,{required:!0})}componentWillLoad(){this.validateOpen(this._open),this.validateSummary(this._summary)}static get watchers(){return{_open:["validateOpen"],_summary:["validateSummary"]}}};s.style={default:t};export{s as kol_details};
+import{r as i,h as o,H as r}from"./index-0dce65d2.js";import{b as a,w as e}from"./prop.validators-a08ab31d.js";import"./index-c40aa715.js";import"./a11y.tipps-353a7f35.js";import"./dev.utils-3ec9f837.js";import"./reuse-2b3b6999.js";const t=":host{--kolibri-border-color:#e0e0e0;--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}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}:host details{display:grid;width:100%}:host details>kol-indented-text{margin:var(--kolibri-spacing) 0 0 var(--kolibri-spacing)}:host summary{cursor:pointer;display:flow-root;margin:0;padding:0}:host summary span{margin-left:var(--kolibri-spacing);text-decoration:underline}:host summary:hover{text-decoration-thickness:var(--kolibri-spacing)}",s=class{constructor(o){i(this,o),this.onClick=()=>{setTimeout((()=>{var i;this._open=null===(i=this.htmlDetailsElement)||void 0===i?void 0:i.open}),25)},this._open=!1,this._summary=void 0,this.state={_summary:"…"}}render(){return o(r,null,o("details",{ref:i=>{this.htmlDetailsElement=i},open:this.state._open},o("summary",{onClick:this.onClick},this.state._open?o("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-angle-down"}):o("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-angle-right"}),o("span",null,this.state._summary)),o("kol-indented-text",null,o("slot",null))))}validateOpen(i){a(this,"_open",i)}validateSummary(i){e(this,"_summary",i,{required:!0})}componentWillLoad(){this.validateOpen(this._open),this.validateSummary(this._summary)}static get watchers(){return{_open:["validateOpen"],_summary:["validateSummary"]}}};s.style={default:t};export{s as kol_details};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolDetails","this","onClick","setTimeout","_open","_a","htmlDetailsElement","open","_summary","render","h","Host","ref","el","state","_ariaLabel","_icon","validateOpen","value","watchBoolean","validateSummary","watchString","required","componentWillLoad"],"sources":["./src/components/details/style.css?tag=kol-details&mode=default&encapsulation=shadow","./src/components/details/component.tsx"],"sourcesContent":["@import '../style.css';\n\n:host details {\n\tdisplay: grid;\n\twidth: 100%;\n}\n:host details > kol-indented-text {\n\tmargin: var(--kolibri-spacing) 0 0 var(--kolibri-spacing);\n}\n\n:host summary {\n\tcursor: pointer;\n\tdisplay: flow-root;\n\tmargin: 0;\n\tpadding: 0;\n}\n:host summary span {\n\tmargin-left: var(--kolibri-spacing);\n\ttext-decoration: underline;\n}\n:host summary:hover {\n\ttext-decoration-thickness: var(--kolibri-spacing);\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tsummary: string;\n};\ntype OptionalProps = {\n\topen: boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate htmlDetailsElement?: HTMLDetailsElement;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<details\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.htmlDetailsElement = el as HTMLDetailsElement;\n\t\t\t\t\t}}\n\t\t\t\t\topen={this.state._open}\n\t\t\t\t>\n\t\t\t\t\t<summary onClick={this.onClick}>\n\t\t\t\t\t\t{this.state._open ? <kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-angle-down\" /> : <kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-angle-right\" />}\n\t\t\t\t\t\t<span>{this.state._summary}</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<kol-indented-text>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</kol-indented-text>\n\t\t\t\t</details>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Detailbeschreibung geöffnet oder geschlossen ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t/**\n\t * Gibt die Zusammenfassung der Detailbeschreibung an.\n\t */\n\t@Prop() public _summary!: string;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_summary: '…', // '⚠'\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\twatchBoolean(this, '_open', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_summary')\n\tpublic validateSummary(value?: string): void {\n\t\twatchString(this, '_summary', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateSummary(this._summary);\n\t}\n\n\tprivate onClick = () => {\n\t\tsetTimeout(() => {\n\t\t\tthis._open = this.htmlDetailsElement?.open;\n\t\t}, 25);\n\t};\n}\n"],"mappings":";;;wOAAA,MAAMA,EAAkB,+xC,MC2BXC,EAAU,M,yBAmEdC,KAAAC,QAAU,KACjBC,YAAW,K,MACVF,KAAKG,OAAQC,EAAAJ,KAAKK,sBAAkB,MAAAD,SAAA,SAAAA,EAAEE,IAAI,GACxC,GAAG,E,WA3C0D,M,mCAUjC,CAC/BC,SAAU,I,CAnCJC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,WACCE,IAAMC,IACLZ,KAAKK,mBAAqBO,CAAwB,EAEnDN,KAAMN,KAAKa,MAAMV,OAEjBM,EAAA,WAASR,QAASD,KAAKC,SACrBD,KAAKa,MAAMV,MAAQM,EAAA,YAAUK,WAAW,GAAGC,MAAM,2BAA8BN,EAAA,YAAUK,WAAW,GAAGC,MAAM,4BAC9GN,EAAA,YAAOT,KAAKa,MAAMN,WAEnBE,EAAA,yBACCA,EAAA,e,CA4BEO,aAAaC,GACnBC,EAAalB,KAAM,QAASiB,E,CAOtBE,gBAAgBF,GACtBG,EAAYpB,KAAM,WAAYiB,EAAO,CACpCI,SAAU,M,CAOLC,oBACNtB,KAAKgB,aAAahB,KAAKG,OACvBH,KAAKmB,gBAAgBnB,KAAKO,S"}
+{"version":3,"names":["defaultStyleCss","KolDetails","this","onClick","setTimeout","_open","_a","htmlDetailsElement","open","_summary","render","h","Host","ref","el","state","_ariaLabel","_icon","validateOpen","value","watchBoolean","validateSummary","watchString","required","componentWillLoad"],"sources":["./src/components/details/style.css?tag=kol-details&mode=default&encapsulation=shadow","./src/components/details/component.tsx"],"sourcesContent":["@import '../style.css';\n\n:host details {\n\tdisplay: grid;\n\twidth: 100%;\n}\n:host details > kol-indented-text {\n\tmargin: var(--kolibri-spacing) 0 0 var(--kolibri-spacing);\n}\n\n:host summary {\n\tcursor: pointer;\n\tdisplay: flow-root;\n\tmargin: 0;\n\tpadding: 0;\n}\n:host summary span {\n\tmargin-left: var(--kolibri-spacing);\n\ttext-decoration: underline;\n}\n:host summary:hover {\n\ttext-decoration-thickness: var(--kolibri-spacing);\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tsummary: string;\n};\ntype OptionalProps = {\n\topen: boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate htmlDetailsElement?: HTMLDetailsElement;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<details\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.htmlDetailsElement = el as HTMLDetailsElement;\n\t\t\t\t\t}}\n\t\t\t\t\topen={this.state._open}\n\t\t\t\t>\n\t\t\t\t\t<summary onClick={this.onClick}>\n\t\t\t\t\t\t{this.state._open ? <kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-angle-down\" /> : <kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-angle-right\" />}\n\t\t\t\t\t\t<span>{this.state._summary}</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<kol-indented-text>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</kol-indented-text>\n\t\t\t\t</details>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Detailbeschreibung geöffnet oder geschlossen ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t/**\n\t * Gibt die Zusammenfassung der Detailbeschreibung an.\n\t */\n\t@Prop() public _summary!: string;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_summary: '…', // '⚠'\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\twatchBoolean(this, '_open', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_summary')\n\tpublic validateSummary(value?: string): void {\n\t\twatchString(this, '_summary', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateSummary(this._summary);\n\t}\n\n\tprivate onClick = () => {\n\t\tsetTimeout(() => {\n\t\t\tthis._open = this.htmlDetailsElement?.open;\n\t\t}, 25);\n\t};\n}\n"],"mappings":";;;wOAAA,MAAMA,EAAkB,27C,MC2BXC,EAAU,M,yBAmEdC,KAAAC,QAAU,KACjBC,YAAW,K,MACVF,KAAKG,OAAQC,EAAAJ,KAAKK,sBAAkB,MAAAD,SAAA,SAAAA,EAAEE,IAAI,GACxC,GAAG,E,WA3C0D,M,mCAUjC,CAC/BC,SAAU,I,CAnCJC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,WACCE,IAAMC,IACLZ,KAAKK,mBAAqBO,CAAwB,EAEnDN,KAAMN,KAAKa,MAAMV,OAEjBM,EAAA,WAASR,QAASD,KAAKC,SACrBD,KAAKa,MAAMV,MAAQM,EAAA,YAAUK,WAAW,GAAGC,MAAM,2BAA8BN,EAAA,YAAUK,WAAW,GAAGC,MAAM,4BAC9GN,EAAA,YAAOT,KAAKa,MAAMN,WAEnBE,EAAA,yBACCA,EAAA,e,CA4BEO,aAAaC,GACnBC,EAAalB,KAAM,QAASiB,E,CAOtBE,gBAAgBF,GACtBG,EAAYpB,KAAM,WAAYiB,EAAO,CACpCI,SAAU,M,CAOLC,oBACNtB,KAAKgB,aAAahB,KAAKG,OACvBH,KAAKmB,gBAAgBnB,KAAKO,S"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i}from"./index-0dce65d2.js";import{b as e,w as o}from"./prop.validators-c2234525.js";import{a as s}from"./i18n-f2ab4562.js";import"./index-2a11dd6d.js";import"./a11y.tipps-353a7f35.js";import"./dev.utils-3ec9f837.js";import"./reuse-2b3b6999.js";import"./index-781a1af1.js";const r=class{constructor(e){t(this,e),this.onSubmit=t=>{var e,i;t.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onSubmit)&&(null===(i=this.state._on)||void 0===i||i.onSubmit(t))},this.onReset=t=>{var e,i;t.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onReset)&&(null===(i=this.state._on)||void 0===i||i.onReset(t))},this._on=void 0,this._requiredText=!0,this.state={}}render(){return i("form",{method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?i("p",null,i("kol-indented-text",null,s("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?i("p",null,i("kol-indented-text",null,this.state._requiredText)):null,i("slot",null))}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRequiredText(t){"boolean"==typeof t?e(this,"_requiredText",t):o(this,"_requiredText",t)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"]}}};export{r as kol_form};
+import{r as t,h as i}from"./index-0dce65d2.js";import{b as e,w as o}from"./prop.validators-a08ab31d.js";import{a as s}from"./i18n-885e621b.js";import"./index-c40aa715.js";import"./a11y.tipps-353a7f35.js";import"./dev.utils-3ec9f837.js";import"./reuse-2b3b6999.js";const r=class{constructor(e){t(this,e),this.onSubmit=t=>{var e,i;t.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onSubmit)&&(null===(i=this.state._on)||void 0===i||i.onSubmit(t))},this.onReset=t=>{var e,i;t.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onReset)&&(null===(i=this.state._on)||void 0===i||i.onReset(t))},this._on=void 0,this._requiredText=!0,this.state={}}render(){return i("form",{method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?i("p",null,i("kol-indented-text",null,s("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?i("p",null,i("kol-indented-text",null,this.state._requiredText)):null,i("slot",null))}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRequiredText(t){"boolean"==typeof t?e(this,"_requiredText",t):o(this,"_requiredText",t)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"]}}};export{r as kol_form};

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

@@ -1 +1 @@
-{"version":3,"names":["KolForm","this","onSubmit","event","preventDefault","_a","state","_on","_b","onReset","render","h","method","autoComplete","noValidate","_requiredText","translate","length","validateOn","value","Object","assign","validateRequiredText","watchBoolean","watchString","componentWillLoad"],"sources":["./src/components/form/component.tsx"],"sourcesContent":["import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\n\nimport { Generic } from '@a11y-ui/core';\nimport { EventCallback } from '../../types/callbacks';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { Stringified } from '../../types/common';\nimport { translate } from '../../i18n';\n\nexport type KoliBriFormCallbacks = {\n\t[Events.onSubmit]?: EventCallback<Event>;\n\t[Events.onReset]?: EventCallback<Event>;\n};\n\n/**\n * API\n */\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\ton: KoliBriFormCallbacks;\n\trequiredText: string | boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-form',\n\tshadow: true,\n})\nexport class KolForm implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t};\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<form method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete=\"off\" noValidate>\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<kol-indented-text>{translate('kol-form-description')}</kol-indented-text>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<kol-indented-text>{this.state._requiredText}</kol-indented-text>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Form-Events an.\n\t */\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/**\n\t * Gibt an, ob der Pflichtfeld-Hinweis eingeblendet werden soll.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t}\n}\n"],"mappings":";;;0SAgCaA,EAAO,M,yBACFC,KAAAC,SAAYC,I,QAC5BA,EAAMC,iBACN,WAAWC,EAAAJ,KAAKK,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEH,YAAa,WAAY,EACnDM,EAAAP,KAAKK,MAAMC,OAAG,MAAAC,SAAA,SAAAA,EAAEN,SAASC,E,GAGVF,KAAAQ,QAAWN,I,QAC3BA,EAAMC,iBACN,WAAWC,EAAAJ,KAAKK,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEI,WAAY,WAAY,EAClDD,EAAAP,KAAKK,MAAMC,OAAG,MAAAC,SAAA,SAAAA,EAAEC,QAAQN,E,yCA6B4B,K,WAKtB,E,CA9BzBO,SACN,OACCC,EAAA,QAAMC,OAAO,OAAOV,SAAUD,KAAKC,SAAUO,QAASR,KAAKQ,QAASI,aAAa,MAAMC,WAAU,MAC/Fb,KAAKK,MAAMS,gBAAkB,KAC7BJ,EAAA,SACCA,EAAA,yBAAoBK,EAAU,iCAErBf,KAAKK,MAAMS,gBAAkB,UAAYd,KAAKK,MAAMS,cAAcE,OAAS,EACrFN,EAAA,SACCA,EAAA,yBAAoBV,KAAKK,MAAMS,gBAE7B,KACJJ,EAAA,a,CAwBIO,WAAWC,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChDlB,KAAKK,MAAKc,OAAAC,OAAAD,OAAAC,OAAA,GACNpB,KAAKK,OAAK,CACbC,IAAKY,G,EASDG,qBAAqBH,GAC3B,UAAWA,IAAU,UAAW,CAC/BI,EAAatB,KAAM,gBAAiBkB,E,KAC9B,CACNK,EAAYvB,KAAM,gBAAiBkB,E,EAO9BM,oBACNxB,KAAKiB,WAAWjB,KAAKM,KACrBN,KAAKqB,qBAAqBrB,KAAKc,c"}
+{"version":3,"names":["KolForm","this","onSubmit","event","preventDefault","_a","state","_on","_b","onReset","render","h","method","autoComplete","noValidate","_requiredText","translate","length","validateOn","value","Object","assign","validateRequiredText","watchBoolean","watchString","componentWillLoad"],"sources":["./src/components/form/component.tsx"],"sourcesContent":["import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\n\nimport { Generic } from '@a11y-ui/core';\nimport { EventCallback } from '../../types/callbacks';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { Stringified } from '../../types/common';\nimport { translate } from '../../i18n';\n\nexport type KoliBriFormCallbacks = {\n\t[Events.onSubmit]?: EventCallback<Event>;\n\t[Events.onReset]?: EventCallback<Event>;\n};\n\n/**\n * API\n */\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\ton: KoliBriFormCallbacks;\n\trequiredText: string | boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-form',\n\tshadow: true,\n})\nexport class KolForm implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t};\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<form method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete=\"off\" noValidate>\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<kol-indented-text>{translate('kol-form-description')}</kol-indented-text>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<kol-indented-text>{this.state._requiredText}</kol-indented-text>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Form-Events an.\n\t */\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/**\n\t * Gibt an, ob der Pflichtfeld-Hinweis eingeblendet werden soll.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t}\n}\n"],"mappings":";;;8QAgCaA,EAAO,M,yBACFC,KAAAC,SAAYC,I,QAC5BA,EAAMC,iBACN,WAAWC,EAAAJ,KAAKK,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEH,YAAa,WAAY,EACnDM,EAAAP,KAAKK,MAAMC,OAAG,MAAAC,SAAA,SAAAA,EAAEN,SAASC,E,GAGVF,KAAAQ,QAAWN,I,QAC3BA,EAAMC,iBACN,WAAWC,EAAAJ,KAAKK,MAAMC,OAAG,MAAAF,SAAA,SAAAA,EAAEI,WAAY,WAAY,EAClDD,EAAAP,KAAKK,MAAMC,OAAG,MAAAC,SAAA,SAAAA,EAAEC,QAAQN,E,yCA6B4B,K,WAKtB,E,CA9BzBO,SACN,OACCC,EAAA,QAAMC,OAAO,OAAOV,SAAUD,KAAKC,SAAUO,QAASR,KAAKQ,QAASI,aAAa,MAAMC,WAAU,MAC/Fb,KAAKK,MAAMS,gBAAkB,KAC7BJ,EAAA,SACCA,EAAA,yBAAoBK,EAAU,iCAErBf,KAAKK,MAAMS,gBAAkB,UAAYd,KAAKK,MAAMS,cAAcE,OAAS,EACrFN,EAAA,SACCA,EAAA,yBAAoBV,KAAKK,MAAMS,gBAE7B,KACJJ,EAAA,a,CAwBIO,WAAWC,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChDlB,KAAKK,MAAKc,OAAAC,OAAAD,OAAAC,OAAA,GACNpB,KAAKK,OAAK,CACbC,IAAKY,G,EASDG,qBAAqBH,GAC3B,UAAWA,IAAU,UAAW,CAC/BI,EAAatB,KAAM,gBAAiBkB,E,KAC9B,CACNK,EAAYvB,KAAM,gBAAiBkB,E,EAO9BM,oBACNxB,KAAKiB,WAAWjB,KAAKM,KACrBN,KAAKqB,qBAAqBrB,KAAKc,c"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as s}from"./index-0dce65d2.js";import{w as e}from"./validation-d17349fa.js";import{w as l}from"./prop.validators-c2234525.js";import"./index-2a11dd6d.js";import"./a11y.tipps-353a7f35.js";import"./dev.utils-3ec9f837.js";import"./reuse-2b3b6999.js";const a=class{constructor(s){t(this,s),this.renderHeadline=(t,s)=>{switch(s){case 1:return i("h1",{class:"headline"},t,i("slot",null));case 2:return i("h2",{class:"headline"},t,i("slot",null));case 3:return i("h3",{class:"headline"},t,i("slot",null));case 4:return i("h4",{class:"headline"},t,i("slot",null));case 5:return i("h5",{class:"headline"},t,i("slot",null));case 6:return i("h6",{class:"headline"},t,i("slot",null));default:return i("strong",{class:"headline"},t,i("slot",null))}},this._level=1,this._label=void 0,this._overline="",this.state={_label:"Untitled"}}validateLabel(i){l(this,"_label",i)}validateLevel(i){e(this,i)}validateOverline(i){l(this,"_overline",i)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateOverline(this._overline)}render(){return i(s,null,this.renderHeadline(this.state._label,this.state._level),this.state._overline&&i("span",{class:"overline"},this.state._overline))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_overline:["validateOverline"]}}},n=class{constructor(i){t(this,i),this._alert=!0,this._disabled=!1,this._error="",this._hideLabel=!1,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._readOnly=!1,this._renderNoLabel=!1,this._required=!1,this._smartButton=void 0,this._touched=!1}render(){var t,e,l,a;const r="string"==typeof this._error&&this._error.length>0&&!0===this._touched,n="string"==typeof this._hint&&this._hint.length>0,o=!0===this._hideLabel&&!0!==this._required;return i(s,{class:{disabled:!0===this._disabled,error:!0===r,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched}},!1===this._renderNoLabel&&i("label",{htmlFor:this._id,id:`${this._id}-label`,style:{height:o?"0":void 0,margin:o?"0":void 0,padding:o?"0":void 0,visibility:o?"hidden":void 0}},i("span",null,i("slot",{name:"label"}))),n&&i("span",{class:"hint",id:`${this._id}-hint`},this._hint),i("div",{class:{input:!0,"icon-left":"object"==typeof(null===(t=this._icon)||void 0===t?void 0:t.left),"icon-right":"object"==typeof(null===(e=this._icon)||void 0===e?void 0:e.right)}},i("div",{class:"icons"},(null===(l=this._icon)||void 0===l?void 0:l.left)?i("kol-icon",{_ariaLabel:"",_icon:this._icon.left.icon}):i("i",null),(null===(a=this._icon)||void 0===a?void 0:a.right)?i("kol-icon",{_ariaLabel:"",_icon:this._icon.right.icon}):i("i",null)),i("slot",{name:"input"}),"object"==typeof this._smartButton&&null!==this._smartButton&&i("kol-button-wc",{_ariaLabel:this._smartButton._ariaLabel,_customClass:this._smartButton._customClass,_disabled:this._smartButton._disabled,_icon:this._smartButton._icon,_iconOnly:!0,_id:this._smartButton._id,_label:this._smartButton._label,_on:this._smartButton._on,_tooltipAlign:this._smartButton._tooltipAlign,_variant:this._smartButton._variant})),r&&i("kol-alert",{class:"error",id:`${this._id}-error`,_alert:this._alert,_type:"error",_variant:"msg"},this._error),Array.isArray(this._list)&&this._list.length>0&&i("datalist",{id:`${this._id}-list`},this._list.map((t=>i("option",{value:t})))))}};export{a as kol_heading_wc,n as kol_input};
+import{r as t,h as i,H as s}from"./index-0dce65d2.js";import{w as e}from"./validation-fbd9c031.js";import{w as l}from"./prop.validators-a08ab31d.js";import"./index-c40aa715.js";import"./a11y.tipps-353a7f35.js";import"./dev.utils-3ec9f837.js";import"./reuse-2b3b6999.js";const a=class{constructor(s){t(this,s),this.renderHeadline=(t,s)=>{switch(s){case 1:return i("h1",{class:"headline"},t,i("slot",null));case 2:return i("h2",{class:"headline"},t,i("slot",null));case 3:return i("h3",{class:"headline"},t,i("slot",null));case 4:return i("h4",{class:"headline"},t,i("slot",null));case 5:return i("h5",{class:"headline"},t,i("slot",null));case 6:return i("h6",{class:"headline"},t,i("slot",null));default:return i("strong",{class:"headline"},t,i("slot",null))}},this._level=1,this._label=void 0,this._overline="",this.state={_label:"Untitled"}}validateLabel(i){l(this,"_label",i)}validateLevel(i){e(this,i)}validateOverline(i){l(this,"_overline",i)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateOverline(this._overline)}render(){return i(s,null,this.renderHeadline(this.state._label,this.state._level),this.state._overline&&i("span",{class:"overline"},this.state._overline))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_overline:["validateOverline"]}}},n=class{constructor(i){t(this,i),this._alert=!0,this._disabled=!1,this._error="",this._hideLabel=!1,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._readOnly=!1,this._renderNoLabel=!1,this._required=!1,this._smartButton=void 0,this._touched=!1}render(){var t,e,l,a;const r="string"==typeof this._error&&this._error.length>0&&!0===this._touched,n="string"==typeof this._hint&&this._hint.length>0,o=!0===this._hideLabel&&!0!==this._required;return i(s,{class:{disabled:!0===this._disabled,error:!0===r,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched}},!1===this._renderNoLabel&&i("label",{htmlFor:this._id,id:`${this._id}-label`,style:{height:o?"0":void 0,margin:o?"0":void 0,padding:o?"0":void 0,visibility:o?"hidden":void 0}},i("span",null,i("slot",{name:"label"}))),n&&i("span",{class:"hint",id:`${this._id}-hint`},this._hint),i("div",{class:{input:!0,"icon-left":"object"==typeof(null===(t=this._icon)||void 0===t?void 0:t.left),"icon-right":"object"==typeof(null===(e=this._icon)||void 0===e?void 0:e.right)}},i("div",{class:"icons"},(null===(l=this._icon)||void 0===l?void 0:l.left)?i("kol-icon",{_ariaLabel:"",_icon:this._icon.left.icon}):i("i",null),(null===(a=this._icon)||void 0===a?void 0:a.right)?i("kol-icon",{_ariaLabel:"",_icon:this._icon.right.icon}):i("i",null)),i("slot",{name:"input"}),"object"==typeof this._smartButton&&null!==this._smartButton&&i("kol-button-wc",{_ariaLabel:this._smartButton._ariaLabel,_customClass:this._smartButton._customClass,_disabled:this._smartButton._disabled,_icon:this._smartButton._icon,_iconOnly:!0,_id:this._smartButton._id,_label:this._smartButton._label,_on:this._smartButton._on,_tooltipAlign:this._smartButton._tooltipAlign,_variant:this._smartButton._variant})),r&&i("kol-alert",{class:"error",id:`${this._id}-error`,_alert:this._alert,_type:"error",_variant:"msg"},this._error),Array.isArray(this._list)&&this._list.length>0&&i("datalist",{id:`${this._id}-list`},this._list.map((t=>i("option",{value:t})))))}};export{a as kol_heading_wc,n as kol_input};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as o,h as i}from"./index-0dce65d2.js";const r=":host{--kolibri-border-color:#e0e0e0;--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-spacing:0.25rem}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}:host>kol-heading-wc{display:grid}:host>kol-heading-wc>.overline{order:1}:host>kol-heading-wc>.headline{order:2}",e=class{constructor(i){o(this,i),this._level=void 0,this._label=void 0,this._overline=""}render(){return i("kol-heading-wc",{_label:this._label,_level:this._level,_overline:this._overline},i("slot",null))}};e.style={default:r};export{e as kol_heading};
+import{r as o,h as i}from"./index-0dce65d2.js";const r=":host{--kolibri-border-color:#e0e0e0;--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}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}:host>kol-heading-wc{display:grid}:host>kol-heading-wc>.overline{order:1}:host>kol-heading-wc>.headline{order:2}",e=class{constructor(i){o(this,i),this._level=void 0,this._label=void 0,this._overline=""}render(){return i("kol-heading-wc",{_label:this._label,_level:this._level,_overline:this._overline},i("slot",null))}};e.style={default:r};export{e as kol_heading};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolHeading","render","h","_label","this","_level","_overline"],"sources":["./src/components/heading/style.css?tag=kol-heading&mode=default&encapsulation=shadow","./src/components/heading/shadow.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > kol-heading-wc {\n\tdisplay: grid;\n}\n:host > kol-heading-wc > .overline {\n\torder: 1;\n}\n:host > kol-heading-wc > .headline {\n\torder: 2;\n}\n","import { Component, h, JSX, Prop } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-heading',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolHeading implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-heading-wc _label={this._label} _level={this._level} _overline={this._overline}>\n\t\t\t\t<slot />\n\t\t\t</kol-heading-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder ob es keine Überschrift ist, sondern nur fett gedruckt.\n\t */\n\t@Prop() public _level?: HeadingLevel;\n\n\t/**\n\t * Gibt den Text der Überschrift an.\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Gibt den Text der zusätzlichen Beschriftung an.\n\t */\n\t@Prop() public _overline?: string = '';\n}\n"],"mappings":";;;+CAAA,MAAMA,EAAkB,yjC,MCYXC,EAAU,M,oFAsBc,E,CArB7BC,SACN,OACCC,EAAA,kBAAgBC,OAAQC,KAAKD,OAAQE,OAAQD,KAAKC,OAAQC,UAAWF,KAAKE,WACzEJ,EAAA,a"}
+{"version":3,"names":["defaultStyleCss","KolHeading","render","h","_label","this","_level","_overline"],"sources":["./src/components/heading/style.css?tag=kol-heading&mode=default&encapsulation=shadow","./src/components/heading/shadow.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > kol-heading-wc {\n\tdisplay: grid;\n}\n:host > kol-heading-wc > .overline {\n\torder: 1;\n}\n:host > kol-heading-wc > .headline {\n\torder: 2;\n}\n","import { Component, h, JSX, Prop } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-heading',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolHeading implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-heading-wc _label={this._label} _level={this._level} _overline={this._overline}>\n\t\t\t\t<slot />\n\t\t\t</kol-heading-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder ob es keine Überschrift ist, sondern nur fett gedruckt.\n\t */\n\t@Prop() public _level?: HeadingLevel;\n\n\t/**\n\t * Gibt den Text der Überschrift an.\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Gibt den Text der zusätzlichen Beschriftung an.\n\t */\n\t@Prop() public _overline?: string = '';\n}\n"],"mappings":";;;+CAAA,MAAMA,EAAkB,qtC,MCYXC,EAAU,M,oFAsBc,E,CArB7BC,SACN,OACCC,EAAA,kBAAgBC,OAAQC,KAAKD,OAAQE,OAAQD,KAAKC,OAAQC,UAAWF,KAAKE,WACzEJ,EAAA,a"}