@public-ui/components 2.0.4 → 2.0.5

package/dist/components/component11.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\t:host > div {\n\t\tborder-left-style: solid;\n\t\tpadding-left: 0.5em;\n\t}\n}\n",KolIndentedTextDefaultStyle0=defaultStyleCss,KolIndentedText=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.state={}}render(){return h(Host,null,h("div",null,h("slot",null)))}static get style(){return{default:KolIndentedTextDefaultStyle0}}},[33,"kol-indented-text",{state:[32]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-indented-text"].forEach((t=>{if("kol-indented-text"===t)customElements.get(t)||customElements.define(t,KolIndentedText)}))}export{KolIndentedText as K,defineCustomElement as d};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\t:host > div {\n\t\tborder-left-style: solid;\n\t\tpadding-left: 0.5em;\n\t}\n}\n",KolIndentedTextDefaultStyle0=defaultStyleCss,KolIndentedText=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.state={}}render(){return h(Host,null,h("div",null,h("slot",null)))}static get style(){return{default:KolIndentedTextDefaultStyle0}}},[33,"kol-indented-text",{state:[32]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-indented-text"].forEach((t=>{if("kol-indented-text"===t)customElements.get(t)||customElements.define(t,KolIndentedText)}))}export{KolIndentedText as K,defineCustomElement as d};

package/dist/components/component11.js.map

