@public-ui/components 1.5.2-rc.2 → 1.5.2-rc.3

package/cheat-sheet.html

@@ -6,17 +6,16 @@
 		<meta name="description" content="..." />
 		<base href="/" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link href="https://fonts.cdnfonts.com/css/roboto" rel="stylesheet" />
-		<link href="https://use.fontawesome.com/releases/v6.2.1/css/all.css" rel="stylesheet" />
+		<link href="https://cdn.jsdelivr.net/npm/@vscode/codicons@0.0.33/dist/codicon.min.css" rel="stylesheet" />
+		<link href="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/styles/a11y-light.min.css" rel="stylesheet" />
+		<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/lib/index.min.js"></script>
 		<script type="module">
-			import { register } from 'https://esm.sh/@public-ui/components@1.5.2-rc.2';
-			import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.5.2-rc.2/dist/loader';
-			import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.5.2-rc.2';
+			import { register } from 'https://esm.sh/@public-ui/components@1.5.2-rc.3';
+			import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.5.2-rc.3/dist/loader';
+			import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.5.2-rc.3';
 				register(ITZBund, defineCustomElements)
-						.then(() => {})
 						.catch(console.warn);
 		</script>
-		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/a11y-light.min.css">
 		<style>
 			:root {
 				font-size: 10px;
@@ -78,9 +77,9 @@
 			<pre>
 				<code class="language-html">&#60;head&#62;
 	&#60;script type="module"&#62;
-		import { register } from 'https://esm.sh/@public-ui/components@1.5.2-rc.2';
-		import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.5.2-rc.2/dist/loader';
-		import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.5.2-rc.2';
+		import { register } from 'https://esm.sh/@public-ui/components@1.5.2-rc.3';
+		import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.5.2-rc.3/dist/loader';
+		import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.5.2-rc.3';
 		register([ITZBund], [defineCustomElements])
 			.then(() =&#62; {})
 			.catch(console.warn);
@@ -337,7 +336,7 @@ Das Triggerelement ist immer das im HTML vorangehende Element (previousSibling).
 },{
 	name: `progress`,
 	desc: `Die **Progress**-Komponente erzeugt einen Fortschrittsbalken, über den eine optische Rückmeldung gegeben werden kann.`,
-	props: `_label, _max, _type, _unit, _value`
+	props: `_label, _max, _type, _unit, _value, _variant`
 },{
 	name: `quote`,
 	desc: `> <kol-badge _label="untested"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.
@@ -495,16 +494,16 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	desc: `Gibt an, was der Screenreader ausgeben soll`,
 	types: `string`,
 	comps: `breadcrumb, button, button-link, icon, link, link-button, modal, nav, skip-nav, split-button, symbol, tabs`
+},{
+	name: `_variant`,
+	desc: `Gibt an, ob die Fortschrittsanzeige als Balken oder Kreis dargestellt wird.`,
+	types: `"bar" | "cycle", "block" | "inline", "button" | "checkbox" | "default" | "switch", "card" | "msg", "custom" | "danger" | "ghost" | "normal" | "primary" | "secondary", "cycle" | "dot" | "none", "primary" | "secondary"`,
+	comps: `alert, alert-wc, button, input-checkbox, link-button, nav, pagination, progress, quote, spin, split-button`
 },{
 	name: `_type`,
 	desc: `Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.`,
 	types: `"bar" | "cycle", "button" | "checkbox" | "default" | "switch", "button" | "reset" | "submit", "date" | "datetime-local" | "month" | "number" | "time" | "week", "date" | "datetime-local" | "month" | "time" | "week", "default" | "error" | "info" | "success" | "warning", "search" | "tel" | "text" | "url"`,
 	comps: `alert, alert-wc, button, button-link, input-checkbox, input-date, input-number, input-text, progress, split-button, toast`
-},{
-	name: `_variant`,
-	desc: `Gibt an, welche Ausprägung der Button hat.`,
-	types: `"block" | "inline", "button" | "checkbox" | "default" | "switch", "card" | "msg", "custom" | "danger" | "ghost" | "normal" | "primary" | "secondary", "default" | "none", "primary" | "secondary"`,
-	comps: `alert, alert-wc, button, input-checkbox, link-button, nav, pagination, quote, spin, split-button`
 },{
 	name: `_required`,
 	desc: `Macht das Eingabeelement zu einem Pflichtfeld.`,

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.2-rc.2",
+  "version": "1.5.2-rc.3",
   "tags": [
     {
       "name": "kol-abbr",
@@ -23,8 +23,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Der Begriff, der erläutert werden soll.",
-          "description": ""
+          "name": "default",
+          "description": "Der Begriff, der erläutert werden soll."
         }
       ],
       "cssProperties": [],
@@ -62,9 +62,13 @@
           "name": "content",
           "description": "Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions."
         },
+        {
+          "name": "default",
+          "description": "Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions."
+        },
         {
           "name": "header",
-          "description": "Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions."
+          "description": "Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions."
         }
       ],
       "cssProperties": [],
@@ -120,8 +124,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Der Inhalt der Meldung.",
-          "description": ""
+          "name": "default",
+          "description": "Der Inhalt der Meldung."
         }
       ],
       "cssProperties": [],
@@ -177,8 +181,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Der Inhalt der Meldung.",
-          "description": ""
+          "name": "default",
+          "description": "Der Inhalt der Meldung."
         }
       ],
       "cssProperties": [],
@@ -537,13 +541,17 @@
           "name": "content",
           "description": "Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card."
         },
+        {
+          "name": "default",
+          "description": "Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card."
+        },
         {
           "name": "footer",
-          "description": "Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card."
+          "description": "Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card."
         },
         {
           "name": "header",
-          "description": "Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card."
+          "description": "Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card."
         }
       ],
       "cssProperties": [],
@@ -571,8 +579,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Der Inhalt, der in der Detailbeschreibung angezeigt wird.",
-          "description": ""
+          "name": "default",
+          "description": "Der Inhalt, der in der Detailbeschreibung angezeigt wird."
         }
       ],
       "cssProperties": [],
@@ -594,8 +602,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Inhalt der Form.",
-          "description": ""
+          "name": "default",
+          "description": "Inhalt der Form."
         }
       ],
       "cssProperties": [],
@@ -628,8 +636,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Inhalt der Überschrift.",
-          "description": ""
+          "name": "default",
+          "description": "Inhalt der Überschrift."
         }
       ],
       "cssProperties": [],
@@ -663,8 +671,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Inhalt der Überschrift.",
-          "description": ""
+          "name": "default",
+          "description": "Inhalt der Überschrift."
         }
       ],
       "cssProperties": [],
@@ -818,8 +826,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Der Text.",
-          "description": ""
+          "name": "default",
+          "description": "Der Text."
         }
       ],
       "cssProperties": [],
@@ -950,8 +958,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Die Beschriftung der Checkbox.",
-          "description": ""
+          "name": "default",
+          "description": "Die Beschriftung der Checkbox."
         }
       ],
       "cssProperties": [],
@@ -1053,8 +1061,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Die Beschriftung des Eingabefeldes.",
-          "description": ""
+          "name": "default",
+          "description": "Die Beschriftung des Eingabefeldes."
         }
       ],
       "cssProperties": [],
@@ -1193,8 +1201,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Die Beschriftung des Eingabefeldes.",
-          "description": ""
+          "name": "default",
+          "description": "Die Beschriftung des Eingabefeldes."
         }
       ],
       "cssProperties": [],
@@ -1338,8 +1346,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Die Beschriftung des Eingabefeldes.",
-          "description": ""
+          "name": "default",
+          "description": "Die Beschriftung des Eingabefeldes."
         }
       ],
       "cssProperties": [],
@@ -1447,8 +1455,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Die Beschriftung des Eingabefeldes.",
-          "description": ""
+          "name": "default",
+          "description": "Die Beschriftung des Eingabefeldes."
         }
       ],
       "cssProperties": [],
@@ -1593,8 +1601,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Die Beschriftung des Eingabefeldes.",
-          "description": ""
+          "name": "default",
+          "description": "Die Beschriftung des Eingabefeldes."
         }
       ],
       "cssProperties": [],
@@ -1726,8 +1734,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Die Beschriftung des Eingabefeldes.",
-          "description": ""
+          "name": "default",
+          "description": "Die Beschriftung des Eingabefeldes."
         }
       ],
       "cssProperties": [],
@@ -1830,8 +1838,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Die Legende/Überschrift der Radiobuttons.",
-          "description": ""
+          "name": "default",
+          "description": "Die Legende/Überschrift der Radiobuttons."
         }
       ],
       "cssProperties": [],
@@ -2050,8 +2058,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default\tDie Beschriftung des Eingabeelements.",
-          "description": ""
+          "name": "default",
+          "description": "Die Beschriftung des Eingabeelements."
         }
       ],
       "cssProperties": [],
@@ -2196,8 +2204,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Die Beschriftung des Eingabefeldes.",
-          "description": ""
+          "name": "default",
+          "description": "Die Beschriftung des Eingabefeldes."
         }
       ],
       "cssProperties": [],
@@ -2595,8 +2603,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Der Inhalt des Modals.",
-          "description": ""
+          "name": "default",
+          "description": "Der Inhalt des Modals."
         }
       ],
       "cssProperties": [],
@@ -2768,8 +2776,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Der Inhalt des Popover.",
-          "description": ""
+          "name": "default",
+          "description": "Der Inhalt des Popover."
         }
       ],
       "cssProperties": [],
@@ -2809,6 +2817,12 @@
           "type": "number",
           "description": "Gibt an, wie weit die Anzeige fortgeschritten ist.",
           "required": true
+        },
+        {
+          "name": "_variant",
+          "type": "\"bar\" | \"cycle\" | undefined",
+          "description": "Gibt an, ob die Fortschrittsanzeige als Balken oder Kreis dargestellt wird.",
+          "required": false
         }
       ],
       "events": [],
@@ -2968,8 +2982,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Die Beschriftung des Eingabefeldes.",
-          "description": ""
+          "name": "default",
+          "description": "Die Beschriftung des Eingabefeldes."
         }
       ],
       "cssProperties": [],
@@ -3041,9 +3055,9 @@
         },
         {
           "name": "_variant",
-          "type": "\"default\" | \"none\" | undefined",
+          "type": "\"cycle\" | \"dot\" | \"none\" | undefined",
           "description": "Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll.",
-          "defaultValue": "'default'",
+          "defaultValue": "'dot'",
           "required": false
         }
       ],
@@ -3177,7 +3191,7 @@
       "methods": [],
       "slots": [
         {
-          "name": "popover",
+          "name": "default",
           "description": "Ermöglicht das Einfügen beliebigen HTML's in das dropdown."
         }
       ],
@@ -3413,8 +3427,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Die Beschriftung des Eingabefeldes.",
-          "description": ""
+          "name": "default",
+          "description": "Die Beschriftung des Eingabefeldes."
         }
       ],
       "cssProperties": [],
@@ -3478,8 +3492,8 @@
       "methods": [],
       "slots": [
         {
-          "name": "default Der Inhalt der Meldung.",
-          "description": ""
+          "name": "default",
+          "description": "Der Inhalt der Meldung."
         }
       ],
       "cssProperties": [],

package/dist/cjs/kol-abbr.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),buttonLink=require("./button-link-7da2652e.js"),dev_utils=require("./dev.utils-d69c0a9f.js"),prop_validators=require("./prop.validators-0e600d26.js");require("./reuse-0fe7470f.js"),require("./a11y.tipps-251f022e.js"),require("./index-7159f3d9.js");const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>abbr{cursor:help}",KolAbbr=class{constructor(t){index.registerInstance(this,t),this.nonce=dev_utils.nonce(),this._tooltipAlign="top",this._title=void 0,this.state={_title:"…",_tooltipAlign:"top"}}render(){return index.h(index.Host,null,index.h("abbr",{"aria-labelledby":this.nonce,role:"definition",title:this.state._title},index.h("span",{title:""},index.h("slot",null))),index.h("kol-tooltip",{_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._title}))}validateTitle(t){prop_validators.watchString(this,"_title",t,{required:!0})}validateTooltipAlign(t){buttonLink.watchTooltipAlignment(this,"_tooltipAlign",t)}componentWillLoad(){this.validateTitle(this._title),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_title:["validateTitle"],_tooltipAlign:["validateTooltipAlign"]}}};KolAbbr.style={default:defaultStyleCss},exports.kol_abbr=KolAbbr;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),buttonLink=require("./button-link-7da2652e.js"),dev_utils=require("./dev.utils-d69c0a9f.js"),prop_validators=require("./prop.validators-0e600d26.js");require("./reuse-0fe7470f.js"),require("./a11y.tipps-251f022e.js"),require("./index-7159f3d9.js");const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>abbr{cursor:help}",KolAbbr=class{constructor(t){index.registerInstance(this,t),this.nonce=dev_utils.nonce(),this._tooltipAlign="top",this._title=void 0,this.state={_title:"…",_tooltipAlign:"top"}}render(){return index.h(index.Host,null,index.h("abbr",{"aria-labelledby":this.nonce,role:"definition",title:this.state._title},index.h("span",{title:""},index.h("slot",null))),index.h("kol-tooltip",{_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._title}))}validateTitle(t){prop_validators.watchString(this,"_title",t,{required:!0})}validateTooltipAlign(t){buttonLink.watchTooltipAlignment(this,"_tooltipAlign",t)}componentWillLoad(){this.validateTitle(this._title),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_title:["validateTitle"],_tooltipAlign:["validateTooltipAlign"]}}};KolAbbr.style={default:defaultStyleCss},exports.kol_abbr=KolAbbr;

package/dist/cjs/kol-abbr.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"kol-abbr.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,2rBAA2rB;;MCkBtsB,OAAO;;;IACF,UAAK,GAAGA,eAAK,EAAE,CAAC;yBAkBU,KAAK;;iBAahB;MAC/B,MAAM,EAAE,GAAG;MACX,aAAa,EAAE,KAAK;KACpB;;EAhCM,MAAM;IACZ,QACCC,QAACC,UAAI,QACJD,qCAAuB,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAC5EA,kBAAM,KAAK,EAAC,EAAE,IACbA,qBAAQ,CACF,CACD,EACPA,yBAAa,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAgB,CACnG,EACN;GACF;EAgCM,aAAa,CAAC,KAAc;IAClCE,2BAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;MAClC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAGM,oBAAoB,CAAC,KAAiB;IAC5CC,gCAAqB,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;GACpD;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC9C;;;;;;;;;;;;","names":["nonce","h","Host","watchString","watchTooltipAlignment"],"sources":["./src/components/abbr/style.css?tag=kol-abbr&mode=default&encapsulation=shadow","./src/components/abbr/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host > abbr {\n\tcursor: help;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { Alignment } from '../../types/props';\nimport { nonce } from '../../utils/dev.utils';\nimport { watchString } from '../../utils/prop.validators';\nimport { API, States } from './types';\n\n/**\n * @slot default Der Begriff, der erläutert werden soll.\n */\n@Component({\n\ttag: 'kol-abbr',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAbbr implements API {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<abbr aria-labelledby={this.nonce} role=\"definition\" title={this.state._title}>\n\t\t\t\t\t<span title=\"\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t</abbr>\n\t\t\t\t<kol-tooltip _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._title}></kol-tooltip>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/**\n\t * Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.\n\t */\n\t@Prop() public _title!: string;\n\n\t/**\n\t * Die State-Parameter repräsentieren den inneren State\n\t * einer Komponente.\n\t *\n\t * @see: https://stenciljs.com/docs/state\n\t */\n\t@State() public state: States = {\n\t\t_title: '…', // ⚠ required\n\t\t_tooltipAlign: 'top',\n\t};\n\n\t/**\n\t * Die Watch-Methoden dienen der Möglichkeit zur\n\t * Validierung der Werte eines Properties und\n\t * dem Mapping dessen auf einen anderen internen\n\t * State-Typ.\n\t *\n\t * @see: https://stenciljs.com/docs/properties#prop-validation\n\t */\n\t@Watch('_title')\n\tpublic validateTitle(value?: string): void {\n\t\twatchString(this, '_title', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Alignment): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateTitle(this._title);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t}\n}\n"],"version":3}
+{"file":"kol-abbr.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,6sBAA6sB;;MCkBxtB,OAAO;;;IACF,UAAK,GAAGA,eAAK,EAAE,CAAC;yBAkBU,KAAK;;iBAahB;MAC/B,MAAM,EAAE,GAAG;MACX,aAAa,EAAE,KAAK;KACpB;;EAhCM,MAAM;IACZ,QACCC,QAACC,UAAI,QACJD,qCAAuB,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAC5EA,kBAAM,KAAK,EAAC,EAAE,IACbA,qBAAQ,CACF,CACD,EACPA,yBAAa,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAgB,CACnG,EACN;GACF;EAgCM,aAAa,CAAC,KAAc;IAClCE,2BAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;MAClC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAGM,oBAAoB,CAAC,KAAiB;IAC5CC,gCAAqB,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;GACpD;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC9C;;;;;;;;;;;;","names":["nonce","h","Host","watchString","watchTooltipAlignment"],"sources":["./src/components/abbr/style.css?tag=kol-abbr&mode=default&encapsulation=shadow","./src/components/abbr/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host > abbr {\n\tcursor: help;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { Alignment } from '../../types/props';\nimport { nonce } from '../../utils/dev.utils';\nimport { watchString } from '../../utils/prop.validators';\nimport { API, States } from './types';\n\n/**\n * @slot default - Der Begriff, der erläutert werden soll.\n */\n@Component({\n\ttag: 'kol-abbr',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAbbr implements API {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<abbr aria-labelledby={this.nonce} role=\"definition\" title={this.state._title}>\n\t\t\t\t\t<span title=\"\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t</abbr>\n\t\t\t\t<kol-tooltip _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._title}></kol-tooltip>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/**\n\t * Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.\n\t */\n\t@Prop() public _title!: string;\n\n\t/**\n\t * Die State-Parameter repräsentieren den inneren State\n\t * einer Komponente.\n\t *\n\t * @see: https://stenciljs.com/docs/state\n\t */\n\t@State() public state: States = {\n\t\t_title: '…', // ⚠ required\n\t\t_tooltipAlign: 'top',\n\t};\n\n\t/**\n\t * Die Watch-Methoden dienen der Möglichkeit zur\n\t * Validierung der Werte eines Properties und\n\t * dem Mapping dessen auf einen anderen internen\n\t * State-Typ.\n\t *\n\t * @see: https://stenciljs.com/docs/properties#prop-validation\n\t */\n\t@Watch('_title')\n\tpublic validateTitle(value?: string): void {\n\t\twatchString(this, '_title', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Alignment): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateTitle(this._title);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),a11y_tipps=require("./a11y.tipps-251f022e.js"),dev_utils=require("./dev.utils-d69c0a9f.js"),prop_validators=require("./prop.validators-0e600d26.js"),validation=require("./validation-067abd6e.js"),reuse=require("./reuse-0fe7470f.js");require("./index-7159f3d9.js");const validateOpen=(e,t)=>{prop_validators.watchBoolean(e,"_open",t)},defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}.accordion kol-heading-wc kol-button-wc button kol-span-wc{justify-items:start}.wrapper{position:relative}.transition{transition:height 0.3s ease-in-out}.content{inset:0 0 auto 0;position:absolute;width:100%}";a11y_tipps.featureHint("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),a11y_tipps.featureHint("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const KolAccordion=class{constructor(e){index.registerInstance(this,e),this.nonce=dev_utils.nonce(),this.contentElement=null,this.contentWrapperElement=null,this.contentObserver=null,this.transition=!1,this.catchContentElement=e=>{e&&(this.contentElement=e)},this.catchContentWrapperElement=e=>{e&&(this.contentWrapperElement=e)},this.onClick=e=>{this._open=!this._open,this.resizeWrapper(),setTimeout((()=>{var t;"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onClick)&&this.state._on.onClick(e,!0===this._open)}))},this._heading=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_heading:"…",_level:1}}resizeWrapper(e){const t=this.contentElement,n=this.contentWrapperElement,i=this.contentObserver;t&&n&&i&&(this._open?(n.style.display="block",setTimeout((()=>{var e;n.style.height=`${null!==(e=null==t?void 0:t.clientHeight)&&void 0!==e?e:0}px`})),e||i.observe(t),n.addEventListener("transitionend",(()=>{n.style.overflow=""}),{once:!0})):(n.style.overflow="hidden",i.unobserve(t),n.style.height="0",this.transition?n.addEventListener("transitionend",(()=>{n.style.display="none"}),{once:!0}):n.style.display="none"))}render(){return index.h(index.Host,null,index.h("div",{class:{accordion:!0,open:!0===this.state._open,close:!0!==this.state._open}},index.h("kol-heading-wc",{_label:"",_level:this.state._level},index.h("kol-button-wc",{_ariaControls:this.nonce,_ariaExpanded:this.state._open,_icon:this.state._open?"codicon codicon-remove":"codicon codicon-add",_label:this.state._heading,_on:{onClick:this.onClick}})),index.h("div",{class:"header"},index.h("slot",{name:"header"})),index.h("div",{ref:this.catchContentWrapperElement,class:{wrapper:!0,transition:this.transition}},index.h("div",{ref:this.catchContentElement,"aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce},index.h("slot",{name:"content"})))))}validateHeading(e){prop_validators.watchString(this,"_heading",e,{required:!0})}validateLevel(e){validation.watchHeadingLevel(this,e)}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onClick&&prop_validators.setState(this,"_on",e)}validateOpen(e){validateOpen(this,e)}componentWillLoad(){this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open),"test"!==reuse.processEnv&&(this.contentObserver=new ResizeObserver(this.resizeWrapper.bind(this))),setTimeout((()=>{this.contentObserver&&this.contentElement&&this.contentObserver.observe(this.contentElement)})),setTimeout((()=>{this.transition=!0}),200)}static get watchers(){return{_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};KolAccordion.style={default:defaultStyleCss},exports.kol_accordion=KolAccordion;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),a11y_tipps=require("./a11y.tipps-251f022e.js"),dev_utils=require("./dev.utils-d69c0a9f.js"),prop_validators=require("./prop.validators-0e600d26.js"),validation=require("./validation-067abd6e.js"),reuse=require("./reuse-0fe7470f.js");require("./index-7159f3d9.js");const validateOpen=(e,t)=>{prop_validators.watchBoolean(e,"_open",t)},defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}.accordion kol-heading-wc kol-button-wc button kol-span-wc{justify-items:start}.wrapper{position:relative}.transition{transition:height 0.3s ease-in-out}.content{inset:0 0 auto 0;position:absolute;width:100%}";a11y_tipps.featureHint("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),a11y_tipps.featureHint("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const KolAccordion=class{constructor(e){index.registerInstance(this,e),this.nonce=dev_utils.nonce(),this.contentElement=null,this.contentWrapperElement=null,this.contentObserver=null,this.transition=!1,this.catchContentElement=e=>{e&&(this.contentElement=e)},this.catchContentWrapperElement=e=>{e&&(this.contentWrapperElement=e)},this.onClick=e=>{this._open=!this._open,this.resizeWrapper(),setTimeout((()=>{var t;"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onClick)&&this.state._on.onClick(e,!0===this._open)}))},this._heading=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_heading:"…",_level:1}}resizeWrapper(e){const t=this.contentElement,n=this.contentWrapperElement,i=this.contentObserver;t&&n&&i&&(this._open?(n.style.display="block",setTimeout((()=>{var e;n.style.height=`${null!==(e=null==t?void 0:t.clientHeight)&&void 0!==e?e:0}px`})),e||i.observe(t),n.addEventListener("transitionend",(()=>{n.style.overflow=""}),{once:!0})):(n.style.overflow="hidden",i.unobserve(t),n.style.height="0",this.transition?n.addEventListener("transitionend",(()=>{n.style.display="none"}),{once:!0}):n.style.display="none"))}render(){return index.h(index.Host,null,index.h("div",{class:{accordion:!0,open:!0===this.state._open,close:!0!==this.state._open}},index.h("kol-heading-wc",{_label:"",_level:this.state._level},index.h("kol-button-wc",{_ariaControls:this.nonce,_ariaExpanded:this.state._open,_icon:this.state._open?"codicon codicon-remove":"codicon codicon-add",_label:this.state._heading,_on:{onClick:this.onClick}})),index.h("div",{class:"header"},index.h("slot",{name:"header"})),index.h("div",{ref:this.catchContentWrapperElement,class:{wrapper:!0,transition:this.transition}},index.h("div",{ref:this.catchContentElement,"aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce},index.h("slot",{name:"content"})," ",index.h("slot",null)))))}validateHeading(e){prop_validators.watchString(this,"_heading",e,{required:!0})}validateLevel(e){validation.watchHeadingLevel(this,e)}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onClick&&prop_validators.setState(this,"_on",e)}validateOpen(e){validateOpen(this,e)}componentWillLoad(){this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open),"test"!==reuse.processEnv&&(this.contentObserver=new ResizeObserver(this.resizeWrapper.bind(this))),setTimeout((()=>{this.contentObserver&&this.contentElement&&this.contentObserver.observe(this.contentElement)})),setTimeout((()=>{this.transition=!0}),200)}static get watchers(){return{_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};KolAccordion.style={default:defaultStyleCss},exports.kol_accordion=KolAccordion;

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

@@ -1 +1 @@
-{"file":"kol-accordion.entry.cjs.js","mappings":"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","names":["watchBoolean","featureHint","nonce","h","Host","watchString","watchHeadingLevel","setState","processEnv"],"sources":["./src/types/props/open.ts","./src/components/accordion/style.css?tag=kol-accordion&mode=default&encapsulation=shadow","./src/components/accordion/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Klappt das Element auf sofern gesetzt (oder true) und klappt es zu sofern nicht gesetzt (oder false).\n */\n/** en\n * If set (to true) opens/expands the element, closes if not set (or set to false).\n */\nexport type PropOpen = {\n\topen: boolean;\n};\n\n/* validator */\nexport const validateOpen = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_open', value);\n};\n","@import url(../style.css);\n@import url(../host-display-block.css);\n/*\n * Inside a button the label text ist always centered.\n * So we need text align left.\n */\n.accordion kol-heading-wc kol-button-wc button kol-span-wc {\n\tjustify-items: start;\n}\n.wrapper {\n\tposition: relative;\n}\n.transition {\n\ttransition: height 0.3s ease-in-out;\n}\n.content {\n\tinset: 0 0 auto 0;\n\tposition: absolute;\n\twidth: 100%;\n}\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\n\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { validateOpen } from '../../types/props';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState, watchString } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, KoliBriAccordionCallbacks, States } from './types';\nimport { processEnv } from '../../utils/reuse';\n\nfeatureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend`);\nfeatureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);\n\n/**\n *\n * @slot header - Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n */\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements API {\n\tprivate readonly nonce = nonce();\n\tprivate contentElement: HTMLElement | null = null;\n\tprivate contentWrapperElement: HTMLElement | null = null;\n\tprivate contentObserver: ResizeObserver | null = null;\n\tprivate transition = false;\n\n\tprivate readonly catchContentElement = (element?: HTMLElement) => {\n\t\tif (element) this.contentElement = element;\n\t};\n\tprivate readonly catchContentWrapperElement = (element?: HTMLElement) => {\n\t\tif (element) this.contentWrapperElement = element;\n\t};\n\n\tresizeWrapper(list?: ResizeObserverEntry[]) {\n\t\tconst content = this.contentElement;\n\t\tconst wrapper = this.contentWrapperElement;\n\t\tconst observer = this.contentObserver;\n\t\tif (content && wrapper && observer) {\n\t\t\tif (this._open) {\n\t\t\t\twrapper.style.display = 'block';\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\twrapper.style.height = `${content?.clientHeight ?? 0}px`;\n\t\t\t\t});\n\t\t\t\tif (!list) observer.observe(content);\n\t\t\t\twrapper.addEventListener(\n\t\t\t\t\t'transitionend',\n\t\t\t\t\t() => {\n\t\t\t\t\t\twrapper.style.overflow = '';\n\t\t\t\t\t},\n\t\t\t\t\t{ once: true }\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\twrapper.style.overflow = 'hidden';\n\t\t\t\tobserver.unobserve(content);\n\t\t\t\twrapper.style.height = '0';\n\t\t\t\tif (this.transition) {\n\t\t\t\t\twrapper.addEventListener(\n\t\t\t\t\t\t'transitionend',\n\t\t\t\t\t\t() => {\n\t\t\t\t\t\t\twrapper.style.display = 'none';\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{ once: true }\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\twrapper.style.display = 'none';\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\taccordion: true,\n\t\t\t\t\t\topen: this.state._open === true,\n\t\t\t\t\t\tclose: this.state._open !== true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-heading-wc _label=\"\" _level={this.state._level}>\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t// slot=\"expert\"\n\t\t\t\t\t\t\t_ariaControls={this.nonce}\n\t\t\t\t\t\t\t_ariaExpanded={this.state._open}\n\t\t\t\t\t\t\t_icon={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}\n\t\t\t\t\t\t\t_label={this.state._heading}\n\t\t\t\t\t\t\t_on={{ onClick: this.onClick }}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div ref={this.catchContentWrapperElement} class={{ wrapper: true, transition: this.transition }}>\n\t\t\t\t\t\t<div ref={this.catchContentElement} aria-hidden={this.state._open === false ? 'true' : undefined} class=\"content\" id={this.nonce}>\n\t\t\t\t\t\t\t<slot name=\"content\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt die Überschrift des Accordions an.\n\t */\n\t@Prop() public _heading!: string;\n\n\t/**\n\t * Setzt den H-Level, von 1 bis 6, der Überschrift.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen an.\n\t */\n\t@Prop() public _on?: KoliBriAccordionCallbacks;\n\n\t/**\n\t * Gibt an, ob das Accordion geöffnet ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_heading: '…', // ⚠ required\n\t\t_level: 1,\n\t};\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAccordionCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null && typeof value.onClick === 'function') {\n\t\t\tsetState(this, '_on', value);\n\t\t}\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t\tif (processEnv !== 'test') this.contentObserver = new ResizeObserver(this.resizeWrapper.bind(this));\n\t\tsetTimeout(() => {\n\t\t\tif (this.contentObserver && this.contentElement) this.contentObserver.observe(this.contentElement);\n\t\t});\n\t\t// So it does not transition if it is set to open from the start.\n\t\tsetTimeout(() => {\n\t\t\tthis.transition = true;\n\t\t}, 200);\n\t}\n\n\tprivate onClick = (event: Event) => {\n\t\tthis._open = !this._open;\n\t\tthis.resizeWrapper();\n\n\t\t/**\n\t\t * Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\t\tsetTimeout(() => {\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tthis.state._on.onClick(event, this._open === true);\n\t\t\t}\n\t\t});\n\t};\n}\n"],"version":3}
+{"file":"kol-accordion.entry.cjs.js","mappings":"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","names":["watchBoolean","featureHint","nonce","h","Host","watchString","watchHeadingLevel","setState","processEnv"],"sources":["./src/types/props/open.ts","./src/components/accordion/style.css?tag=kol-accordion&mode=default&encapsulation=shadow","./src/components/accordion/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Klappt das Element auf sofern gesetzt (oder true) und klappt es zu sofern nicht gesetzt (oder false).\n */\n/** en\n * If set (to true) opens/expands the element, closes if not set (or set to false).\n */\nexport type PropOpen = {\n\topen: boolean;\n};\n\n/* validator */\nexport const validateOpen = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_open', value);\n};\n","@import url(../style.css);\n@import url(../host-display-block.css);\n/*\n * Inside a button the label text ist always centered.\n * So we need text align left.\n */\n.accordion kol-heading-wc kol-button-wc button kol-span-wc {\n\tjustify-items: start;\n}\n.wrapper {\n\tposition: relative;\n}\n.transition {\n\ttransition: height 0.3s ease-in-out;\n}\n.content {\n\tinset: 0 0 auto 0;\n\tposition: absolute;\n\twidth: 100%;\n}\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\n\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { validateOpen } from '../../types/props';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState, watchString } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, KoliBriAccordionCallbacks, States } from './types';\nimport { processEnv } from '../../utils/reuse';\n\nfeatureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend`);\nfeatureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);\n\n/**\n *\n * @slot default - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n * @slot header - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions.\n */\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements API {\n\tprivate readonly nonce = nonce();\n\tprivate contentElement: HTMLElement | null = null;\n\tprivate contentWrapperElement: HTMLElement | null = null;\n\tprivate contentObserver: ResizeObserver | null = null;\n\tprivate transition = false;\n\n\tprivate readonly catchContentElement = (element?: HTMLElement) => {\n\t\tif (element) this.contentElement = element;\n\t};\n\tprivate readonly catchContentWrapperElement = (element?: HTMLElement) => {\n\t\tif (element) this.contentWrapperElement = element;\n\t};\n\n\tresizeWrapper(list?: ResizeObserverEntry[]) {\n\t\tconst content = this.contentElement;\n\t\tconst wrapper = this.contentWrapperElement;\n\t\tconst observer = this.contentObserver;\n\t\tif (content && wrapper && observer) {\n\t\t\tif (this._open) {\n\t\t\t\twrapper.style.display = 'block';\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\twrapper.style.height = `${content?.clientHeight ?? 0}px`;\n\t\t\t\t});\n\t\t\t\tif (!list) observer.observe(content);\n\t\t\t\twrapper.addEventListener(\n\t\t\t\t\t'transitionend',\n\t\t\t\t\t() => {\n\t\t\t\t\t\twrapper.style.overflow = '';\n\t\t\t\t\t},\n\t\t\t\t\t{ once: true }\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\twrapper.style.overflow = 'hidden';\n\t\t\t\tobserver.unobserve(content);\n\t\t\t\twrapper.style.height = '0';\n\t\t\t\tif (this.transition) {\n\t\t\t\t\twrapper.addEventListener(\n\t\t\t\t\t\t'transitionend',\n\t\t\t\t\t\t() => {\n\t\t\t\t\t\t\twrapper.style.display = 'none';\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{ once: true }\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\twrapper.style.display = 'none';\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\taccordion: true,\n\t\t\t\t\t\topen: this.state._open === true,\n\t\t\t\t\t\tclose: this.state._open !== true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-heading-wc _label=\"\" _level={this.state._level}>\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t// slot=\"expert\"\n\t\t\t\t\t\t\t_ariaControls={this.nonce}\n\t\t\t\t\t\t\t_ariaExpanded={this.state._open}\n\t\t\t\t\t\t\t_icon={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}\n\t\t\t\t\t\t\t_label={this.state._heading}\n\t\t\t\t\t\t\t_on={{ onClick: this.onClick }}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div ref={this.catchContentWrapperElement} class={{ wrapper: true, transition: this.transition }}>\n\t\t\t\t\t\t<div ref={this.catchContentElement} aria-hidden={this.state._open === false ? 'true' : undefined} class=\"content\" id={this.nonce}>\n\t\t\t\t\t\t\t<slot name=\"content\"></slot> {/* Deprecated for version 2 */}\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt die Überschrift des Accordions an.\n\t */\n\t@Prop() public _heading!: string;\n\n\t/**\n\t * Setzt den H-Level, von 1 bis 6, der Überschrift.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen an.\n\t */\n\t@Prop() public _on?: KoliBriAccordionCallbacks;\n\n\t/**\n\t * Gibt an, ob das Accordion geöffnet ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_heading: '…', // ⚠ required\n\t\t_level: 1,\n\t};\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAccordionCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null && typeof value.onClick === 'function') {\n\t\t\tsetState(this, '_on', value);\n\t\t}\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t\tif (processEnv !== 'test') this.contentObserver = new ResizeObserver(this.resizeWrapper.bind(this));\n\t\tsetTimeout(() => {\n\t\t\tif (this.contentObserver && this.contentElement) this.contentObserver.observe(this.contentElement);\n\t\t});\n\t\t// So it does not transition if it is set to open from the start.\n\t\tsetTimeout(() => {\n\t\t\tthis.transition = true;\n\t\t}, 200);\n\t}\n\n\tprivate onClick = (event: Event) => {\n\t\tthis._open = !this._open;\n\t\tthis.resizeWrapper();\n\n\t\t/**\n\t\t * Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\t\tsetTimeout(() => {\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tthis.state._on.onClick(event, this._open === true);\n\t\t\t}\n\t\t});\n\t};\n}\n"],"version":3}

package/dist/cjs/kol-alert-wc_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"kol-alert-wc.kol-input.entry.cjs.js","mappings":"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","names":["h","translate","Log","Host","watchBoolean","watchString","watchHeadingLevel","setState","watchValidator"],"sources":["./src/components/alert/component.tsx","./src/components/input/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { API, States, AlertType, AlertVariant, KoliBriAlertEventCallbacks } from './types';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { setState, watchBoolean, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { translate } from '../../i18n';\nimport { Log } from '../../utils/dev.utils';\n\nconst Icon = (props: { ariaLabel: string; icon: string; heading?: string }) => {\n\treturn <kol-icon class=\"heading-icon\" _ariaLabel={typeof props.heading === 'string' && props.heading.length > 0 ? '' : props.ariaLabel} _icon={props.icon} />;\n};\n\nconst AlertIcon = (props: { heading?: string; type?: AlertType }) => {\n\tswitch (props.type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"codicon codicon-error\" heading={props.heading} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"codicon codicon-info\" heading={props.heading} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"codicon codicon-warning\" heading={props.heading} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"codicon codicon-pass\" heading={props.heading} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"codicon codicon-comment\" heading={props.heading} />;\n\t}\n};\n\n/**\n * @slot default Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-alert-wc',\n\tshadow: false,\n})\nexport class KolAlertWc implements API {\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tif (this.state._alert) {\n\t\t\t/**\n\t\t\t * - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n\t\t\t * - https://googlechrome.github.io/samples/vibration/\n\t\t\t */\n\t\t\ttry {\n\t\t\t\tLog.debug(['Navigator should vibrate ...', navigator.vibrate([100, 75, 100, 75, 100])]);\n\t\t\t} catch (e) {\n\t\t\t\tLog.debug('Navigator does not support vibration.');\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.validateAlert(false);\n\t\t\t}, 10000);\n\t\t}\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t[this.state._type as string]: true,\n\t\t\t\t\t[this.state._variant as string]: true,\n\t\t\t\t}}\n\t\t\t\trole={this.state._alert ? 'alert' : undefined}\n\t\t\t>\n\t\t\t\t<div class=\"heading\">\n\t\t\t\t\t<AlertIcon heading={this.state._heading} type={this.state._type} />\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{typeof this.state._heading === 'string' && this.state._heading?.length > 0 && (\n\t\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)}\n\t\t\t\t\t\t{this._variant === 'msg' && (\n\t\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t_icon={{\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label={translate('kol-close')}\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{this._variant === 'card' && (\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung vorlesen soll.\n\t */\n\t@Prop({ reflect: true }) public _alert?: boolean = false;\n\n\t/**\n\t * Gibt an, ob der Alert ein Schließen-Icon hat.\n\t */\n\t@Prop({ reflect: true }) public _hasCloser?: boolean = false;\n\n\t/**\n\t * Gibt den Titel der Meldung an.\n\t */\n\t@Prop() public _heading?: string;\n\n\t/**\n\t * Setzt den H-Level, von 1 bis 6, der Überschrift.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t */\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\n\n\t/**\n\t * Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt.\n\t */\n\t@Prop() public _type?: AlertType = 'default';\n\n\t/**\n\t * Gibt an, welche Benachrichtigungsvariante dargestellt wird.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: States = {\n\t\t_level: 1,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: boolean): void {\n\t\twatchBoolean(this, '_hasCloser', value);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriAlertEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAlertEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriAlertEventCallbacks>(\n\t\t\t\tthis,\n\t\t\t\t'_on',\n\t\t\t\t{\n\t\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t\t}\n\t\t\t\t// {\n\t\t\t\t// \tafterPatch: (value: unknown) => {\n\t\t\t\t// \t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t\t// \t},\n\t\t\t\t// }\n\t\t\t);\n\t\t\t// } else {\n\t\t\t// \tsetState<KoliBriAlertEventCallbacks>(this, '_on', null, {\n\t\t\t// \t\tafterPatch: (value: unknown) => {\n\t\t\t// \t\t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t// \t\t},\n\t\t\t// \t});\n\t\t}\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'),\n\t\t\tnew Set('String {success, info, warning, error}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: AlertVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'card' || value === 'msg', new Set('AlertVariant {card, msg}'), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateType(this._type);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n","/* eslint-disable jsx-a11y/label-has-associated-control */\nimport { Component, h, Host, JSX, Prop } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriCustomIcon } from '../../types/icon';\n\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { Props } from './types';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-input',\n\tshadow: false,\n})\nexport class KolInput implements Props {\n\tpublic render(): JSX.Element {\n\t\tconst hasError = typeof this._error === 'string' && this._error.length > 0 && this._touched === true;\n\t\tconst hasHint = typeof this._hint === 'string' && this._hint.length > 0;\n\t\tconst hideLabel = this._hideLabel === true && this._required !== true;\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\tdisabled: this._disabled === true,\n\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t'read-only': this._readOnly === true,\n\t\t\t\t\trequired: this._required === true,\n\t\t\t\t\ttouched: this._touched === true,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this._renderNoLabel === false && (\n\t\t\t\t\t<label id={`${this._id}-label`} hidden={hideLabel} htmlFor={this._id}>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</label>\n\t\t\t\t)}\n\t\t\t\t{hasHint && (\n\t\t\t\t\t<span class=\"hint\" id={`${this._id}-hint`}>\n\t\t\t\t\t\t{this._hint}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tinput: true,\n\t\t\t\t\t\t'icon-left': typeof this._icon?.left === 'object',\n\t\t\t\t\t\t'icon-right': typeof this._icon?.right === 'object',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this._icon?.left && <kol-icon _ariaLabel=\"\" _icon={(this._icon.left as KoliBriCustomIcon).icon}></kol-icon>}\n\t\t\t\t\t<slot name=\"input\"></slot>\n\t\t\t\t\t{typeof this._smartButton === 'object' && this._smartButton !== null && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t_ariaLabel={this._smartButton._ariaLabel}\n\t\t\t\t\t\t\t_customClass={this._smartButton._customClass}\n\t\t\t\t\t\t\t_disabled={this._smartButton._disabled}\n\t\t\t\t\t\t\t_icon={this._smartButton._icon}\n\t\t\t\t\t\t\t_iconOnly={true}\n\t\t\t\t\t\t\t_id={this._smartButton._id}\n\t\t\t\t\t\t\t_label={this._smartButton._label}\n\t\t\t\t\t\t\t_on={this._smartButton._on}\n\t\t\t\t\t\t\t_tooltipAlign={this._smartButton._tooltipAlign}\n\t\t\t\t\t\t\t_variant={this._smartButton._variant}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t)}\n\t\t\t\t\t{this._icon?.right && <kol-icon _ariaLabel=\"\" _icon={(this._icon.right as KoliBriCustomIcon).icon}></kol-icon>}\n\t\t\t\t</div>\n\t\t\t\t{hasError && (\n\t\t\t\t\t<kol-alert class=\"error\" id={`${this._id}-error`} _alert={this._alert} _type=\"error\" _variant=\"msg\">\n\t\t\t\t\t\t{this._error}\n\t\t\t\t\t</kol-alert>\n\t\t\t\t)}\n\t\t\t\t{Array.isArray(this._list) && this._list.length > 0 && (\n\t\t\t\t\t<datalist id={`${this._id}-list`}>\n\t\t\t\t\t\t{this._list.map((option: string) => (\n\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</datalist>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string = '';\n\n\t/**\n\t * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: KoliBriHorizontalIcon;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt die Liste der Vorschlagswörter an.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Gibt an, ob die Eingabefeld nur lesend ist.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean = false;\n\n\t/**\n\t * Gibt an, ob die Komponente kein Label rendern soll.\n\t */\n\t@Prop({ reflect: true }) public _renderNoLabel?: boolean = false;\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean = false;\n\n\t/**\n\t * Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ reflect: true }) public _touched?: boolean = false;\n}\n"],"version":3}
+{"file":"kol-alert-wc.kol-input.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,IAAI,GAAG,CAAC,KAA4D;EACzE,OAAOA,sBAAU,KAAK,EAAC,cAAc,EAAC,UAAU,EAAE,OAAO,KAAK,CAAC,OAAO,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,GAAI,CAAC;AAC/J,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,KAA6C;EAC/D,QAAQ,KAAK,CAAC,IAAI;IACjB,KAAK,OAAO;MACX,OAAOA,QAAC,IAAI,IAAC,SAAS,EAAEC,cAAS,CAAC,WAAW,CAAC,EAAE,IAAI,EAAC,uBAAuB,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAC;IACzG,KAAK,MAAM;MACV,OAAOD,QAAC,IAAI,IAAC,SAAS,EAAEC,cAAS,CAAC,UAAU,CAAC,EAAE,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAC;IACvG,KAAK,SAAS;MACb,OAAOD,QAAC,IAAI,IAAC,SAAS,EAAEC,cAAS,CAAC,aAAa,CAAC,EAAE,IAAI,EAAC,yBAAyB,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAC;IAC7G,KAAK,SAAS;MACb,OAAOD,QAAC,IAAI,IAAC,SAAS,EAAEC,cAAS,CAAC,aAAa,CAAC,EAAE,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAC;IAC1G;MACC,OAAOD,QAAC,IAAI,IAAC,SAAS,EAAEC,cAAS,CAAC,aAAa,CAAC,EAAE,IAAI,EAAC,yBAAyB,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAC;GAC7G;AACF,CAAC,CAAC;MASW,UAAU;;;IACL,UAAK,GAAG;;MACxB,IAAI,CAAA,MAAA,IAAI,CAAC,GAAG,0CAAE,OAAO,MAAK,SAAS,EAAE;QACpC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;OACrC;KACD,CAAC;IAEe,OAAE,GAAG;MACrB,OAAO,EAAE,IAAI,CAAC,KAAK;KACnB,CAAC;IA0HM,oBAAe,GAAG,CAAC,KAAc,KACxC,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,OAAQ,KAAoC,CAAC,OAAO,KAAK,UAAU,CAAC;kBAzDjE,KAAK;sBAKD,KAAK;;kBAUrB,CAAC;;iBAUL,SAAS;oBAKH,KAAK;iBAEd;MAC/B,MAAM,EAAE,CAAC;KACT;;EAlGM,MAAM;;IACZ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;MAKtB,IAAI;QACHC,aAAG,CAAC,KAAK,CAAC,CAAC,8BAA8B,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;OACxF;MAAC,OAAO,CAAC,EAAE;QACXA,aAAG,CAAC,KAAK,CAAC,uCAAuC,CAAC,CAAC;OACnD;MAED,UAAU,CAAC;QACV,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;OAC1B,EAAE,KAAK,CAAC,CAAC;KACV;IAED,QACCF,QAACG,UAAI,IACJ,KAAK,EAAE;QACN,CAAC,IAAI,CAAC,KAAK,CAAC,KAAe,GAAG,IAAI;QAClC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAkB,GAAG,IAAI;OACrC,EACD,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,IAE7CH,iBAAK,KAAK,EAAC,SAAS,IACnBA,QAAC,SAAS,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,EACnEA,qBACE,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,0CAAE,MAAM,IAAG,CAAC,KAC1EA,4BAAgB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAmB,CACzF,EACA,IAAI,CAAC,QAAQ,KAAK,KAAK,KACvBA,iBAAK,KAAK,EAAC,SAAS,IACnBA,qBAAQ,CACH,CACN,CACI,EACL,IAAI,CAAC,KAAK,CAAC,UAAU,KACrBA,2BACC,KAAK,EAAC,OAAO,EACb,KAAK,EAAE;QACN,IAAI,EAAE;UACL,IAAI,EAAE,uBAAuB;SAC7B;OACD,EACD,SAAS,QACT,MAAM,EAAEC,cAAS,CAAC,WAAW,CAAC,EAC9B,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,aAAa,EAAC,MAAM,GACJ,CACjB,CACI,EACL,IAAI,CAAC,QAAQ,KAAK,MAAM,KACxBD,iBAAK,KAAK,EAAC,SAAS,IACnBA,qBAAQ,CACH,CACN,CACK,EACN;GACF;EA0CM,aAAa,CAAC,KAAe;IACnCI,4BAAY,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;GACpC;EAGM,iBAAiB,CAAC,KAAe;IACvCA,4BAAY,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;GACxC;EAGM,eAAe,CAAC,KAAc;IACpCC,2BAAW,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;GACrC;EAGM,aAAa,CAAC,KAAoB;IACxCC,4BAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAMM,UAAU,CAAC,KAAkC;IACnD,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE;MAChCC,wBAAQ,CACP,IAAI,EACJ,KAAK,EACL;QACC,OAAO,EAAG,KAAoC,CAAC,OAAO;OACtD,CAMD,CAAC;KAOF;GACD;EAGM,YAAY,CAAC,KAAiB;IACpCC,8BAAc,CACb,IAAI,EACJ,OAAO,EACP,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,KAAK,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,CAAC,EACpJ,IAAI,GAAG,CAAC,wCAAwC,CAAC,EACjD,KAAK,CACL,CAAC;GACF;EAGM,eAAe,CAAC,KAAoB;IAC1CA,8BAAc,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,KAAK,EAAE,IAAI,GAAG,CAAC,0BAA0B,CAAC,EAAE,KAAK,CAAC,CAAC;GAC7H;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;;;;;;;;;;;;MCzMW,QAAQ;;;kBAwE+B,IAAI;qBAKD,KAAK;kBAK1B,EAAE;sBAKoB,KAAK;iBAK5B,EAAE;;;;qBAoBoB,KAAK;0BAKA,KAAK;qBAKV,KAAK;;oBAUN,KAAK;;EAnInD,MAAM;;IACZ,MAAM,QAAQ,GAAG,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC;IACrG,MAAM,OAAO,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IACxE,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC;IAEtE,QACCR,QAACG,UAAI,IACJ,KAAK,EAAE;QACN,QAAQ,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI;QACjC,KAAK,EAAE,QAAQ,KAAK,IAAI;QACxB,WAAW,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI;QACpC,QAAQ,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI;QACjC,OAAO,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;OAC/B,IAEA,IAAI,CAAC,cAAc,KAAK,KAAK,KAC7BH,mBAAO,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,GAAG,IACnEA,sBACCA,kBAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACA,CACR,EACA,OAAO,KACPA,kBAAM,KAAK,EAAC,MAAM,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,OAAO,IACvC,IAAI,CAAC,KAAK,CACL,CACP,EACDA,iBACC,KAAK,EAAE;QACN,KAAK,EAAE,IAAI;QACX,WAAW,EAAE,QAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,CAAA,KAAK,QAAQ;QACjD,YAAY,EAAE,QAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,CAAA,KAAK,QAAQ;OACnD,IAEA,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,KAAIA,sBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAG,IAAI,CAAC,KAAK,CAAC,IAA0B,CAAC,IAAI,GAAa,EAC5GA,kBAAM,IAAI,EAAC,OAAO,GAAQ,EACzB,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,KACnEA,2BACC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,EACxC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,YAAY,EAC5C,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS,EACtC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAC9B,SAAS,EAAE,IAAI,EACf,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAC1B,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAChC,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAC1B,aAAa,EAAE,IAAI,CAAC,YAAY,CAAC,aAAa,EAC9C,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,GACpB,CACjB,EACA,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,KAAIA,sBAAU,UAAU,EAAC,EAAE,EAAC,KAAK,EAAG,IAAI,CAAC,KAAK,CAAC,KAA2B,CAAC,IAAI,GAAa,CACzG,EACL,QAAQ,KACRA,uBAAW,KAAK,EAAC,OAAO,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,IACjG,IAAI,CAAC,MAAM,CACD,CACZ,EACA,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,KAClDA,sBAAU,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,OAAO,IAC9B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAc,MAC9BA,oBAAQ,KAAK,EAAE,MAAM,GAAI,CACzB,CAAC,CACQ,CACX,CACK,EACN;GACF;;;;;;","names":["h","translate","Log","Host","watchBoolean","watchString","watchHeadingLevel","setState","watchValidator"],"sources":["./src/components/alert/component.tsx","./src/components/input/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { API, States, AlertType, AlertVariant, KoliBriAlertEventCallbacks } from './types';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { setState, watchBoolean, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { translate } from '../../i18n';\nimport { Log } from '../../utils/dev.utils';\n\nconst Icon = (props: { ariaLabel: string; icon: string; heading?: string }) => {\n\treturn <kol-icon class=\"heading-icon\" _ariaLabel={typeof props.heading === 'string' && props.heading.length > 0 ? '' : props.ariaLabel} _icon={props.icon} />;\n};\n\nconst AlertIcon = (props: { heading?: string; type?: AlertType }) => {\n\tswitch (props.type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"codicon codicon-error\" heading={props.heading} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"codicon codicon-info\" heading={props.heading} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"codicon codicon-warning\" heading={props.heading} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"codicon codicon-pass\" heading={props.heading} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"codicon codicon-comment\" heading={props.heading} />;\n\t}\n};\n\n/**\n * @slot default - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-alert-wc',\n\tshadow: false,\n})\nexport class KolAlertWc implements API {\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tif (this.state._alert) {\n\t\t\t/**\n\t\t\t * - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n\t\t\t * - https://googlechrome.github.io/samples/vibration/\n\t\t\t */\n\t\t\ttry {\n\t\t\t\tLog.debug(['Navigator should vibrate ...', navigator.vibrate([100, 75, 100, 75, 100])]);\n\t\t\t} catch (e) {\n\t\t\t\tLog.debug('Navigator does not support vibration.');\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.validateAlert(false);\n\t\t\t}, 10000);\n\t\t}\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t[this.state._type as string]: true,\n\t\t\t\t\t[this.state._variant as string]: true,\n\t\t\t\t}}\n\t\t\t\trole={this.state._alert ? 'alert' : undefined}\n\t\t\t>\n\t\t\t\t<div class=\"heading\">\n\t\t\t\t\t<AlertIcon heading={this.state._heading} type={this.state._type} />\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{typeof this.state._heading === 'string' && this.state._heading?.length > 0 && (\n\t\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)}\n\t\t\t\t\t\t{this._variant === 'msg' && (\n\t\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t_icon={{\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label={translate('kol-close')}\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{this._variant === 'card' && (\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung vorlesen soll.\n\t */\n\t@Prop({ reflect: true }) public _alert?: boolean = false;\n\n\t/**\n\t * Gibt an, ob der Alert ein Schließen-Icon hat.\n\t */\n\t@Prop({ reflect: true }) public _hasCloser?: boolean = false;\n\n\t/**\n\t * Gibt den Titel der Meldung an.\n\t */\n\t@Prop() public _heading?: string;\n\n\t/**\n\t * Setzt den H-Level, von 1 bis 6, der Überschrift.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t */\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\n\n\t/**\n\t * Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt.\n\t */\n\t@Prop() public _type?: AlertType = 'default';\n\n\t/**\n\t * Gibt an, welche Benachrichtigungsvariante dargestellt wird.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: States = {\n\t\t_level: 1,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: boolean): void {\n\t\twatchBoolean(this, '_hasCloser', value);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriAlertEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAlertEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriAlertEventCallbacks>(\n\t\t\t\tthis,\n\t\t\t\t'_on',\n\t\t\t\t{\n\t\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t\t}\n\t\t\t\t// {\n\t\t\t\t// \tafterPatch: (value: unknown) => {\n\t\t\t\t// \t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t\t// \t},\n\t\t\t\t// }\n\t\t\t);\n\t\t\t// } else {\n\t\t\t// \tsetState<KoliBriAlertEventCallbacks>(this, '_on', null, {\n\t\t\t// \t\tafterPatch: (value: unknown) => {\n\t\t\t// \t\t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t// \t\t},\n\t\t\t// \t});\n\t\t}\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'),\n\t\t\tnew Set('String {success, info, warning, error}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: AlertVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'card' || value === 'msg', new Set('AlertVariant {card, msg}'), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateType(this._type);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n","/* eslint-disable jsx-a11y/label-has-associated-control */\nimport { Component, h, Host, JSX, Prop } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriCustomIcon } from '../../types/icon';\n\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { Props } from './types';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-input',\n\tshadow: false,\n})\nexport class KolInput implements Props {\n\tpublic render(): JSX.Element {\n\t\tconst hasError = typeof this._error === 'string' && this._error.length > 0 && this._touched === true;\n\t\tconst hasHint = typeof this._hint === 'string' && this._hint.length > 0;\n\t\tconst hideLabel = this._hideLabel === true && this._required !== true;\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\tdisabled: this._disabled === true,\n\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t'read-only': this._readOnly === true,\n\t\t\t\t\trequired: this._required === true,\n\t\t\t\t\ttouched: this._touched === true,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this._renderNoLabel === false && (\n\t\t\t\t\t<label id={`${this._id}-label`} hidden={hideLabel} htmlFor={this._id}>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</label>\n\t\t\t\t)}\n\t\t\t\t{hasHint && (\n\t\t\t\t\t<span class=\"hint\" id={`${this._id}-hint`}>\n\t\t\t\t\t\t{this._hint}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tinput: true,\n\t\t\t\t\t\t'icon-left': typeof this._icon?.left === 'object',\n\t\t\t\t\t\t'icon-right': typeof this._icon?.right === 'object',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this._icon?.left && <kol-icon _ariaLabel=\"\" _icon={(this._icon.left as KoliBriCustomIcon).icon}></kol-icon>}\n\t\t\t\t\t<slot name=\"input\"></slot>\n\t\t\t\t\t{typeof this._smartButton === 'object' && this._smartButton !== null && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t_ariaLabel={this._smartButton._ariaLabel}\n\t\t\t\t\t\t\t_customClass={this._smartButton._customClass}\n\t\t\t\t\t\t\t_disabled={this._smartButton._disabled}\n\t\t\t\t\t\t\t_icon={this._smartButton._icon}\n\t\t\t\t\t\t\t_iconOnly={true}\n\t\t\t\t\t\t\t_id={this._smartButton._id}\n\t\t\t\t\t\t\t_label={this._smartButton._label}\n\t\t\t\t\t\t\t_on={this._smartButton._on}\n\t\t\t\t\t\t\t_tooltipAlign={this._smartButton._tooltipAlign}\n\t\t\t\t\t\t\t_variant={this._smartButton._variant}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t)}\n\t\t\t\t\t{this._icon?.right && <kol-icon _ariaLabel=\"\" _icon={(this._icon.right as KoliBriCustomIcon).icon}></kol-icon>}\n\t\t\t\t</div>\n\t\t\t\t{hasError && (\n\t\t\t\t\t<kol-alert class=\"error\" id={`${this._id}-error`} _alert={this._alert} _type=\"error\" _variant=\"msg\">\n\t\t\t\t\t\t{this._error}\n\t\t\t\t\t</kol-alert>\n\t\t\t\t)}\n\t\t\t\t{Array.isArray(this._list) && this._list.length > 0 && (\n\t\t\t\t\t<datalist id={`${this._id}-list`}>\n\t\t\t\t\t\t{this._list.map((option: string) => (\n\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</datalist>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string = '';\n\n\t/**\n\t * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: KoliBriHorizontalIcon;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt die Liste der Vorschlagswörter an.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Gibt an, ob die Eingabefeld nur lesend ist.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean = false;\n\n\t/**\n\t * Gibt an, ob die Komponente kein Label rendern soll.\n\t */\n\t@Prop({ reflect: true }) public _renderNoLabel?: boolean = false;\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean = false;\n\n\t/**\n\t * Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ reflect: true }) public _touched?: boolean = false;\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}kol-alert-wc{display:grid}kol-alert-wc .heading{display:flex;place-items:center}kol-alert-wc .heading>div{flex-grow:1}",KolAlert=class{constructor(e){index.registerInstance(this,e),this._alert=!1,this._hasCloser=!1,this._heading=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){return index.h(index.Host,null,index.h("kol-alert-wc",{_alert:this._alert,_hasCloser:this._hasCloser,_heading:this._heading,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},index.h("slot",null)))}};KolAlert.style={default:defaultStyleCss},exports.kol_alert=KolAlert;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}kol-alert-wc{display:grid}kol-alert-wc .heading{display:flex;place-items:center}kol-alert-wc .heading>div{flex-grow:1}",KolAlert=class{constructor(e){index.registerInstance(this,e),this._alert=!1,this._hasCloser=!1,this._heading=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){return index.h(index.Host,null,index.h("kol-alert-wc",{_alert:this._alert,_hasCloser:this._hasCloser,_heading:this._heading,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},index.h("slot",null)))}};KolAlert.style={default:defaultStyleCss},exports.kol_alert=KolAlert;