@@ -1 +1 @@
-{"file":"component11.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,wwHAAwwH,CAAC;AACjyH,qCAAe,eAAe;;MCajB,eAAe;;;;;qBACiB,EAAE;;IAEvC,MAAM;QACZ,QACC,EAAC,IAAI,QACJ,eAEC,eAAQ,CACH,CACA,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/indented-text/style.css?tag=kol-indented-text&mode=default&encapsulation=shadow","src/components/indented-text/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n@layer kol-component {\n\t:host > div {\n\t\tborder-left-style: solid;\n\t\tpadding-left: 0.5em;\n\t}\n}\n","import type { IndentedTextAPI, IndentedTextStates } from '@public-ui/schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, State } from '@stencil/core';\n\n/**\n * @slot - Der Text.\n */\n@Component({\n\ttag: 'kol-indented-text',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolIndentedText implements IndentedTextAPI {\n\t@State() public state: IndentedTextStates = {};\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\t{/* TODO: Für was wird dieses div benötigt? */}\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"component11.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,g5HAAg5H,CAAC;AACz6H,qCAAe,eAAe;;MCajB,eAAe;;;;;qBACiB,EAAE;;IAEvC,MAAM;QACZ,QACC,EAAC,IAAI,QACJ,eAEC,eAAQ,CACH,CACA,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/indented-text/style.css?tag=kol-indented-text&mode=default&encapsulation=shadow","src/components/indented-text/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n@layer kol-component {\n\t:host > div {\n\t\tborder-left-style: solid;\n\t\tpadding-left: 0.5em;\n\t}\n}\n","import type { IndentedTextAPI, IndentedTextStates } from '@public-ui/schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, State } from '@stencil/core';\n\n/**\n * @slot - Der Text.\n */\n@Component({\n\ttag: 'kol-indented-text',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolIndentedText implements IndentedTextAPI {\n\t@State() public state: IndentedTextStates = {};\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\t{/* TODO: Für was wird dieses div benötigt? */}\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/component12.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{a5 as handleSlotContent,s as showExpertSlot}from"./index2.js";import{a as translate}from"./i18n.js";import{d as defineCustomElement$7}from"./shadow.js";import{d as defineCustomElement$6}from"./component6.js";import{d as defineCustomElement$5}from"./component5.js";import{d as defineCustomElement$4}from"./component4.js";import{d as defineCustomElement$3}from"./component.js";import{d as defineCustomElement$2}from"./component2.js";import{d as defineCustomElement$1}from"./component3.js";const KolInput=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.slotName="input",this.catchInputSlot=t=>{handleSlotContent(this.host,t,this.slotName)},this._accessKey=void 0,this._alert=!0,this._currentLength=void 0,this._disabled=!1,this._error="",this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._readOnly=!1,this._renderNoLabel=!1,this._required=!1,this._slotName=void 0,this._suggestions=void 0,this._smartButton=void 0,this._tooltipAlign="top",this._touched=!1}componentWillRender(){this.slotName=this._slotName?this._slotName:"input"}getIconStyles(t){return t&&"object"==typeof t&&t.style?t.style:{}}render(){var t,e,s,i,o,n,l,r;const a="string"==typeof this._error&&this._error.length>0&&!0===this._touched,_=showExpertSlot(this._label),d="string"==typeof this._hint&&this._hint.length>0,m=!_&&this._hideLabel;return h(Host,{class:{disabled:!0===this._disabled,error:!0===a,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched,"hidden-error":!0===this._hideError}},h("label",{class:"input-label",id:m?void 0:`${this._id}-label`,hidden:m,htmlFor:this._id},h("span",{class:"input-label-span"},h("slot",{name:"label"}))),d&&h("span",{class:"hint",id:`${this._id}-hint`},this._hint),h("div",{class:{input:!0,"icon-left":"object"==typeof(null===(t=this._icons)||void 0===t?void 0:t.left),"icon-right":"object"==typeof(null===(e=this._icons)||void 0===e?void 0:e.right)}},(null===(s=this._icons)||void 0===s?void 0:s.left)&&h("kol-icon",{_label:"",_icons:(null===(i=this._icons)||void 0===i?void 0:i.left).icon,style:this.getIconStyles(null===(o=this._icons)||void 0===o?void 0:o.left)}),h("div",{ref:this.catchInputSlot,id:this.slotName,class:"input-slot"}),"object"==typeof this._smartButton&&null!==this._smartButton&&h("kol-button-wc",{_customClass:this._smartButton._customClass,_disabled:this._smartButton._disabled,_icons:this._smartButton._icons,_hideLabel:!0,_id:this._smartButton._id,_label:this._smartButton._label,_on:this._smartButton._on,_tooltipAlign:this._smartButton._tooltipAlign,_variant:this._smartButton._variant}),(null===(n=this._icons)||void 0===n?void 0:n.right)&&h("kol-icon",{_label:"",_icons:(null===(l=this._icons)||void 0===l?void 0:l.right).icon,style:this.getIconStyles(null===(r=this._icons)||void 0===r?void 0:r.right)})),m&&h("kol-tooltip-wc",{"aria-hidden":"true",class:"input-tooltip",_accessKey:this._accessKey,_align:this._tooltipAlign,_id:this._hideLabel?`${this._id}-label`:void 0,_label:this._label}),a&&h("kol-alert",{_alert:this._alert,_type:"error",class:"error"+(this._hideError?" hidden":""),id:`${this._id}-error`},this._error),Array.isArray(this._suggestions)&&this._suggestions.length>0&&h("datalist",{id:`${this._id}-list`},this._suggestions.map((t=>h("option",{value:t})))),this._hasCounter&&h("span",{class:"counter","aria-atomic":"true","aria-live":"polite"},this._currentLength,this._maxLength&&h(Fragment,null,h("span",{"aria-label":translate("kol-of"),role:"img"},"/"),this._maxLength)," ",h("span",null,translate("kol-characters"))))}get host(){return this}},[4,"kol-input",{_accessKey:[1,"_access-key"],_alert:[4],_currentLength:[2,"_current-length"],_disabled:[4],_error:[1],_hasCounter:[4,"_has-counter"],_hideError:[4,"_hide-error"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[16],_id:[1],_label:[1],_maxLength:[2,"_max-length"],_readOnly:[4,"_read-only"],_renderNoLabel:[4,"_render-no-label"],_required:[4],_slotName:[1,"_slot-name"],_suggestions:[1],_smartButton:[1,"_smart-button"],_tooltipAlign:[1,"_tooltip-align"],_touched:[4]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-input","kol-alert","kol-alert-wc","kol-button-wc","kol-heading-wc","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-input":customElements.get(t)||customElements.define(t,KolInput);break;case"kol-alert":customElements.get(t)||defineCustomElement$7();break;case"kol-alert-wc":customElements.get(t)||defineCustomElement$6();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$5();break;case"kol-heading-wc":customElements.get(t)||defineCustomElement$4();break;case"kol-icon":customElements.get(t)||defineCustomElement$3();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$2();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$1()}}))}export{KolInput as K,defineCustomElement as d};
+import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{a4 as handleSlotContent,s as showExpertSlot}from"./index2.js";import{a as translate}from"./i18n.js";import{d as defineCustomElement$7}from"./shadow.js";import{d as defineCustomElement$6}from"./component6.js";import{d as defineCustomElement$5}from"./component5.js";import{d as defineCustomElement$4}from"./component4.js";import{d as defineCustomElement$3}from"./component.js";import{d as defineCustomElement$2}from"./component2.js";import{d as defineCustomElement$1}from"./component3.js";const KolInput=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.slotName="input",this.catchInputSlot=t=>{handleSlotContent(this.host,t,this.slotName)},this._accessKey=void 0,this._alert=!0,this._currentLength=void 0,this._disabled=!1,this._error="",this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._readOnly=!1,this._renderNoLabel=!1,this._required=!1,this._slotName=void 0,this._suggestions=void 0,this._smartButton=void 0,this._tooltipAlign="top",this._touched=!1}componentWillRender(){this.slotName=this._slotName?this._slotName:"input"}getIconStyles(t){return t&&"object"==typeof t&&t.style?t.style:{}}render(){var t,e,s,i,o,n,l,r;const a="string"==typeof this._error&&this._error.length>0&&!0===this._touched,_=showExpertSlot(this._label),d="string"==typeof this._hint&&this._hint.length>0,m=!_&&this._hideLabel;return h(Host,{class:{disabled:!0===this._disabled,error:!0===a,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched,"hidden-error":!0===this._hideError}},h("label",{class:"input-label",id:m?void 0:`${this._id}-label`,hidden:m,htmlFor:this._id},h("span",{class:"input-label-span"},h("slot",{name:"label"}))),d&&h("span",{class:"hint",id:`${this._id}-hint`},this._hint),h("div",{class:{input:!0,"icon-left":"object"==typeof(null===(t=this._icons)||void 0===t?void 0:t.left),"icon-right":"object"==typeof(null===(e=this._icons)||void 0===e?void 0:e.right)}},(null===(s=this._icons)||void 0===s?void 0:s.left)&&h("kol-icon",{_label:"",_icons:(null===(i=this._icons)||void 0===i?void 0:i.left).icon,style:this.getIconStyles(null===(o=this._icons)||void 0===o?void 0:o.left)}),h("div",{ref:this.catchInputSlot,id:this.slotName,class:"input-slot"}),"object"==typeof this._smartButton&&null!==this._smartButton&&h("kol-button-wc",{_customClass:this._smartButton._customClass,_disabled:this._smartButton._disabled,_icons:this._smartButton._icons,_hideLabel:!0,_id:this._smartButton._id,_label:this._smartButton._label,_on:this._smartButton._on,_tooltipAlign:this._smartButton._tooltipAlign,_variant:this._smartButton._variant}),(null===(n=this._icons)||void 0===n?void 0:n.right)&&h("kol-icon",{_label:"",_icons:(null===(l=this._icons)||void 0===l?void 0:l.right).icon,style:this.getIconStyles(null===(r=this._icons)||void 0===r?void 0:r.right)})),m&&h("kol-tooltip-wc",{"aria-hidden":"true",class:"input-tooltip",_accessKey:this._accessKey,_align:this._tooltipAlign,_id:this._hideLabel?`${this._id}-label`:void 0,_label:this._label}),a&&h("kol-alert",{_alert:this._alert,_type:"error",class:"error"+(this._hideError?" hidden":""),id:`${this._id}-error`},this._error),Array.isArray(this._suggestions)&&this._suggestions.length>0&&h("datalist",{id:`${this._id}-list`},this._suggestions.map((t=>h("option",{value:t})))),this._hasCounter&&h("span",{class:"counter","aria-atomic":"true","aria-live":"polite"},this._currentLength,this._maxLength&&h(Fragment,null,h("span",{"aria-label":translate("kol-of"),role:"img"},"/"),this._maxLength)," ",h("span",null,translate("kol-characters"))))}get host(){return this}},[4,"kol-input",{_accessKey:[1,"_access-key"],_alert:[4],_currentLength:[2,"_current-length"],_disabled:[4],_error:[1],_hasCounter:[4,"_has-counter"],_hideError:[4,"_hide-error"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[16],_id:[1],_label:[1],_maxLength:[2,"_max-length"],_readOnly:[4,"_read-only"],_renderNoLabel:[4,"_render-no-label"],_required:[4],_slotName:[1,"_slot-name"],_suggestions:[1],_smartButton:[1,"_smart-button"],_tooltipAlign:[1,"_tooltip-align"],_touched:[4]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-input","kol-alert","kol-alert-wc","kol-button-wc","kol-heading-wc","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-input":customElements.get(t)||customElements.define(t,KolInput);break;case"kol-alert":customElements.get(t)||defineCustomElement$7();break;case"kol-alert-wc":customElements.get(t)||defineCustomElement$6();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$5();break;case"kol-heading-wc":customElements.get(t)||defineCustomElement$4();break;case"kol-icon":customElements.get(t)||defineCustomElement$3();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$2();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$1()}}))}export{KolInput as K,defineCustomElement as d};

package/dist/components/component13.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{ai as STATE_CHANGE_EVENT,an as watchNumber,E as validateCustomClass,v as validateLabel,q as watchValidator,X as watchJsonArrayString,aw as validateMax,a as validateTooltipAlign,V as parseJson}from"./index2.js";import{a as translate}from"./i18n.js";import{n as nonce}from"./dev.utils.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{d as defineCustomElement$9}from"./shadow.js";import{d as defineCustomElement$8}from"./component6.js";import{d as defineCustomElement$7}from"./component5.js";import{d as defineCustomElement$6}from"./component4.js";import{d as defineCustomElement$5}from"./component.js";import{d as defineCustomElement$4}from"./component12.js";import{d as defineCustomElement$3}from"./component14.js";import{d as defineCustomElement$2}from"./component2.js";import{d as defineCustomElement$1}from"./component3.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tgap: 1rem;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\t.navigation-list {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 0.5em;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.separator:before {\n\t\tcontent: '•••';\n\t}\n}\n",KolPaginationDefaultStyle0=defaultStyleCss,leftDoubleArrowIcon={left:"codicon codicon-debug-reverse-continue"},leftSingleArrow={left:"codicon codicon-chevron-left"},rightSingleArrowIcon={right:"codicon codicon-chevron-right"},rightDoubleArrowIcon={right:"codicon codicon-debug-continue"},KolPagination=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.nonce=nonce(),this.calcCount=(t,e=1)=>Math.ceil(t/e),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this.onClick=(t,e)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,e),this.onChangePage(t,e)},this.onChangePage=(t,e)=>{const n=setTimeout((()=>{clearTimeout(n),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,e)}))},this.onChangePageSize=(t,e)=>{if("number"==typeof(e=parseInt(e[0]))&&e>0&&this._pageSize!==e){this._pageSize=e;const n=setTimeout((()=>{clearTimeout(n),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize)}))}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,e)=>{let n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;const a=e.has("_pageSizeOptions")?e.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(a)&&a.length>0){const t=a.find((t=>t.value===n));n=void 0===t?a[0].value:t.value,e.set("_pageSize",n)}const i=e.has("_page")?e.get("_page"):this.state._page,s=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,i,e.get("_pageSize"),s)},this.syncPage=(t,e,n,a)=>{if(a>0){const i=this.calcCount(a,n);i>0&&(e>i?(t.set("_page",i),this.onChangePage(STATE_CHANGE_EVENT,i)):e<1&&(t.set("_page",1),this.onChangePage(STATE_CHANGE_EVENT,1)))}},this.beforePageSizeOptions=(t,e)=>{const n=[];if(Array.isArray(t))for(const e of t)"number"==typeof e&&n.push({label:translate("kol-page-per-site",{placeholders:{entries:`${e}`}}),value:e});e.set("_pageSizeOptions",n),this.beforePageSize(n,e)},this._boundaryCount=1,this._customClass=void 0,this._label=void 0,this._hasButtons=!0,this._page=void 0,this._pageSize=1,this._pageSizeOptions=[],this._on=void 0,this._siblingCount=1,this._tooltipAlign="top",this._max=void 0,this.state={_boundaryCount:1,_label:translate("kol-pagination"),_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0}}render(){var t;let e=!1;const n=this.getCount(),a=Array.from(Array(n).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>n-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(e=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===e?(e=!1,h("li",null,h("span",{class:"separator",key:`${this.nonce}-el-${t}`,"aria-hidden":"true"}))):null));return h(Host,null,h("nav",{"aria-label":this.state._label},h("ul",{class:"navigation-list"},this.state._hasButtons.first&&h("li",null,h("kol-button-wc",{class:"first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:leftDoubleArrowIcon,_hideLabel:!0,_label:translate("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&h("li",null,h("kol-button-wc",{class:"previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:leftSingleArrow,_hideLabel:!0,_label:translate("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),a,this.state._hasButtons.next&&h("li",null,h("kol-button-wc",{class:"next",exportparts:"icon",_customClass:this.state._customClass,_disabled:n<=this.state._page,_icons:rightSingleArrowIcon,_hideLabel:!0,_label:translate("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&h("li",null,h("kol-button-wc",{class:"last",exportparts:"icon",_customClass:this.state._customClass,_disabled:n<=this.state._page,_icons:rightDoubleArrowIcon,_hideLabel:!0,_label:translate("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&h("kol-select",{_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:translate("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return h("li",null,h("kol-button-wc",{exportparts:"icon",key:`${this.nonce}-${t}`,_customClass:this.state._customClass,_label:`${t}`,_on:{onClick:e=>{this.onClick(e,t)}}}))}getSelectedPageButton(t){return h("li",null,h("kol-button-wc",{class:"selected",key:`${this.nonce}-selected`,_customClass:this.state._customClass,_disabled:!0,_label:`${t}`}))}validateBoundaryCount(t){watchNumber(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){validateCustomClass(this,t)}validateLabel(t,e,n=!1){n||removeNavLabel(this.state._label),validateLabel(this,t),addNavLabel(this.state._label)}validateHasButtons(t){watchValidator(this,"_hasButtons",(t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,e)=>{if("boolean"==typeof t)e.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=parseJson(t)}catch(t){e.delete("_hasButtons")}"object"==typeof t&&null!==t&&e.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){watchNumber(this,"_page",t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize,a=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,t,n,a)}}})}validatePageSize(t){watchNumber(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){watchJsonArrayString(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){watchNumber(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){validateMax(this,t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_page")?e.get("_page"):this.state._page,a=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;this.syncPage(e,n,a,t)}}})}validateTooltipAlign(t){validateTooltipAlign(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}static get style(){return{default:KolPaginationDefaultStyle0}}},[33,"kol-pagination",{_boundaryCount:[2,"_boundary-count"],_customClass:[1,"_custom-class"],_label:[1],_hasButtons:[8,"_has-buttons"],_page:[2],_pageSize:[1026,"_page-size"],_pageSizeOptions:[1,"_page-size-options"],_on:[16],_siblingCount:[2,"_sibling-count"],_tooltipAlign:[1,"_tooltip-align"],_max:[2],state:[32]},void 0,{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-pagination","kol-alert","kol-alert-wc","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-select","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-pagination":customElements.get(t)||customElements.define(t,KolPagination);break;case"kol-alert":customElements.get(t)||defineCustomElement$9();break;case"kol-alert-wc":customElements.get(t)||defineCustomElement$8();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$7();break;case"kol-heading-wc":customElements.get(t)||defineCustomElement$6();break;case"kol-icon":customElements.get(t)||defineCustomElement$5();break;case"kol-input":customElements.get(t)||defineCustomElement$4();break;case"kol-select":customElements.get(t)||defineCustomElement$3();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$2();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$1()}}))}export{KolPagination as K,defineCustomElement as d};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{ai as STATE_CHANGE_EVENT,an as watchNumber,F as validateCustomClass,v as validateLabel,r as watchValidator,W as watchJsonArrayString,ax as validateMax,a as validateTooltipAlign,U as parseJson}from"./index2.js";import{a as translate}from"./i18n.js";import{n as nonce}from"./dev.utils.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{d as defineCustomElement$9}from"./shadow.js";import{d as defineCustomElement$8}from"./component6.js";import{d as defineCustomElement$7}from"./component5.js";import{d as defineCustomElement$6}from"./component4.js";import{d as defineCustomElement$5}from"./component.js";import{d as defineCustomElement$4}from"./component12.js";import{d as defineCustomElement$3}from"./component14.js";import{d as defineCustomElement$2}from"./component2.js";import{d as defineCustomElement$1}from"./component3.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tgap: 1rem;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\t.navigation-list {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 0.5em;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.separator:before {\n\t\tcontent: '•••';\n\t}\n}\n",KolPaginationDefaultStyle0=defaultStyleCss,leftDoubleArrowIcon={left:"codicon codicon-debug-reverse-continue"},leftSingleArrow={left:"codicon codicon-chevron-left"},rightSingleArrowIcon={right:"codicon codicon-chevron-right"},rightDoubleArrowIcon={right:"codicon codicon-debug-continue"},KolPagination=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.nonce=nonce(),this.calcCount=(t,e=1)=>Math.ceil(t/e),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this.onClick=(t,e)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,e),this.onChangePage(t,e)},this.onChangePage=(t,e)=>{const n=setTimeout((()=>{clearTimeout(n),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,e)}))},this.onChangePageSize=(t,e)=>{if("number"==typeof(e=parseInt(e[0]))&&e>0&&this._pageSize!==e){this._pageSize=e;const n=setTimeout((()=>{clearTimeout(n),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize)}))}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,e)=>{let n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;const a=e.has("_pageSizeOptions")?e.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(a)&&a.length>0){const t=a.find((t=>t.value===n));n=void 0===t?a[0].value:t.value,e.set("_pageSize",n)}const s=e.has("_page")?e.get("_page"):this.state._page,i=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,s,e.get("_pageSize"),i)},this.syncPage=(t,e,n,a)=>{if(a>0){const s=this.calcCount(a,n);s>0&&(e>s?(t.set("_page",s),this.onChangePage(STATE_CHANGE_EVENT,s)):e<1&&(t.set("_page",1),this.onChangePage(STATE_CHANGE_EVENT,1)))}},this.beforePageSizeOptions=(t,e)=>{const n=[];if(Array.isArray(t))for(const e of t)"number"==typeof e&&n.push({label:translate("kol-page-per-site",{placeholders:{entries:`${e}`}}),value:e});e.set("_pageSizeOptions",n),this.beforePageSize(n,e)},this._boundaryCount=1,this._customClass=void 0,this._label=void 0,this._hasButtons=!0,this._page=void 0,this._pageSize=1,this._pageSizeOptions=[],this._on=void 0,this._siblingCount=1,this._tooltipAlign="top",this._max=void 0,this.state={_boundaryCount:1,_label:translate("kol-pagination"),_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0}}render(){var t;let e=!1;const n=this.getCount(),a=Array.from(Array(n).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>n-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(e=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===e?(e=!1,h("li",null,h("span",{class:"separator",key:`${this.nonce}-el-${t}`,"aria-hidden":"true"}))):null));return h(Host,null,h("nav",{"aria-label":this.state._label},h("ul",{class:"navigation-list"},this.state._hasButtons.first&&h("li",null,h("kol-button-wc",{class:"first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:leftDoubleArrowIcon,_hideLabel:!0,_label:translate("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&h("li",null,h("kol-button-wc",{class:"previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:leftSingleArrow,_hideLabel:!0,_label:translate("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),a,this.state._hasButtons.next&&h("li",null,h("kol-button-wc",{class:"next",exportparts:"icon",_customClass:this.state._customClass,_disabled:n<=this.state._page,_icons:rightSingleArrowIcon,_hideLabel:!0,_label:translate("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&h("li",null,h("kol-button-wc",{class:"last",exportparts:"icon",_customClass:this.state._customClass,_disabled:n<=this.state._page,_icons:rightDoubleArrowIcon,_hideLabel:!0,_label:translate("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&h("kol-select",{_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:translate("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return h("li",null,h("kol-button-wc",{exportparts:"icon",key:`${this.nonce}-${t}`,_customClass:this.state._customClass,_label:"",_on:{onClick:e=>{this.onClick(e,t)}}},h("span",{slot:"expert"},h("span",{class:"visually-hidden"},translate("kol-page"))," ",t)))}getSelectedPageButton(t){return h("li",null,h("kol-button-wc",{class:"selected",key:`${this.nonce}-selected`,_customClass:this.state._customClass,_disabled:!0,_label:""},h("span",{slot:"expert"},h("span",{class:"visually-hidden"},translate("kol-page"))," ",t)))}validateBoundaryCount(t){watchNumber(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){validateCustomClass(this,t)}validateLabel(t,e,n=!1){n||removeNavLabel(this.state._label),validateLabel(this,t),addNavLabel(this.state._label)}validateHasButtons(t){watchValidator(this,"_hasButtons",(t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,e)=>{if("boolean"==typeof t)e.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=parseJson(t)}catch(t){e.delete("_hasButtons")}"object"==typeof t&&null!==t&&e.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){watchNumber(this,"_page",t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize,a=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,t,n,a)}}})}validatePageSize(t){watchNumber(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){watchJsonArrayString(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){watchNumber(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){validateMax(this,t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_page")?e.get("_page"):this.state._page,a=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;this.syncPage(e,n,a,t)}}})}validateTooltipAlign(t){validateTooltipAlign(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}static get style(){return{default:KolPaginationDefaultStyle0}}},[33,"kol-pagination",{_boundaryCount:[2,"_boundary-count"],_customClass:[1,"_custom-class"],_label:[1],_hasButtons:[8,"_has-buttons"],_page:[2],_pageSize:[1026,"_page-size"],_pageSizeOptions:[1,"_page-size-options"],_on:[16],_siblingCount:[2,"_sibling-count"],_tooltipAlign:[1,"_tooltip-align"],_max:[2],state:[32]},void 0,{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-pagination","kol-alert","kol-alert-wc","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-select","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-pagination":customElements.get(t)||customElements.define(t,KolPagination);break;case"kol-alert":customElements.get(t)||defineCustomElement$9();break;case"kol-alert-wc":customElements.get(t)||defineCustomElement$8();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$7();break;case"kol-heading-wc":customElements.get(t)||defineCustomElement$6();break;case"kol-icon":customElements.get(t)||defineCustomElement$5();break;case"kol-input":customElements.get(t)||defineCustomElement$4();break;case"kol-select":customElements.get(t)||defineCustomElement$3();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$2();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$1()}}))}export{KolPagination as K,defineCustomElement as d};

package/dist/components/component13.js.map

@@ -1 +1 @@
-{"file":"component13.js","mappings":"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","names":[],"sources":["src/components/pagination/style.css?tag=kol-pagination&mode=default&encapsulation=shadow","src/components/pagination/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\t:host {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tgap: 1rem;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\t.navigation-list {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 0.5em;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.separator:before {\n\t\tcontent: '•••';\n\t}\n}\n","import type {\n\tCustomClassPropType,\n\tKoliBriPaginationButtonCallbacks,\n\tLabelPropType,\n\tMaxPropType,\n\tOption,\n\tPaginationAPI,\n\tPaginationHasButton,\n\tPaginationStates,\n\tStringified,\n\tTooltipAlignPropType,\n} from '@public-ui/schema';\nimport {\n\tparseJson,\n\tSTATE_CHANGE_EVENT,\n\tvalidateCustomClass,\n\tvalidateLabel,\n\tvalidateMax,\n\tvalidateTooltipAlign,\n\twatchJsonArrayString,\n\twatchNumber,\n\twatchValidator,\n} from '@public-ui/schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { nonce } from '../../utils/dev.utils';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\n\nimport type { JSX } from '@stencil/core';\nconst leftDoubleArrowIcon = {\n\tleft: 'codicon codicon-debug-reverse-continue',\n};\nconst leftSingleArrow = {\n\tleft: 'codicon codicon-chevron-left',\n};\nconst rightSingleArrowIcon = {\n\tright: 'codicon codicon-chevron-right',\n};\nconst rightDoubleArrowIcon = {\n\tright: 'codicon codicon-debug-continue',\n};\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements PaginationAPI {\n\tprivate readonly nonce = nonce();\n\n\tprivate readonly calcCount = (total: number, pageSize = 1): number => Math.ceil(total / pageSize);\n\n\tprivate readonly getCount = (): number => this.calcCount(this.state._max, this.state._pageSize);\n\n\tpublic render(): JSX.Element {\n\t\tlet ellipsis = false;\n\t\tconst count = this.getCount();\n\t\tconst pageButtons = Array.from(Array(count).keys())\n\t\t\t.map((index: number) => index + 1)\n\t\t\t.map((page: number) => {\n\t\t\t\tif (\n\t\t\t\t\tpage <= this.state._boundaryCount ||\n\t\t\t\t\tpage > count - this.state._boundaryCount ||\n\t\t\t\t\t(page >= this.state._page - this.state._siblingCount && page <= this.state._page + this.state._siblingCount)\n\t\t\t\t) {\n\t\t\t\t\tellipsis = true;\n\t\t\t\t\tif (this.state._page === page) {\n\t\t\t\t\t\treturn this.getSelectedPageButton(page);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn this.getUnselectedPageButton(page);\n\t\t\t\t\t}\n\t\t\t\t} else if (ellipsis === true) {\n\t\t\t\t\tellipsis = false;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<span class=\"separator\" key={`${this.nonce}-el-${page}`} aria-hidden=\"true\"></span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t});\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"navigation-list\">\n\t\t\t\t\t\t{this.state._hasButtons.first && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\t\tclass=\"first\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t\t\t_icons={leftDoubleArrowIcon}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-first')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoToFirst}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._hasButtons.previous && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\t\tclass=\"previous\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t\t\t_icons={leftSingleArrow}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-back')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoBackward}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{pageButtons}\n\t\t\t\t\t\t{this.state._hasButtons.next && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\t\tclass=\"next\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t\t\t_icons={rightSingleArrowIcon}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-next')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoForward}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._hasButtons.last && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\t\tclass=\"last\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t\t\t_icons={rightDoubleArrowIcon}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-last')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoToEnd}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t\t{this.state._pageSizeOptions?.length > 0 && (\n\t\t\t\t\t<kol-select\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_id={`pagination-size-${this.nonce}`}\n\t\t\t\t\t\t_label={translate('kol-entries-per-site')}\n\t\t\t\t\t\t_options={this.state._pageSizeOptions}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonChange: this.onChangePageSize,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_value={[this.state._pageSize]}\n\t\t\t\t\t></kol-select>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the amount of pages to show next to the outer arrow buttons.\n\t */\n\t@Prop() public _boundaryCount?: number = 1;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which navigation buttons to render (first, last, next, previous buttons).\n\t */\n\t@Prop() public _hasButtons?: boolean | Stringified<PaginationHasButton> = true;\n\n\t/**\n\t * Defines the current page.\n\t */\n\t@Prop() public _page!: number;\n\n\t/**\n\t * Defines the amount of entries to show per page.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _pageSize = 1;\n\n\t/**\n\t * Defines the options for the page-size-select.\n\t */\n\t@Prop() public _pageSizeOptions: Stringified<number[]> = [];\n\n\t/**\n\t * Gibt an, auf welche Callback-Events reagiert werden.\n\t */\n\t@Prop() public _on!: KoliBriPaginationButtonCallbacks;\n\n\t/**\n\t * Defines the amount of pages to show next to the current page.\n\t */\n\t@Prop() public _siblingCount?: number = 1;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines the maximum number of pages.\n\t */\n\t@Prop() public _max!: MaxPropType;\n\n\t@State() public state: PaginationStates = {\n\t\t_boundaryCount: 1,\n\t\t_label: translate('kol-pagination'),\n\t\t_hasButtons: {\n\t\t\tfirst: true,\n\t\t\tlast: true,\n\t\t\tnext: true,\n\t\t\tprevious: true,\n\t\t},\n\t\t_on: {\n\t\t\tonClick: () => null,\n\t\t},\n\t\t_page: 0,\n\t\t_pageSize: 1,\n\t\t_pageSizeOptions: [],\n\t\t_siblingCount: 1,\n\t\t_max: 0,\n\t};\n\n\tprivate onClick = (event: Event, page: number) => {\n\t\tif (typeof this.state._on.onClick === 'function') {\n\t\t\tthis.state._on.onClick(event, page);\n\t\t}\n\t\tthis.onChangePage(event, page);\n\t};\n\n\tprivate onChangePage = (event: Event, page: number) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tif (typeof this.state._on.onChangePage === 'function') {\n\t\t\t\tthis.state._on.onChangePage(event, page);\n\t\t\t}\n\t\t});\n\t};\n\n\tprivate onChangePageSize = (event: Event, value: unknown) => {\n\t\tvalue = parseInt((value as string[])[0]);\n\t\tif (typeof value === 'number' && value > 0 && this._pageSize !== value) {\n\t\t\tthis._pageSize = value;\n\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t\tif (typeof this.state._on.onChangePageSize === 'function') {\n\t\t\t\t\tthis.state._on.onChangePageSize(event, this._pageSize);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate readonly onGoToFirst = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, 1);\n\t\t},\n\t};\n\tprivate readonly onGoToEnd = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.getCount());\n\t\t},\n\t};\n\tprivate readonly onGoBackward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page - 1);\n\t\t},\n\t};\n\tprivate readonly onGoForward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page + 1);\n\t\t},\n\t};\n\n\tprivate getUnselectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<li>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\tkey={`${this.nonce}-${page}`}\n\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t_label={`${page}`}\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonClick: (event: Event) => {\n\t\t\t\t\t\t\tthis.onClick(event, page);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t></kol-button-wc>\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate getSelectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<li>\n\t\t\t\t<kol-button-wc class=\"selected\" key={`${this.nonce}-selected`} _customClass={this.state._customClass} _disabled={true} _label={`${page}`} />\n\t\t\t</li>\n\t\t);\n\t}\n\n\t@Watch('_boundaryCount')\n\tpublic validateBoundaryCount(value?: number): void {\n\t\twatchNumber(this, '_boundaryCount', Math.max(0, value ?? 1));\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: CustomClassPropType): void {\n\t\tvalidateCustomClass(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(label?: LabelPropType, _oldValue?: LabelPropType, initial = false) {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label);\n\t\t}\n\t\tvalidateLabel(this, label);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_hasButtons')\n\tpublic validateHasButtons(value?: string | boolean | Stringified<PaginationHasButton>): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_hasButtons',\n\t\t\t(value) => typeof value === 'boolean' || typeof value === 'string' || (typeof value === 'object' && value !== null),\n\t\t\tnew Set(['Boolean', 'PaginationHasButton']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: (nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\t\tif (typeof nextValue === 'boolean') {\n\t\t\t\t\t\t\tnextState.set('_hasButtons', {\n\t\t\t\t\t\t\t\tfirst: nextValue,\n\t\t\t\t\t\t\t\tlast: nextValue,\n\t\t\t\t\t\t\t\tnext: nextValue,\n\t\t\t\t\t\t\t\tprevious: nextValue,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tif (typeof nextValue === 'string') {\n\t\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\t\tnextValue = parseJson<PaginationHasButton>(nextValue);\n\t\t\t\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\t\t\t\tnextState.delete('_hasButtons');\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (typeof nextValue === 'object' && nextValue !== null) {\n\t\t\t\t\t\t\t\tnextState.set('_hasButtons', {\n\t\t\t\t\t\t\t\t\t...this.state._hasButtons,\n\t\t\t\t\t\t\t\t\tfirst:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).first === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).first === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.first,\n\t\t\t\t\t\t\t\t\tlast:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).last === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).last === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.last,\n\t\t\t\t\t\t\t\t\tnext:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).next === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).next === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.next,\n\t\t\t\t\t\t\t\t\tprevious:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).previous === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).previous === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.previous,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriPaginationButtonCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_page')\n\tpublic validatePage(value?: number): void {\n\t\twatchNumber(this, '_page', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\tconst pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\t\t\t\tconst total = nextState.has('_max') ? (nextState.get('_max') as number) : this.state._max;\n\t\t\t\t\tthis.syncPage(nextState, _nextValue as number, pageSize, total);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tprivate beforePageSize = (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\tlet pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\tconst pageSizeOptions = nextState.has('_pageSizeOptions') ? (nextState.get('_pageSizeOptions') as Option<number>[]) : this.state._pageSizeOptions;\n\t\tif (Array.isArray(pageSizeOptions) && pageSizeOptions.length > 0) {\n\t\t\tconst find = pageSizeOptions.find((option) => option.value === pageSize);\n\t\t\tif (find === undefined) {\n\t\t\t\tpageSize = pageSizeOptions[0].value;\n\t\t\t} else {\n\t\t\t\tpageSize = find.value;\n\t\t\t}\n\t\t\tnextState.set('_pageSize', pageSize);\n\t\t}\n\t\tconst page = nextState.has('_page') ? (nextState.get('_page') as number) : this.state._page;\n\t\tconst total = nextState.has('_max') ? (nextState.get('_max') as number) : this.state._max;\n\t\tthis.syncPage(nextState, page, nextState.get('_pageSize') as number, total);\n\t};\n\n\tprivate syncPage = (nextState: Map<string, unknown>, page: number, pageSize: number, total: number) => {\n\t\t// count === 0 means no data\n\t\tif (total > 0) {\n\t\t\tconst count = this.calcCount(total, pageSize);\n\t\t\tif (count > 0) {\n\t\t\t\tif (page > count) {\n\t\t\t\t\tnextState.set('_page', count);\n\t\t\t\t\tthis.onChangePage(STATE_CHANGE_EVENT, count);\n\t\t\t\t} else if (page < 1) {\n\t\t\t\t\tnextState.set('_page', 1);\n\t\t\t\t\tthis.onChangePage(STATE_CHANGE_EVENT, 1);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate beforePageSizeOptions = (nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\tconst options: Option<number>[] = [];\n\t\tif (Array.isArray(nextValue)) {\n\t\t\tfor (const value of nextValue) {\n\t\t\t\tif (typeof value === 'number') {\n\t\t\t\t\toptions.push({\n\t\t\t\t\t\tlabel: translate('kol-page-per-site', { placeholders: { entries: `${value}` } }),\n\t\t\t\t\t\tvalue: value,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tnextState.set('_pageSizeOptions', options);\n\t\tthis.beforePageSize(options, nextState);\n\t};\n\n\t@Watch('_pageSize')\n\tpublic validatePageSize(value?: number): void {\n\t\twatchNumber(this, '_pageSize', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePageSize,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_pageSizeOptions')\n\tpublic validatePageSizeOptions(value?: Stringified<number[]>): void {\n\t\twatchJsonArrayString(this, '_pageSizeOptions', (value) => typeof value === 'number', value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePageSizeOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_siblingCount')\n\tpublic validateSiblingCount(value?: number): void {\n\t\twatchNumber(this, '_siblingCount', Math.max(0, value ?? 1));\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: MaxPropType): void {\n\t\tvalidateMax(this, value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\tconst page = nextState.has('_page') ? (nextState.get('_page') as number) : this.state._page;\n\t\t\t\t\tconst pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\t\t\t\tthis.syncPage(nextState, page, pageSize, _nextValue as number);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateBoundaryCount(this._boundaryCount);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateHasButtons(this._hasButtons);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateOn(this._on);\n\t\tthis.validatePage(this._page);\n\t\tthis.validatePageSize(this._pageSize);\n\t\tthis.validatePageSizeOptions(this._pageSizeOptions);\n\t\tthis.validateSiblingCount(this._siblingCount);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateMax(this._max);\n\n\t\t/**\n\t\t * Die Seite muss als letztes gesetzt werden, da sonst die Seite\n\t\t * nicht korrekt berechnet wird.\n\t\t */\n\t\tthis.validatePage(this._page);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}
+{"file":"component13.js","mappings":"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","names":[],"sources":["src/components/pagination/style.css?tag=kol-pagination&mode=default&encapsulation=shadow","src/components/pagination/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\t:host {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tgap: 1rem;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\t.navigation-list {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 0.5em;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.separator:before {\n\t\tcontent: '•••';\n\t}\n}\n","import type {\n\tCustomClassPropType,\n\tKoliBriPaginationButtonCallbacks,\n\tLabelPropType,\n\tMaxPropType,\n\tOption,\n\tPaginationAPI,\n\tPaginationHasButton,\n\tPaginationStates,\n\tStringified,\n\tTooltipAlignPropType,\n} from '@public-ui/schema';\nimport {\n\tparseJson,\n\tSTATE_CHANGE_EVENT,\n\tvalidateCustomClass,\n\tvalidateLabel,\n\tvalidateMax,\n\tvalidateTooltipAlign,\n\twatchJsonArrayString,\n\twatchNumber,\n\twatchValidator,\n} from '@public-ui/schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { nonce } from '../../utils/dev.utils';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\n\nimport type { JSX } from '@stencil/core';\nconst leftDoubleArrowIcon = {\n\tleft: 'codicon codicon-debug-reverse-continue',\n};\nconst leftSingleArrow = {\n\tleft: 'codicon codicon-chevron-left',\n};\nconst rightSingleArrowIcon = {\n\tright: 'codicon codicon-chevron-right',\n};\nconst rightDoubleArrowIcon = {\n\tright: 'codicon codicon-debug-continue',\n};\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements PaginationAPI {\n\tprivate readonly nonce = nonce();\n\n\tprivate readonly calcCount = (total: number, pageSize = 1): number => Math.ceil(total / pageSize);\n\n\tprivate readonly getCount = (): number => this.calcCount(this.state._max, this.state._pageSize);\n\n\tpublic render(): JSX.Element {\n\t\tlet ellipsis = false;\n\t\tconst count = this.getCount();\n\t\tconst pageButtons = Array.from(Array(count).keys())\n\t\t\t.map((index: number) => index + 1)\n\t\t\t.map((page: number) => {\n\t\t\t\tif (\n\t\t\t\t\tpage <= this.state._boundaryCount ||\n\t\t\t\t\tpage > count - this.state._boundaryCount ||\n\t\t\t\t\t(page >= this.state._page - this.state._siblingCount && page <= this.state._page + this.state._siblingCount)\n\t\t\t\t) {\n\t\t\t\t\tellipsis = true;\n\t\t\t\t\tif (this.state._page === page) {\n\t\t\t\t\t\treturn this.getSelectedPageButton(page);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn this.getUnselectedPageButton(page);\n\t\t\t\t\t}\n\t\t\t\t} else if (ellipsis === true) {\n\t\t\t\t\tellipsis = false;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<span class=\"separator\" key={`${this.nonce}-el-${page}`} aria-hidden=\"true\"></span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t});\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"navigation-list\">\n\t\t\t\t\t\t{this.state._hasButtons.first && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\t\tclass=\"first\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t\t\t_icons={leftDoubleArrowIcon}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-first')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoToFirst}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._hasButtons.previous && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\t\tclass=\"previous\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t\t\t_icons={leftSingleArrow}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-back')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoBackward}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{pageButtons}\n\t\t\t\t\t\t{this.state._hasButtons.next && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\t\tclass=\"next\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t\t\t_icons={rightSingleArrowIcon}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-next')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoForward}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._hasButtons.last && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\t\tclass=\"last\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t\t\t_icons={rightDoubleArrowIcon}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-last')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoToEnd}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t\t{this.state._pageSizeOptions?.length > 0 && (\n\t\t\t\t\t<kol-select\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_id={`pagination-size-${this.nonce}`}\n\t\t\t\t\t\t_label={translate('kol-entries-per-site')}\n\t\t\t\t\t\t_options={this.state._pageSizeOptions}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonChange: this.onChangePageSize,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_value={[this.state._pageSize]}\n\t\t\t\t\t></kol-select>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the amount of pages to show next to the outer arrow buttons.\n\t */\n\t@Prop() public _boundaryCount?: number = 1;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which navigation buttons to render (first, last, next, previous buttons).\n\t */\n\t@Prop() public _hasButtons?: boolean | Stringified<PaginationHasButton> = true;\n\n\t/**\n\t * Defines the current page.\n\t */\n\t@Prop() public _page!: number;\n\n\t/**\n\t * Defines the amount of entries to show per page.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _pageSize = 1;\n\n\t/**\n\t * Defines the options for the page-size-select.\n\t */\n\t@Prop() public _pageSizeOptions: Stringified<number[]> = [];\n\n\t/**\n\t * Gibt an, auf welche Callback-Events reagiert werden.\n\t */\n\t@Prop() public _on!: KoliBriPaginationButtonCallbacks;\n\n\t/**\n\t * Defines the amount of pages to show next to the current page.\n\t */\n\t@Prop() public _siblingCount?: number = 1;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines the maximum number of pages.\n\t */\n\t@Prop() public _max!: MaxPropType;\n\n\t@State() public state: PaginationStates = {\n\t\t_boundaryCount: 1,\n\t\t_label: translate('kol-pagination'),\n\t\t_hasButtons: {\n\t\t\tfirst: true,\n\t\t\tlast: true,\n\t\t\tnext: true,\n\t\t\tprevious: true,\n\t\t},\n\t\t_on: {\n\t\t\tonClick: () => null,\n\t\t},\n\t\t_page: 0,\n\t\t_pageSize: 1,\n\t\t_pageSizeOptions: [],\n\t\t_siblingCount: 1,\n\t\t_max: 0,\n\t};\n\n\tprivate onClick = (event: Event, page: number) => {\n\t\tif (typeof this.state._on.onClick === 'function') {\n\t\t\tthis.state._on.onClick(event, page);\n\t\t}\n\t\tthis.onChangePage(event, page);\n\t};\n\n\tprivate onChangePage = (event: Event, page: number) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tif (typeof this.state._on.onChangePage === 'function') {\n\t\t\t\tthis.state._on.onChangePage(event, page);\n\t\t\t}\n\t\t});\n\t};\n\n\tprivate onChangePageSize = (event: Event, value: unknown) => {\n\t\tvalue = parseInt((value as string[])[0]);\n\t\tif (typeof value === 'number' && value > 0 && this._pageSize !== value) {\n\t\t\tthis._pageSize = value;\n\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t\tif (typeof this.state._on.onChangePageSize === 'function') {\n\t\t\t\t\tthis.state._on.onChangePageSize(event, this._pageSize);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate readonly onGoToFirst = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, 1);\n\t\t},\n\t};\n\tprivate readonly onGoToEnd = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.getCount());\n\t\t},\n\t};\n\tprivate readonly onGoBackward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page - 1);\n\t\t},\n\t};\n\tprivate readonly onGoForward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page + 1);\n\t\t},\n\t};\n\n\tprivate getUnselectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<li>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\tkey={`${this.nonce}-${page}`}\n\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t_label=\"\"\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonClick: (event: Event) => {\n\t\t\t\t\t\t\tthis.onClick(event, page);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\t<span class=\"visually-hidden\">{translate('kol-page')}</span> {page}\n\t\t\t\t\t</span>\n\t\t\t\t</kol-button-wc>\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate getSelectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<li>\n\t\t\t\t<kol-button-wc class=\"selected\" key={`${this.nonce}-selected`} _customClass={this.state._customClass} _disabled={true} _label=\"\">\n\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\t<span class=\"visually-hidden\">{translate('kol-page')}</span> {page}\n\t\t\t\t\t</span>\n\t\t\t\t</kol-button-wc>\n\t\t\t</li>\n\t\t);\n\t}\n\n\t@Watch('_boundaryCount')\n\tpublic validateBoundaryCount(value?: number): void {\n\t\twatchNumber(this, '_boundaryCount', Math.max(0, value ?? 1));\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: CustomClassPropType): void {\n\t\tvalidateCustomClass(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(label?: LabelPropType, _oldValue?: LabelPropType, initial = false) {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label);\n\t\t}\n\t\tvalidateLabel(this, label);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_hasButtons')\n\tpublic validateHasButtons(value?: string | boolean | Stringified<PaginationHasButton>): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_hasButtons',\n\t\t\t(value) => typeof value === 'boolean' || typeof value === 'string' || (typeof value === 'object' && value !== null),\n\t\t\tnew Set(['Boolean', 'PaginationHasButton']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: (nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\t\tif (typeof nextValue === 'boolean') {\n\t\t\t\t\t\t\tnextState.set('_hasButtons', {\n\t\t\t\t\t\t\t\tfirst: nextValue,\n\t\t\t\t\t\t\t\tlast: nextValue,\n\t\t\t\t\t\t\t\tnext: nextValue,\n\t\t\t\t\t\t\t\tprevious: nextValue,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tif (typeof nextValue === 'string') {\n\t\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\t\tnextValue = parseJson<PaginationHasButton>(nextValue);\n\t\t\t\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\t\t\t\tnextState.delete('_hasButtons');\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (typeof nextValue === 'object' && nextValue !== null) {\n\t\t\t\t\t\t\t\tnextState.set('_hasButtons', {\n\t\t\t\t\t\t\t\t\t...this.state._hasButtons,\n\t\t\t\t\t\t\t\t\tfirst:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).first === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).first === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.first,\n\t\t\t\t\t\t\t\t\tlast:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).last === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).last === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.last,\n\t\t\t\t\t\t\t\t\tnext:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).next === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).next === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.next,\n\t\t\t\t\t\t\t\t\tprevious:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).previous === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).previous === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.previous,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriPaginationButtonCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_page')\n\tpublic validatePage(value?: number): void {\n\t\twatchNumber(this, '_page', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\tconst pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\t\t\t\tconst total = nextState.has('_max') ? (nextState.get('_max') as number) : this.state._max;\n\t\t\t\t\tthis.syncPage(nextState, _nextValue as number, pageSize, total);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tprivate beforePageSize = (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\tlet pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\tconst pageSizeOptions = nextState.has('_pageSizeOptions') ? (nextState.get('_pageSizeOptions') as Option<number>[]) : this.state._pageSizeOptions;\n\t\tif (Array.isArray(pageSizeOptions) && pageSizeOptions.length > 0) {\n\t\t\tconst find = pageSizeOptions.find((option) => option.value === pageSize);\n\t\t\tif (find === undefined) {\n\t\t\t\tpageSize = pageSizeOptions[0].value;\n\t\t\t} else {\n\t\t\t\tpageSize = find.value;\n\t\t\t}\n\t\t\tnextState.set('_pageSize', pageSize);\n\t\t}\n\t\tconst page = nextState.has('_page') ? (nextState.get('_page') as number) : this.state._page;\n\t\tconst total = nextState.has('_max') ? (nextState.get('_max') as number) : this.state._max;\n\t\tthis.syncPage(nextState, page, nextState.get('_pageSize') as number, total);\n\t};\n\n\tprivate syncPage = (nextState: Map<string, unknown>, page: number, pageSize: number, total: number) => {\n\t\t// count === 0 means no data\n\t\tif (total > 0) {\n\t\t\tconst count = this.calcCount(total, pageSize);\n\t\t\tif (count > 0) {\n\t\t\t\tif (page > count) {\n\t\t\t\t\tnextState.set('_page', count);\n\t\t\t\t\tthis.onChangePage(STATE_CHANGE_EVENT, count);\n\t\t\t\t} else if (page < 1) {\n\t\t\t\t\tnextState.set('_page', 1);\n\t\t\t\t\tthis.onChangePage(STATE_CHANGE_EVENT, 1);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate beforePageSizeOptions = (nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\tconst options: Option<number>[] = [];\n\t\tif (Array.isArray(nextValue)) {\n\t\t\tfor (const value of nextValue) {\n\t\t\t\tif (typeof value === 'number') {\n\t\t\t\t\toptions.push({\n\t\t\t\t\t\tlabel: translate('kol-page-per-site', { placeholders: { entries: `${value}` } }),\n\t\t\t\t\t\tvalue: value,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tnextState.set('_pageSizeOptions', options);\n\t\tthis.beforePageSize(options, nextState);\n\t};\n\n\t@Watch('_pageSize')\n\tpublic validatePageSize(value?: number): void {\n\t\twatchNumber(this, '_pageSize', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePageSize,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_pageSizeOptions')\n\tpublic validatePageSizeOptions(value?: Stringified<number[]>): void {\n\t\twatchJsonArrayString(this, '_pageSizeOptions', (value) => typeof value === 'number', value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePageSizeOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_siblingCount')\n\tpublic validateSiblingCount(value?: number): void {\n\t\twatchNumber(this, '_siblingCount', Math.max(0, value ?? 1));\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: MaxPropType): void {\n\t\tvalidateMax(this, value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\tconst page = nextState.has('_page') ? (nextState.get('_page') as number) : this.state._page;\n\t\t\t\t\tconst pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\t\t\t\tthis.syncPage(nextState, page, pageSize, _nextValue as number);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateBoundaryCount(this._boundaryCount);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateHasButtons(this._hasButtons);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateOn(this._on);\n\t\tthis.validatePage(this._page);\n\t\tthis.validatePageSize(this._pageSize);\n\t\tthis.validatePageSizeOptions(this._pageSizeOptions);\n\t\tthis.validateSiblingCount(this._siblingCount);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateMax(this._max);\n\n\t\t/**\n\t\t * Die Seite muss als letztes gesetzt werden, da sonst die Seite\n\t\t * nicht korrekt berechnet wird.\n\t\t */\n\t\tthis.validatePage(this._page);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}

package/dist/components/component14.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{ax as validateOptionsWithOptgroup,c as watchBoolean,ay as validateRows,X as watchJsonArrayString,ai as STATE_CHANGE_EVENT,m as propagateFocus,s as showExpertSlot}from"./index2.js";import{n as nonce}from"./dev.utils.js";import{s as stopPropagation,t as tryToDispatchKoliBriEvent}from"./events.js";import{g as getRenderStates}from"./controller.js";import{I as InternalUnderlinedAccessKey,d as defineCustomElement$2}from"./component2.js";import{I as InputIconController}from"./controller-icon.js";import{f as fillKeyOptionMap}from"./controller2.js";import{d as defineCustomElement$8}from"./shadow.js";import{d as defineCustomElement$7}from"./component6.js";import{d as defineCustomElement$6}from"./component5.js";import{d as defineCustomElement$5}from"./component4.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component12.js";import{d as defineCustomElement$1}from"./component3.js";class SelectController extends InputIconController{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),fillKeyOptionMap(this.keyOptionMap,n);const t=e.has("_value")?e.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],n);!1===this.component._multiple&&0===i.length?(e.set("_value",[n[0].value]),this.onStateChange()):Array.isArray(t)&&i.length<t.length&&(e.set("_value",i),this.onStateChange())}},this.component=t}validateOptions(t){validateOptionsWithOptgroup(this.component,t,{hooks:{beforePatch:this.beforePatchOptions}})}validateMultiple(t){watchBoolean(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchOptions}})}validateRequired(t){watchBoolean(this.component,"_required",t)}validateRows(t){validateRows(this.component,t)}validateValue(t){watchJsonArrayString(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchOptions}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(STATE_CHANGE_EVENT)}))}},this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t/* input[type='checkbox'], */\n\t/* input[type='radio'], */\n\t/* input[type='range'], */\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, option, select, textarea, .input-label) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n",KolSelectDefaultStyle0=defaultStyleCss,isSelected=(t,e)=>Array.isArray(t)&&t.includes(e),KolSelect=proxyCustomElement(class extends HTMLElement{async getValue(){return this._value}renderOptgroup(t,e){var n;return h("optgroup",{disabled:t.disabled,label:t.label},null===(n=t.options)||void 0===n?void 0:n.map(((t,n)=>{const i=`${e}-${n}`;return Array.isArray(t.options)?this.renderOptgroup(t,i):h("option",{disabled:t.disabled,key:i,selected:isSelected(this.state._value,t.value),value:i},t.label)})))}render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=showExpertSlot(this.state._label);return h(Host,{class:{"has-value":this.state._hasValue}},h("kol-input",{class:{"hide-label":!!this.state._hideLabel,select:!0},_accessKey:this.state._accessKey,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()},role:"presentation"},h("span",{slot:"label"},e?h("slot",{name:"expert"}):"string"==typeof this.state._accessKey?h(Fragment,null,h(InternalUnderlinedAccessKey,{accessKey:this.state._accessKey,label:this.state._label})," ",h("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):h("span",null,this.state._label)),h("div",{slot:"input"},h("select",{ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows,spellcheck:"false",onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus,onChange:this.onChange},this.state._options.map(((t,e)=>{const n=`-${e}`;return Array.isArray(t.options)?this.renderOptgroup(t,n):h("option",{disabled:t.disabled,key:n,selected:isSelected(this.state._value,t.value),value:n},t.label)}))))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this.onChange=t=>{var e,n;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),stopPropagation(t),tryToDispatchKoliBriEvent("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.controller=new SelectController(this,"select",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:KolSelectDefaultStyle0}}},[33,"kol-select",{_accessKey:[1,"_access-key"],_alert:[1540],_disabled:[4],_error:[1],_hideError:[1540,"_hide-error"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_multiple:[4],_name:[1],_on:[16],_options:[1],_required:[4],_rows:[2],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1025],state:[32],getValue:[64]},void 0,{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-select","kol-alert","kol-alert-wc","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-select":customElements.get(t)||customElements.define(t,KolSelect);break;case"kol-alert":customElements.get(t)||defineCustomElement$8();break;case"kol-alert-wc":customElements.get(t)||defineCustomElement$7();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$6();break;case"kol-heading-wc":customElements.get(t)||defineCustomElement$5();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-input":customElements.get(t)||defineCustomElement$3();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$2();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$1()}}))}export{KolSelect as K,defineCustomElement as d};
+import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{ay as validateOptionsWithOptgroup,c as watchBoolean,az as validateRows,W as watchJsonArrayString,ai as STATE_CHANGE_EVENT,m as propagateFocus,s as showExpertSlot}from"./index2.js";import{n as nonce}from"./dev.utils.js";import{s as stopPropagation,t as tryToDispatchKoliBriEvent}from"./events.js";import{g as getRenderStates}from"./controller.js";import{I as InternalUnderlinedAccessKey,d as defineCustomElement$2}from"./component2.js";import{I as InputIconController}from"./controller-icon.js";import{f as fillKeyOptionMap}from"./controller2.js";import{d as defineCustomElement$8}from"./shadow.js";import{d as defineCustomElement$7}from"./component6.js";import{d as defineCustomElement$6}from"./component5.js";import{d as defineCustomElement$5}from"./component4.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component12.js";import{d as defineCustomElement$1}from"./component3.js";class SelectController extends InputIconController{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),fillKeyOptionMap(this.keyOptionMap,n);const t=e.has("_value")?e.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],n);!1===this.component._multiple&&0===i.length?(e.set("_value",[n[0].value]),this.onStateChange()):Array.isArray(t)&&i.length<t.length&&(e.set("_value",i),this.onStateChange())}},this.component=t}validateOptions(t){validateOptionsWithOptgroup(this.component,t,{hooks:{beforePatch:this.beforePatchOptions}})}validateMultiple(t){watchBoolean(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchOptions}})}validateRequired(t){watchBoolean(this.component,"_required",t)}validateRows(t){validateRows(this.component,t)}validateValue(t){watchJsonArrayString(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchOptions}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(STATE_CHANGE_EVENT)}))}},this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.hide-label > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n\n\t.disabled label,\n\t[aria-disabled='true'],\n\t[disabled] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\toutline: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t/* input[type='checkbox'], */\n\t/* input[type='radio'], */\n\t/* input[type='range'], */\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n",KolSelectDefaultStyle0=defaultStyleCss,isSelected=(t,e)=>Array.isArray(t)&&t.includes(e),KolSelect=proxyCustomElement(class extends HTMLElement{async getValue(){return this._value}renderOptgroup(t,e){var n;return h("optgroup",{disabled:t.disabled,label:t.label},null===(n=t.options)||void 0===n?void 0:n.map(((t,n)=>{const i=`${e}-${n}`;return Array.isArray(t.options)?this.renderOptgroup(t,i):h("option",{disabled:t.disabled,key:i,selected:isSelected(this.state._value,t.value),value:i},t.label)})))}render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=showExpertSlot(this.state._label);return h(Host,{class:{"has-value":this.state._hasValue}},h("kol-input",{class:{"hide-label":!!this.state._hideLabel,select:!0},_accessKey:this.state._accessKey,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()},role:"presentation"},h("span",{slot:"label"},e?h("slot",{name:"expert"}):"string"==typeof this.state._accessKey?h(Fragment,null,h(InternalUnderlinedAccessKey,{accessKey:this.state._accessKey,label:this.state._label})," ",h("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):h("span",null,this.state._label)),h("div",{slot:"input"},h("select",{ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows,spellcheck:"false",onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus,onChange:this.onChange},this.state._options.map(((t,e)=>{const n=`-${e}`;return Array.isArray(t.options)?this.renderOptgroup(t,n):h("option",{disabled:t.disabled,key:n,selected:isSelected(this.state._value,t.value),value:n},t.label)}))))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this.onChange=t=>{var e,n;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),stopPropagation(t),tryToDispatchKoliBriEvent("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.controller=new SelectController(this,"select",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:KolSelectDefaultStyle0}}},[33,"kol-select",{_accessKey:[1,"_access-key"],_alert:[1540],_disabled:[4],_error:[1],_hideError:[1540,"_hide-error"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_multiple:[4],_name:[1],_on:[16],_options:[1],_required:[4],_rows:[2],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1025],state:[32],getValue:[64]},void 0,{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-select","kol-alert","kol-alert-wc","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-select":customElements.get(t)||customElements.define(t,KolSelect);break;case"kol-alert":customElements.get(t)||defineCustomElement$8();break;case"kol-alert-wc":customElements.get(t)||defineCustomElement$7();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$6();break;case"kol-heading-wc":customElements.get(t)||defineCustomElement$5();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-input":customElements.get(t)||defineCustomElement$3();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$2();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$1()}}))}export{KolSelect as K,defineCustomElement as d};

package/dist/components/component14.js.map

@@ -1 +1 @@
-{"file":"component14.js","mappings":"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","names":[],"sources":["src/components/select/controller.ts","src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/component.tsx"],"sourcesContent":["import type {\n\tOptgroup,\n\tOption,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectOption,\n\tSelectProps,\n\tSelectWatches,\n\tStringified,\n\tW3CInputValue,\n} from '@public-ui/schema';\nimport { STATE_CHANGE_EVENT, validateOptionsWithOptgroup, validateRows, watchBoolean, watchJsonArrayString } from '@public-ui/schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class SelectController extends InputIconController implements SelectWatches {\n\tprotected readonly component: Generic.Element.Component & SelectProps;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & SelectProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly getOptionByKey = (key: string): Option<W3CInputValue> | undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<W3CInputValue>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<W3CInputValue>).value === 'string'\n\t\t\t\t\t? (option as Option<W3CInputValue>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t: false\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<W3CInputValue>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprivate readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options as SelectOption<W3CInputValue>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(\n\t\t\t\tArray.isArray(value) && value.length > 0 ? (value as string[]) : [],\n\t\t\t\toptions as SelectOption<W3CInputValue>[]\n\t\t\t);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\toptions[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t\tthis.onStateChange();\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t\tthis.onStateChange();\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Aktuell wird die Mehrfachauswahl noch nicht unterstützt. Wir sind dran die Mehrfachauswahl funktionsfähig zu implementieren, da der Browser-Standard hier ein paar Lücken hat.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] Bei der Mehrfachauswahl sollte zusätzlich auch die Listenlänge (size) gesetzt werden.');\n\t\t// }\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType) {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(onChange?: (event: Event) => void): void {\n\t\tsuper.componentWillLoad();\n\n\t\tthis.onStateChange = () => {\n\t\t\tif (typeof onChange === 'function') {\n\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\tonChange(STATE_CHANGE_EVENT);\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tthis.validateOptions(this.component._options);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n","import type {\n\tHideErrorPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tNamePropType,\n\tOptgroup,\n\tOption,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectAPI,\n\tSelectOption,\n\tSelectStates,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '@public-ui/schema';\nimport { propagateFocus, showExpertSlot } from '@public-ui/schema';\nimport { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\nimport { SelectController } from './controller';\n\nimport type { JSX } from '@stencil/core';\nconst isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements SelectAPI {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate ref?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\t@Method()\n\tpublic async getValue(): Promise<Stringified<W3CInputValue[]> | undefined> {\n\t\treturn this._value;\n\t}\n\n\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled} label={optgroup.label}>\n\t\t\t\t{optgroup.options?.map((option: SelectOption<W3CInputValue>, index: number) => {\n\t\t\t\t\tconst key = `${preKey}-${index}`;\n\t\t\t\t\tif (Array.isArray((option as Optgroup<string>).options)) {\n\t\t\t\t\t\treturn this.renderOptgroup(option as Optgroup<string>, key);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</optgroup>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host class={{ 'has-value': this.state._hasValue }}>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t\tselect: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{this.state._accessKey}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tsize={this.state._rows}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\t\t\t\t\t\t\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Makes the input accept multiple inputs.\n\t * @TODO: Change type back to `MultiplePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from, also supporting Optgroup.\n\t */\n\t@Prop() public _options?: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Defines how many rows of options should be visible at the same time.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (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 * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: SelectStates = {\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_multiple: false,\n\t\t_options: [],\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tthis._value = Array.from(this.ref?.options || [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t};\n}\n"],"version":3}
+{"file":"component14.js","mappings":"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","names":[],"sources":["src/components/select/controller.ts","src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/component.tsx"],"sourcesContent":["import type {\n\tOptgroup,\n\tOption,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectOption,\n\tSelectProps,\n\tSelectWatches,\n\tStringified,\n\tW3CInputValue,\n} from '@public-ui/schema';\nimport { STATE_CHANGE_EVENT, validateOptionsWithOptgroup, validateRows, watchBoolean, watchJsonArrayString } from '@public-ui/schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class SelectController extends InputIconController implements SelectWatches {\n\tprotected readonly component: Generic.Element.Component & SelectProps;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & SelectProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly getOptionByKey = (key: string): Option<W3CInputValue> | undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<W3CInputValue>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<W3CInputValue>).value === 'string'\n\t\t\t\t\t? (option as Option<W3CInputValue>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t: false\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<W3CInputValue>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprivate readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options as SelectOption<W3CInputValue>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(\n\t\t\t\tArray.isArray(value) && value.length > 0 ? (value as string[]) : [],\n\t\t\t\toptions as SelectOption<W3CInputValue>[]\n\t\t\t);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\toptions[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t\tthis.onStateChange();\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t\tthis.onStateChange();\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Aktuell wird die Mehrfachauswahl noch nicht unterstützt. Wir sind dran die Mehrfachauswahl funktionsfähig zu implementieren, da der Browser-Standard hier ein paar Lücken hat.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] Bei der Mehrfachauswahl sollte zusätzlich auch die Listenlänge (size) gesetzt werden.');\n\t\t// }\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType) {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(onChange?: (event: Event) => void): void {\n\t\tsuper.componentWillLoad();\n\n\t\tthis.onStateChange = () => {\n\t\t\tif (typeof onChange === 'function') {\n\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\tonChange(STATE_CHANGE_EVENT);\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tthis.validateOptions(this.component._options);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n","import type {\n\tHideErrorPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tNamePropType,\n\tOptgroup,\n\tOption,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectAPI,\n\tSelectOption,\n\tSelectStates,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '@public-ui/schema';\nimport { propagateFocus, showExpertSlot } from '@public-ui/schema';\nimport { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\nimport { SelectController } from './controller';\n\nimport type { JSX } from '@stencil/core';\nconst isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements SelectAPI {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate ref?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<Stringified<W3CInputValue[]> | undefined> {\n\t\treturn this._value;\n\t}\n\n\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled} label={optgroup.label}>\n\t\t\t\t{optgroup.options?.map((option: SelectOption<W3CInputValue>, index: number) => {\n\t\t\t\t\tconst key = `${preKey}-${index}`;\n\t\t\t\t\tif (Array.isArray((option as Optgroup<string>).options)) {\n\t\t\t\t\t\treturn this.renderOptgroup(option as Optgroup<string>, key);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</optgroup>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host class={{ 'has-value': this.state._hasValue }}>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t\tselect: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{this.state._accessKey}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tsize={this.state._rows}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\t\t\t\t\t\t\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Makes the input accept multiple inputs.\n\t * @TODO: Change type back to `MultiplePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from, also supporting Optgroup.\n\t */\n\t@Prop() public _options?: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Defines how many rows of options should be visible at the same time.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (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 * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: SelectStates = {\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_multiple: false,\n\t\t_options: [],\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tthis._value = Array.from(this.ref?.options || [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t};\n}\n"],"version":3}

package/dist/components/component15.js

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./index2.js";const TREE_ITEM_TAG_NAME="kol-tree-item",KolTreeWc=proxyCustomElement(class e extends HTMLElement{constructor(){super(),this.__registerHost(),this.state={_label:""},this._label=void 0}validateLabel(e){validateLabel(this,e)}render(){return h(Host,{onSlotchange:this.handleSlotchange.bind(this)},h("nav",{class:"tree","aria-label":this.state._label},h("ul",{class:"treeview-navigation",role:"tree","aria-label":this.state._label},h("slot",null))))}static isTreeItem(e){return(null==e?void 0:e.tagName)==="kol-tree-item".toUpperCase()}componentWillLoad(){this.validateLabel(this._label),this.handleTreeChange(),this.observeChildListMutations()}disconnectedCallback(){var e;null===(e=this.observer)||void 0===e||e.disconnect()}observeChildListMutations(){this.observer=new MutationObserver(this.handleTreeChange.bind(this)),this.observeTopLevelItems()}handleSlotchange(){this.observeTopLevelItems(),this.handleTreeChange()}observeTopLevelItems(){this.getTopLevelTreeItems().forEach((e=>{var t;null===(t=this.observer)||void 0===t||t.observe(e,{childList:!0,subtree:!0})}))}getTopLevelTreeItems(){var t;return(null===(t=this.host.querySelector("slot"))||void 0===t?void 0:t.assignedNodes()).filter(e.isTreeItem)}handleTreeChange(){this.treeItemElements=this.getTreeItemElements(),this.ensureActiveItemVisibility()}getTreeItemElements(){return this.getTopLevelTreeItems().reduce(((e,t)=>{const l=t.querySelectorAll("kol-tree-item");return[...e,t,...l]}),[])}async getOpenTreeItemElements(){if(!this.treeItemElements)return;const t=async l=>!e.isTreeItem(l.parentElement)||await l.parentElement.isOpen()&&await t(l.parentElement);return(await Promise.all(this.treeItemElements.map((async e=>({value:e,include:await t(e)}))))).filter((e=>e.include)).map((e=>e.value))}async handleKeyDown(e){var t,l,s,r;const a=await this.getOpenTreeItemElements(),i=null===(t=document.activeElement)||void 0===t?void 0:t.closest("kol-tree-item");if(!a||!i)return;const n=null==a?void 0:a.findIndex((e=>e===i));switch(e.key){case"ArrowDown":await(null===(l=a[n+1])||void 0===l?void 0:l.focusLink()),e.preventDefault();break;case"ArrowUp":await(null===(s=a[n-1])||void 0===s?void 0:s.focusLink()),e.preventDefault();break;case"ArrowRight":await i.expand(),e.preventDefault();break;case"ArrowLeft":await i.collapse(),e.preventDefault();break;case"*":{const e=null===(r=i.parentElement)||void 0===r?void 0:r.querySelectorAll("kol-tree-item");null==e||e.forEach((e=>{e.expand()}));break}}}async handleFocusOut(e){e.relatedTarget&&!e.relatedTarget.closest("kol-tree")&&await this.ensureActiveItemVisibility()}async ensureActiveItemVisibility(){const t=l=>{e.isTreeItem(l.parentElement)&&(l.parentElement.expand(),t(l.parentElement))},l=(()=>{var t;const l=(null===(t=this.host.querySelector("slot"))||void 0===t?void 0:t.assignedNodes()).filter(e.isTreeItem);for(const e of l){if(e._active)return e;const t=e.querySelector('kol-tree-item[_active="true"]');if(t&&t._active)return t}})();l&&t(l)}get host(){return this}static get watchers(){return{_label:["validateLabel"]}}},[4,"kol-tree-wc",{_label:[1],state:[32]},[[0,"keydown","handleKeyDown"],[0,"focusout","handleFocusOut"]],{_label:["validateLabel"]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-tree-wc"].forEach((e=>{if("kol-tree-wc"===e)customElements.get(e)||customElements.define(e,KolTreeWc)}))}export{KolTreeWc as K,defineCustomElement as d};

package/dist/components/component15.js.map

@@ -0,0 +1 @@
+{"file":"component15.js","mappings":"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","names":[],"sources":["src/components/tree/constants.ts","src/components/tree/component.tsx"],"sourcesContent":["export const TREE_ITEM_TAG_NAME = 'kol-tree-item';\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport type { LabelPropType, TreeAPI, TreeStates } from '@public-ui/schema';\nimport { validateLabel } from '@public-ui/schema';\nimport { TREE_ITEM_TAG_NAME } from './constants';\n\n@Component({\n\ttag: 'kol-tree-wc',\n\tshadow: false,\n})\nexport class KolTreeWc implements TreeAPI {\n\t@Element() host!: HTMLElement;\n\n\t@State() public state: TreeStates = {\n\t\t_label: '',\n\t};\n\tprivate observer?: MutationObserver;\n\tprivate treeItemElements?: HTMLKolTreeItemElement[];\n\n\t/**\n\t * Defines the label of the tree.\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<nav class=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"treeview-navigation\" role=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate static isTreeItem(this: void, element?: HTMLElement | null): element is HTMLKolTreeItemElement {\n\t\treturn element?.tagName === TREE_ITEM_TAG_NAME.toUpperCase();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\n\t\tthis.handleTreeChange();\n\t\tthis.observeChildListMutations();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.observer?.disconnect();\n\t}\n\n\tprivate observeChildListMutations() {\n\t\tthis.observer = new MutationObserver(this.handleTreeChange.bind(this));\n\t\tthis.observeTopLevelItems();\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.observeTopLevelItems();\n\t\tthis.handleTreeChange();\n\t}\n\n\tprivate observeTopLevelItems() {\n\t\tthis.getTopLevelTreeItems().forEach((treeItem) => {\n\t\t\tthis.observer?.observe(treeItem, { childList: true, subtree: true });\n\t\t});\n\t}\n\n\tprivate getTopLevelTreeItems(): HTMLKolTreeItemElement[] {\n\t\treturn (this.host.querySelector('slot')?.assignedNodes() as HTMLElement[]).filter(KolTreeWc.isTreeItem);\n\t}\n\n\tprivate handleTreeChange(): void {\n\t\tthis.treeItemElements = this.getTreeItemElements();\n\t\tvoid this.ensureActiveItemVisibility();\n\t}\n\n\t/**\n\t * Returns array of all TreeItem elements in the order they appear\n\t */\n\tprivate getTreeItemElements(): HTMLKolTreeItemElement[] {\n\t\treturn this.getTopLevelTreeItems().reduce((accumulator: HTMLKolTreeItemElement[], currentValue: HTMLKolTreeItemElement) => {\n\t\t\tconst children = currentValue.querySelectorAll(TREE_ITEM_TAG_NAME);\n\n\t\t\treturn [...accumulator, currentValue, ...children];\n\t\t}, []);\n\t}\n\n\tprivate async getOpenTreeItemElements(): Promise<HTMLKolTreeItemElement[] | undefined> {\n\t\tif (!this.treeItemElements) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst areElementAndAllParentsOpen = async (element: HTMLKolTreeItemElement): Promise<boolean> => {\n\t\t\tif (!KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\t// parent is tree itself, top level is always open\n\t\t\t\treturn true;\n\t\t\t} else {\n\t\t\t\treturn (await element.parentElement.isOpen()) && (await areElementAndAllParentsOpen(element.parentElement));\n\t\t\t}\n\t\t};\n\n\t\tconst elementsWithInclude = await Promise.all(\n\t\t\tthis.treeItemElements.map(async (element) => ({\n\t\t\t\tvalue: element,\n\t\t\t\tinclude: await areElementAndAllParentsOpen(element),\n\t\t\t}))\n\t\t);\n\n\t\treturn elementsWithInclude.filter((element) => element.include).map((element) => element.value);\n\t}\n\n\t@Listen('keydown')\n\tpublic async handleKeyDown(event: KeyboardEvent) {\n\t\tconst openItems = await this.getOpenTreeItemElements();\n\t\tconst currentTreeItem: HTMLKolTreeItemElement | undefined | null = document.activeElement?.closest(TREE_ITEM_TAG_NAME);\n\n\t\tif (!openItems || !currentTreeItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentIndex = openItems?.findIndex((elem) => elem === currentTreeItem);\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tawait openItems[currentIndex - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowRight': {\n\t\t\t\tawait currentTreeItem.expand();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowLeft': {\n\t\t\t\tawait currentTreeItem.collapse();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase '*': {\n\t\t\t\tconst siblings = currentTreeItem.parentElement?.querySelectorAll(TREE_ITEM_TAG_NAME);\n\t\t\t\tsiblings?.forEach((element) => {\n\t\t\t\t\tvoid element.expand();\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t@Listen('focusout')\n\tpublic async handleFocusOut(event: FocusEvent) {\n\t\tif (event.relatedTarget && !(event.relatedTarget as Element).closest('kol-tree')) {\n\t\t\t/* Tree lost focus */\n\t\t\tawait this.ensureActiveItemVisibility();\n\t\t}\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tprivate async ensureActiveItemVisibility() {\n\t\tconst findActiveItem = (): HTMLKolTreeItemElement | undefined => {\n\t\t\tconst rootNodes = (this.host.querySelector('slot')?.assignedNodes() as HTMLElement[]).filter(KolTreeWc.isTreeItem);\n\t\t\tfor (const rootNode of rootNodes) {\n\t\t\t\tif (rootNode._active) {\n\t\t\t\t\treturn rootNode;\n\t\t\t\t}\n\t\t\t\tconst childMatch = rootNode.querySelector('kol-tree-item[_active=\"true\"]');\n\t\t\t\tif (childMatch && (childMatch as HTMLKolTreeItemElement)._active) {\n\t\t\t\t\treturn childMatch as HTMLKolTreeItemElement;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst expandParentElements = (element: HTMLKolTreeItemElement) => {\n\t\t\tif (KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\tvoid element.parentElement.expand();\n\t\t\t\texpandParentElements(element.parentElement);\n\t\t\t}\n\t\t};\n\n\t\tconst target = findActiveItem();\n\t\tif (target) {\n\t\t\texpandParentElements(target);\n\t\t}\n\t}\n}\n"],"version":3}