@public-ui/components 1.5.0-rc.17 → 1.5.0-rc.19

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),floatingUi_dom_esm=require("./floating-ui.dom.esm-f2716ff9.js"),dev_utils=require("./dev.utils-d69c0a9f.js"),reuse=require("./reuse-0fe7470f.js"),prop_validators=require("./prop.validators-dd1f7878.js"),open=require("./open-fd1ca478.js");require("./a11y.tipps-6f0ad06e.js"),require("./index-eb52922f.js");const validateAlignment=(e,t)=>{prop_validators.watchString(e,"_alignment",t)},defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{height:0;position:absolute}.popover{background-color:#fff;box-sizing:border-box;opacity:0;position:absolute}.hidden{display:none}.show{animation:0.3s ease-in forwards fadeInOpacity}.disappear{animation:0.3s ease-in backwards fadeInOpacity}.arrow{background-color:inherit;height:var(--font-size);position:absolute;rotate:0.125turn;width:var(--font-size);z-index:-1}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",KolPopover=class{constructor(e){index.registerInstance(this,e),this.alignPopover=e=>{var t;if("test"!==reuse.processEnv&&this.triggerElement&&this.popoverElement){const i=this.triggerElement,o=this.popoverElement,s=this.arrowElement,n=[floatingUi_dom_esm.offset(null!==(t=null==s?void 0:s.offsetHeight)&&void 0!==t?t:10),floatingUi_dom_esm.flip(),floatingUi_dom_esm.shift()];s&&n.push(floatingUi_dom_esm.arrow({element:s})),floatingUi_dom_esm.computePosition(i,o,{placement:this.state._alignment,middleware:n}).then((({x:t,y:i,middlewareData:o,placement:s})=>{this.setPosition(t,i,o,s,e)}))}},this.showPopover=()=>{this.addListenersToBody(),this.alignPopover((()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!0})}))},this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover()},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover()},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._alignment="top",this._open=!1,this.state={_alignment:"top",_open:!1,_show:!1}}setPosition(e,t,i,o,s){if(this.popoverElement){const n={left:this.popoverElement.style.left,top:this.popoverElement.style.top};if(Object.assign(this.popoverElement.style,{left:`${e}px`,top:`${t}px`}),this.arrowElement&&i.arrow)switch(o){case"top":this.arrowElement.style.inset=`100% auto auto ${i.arrow.x||0}px`,this.arrowElement.style.translate="0 -50%";break;case"right":this.arrowElement.style.inset=`${i.arrow.y||0}px 100% auto auto`,this.arrowElement.style.translate="50% 0";break;case"bottom":this.arrowElement.style.inset=`auto auto 100% ${i.arrow.x||0}px`,this.arrowElement.style.translate="0 50%";break;case"left":this.arrowElement.style.inset=`${i.arrow.y||0}px auto auto 100%`,this.arrowElement.style.translate="-50% 0"}n.left!==this.popoverElement.style.left||n.top!==this.popoverElement.style.top?this.alignPopover(s):"function"==typeof s&&s()}}hidePopover(){var e;this.state=Object.assign(Object.assign({},this.state),{_show:!1}),this._open=!1,null===(e=this.triggerElement)||void 0===e||e.focus(),this.removeListenersToBody()}addListenersToBody(){var e;const t=dev_utils.getDocument().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",this.showPopover,{passive:!0})}removeListenersToBody(){var e;const t=dev_utils.getDocument().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",this.showPopover)}render(){return index.h(index.Host,{ref:this.catchHostAndTriggerElement},index.h("div",{class:{popover:!0,hidden:!this.state._open,show:this.state._show},ref:this.catchPopoverElement},index.h("div",{class:`arrow ${this.state._alignment}`,ref:this.catchArrowElement}),index.h("slot",null)))}validateAlignment(e){validateAlignment(this,e)}validateOpen(e){open.validateOpen(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlignment(this._alignment),this.validateOpen(this._open)}static get watchers(){return{_alignment:["validateAlignment"],_open:["validateOpen"]}}};KolPopover.style={default:defaultStyleCss},exports.kol_popover=KolPopover;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),floatingUi_dom_esm=require("./floating-ui.dom.esm-a89c1e0e.js"),dev_utils=require("./dev.utils-d69c0a9f.js"),reuse=require("./reuse-0fe7470f.js"),prop_validators=require("./prop.validators-dd1f7878.js"),show=require("./show-878e36a5.js");require("./a11y.tipps-6f0ad06e.js"),require("./index-eb52922f.js");const validateAlignment=(e,t)=>{prop_validators.watchString(e,"_alignment",t)},defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{height:0;position:absolute}.popover{background-color:#fff;box-sizing:border-box;opacity:0;position:absolute}.hidden{display:none}.show{animation:0.3s ease-in forwards fadeInOpacity}.disappear{animation:0.3s ease-in backwards fadeInOpacity}.arrow{background-color:inherit;height:var(--font-size);position:absolute;rotate:0.125turn;width:var(--font-size);z-index:-1}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",KolPopover=class{constructor(e){index.registerInstance(this,e),this.alignPopover=e=>{var t;if("test"!==reuse.processEnv&&this.triggerElement&&this.popoverElement){const i=this.triggerElement,o=this.popoverElement,s=this.arrowElement,n=[floatingUi_dom_esm.offset(null!==(t=null==s?void 0:s.offsetHeight)&&void 0!==t?t:10),floatingUi_dom_esm.flip(),floatingUi_dom_esm.shift()];s&&n.push(floatingUi_dom_esm.arrow({element:s})),floatingUi_dom_esm.computePosition(i,o,{placement:this.state._alignment,middleware:n}).then((({x:t,y:i,middlewareData:o,placement:s})=>{this.setPosition(t,i,o,s,e)}))}},this.showPopover=()=>{this.addListenersToBody(),this.alignPopover((()=>{this.state=Object.assign(Object.assign({},this.state),{_visible:!0})}))},this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover()},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover()},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._alignment="top",this._show=!1,this.state={_alignment:"top",_show:!1,_visible:!1}}setPosition(e,t,i,o,s){if(this.popoverElement){const n={left:this.popoverElement.style.left,top:this.popoverElement.style.top};if(Object.assign(this.popoverElement.style,{left:`${e}px`,top:`${t}px`}),this.arrowElement&&i.arrow)switch(o){case"top":this.arrowElement.style.inset=`100% auto auto ${i.arrow.x||0}px`,this.arrowElement.style.translate="0 -50%";break;case"right":this.arrowElement.style.inset=`${i.arrow.y||0}px 100% auto auto`,this.arrowElement.style.translate="50% 0";break;case"bottom":this.arrowElement.style.inset=`auto auto 100% ${i.arrow.x||0}px`,this.arrowElement.style.translate="0 50%";break;case"left":this.arrowElement.style.inset=`${i.arrow.y||0}px auto auto 100%`,this.arrowElement.style.translate="-50% 0"}n.left!==this.popoverElement.style.left||n.top!==this.popoverElement.style.top?this.alignPopover(s):"function"==typeof s&&s()}}hidePopover(){var e;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(e=this.triggerElement)||void 0===e||e.focus(),this.removeListenersToBody()}addListenersToBody(){var e;const t=dev_utils.getDocument().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",this.showPopover,{passive:!0})}removeListenersToBody(){var e;const t=dev_utils.getDocument().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",this.showPopover)}render(){return index.h(index.Host,{ref:this.catchHostAndTriggerElement},index.h("div",{class:{popover:!0,hidden:!this.state._show,show:this.state._visible},ref:this.catchPopoverElement},index.h("div",{class:`arrow ${this.state._alignment}`,ref:this.catchArrowElement}),index.h("slot",null)))}validateAlignment(e){validateAlignment(this,e)}validateShow(e){show.validateShow(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlignment(this._alignment),this.validateShow(this._show)}static get watchers(){return{_alignment:["validateAlignment"],_show:["validateShow"]}}};KolPopover.style={default:defaultStyleCss},exports.kol_popover=KolPopover;

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

@@ -1 +1 @@
-{"file":"kol-popover.entry.cjs.js","mappings":"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","names":["watchString","processEnv","offset","flip","shift","arrow","computePosition","getDocument","h","Host","validateOpen"],"sources":["./src/types/props/alignment.ts","./src/components/popover/style.css?tag=kol-popover&mode=default&encapsulation=shadow","./src/components/popover/shadow.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchString } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Markiert das Element als ausgewähltes/aktiviertes. Kann folgende Werte annehmen: `date` | `location` | `page` | `step` | `time` | `true`.\n *  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n */\n\n/** en\n * Marks the element as the selected in a group of related elements. Can be one of the following: `date` | `location` | `page` | `step` | `time` | `true`.\n *  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n */\ntype HorizontalAlignment = 'left' | 'right';\ntype VerticalAlignment = 'top' | 'bottom';\nexport type Alignment = HorizontalAlignment | VerticalAlignment;\nexport type PropAlignment = {\n\talignment: Alignment;\n};\n\n/* validator */\nexport const validateAlignment = (component: Generic.Element.Component, value?: Alignment): void => {\n\twatchString(component, '_alignment', value);\n};\n","@import url(../style.css);\n:host {\n\theight: 0;\n\tposition: absolute;\n}\n.popover {\n\tbackground-color: #fff;\n\tbox-sizing: border-box;\n\topacity: 0;\n\tposition: absolute;\n}\n.hidden {\n\tdisplay: none;\n}\n.show {\n\tanimation: 0.3s ease-in forwards fadeInOpacity;\n}\n.disappear {\n\tanimation: 0.3s ease-in backwards fadeInOpacity;\n}\n.arrow {\n\tbackground-color: inherit;\n\theight: var(--font-size);\n\tposition: absolute;\n\trotate: 0.125turn;\n\twidth: var(--font-size);\n\tz-index: -1;\n}\n@keyframes fadeInOpacity {\n\t0% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n","import { MiddlewareData, Placement, arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { getDocument } from '../../utils/dev.utils';\nimport { processEnv } from '../../utils/reuse';\nimport { Alignment, PropAlignment, PropOpen, PropShow, validateAlignment, validateOpen } from '../../types/props';\n\ntype RequiredProps = unknown;\ntype OptionalProps = PropAlignment & PropOpen;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = PropAlignment & PropOpen & PropShow;\ntype OptionalStates = unknown;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\ntype API = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-popover',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolPopover implements API {\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement | null;\n\tprivate host?: HTMLElement;\n\n\t/* Popover functions */\n\tprivate alignPopover = (callBack?: () => unknown): void => {\n\t\tif (processEnv !== 'test' && this.triggerElement && this.popoverElement) {\n\t\t\tconst trigger = this.triggerElement;\n\t\t\tconst popoverEl = this.popoverElement;\n\t\t\tconst arrowEl = this.arrowElement;\n\n\t\t\tconst middleware = [offset(arrowEl?.offsetHeight ?? 10), flip(), shift()];\n\t\t\tif (arrowEl) {\n\t\t\t\tmiddleware.push(arrow({ element: arrowEl }));\n\t\t\t}\n\n\t\t\tvoid computePosition(trigger, popoverEl, {\n\t\t\t\tplacement: this.state._alignment,\n\t\t\t\tmiddleware: middleware,\n\t\t\t}).then(({ x, y, middlewareData, placement }) => {\n\t\t\t\tthis.setPosition(x, y, middlewareData, placement, callBack);\n\t\t\t});\n\t\t}\n\t};\n\tprivate setPosition(x: number, y: number, middlewareData: MiddlewareData, placement: Placement, callBack?: () => unknown) {\n\t\tif (this.popoverElement) {\n\t\t\tconst oldPos = {\n\t\t\t\tleft: this.popoverElement.style.left,\n\t\t\t\ttop: this.popoverElement.style.top,\n\t\t\t};\n\t\t\tObject.assign(this.popoverElement.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t});\n\n\t\t\tif (this.arrowElement && middlewareData.arrow) {\n\t\t\t\tswitch (placement) {\n\t\t\t\t\tcase 'top':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `100% auto auto ${middlewareData.arrow.x || 0}px`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '0 -50%';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'right':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `${middlewareData.arrow.y || 0}px 100% auto auto`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '50% 0';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'bottom':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `auto auto 100% ${middlewareData.arrow.x || 0}px`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '0 50%';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'left':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `${middlewareData.arrow.y || 0}px auto auto 100%`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '-50% 0';\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (oldPos.left !== this.popoverElement.style.left || oldPos.top !== this.popoverElement.style.top) {\n\t\t\t\tthis.alignPopover(callBack);\n\t\t\t} else if (typeof callBack === 'function') {\n\t\t\t\tcallBack();\n\t\t\t}\n\t\t}\n\t}\n\tprivate showPopover = (): void => {\n\t\tthis.addListenersToBody();\n\n\t\tthis.alignPopover(() => {\n\t\t\tthis.state = { ...this.state, _show: true };\n\t\t});\n\t};\n\tprivate hidePopover(): void {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_show: false,\n\t\t};\n\t\tthis._open = false;\n\t\tthis.triggerElement?.focus();\n\t\tthis.removeListenersToBody();\n\t}\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover();\n\t};\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover();\n\t\t}\n\t};\n\n\t/* EventListener functions */\n\tprivate addListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.addEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.addEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.addEventListener('scroll', this.showPopover, { passive: true });\n\t}\n\tprivate removeListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.removeEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.removeEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.removeEventListener('scroll', this.showPopover);\n\t}\n\n\t/* catchElement functions */\n\tprivate catchHostAndTriggerElement = (element: HTMLElement | null): void => {\n\t\tif (element) {\n\t\t\tthis.host = element;\n\t\t\tthis.triggerElement = element.previousElementSibling as HTMLElement | null;\n\t\t}\n\t};\n\tprivate catchPopoverElement = (element?: HTMLDivElement): void => {\n\t\tthis.popoverElement = element;\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostAndTriggerElement}>\n\t\t\t\t<div class={{ popover: true, hidden: !this.state._open, show: this.state._show }} ref={this.catchPopoverElement}>\n\t\t\t\t\t<div class={`arrow ${this.state._alignment}`} ref={this.catchArrowElement} />\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\t/**\n\t * Setzt die Ausrichtung des Popovers in Relation zum Triggerelement.\n\t */\n\t@Prop() public _alignment?: Alignment = 'top';\n\n\t/**\n\t * Öffnet/schließt das Popover.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_alignment: 'top',\n\t\t_open: false,\n\t\t_show: false,\n\t};\n\n\t@Watch('_alignment')\n\tpublic validateAlignment(value?: Alignment): void {\n\t\tvalidateAlignment(this, value);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t\tif (value) this.showPopover();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlignment(this._alignment);\n\t\tthis.validateOpen(this._open);\n\t}\n}\n"],"version":3}
+{"file":"kol-popover.entry.cjs.js","mappings":"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","names":["watchString","processEnv","offset","flip","shift","arrow","computePosition","getDocument","h","Host","validateShow"],"sources":["./src/types/props/alignment.ts","./src/components/popover/style.css?tag=kol-popover&mode=default&encapsulation=shadow","./src/components/popover/shadow.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchString } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Markiert das Element als ausgewähltes/aktiviertes. Kann folgende Werte annehmen: `date` | `location` | `page` | `step` | `time` | `true`.\n *  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n */\n\n/** en\n * Marks the element as the selected in a group of related elements. Can be one of the following: `date` | `location` | `page` | `step` | `time` | `true`.\n *  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n */\ntype HorizontalAlignment = 'left' | 'right';\ntype VerticalAlignment = 'top' | 'bottom';\nexport type Alignment = HorizontalAlignment | VerticalAlignment;\nexport type PropAlignment = {\n\talignment: Alignment;\n};\n\n/* validator */\nexport const validateAlignment = (component: Generic.Element.Component, value?: Alignment): void => {\n\twatchString(component, '_alignment', value);\n};\n","@import url(../style.css);\n:host {\n\theight: 0;\n\tposition: absolute;\n}\n.popover {\n\tbackground-color: #fff;\n\tbox-sizing: border-box;\n\topacity: 0;\n\tposition: absolute;\n}\n.hidden {\n\tdisplay: none;\n}\n.show {\n\tanimation: 0.3s ease-in forwards fadeInOpacity;\n}\n.disappear {\n\tanimation: 0.3s ease-in backwards fadeInOpacity;\n}\n.arrow {\n\tbackground-color: inherit;\n\theight: var(--font-size);\n\tposition: absolute;\n\trotate: 0.125turn;\n\twidth: var(--font-size);\n\tz-index: -1;\n}\n@keyframes fadeInOpacity {\n\t0% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n","import { MiddlewareData, Placement, arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { getDocument } from '../../utils/dev.utils';\nimport { processEnv } from '../../utils/reuse';\nimport { Alignment, PropAlignment, PropShow, validateAlignment, validateShow } from '../../types/props';\n\ntype RequiredProps = unknown;\ntype OptionalProps = PropAlignment & PropShow;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = PropAlignment & PropShow & { visible: boolean };\ntype OptionalStates = unknown;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\ntype API = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-popover',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolPopover implements API {\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement | null;\n\tprivate host?: HTMLElement;\n\n\t/* Popover functions */\n\tprivate alignPopover = (callBack?: () => unknown): void => {\n\t\tif (processEnv !== 'test' && this.triggerElement && this.popoverElement) {\n\t\t\tconst trigger = this.triggerElement;\n\t\t\tconst popoverEl = this.popoverElement;\n\t\t\tconst arrowEl = this.arrowElement;\n\n\t\t\tconst middleware = [offset(arrowEl?.offsetHeight ?? 10), flip(), shift()];\n\t\t\tif (arrowEl) {\n\t\t\t\tmiddleware.push(arrow({ element: arrowEl }));\n\t\t\t}\n\n\t\t\tvoid computePosition(trigger, popoverEl, {\n\t\t\t\tplacement: this.state._alignment,\n\t\t\t\tmiddleware: middleware,\n\t\t\t}).then(({ x, y, middlewareData, placement }) => {\n\t\t\t\tthis.setPosition(x, y, middlewareData, placement, callBack);\n\t\t\t});\n\t\t}\n\t};\n\tprivate setPosition(x: number, y: number, middlewareData: MiddlewareData, placement: Placement, callBack?: () => unknown) {\n\t\tif (this.popoverElement) {\n\t\t\tconst oldPos = {\n\t\t\t\tleft: this.popoverElement.style.left,\n\t\t\t\ttop: this.popoverElement.style.top,\n\t\t\t};\n\t\t\tObject.assign(this.popoverElement.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t});\n\n\t\t\tif (this.arrowElement && middlewareData.arrow) {\n\t\t\t\tswitch (placement) {\n\t\t\t\t\tcase 'top':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `100% auto auto ${middlewareData.arrow.x || 0}px`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '0 -50%';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'right':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `${middlewareData.arrow.y || 0}px 100% auto auto`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '50% 0';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'bottom':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `auto auto 100% ${middlewareData.arrow.x || 0}px`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '0 50%';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'left':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `${middlewareData.arrow.y || 0}px auto auto 100%`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '-50% 0';\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (oldPos.left !== this.popoverElement.style.left || oldPos.top !== this.popoverElement.style.top) {\n\t\t\t\tthis.alignPopover(callBack);\n\t\t\t} else if (typeof callBack === 'function') {\n\t\t\t\tcallBack();\n\t\t\t}\n\t\t}\n\t}\n\tprivate showPopover = (): void => {\n\t\tthis.addListenersToBody();\n\n\t\tthis.alignPopover(() => {\n\t\t\tthis.state = { ...this.state, _visible: true };\n\t\t});\n\t};\n\tprivate hidePopover(): void {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_visible: false,\n\t\t};\n\t\tthis._show = false;\n\t\tthis.triggerElement?.focus();\n\t\tthis.removeListenersToBody();\n\t}\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover();\n\t};\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover();\n\t\t}\n\t};\n\n\t/* EventListener functions */\n\tprivate addListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.addEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.addEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.addEventListener('scroll', this.showPopover, { passive: true });\n\t}\n\tprivate removeListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.removeEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.removeEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.removeEventListener('scroll', this.showPopover);\n\t}\n\n\t/* catchElement functions */\n\tprivate catchHostAndTriggerElement = (element: HTMLElement | null): void => {\n\t\tif (element) {\n\t\t\tthis.host = element;\n\t\t\tthis.triggerElement = element.previousElementSibling as HTMLElement | null;\n\t\t}\n\t};\n\tprivate catchPopoverElement = (element?: HTMLDivElement): void => {\n\t\tthis.popoverElement = element;\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostAndTriggerElement}>\n\t\t\t\t<div class={{ popover: true, hidden: !this.state._show, show: this.state._visible }} ref={this.catchPopoverElement}>\n\t\t\t\t\t<div class={`arrow ${this.state._alignment}`} ref={this.catchArrowElement} />\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\t/**\n\t * Setzt die Ausrichtung des Popovers in Relation zum Triggerelement.\n\t */\n\t@Prop() public _alignment?: Alignment = 'top';\n\n\t/**\n\t * Öffnet/schließt das Popover.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_alignment: 'top',\n\t\t_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_alignment')\n\tpublic validateAlignment(value?: Alignment): void {\n\t\tvalidateAlignment(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) this.showPopover();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlignment(this._alignment);\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),prop_validators=require("./prop.validators-dd1f7878.js");require("./a11y.tipps-6f0ad06e.js"),require("./dev.utils-d69c0a9f.js"),require("./reuse-0fe7470f.js"),require("./index-eb52922f.js");const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}progress,span{display:block;height:0;overflow:hidden;width:0}.bar,.cycle{transition:0.5s ease-in-out 0.25s}.cycle{transform-origin:50% 50%;transform:rotate(-90deg)}",createProgressSVG=e=>"cycle"===e._type?index.h("svg",{width:"100",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},index.h("circle",{fill:"none",stroke:"#efefef",cx:"6px",cy:"6px",r:"5px"}),index.h("circle",{class:"cycle","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*32)}px 32px`,fill:"none",stroke:"#0075ff",cx:"6px",cy:"6px",r:"5px"})):index.h("svg",{width:"100",viewBox:"0 0 24 2",xmlns:"http://www.w3.org/2000/svg"},index.h("line",{"stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:"23",y2:"1",fill:"#efefef",stroke:"#efefef"}),index.h("line",{class:"bar","stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:`${1+Math.round(e._value/e._max*22)}`,y2:"1",fill:"#0075ff",stroke:"#0075ff"})),KolProcess=class{constructor(e){index.registerInstance(this,e),this._max=void 0,this._type=void 0,this._unit="%",this._value=void 0,this.state={_max:100,_type:"bar",_unit:"%",_value:0,_liveValue:0}}render(){return index.h(index.Host,null,"cycle"===(e=this.state)._type?index.h("svg",{width:"100",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},index.h("circle",{fill:"none",stroke:"#efefef",cx:"6px",cy:"6px",r:"5px"}),index.h("circle",{class:"cycle","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*32)}px 32px`,fill:"none",stroke:"#0075ff",cx:"6px",cy:"6px",r:"5px"})):index.h("svg",{width:"100",viewBox:"0 0 24 2",xmlns:"http://www.w3.org/2000/svg"},index.h("line",{"stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:"23",y2:"1",fill:"#efefef",stroke:"#efefef"}),index.h("line",{class:"bar","stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:`${1+Math.round(e._value/e._max*22)}`,y2:"1",fill:"#0075ff",stroke:"#0075ff"})),index.h("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),index.h("span",{"aria-live":"polite","aria-relevant":"removals text"},this.state._liveValue," von ",this.state._max," ",this.state._unit));var e}validateMax(e){"number"!=typeof e&&(e=100),prop_validators.watchNumber(this,"_max",e,{required:!0})}validateType(e){if("cycle"===e);else e="bar";this.state=Object.assign(Object.assign({},this.state),{_type:e})}validateUnit(e){prop_validators.watchString(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),prop_validators.watchNumber(this,"_value",e,{required:!0})}componentWillLoad(){this.validateMax(this._max),this.validateType(this._type),this.validateUnit(this._unit),this.validateValue(this._value),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_max:["validateMax"],_type:["validateType"],_unit:["validateUnit"],_value:["validateValue"]}}};KolProcess.style={default:defaultStyleCss},exports.kol_progress=KolProcess;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),prop_validators=require("./prop.validators-dd1f7878.js");require("./a11y.tipps-6f0ad06e.js"),require("./dev.utils-d69c0a9f.js"),require("./reuse-0fe7470f.js"),require("./index-eb52922f.js");const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}[hidden],progress{display:block;height:0;overflow:hidden;width:0}.bar,.cycle{transition:0.5s ease-in-out 0.25s}.cycle{transform-origin:50% 50%;transform:rotate(-90deg)}",createProgressSVG=e=>"cycle"===e._type?index.h("svg",{width:"100",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},index.h("circle",{fill:"none",stroke:"#efefef",cx:"6px",cy:"6px",r:"5px"}),index.h("text",{"aria-hidden":"true","font-size":"0.1em",x:"50%",y:"50%","text-anchor":"middle",fill:"currentColor"},e._label&&index.h("tspan",{"text-anchor":"middle",x:"50%",dy:"-0.5em"},e._label),index.h("tspan",{"text-anchor":"middle",x:"50%",dy:e._label?"1em":"0em"},e._value,e._unit)),index.h("circle",{class:"cycle","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*32)}px 32px`,fill:"none",stroke:"#0075ff",cx:"6px",cy:"6px",r:"5px"})):index.h("div",null,e._label&&index.h("div",null,e._label),index.h("div",{style:{display:"flex",gap:"0.3em"}},index.h("svg",{width:"100",viewBox:"0 0 24 2",xmlns:"http://www.w3.org/2000/svg"},index.h("line",{"stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:"23",y2:"1",fill:"#efefef",stroke:"#efefef"}),index.h("line",{class:"bar","stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:`${1+Math.round(e._value/e._max*22)}`,y2:"1",fill:"#0075ff",stroke:"#0075ff"})),index.h("text",{"aria-hidden":"true","font-size":"0.1em","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},e._value,e._unit))),KolProcess=class{constructor(e){index.registerInstance(this,e),this._label=void 0,this._max=void 0,this._type=void 0,this._unit="%",this._value=void 0,this.state={_max:100,_type:"bar",_unit:"%",_value:0,_liveValue:0}}render(){return index.h(index.Host,null,"cycle"===(e=this.state)._type?index.h("svg",{width:"100",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},index.h("circle",{fill:"none",stroke:"#efefef",cx:"6px",cy:"6px",r:"5px"}),index.h("text",{"aria-hidden":"true","font-size":"0.1em",x:"50%",y:"50%","text-anchor":"middle",fill:"currentColor"},e._label&&index.h("tspan",{"text-anchor":"middle",x:"50%",dy:"-0.5em"},e._label),index.h("tspan",{"text-anchor":"middle",x:"50%",dy:e._label?"1em":"0em"},e._value,e._unit)),index.h("circle",{class:"cycle","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*32)}px 32px`,fill:"none",stroke:"#0075ff",cx:"6px",cy:"6px",r:"5px"})):index.h("div",null,e._label&&index.h("div",null,e._label),index.h("div",{style:{display:"flex",gap:"0.3em"}},index.h("svg",{width:"100",viewBox:"0 0 24 2",xmlns:"http://www.w3.org/2000/svg"},index.h("line",{"stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:"23",y2:"1",fill:"#efefef",stroke:"#efefef"}),index.h("line",{class:"bar","stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:`${1+Math.round(e._value/e._max*22)}`,y2:"1",fill:"#0075ff",stroke:"#0075ff"})),index.h("text",{"aria-hidden":"true","font-size":"0.1em","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},e._value,e._unit))),index.h("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),index.h("span",{"aria-live":"polite","aria-relevant":"removals text",hidden:!0},this.state._liveValue," von ",this.state._max," ",this.state._unit));var e}validateLabel(e){prop_validators.watchString(this,"_label",e)}validateMax(e){"number"!=typeof e&&(e=100),prop_validators.watchNumber(this,"_max",e,{required:!0})}validateType(e){if("cycle"===e);else e="bar";this.state=Object.assign(Object.assign({},this.state),{_type:e})}validateUnit(e){prop_validators.watchString(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),prop_validators.watchNumber(this,"_value",e,{required:!0})}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateType(this._type),this.validateUnit(this._unit),this.validateValue(this._value),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_type:["validateType"],_unit:["validateUnit"],_value:["validateValue"]}}};KolProcess.style={default:defaultStyleCss},exports.kol_progress=KolProcess;

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

@@ -1 +1 @@
-{"file":"kol-progress.entry.cjs.js","mappings":"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","names":["h","Host","watchNumber","watchString"],"sources":["./src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","./src/components/progress/component.tsx"],"sourcesContent":["@import url(../style.css);\nprogress,\nspan {\n\tdisplay: block;\n\theight: 0;\n\toverflow: hidden;\n\twidth: 0;\n}\n.bar,\n.cycle {\n\ttransition: 0.5s ease-in-out 0.25s;\n}\n.cycle {\n\ttransform-origin: 50% 50%;\n\ttransform: rotate(-90deg);\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { KoliBriProgressType } from '../../types/progress';\nimport { watchNumber, watchString } from '../../utils/prop.validators';\n\ntype RequiredProps = {\n\tmax: number;\n\tvalue: number;\n};\ntype OptionalProps = {\n\ttype: KoliBriProgressType;\n\tunit: string;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & {\n\tliveValue: number;\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: States): JSX.Element => {\n\tswitch (state._type) {\n\t\tcase 'cycle':\n\t\t\treturn (\n\t\t\t\t<svg width=\"100\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle fill=\"none\" stroke=\"#efefef\" cx=\"6px\" cy=\"6px\" r=\"5px\"></circle>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"cycle\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * 32)}px 32px`}\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t\tcx=\"6px\"\n\t\t\t\t\t\tcy=\"6px\"\n\t\t\t\t\t\tr=\"5px\"\n\t\t\t\t\t></circle>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<svg width=\"100\" viewBox=\"0 0 24 2\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<line stroke-width=\"2\" x1=\"1\" stroke-linecap=\"round\" y1=\"1\" x2=\"23\" y2=\"1\" fill=\"#efefef\" stroke=\"#efefef\"></line>\n\t\t\t\t\t<line\n\t\t\t\t\t\tclass=\"bar\"\n\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\tx1=\"1\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\ty1=\"1\"\n\t\t\t\t\t\tx2={`${1 + Math.round((state._value / state._max) * 22)}`}\n\t\t\t\t\t\ty2=\"1\"\n\t\t\t\t\t\tfill=\"#0075ff\"\n\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t></line>\n\t\t\t\t</svg>\n\t\t\t);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate interval?: NodeJS.Timer;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t<progress aria-busy={this.state._value < this.state._max ? 'true' : 'false'} max={this.state._max} value={this.state._value}></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\">\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.\n\t */\n\t@Prop() public _type?: KoliBriProgressType;\n\n\t/**\n\t * Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Gibt an, wie weit die Anzeige fortgeschritten ist.\n\t */\n\t@Prop() public _value!: number;\n\n\t@State() public state: States = {\n\t\t_max: 100,\n\t\t_type: 'bar',\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriProgressType): void {\n\t\tswitch (value) {\n\t\t\tcase 'cycle':\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tvalue = 'bar';\n\t\t}\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_type: value,\n\t\t};\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateMax(this._max);\n\t\tthis.validateType(this._type);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval as unknown as number);\n\t}\n}\n"],"version":3}
+{"file":"kol-progress.entry.cjs.js","mappings":"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","names":["h","Host","watchString","watchNumber"],"sources":["./src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","./src/components/progress/component.tsx"],"sourcesContent":["@import url(../style.css);\n[hidden],\nprogress {\n\tdisplay: block;\n\theight: 0;\n\toverflow: hidden;\n\twidth: 0;\n}\n.bar,\n.cycle {\n\ttransition: 0.5s ease-in-out 0.25s;\n}\n.cycle {\n\ttransform-origin: 50% 50%;\n\ttransform: rotate(-90deg);\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { KoliBriProgressType } from '../../types/progress';\nimport { PropLabel } from '../../types/props';\nimport { watchNumber, watchString } from '../../utils/prop.validators';\n\ntype RequiredProps = {\n\tmax: number;\n\tvalue: number;\n};\ntype OptionalProps = PropLabel & {\n\ttype: KoliBriProgressType;\n\tunit: string;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & {\n\tliveValue: number;\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: States): JSX.Element => {\n\tswitch (state._type) {\n\t\tcase 'cycle':\n\t\t\treturn (\n\t\t\t\t<svg width=\"100\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle fill=\"none\" stroke=\"#efefef\" cx=\"6px\" cy=\"6px\" r=\"5px\"></circle>\n\t\t\t\t\t<text aria-hidden=\"true\" font-size=\"0.1em\" x=\"50%\" y=\"50%\" text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t{state._label && (\n\t\t\t\t\t\t\t<tspan text-anchor=\"middle\" x=\"50%\" dy=\"-0.5em\">\n\t\t\t\t\t\t\t\t{state._label}\n\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<tspan text-anchor=\"middle\" x=\"50%\" dy={state._label ? '1em' : '0em'}>\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</tspan>\n\t\t\t\t\t</text>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"cycle\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * 32)}px 32px`}\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t\tcx=\"6px\"\n\t\t\t\t\t\tcy=\"6px\"\n\t\t\t\t\t\tr=\"5px\"\n\t\t\t\t\t></circle>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div>\n\t\t\t\t\t{state._label && <div>{state._label}</div>}\n\t\t\t\t\t<div style={{ display: 'flex', gap: '0.3em' }}>\n\t\t\t\t\t\t<svg width=\"100\" viewBox=\"0 0 24 2\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<line stroke-width=\"2\" x1=\"1\" stroke-linecap=\"round\" y1=\"1\" x2=\"23\" y2=\"1\" fill=\"#efefef\" stroke=\"#efefef\"></line>\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tclass=\"bar\"\n\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\tx1=\"1\"\n\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\ty1=\"1\"\n\t\t\t\t\t\t\t\tx2={`${1 + Math.round((state._value / state._max) * 22)}`}\n\t\t\t\t\t\t\t\ty2=\"1\"\n\t\t\t\t\t\t\t\tfill=\"#0075ff\"\n\t\t\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t\t\t></line>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<text aria-hidden=\"true\" font-size=\"0.1em\" text-anchor=\"middle\" dominant-baseline=\"central\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate interval?: NodeJS.Timer;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t<progress aria-busy={this.state._value < this.state._max ? 'true' : 'false'} max={this.state._max} value={this.state._value}></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" hidden>\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die Bezeichnung der Fortschrittsanzeige.\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.\n\t */\n\t@Prop() public _type?: KoliBriProgressType;\n\n\t/**\n\t * Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Gibt an, wie weit die Anzeige fortgeschritten ist.\n\t */\n\t@Prop() public _value!: number;\n\n\t@State() public state: States = {\n\t\t_max: 100,\n\t\t_type: 'bar',\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\twatchString(this, '_label', value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriProgressType): void {\n\t\tswitch (value) {\n\t\t\tcase 'cycle':\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tvalue = 'bar';\n\t\t}\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_type: value,\n\t\t};\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateType(this._type);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),prop_validators=require("./prop.validators-dd1f7878.js");require("./a11y.tipps-6f0ad06e.js"),require("./dev.utils-d69c0a9f.js"),require("./reuse-0fe7470f.js"),require("./index-eb52922f.js");const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}cite,figure,q+figcaption{display:inline;margin:0;padding:0}blockquote:before{content:open-quote}blockquote::after{content:close-quote}cite:before{content:'—'}.block cite:before{padding-right:0.5em}.inline cite:before{padding:0.5em}",KolQuote=class{constructor(t){index.registerInstance(this,t),this._caption=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateCaption(t){prop_validators.watchString(this,"_caption",t)}validateHref(t){prop_validators.watchString(this,"_href",t,{required:!0})}validateQuote(t){prop_validators.watchString(this,"_quote",t,{required:!0})}validateVariant(t){prop_validators.watchValidator(this,"_variant",(t=>"block"===t||"inline"===t),new Set(["block","inline"]),t)}componentWillLoad(){this.validateCaption(this._caption),this.validateHref(this._href),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const t=""!==this.state._quote;return index.h(index.Host,null,index.h("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?index.h("blockquote",{cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":t?"true":void 0,hidden:t},index.h("slot",{name:"expert"}))):index.h("q",{cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":t?"true":void 0,hidden:t},index.h("slot",{name:"expert"}))),"string"==typeof this.state._caption&&this.state._caption.length>0&&index.h("figcaption",null,index.h("cite",null,index.h("kol-link",{_href:this.state._href,_label:this.state._caption,_target:"_blank"})))))}static get watchers(){return{_caption:["validateCaption"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};KolQuote.style={default:defaultStyleCss},exports.kol_quote=KolQuote;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),prop_validators=require("./prop.validators-dd1f7878.js");require("./a11y.tipps-6f0ad06e.js"),require("./dev.utils-d69c0a9f.js"),require("./reuse-0fe7470f.js"),require("./index-eb52922f.js");const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}cite,figure,q+figcaption{display:inline;margin:0;padding:0}blockquote:before{content:open-quote}blockquote::after{content:close-quote}cite:before{content:'—'}.block cite:before{padding-right:0.5em}.inline cite:before{padding:0.5em}",KolQuote=class{constructor(t){index.registerInstance(this,t),this._caption=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateCaption(t){prop_validators.watchString(this,"_caption",t)}validateHref(t){prop_validators.watchString(this,"_href",t,{required:!0})}validateQuote(t){prop_validators.watchString(this,"_quote",t,{required:!0})}validateVariant(t){prop_validators.watchValidator(this,"_variant",(t=>"block"===t||"inline"===t),new Set(["block","inline"]),t)}componentWillLoad(){this.validateCaption(this._caption),this.validateHref(this._href),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const t=""!==this.state._quote;return index.h(index.Host,null,index.h("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?index.h("blockquote",{cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":t?"true":void 0,hidden:t},index.h("slot",{name:"expert"}))):index.h("q",{cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":t?"true":void 0,hidden:t},index.h("slot",{name:"expert"}))),"string"==typeof this.state._caption&&this.state._caption.length>0&&index.h("figcaption",null,index.h("cite",null,index.h("kol-link",{_href:this.state._href,_label:this.state._caption,_target:"_blank"})))))}static get watchers(){return{_caption:["validateCaption"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};KolQuote.style={default:defaultStyleCss},exports.kol_quote=KolQuote;

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

@@ -1 +1 @@
-{"file":"kol-quote.entry.cjs.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,23BAA23B;;MCWt4B,QAAQ;;;;;;oBAmB4B,QAAQ;iBAExB;MAC/B,KAAK,EAAE,GAAG;MACV,MAAM,EAAE,GAAG;MACX,QAAQ,EAAE,QAAQ;KAClB;;EAGM,eAAe,CAAC,KAAc;IACpCA,2BAAW,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;GACrC;EAGM,YAAY,CAAC,KAAc;IACjCA,2BAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;MACjC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAGM,aAAa,CAAC,KAAc;IAClCA,2BAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;MAClC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAGM,eAAe,CAAC,KAA2B;IACjDC,8BAAc,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;GAC1H;EAEM,iBAAiB;IACvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;EAEM,MAAM;IACZ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC;IAChD,QACCC,QAACC,UAAI,QACJD,oBACC,KAAK,EAAE;QACN,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI;OAC3B,IAEA,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,OAAO,IAC/BA,wBAAY,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAChC,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,cAAc,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,cAAc,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACK,KAEbA,eAAG,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IACvB,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,cAAc,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,cAAc,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACJ,CACJ,EACA,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,KACzEA,4BACCA,sBACCA,sBAAU,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,EAAC,QAAQ,GAAG,CAC7E,CACK,CACb,CACO,CACH,EACN;GACF;;;;;;;;;;;;;;","names":["watchString","watchValidator","h","Host"],"sources":["./src/components/quote/style.css?tag=kol-quote&mode=default&encapsulation=shadow","./src/components/quote/shadow.tsx"],"sourcesContent":["@import url(../style.css);\ncite,\nfigure,\nq + figcaption {\n\tdisplay: inline;\n\tmargin: 0;\n\tpadding: 0;\n}\nblockquote:before {\n\tcontent: open-quote;\n}\nblockquote::after {\n\tcontent: close-quote;\n}\ncite:before {\n\tcontent: '—';\n}\n.block cite:before {\n\tpadding-right: 0.5em;\n}\n.inline cite:before {\n\tpadding: 0.5em;\n}\n","import { h, Component, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { ComponentApi, KoliBriQuoteVariant, States } from './types';\n\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements ComponentApi {\n\t/**\n\t * Setzt die Überschrift.\n\t */\n\t@Prop() public _caption?: string;\n\n\t/**\n\t * Link auf die Quelle des Zitates.\n\t */\n\t@Prop() public _href!: string;\n\n\t/**\n\t * Setzt den Text, also das Zitat selbst.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Setzt die Variante des Zitats.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: States = {\n\t\t_href: '…', // ⚠ required\n\t\t_quote: '…', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\twatchString(this, '_caption', value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: string): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'block' || value === 'inline', new Set(['block', 'inline']), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCaption(this._caption);\n\t\tthis.validateHref(this._href);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot = this.state._quote !== '';\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<figure\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t\t<blockquote cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</blockquote>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<q cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</q>\n\t\t\t\t\t)}\n\t\t\t\t\t{typeof this.state._caption === 'string' && this.state._caption.length > 0 && (\n\t\t\t\t\t\t<figcaption>\n\t\t\t\t\t\t\t<cite>\n\t\t\t\t\t\t\t\t<kol-link _href={this.state._href} _label={this.state._caption} _target=\"_blank\" />\n\t\t\t\t\t\t\t</cite>\n\t\t\t\t\t\t</figcaption>\n\t\t\t\t\t)}\n\t\t\t\t</figure>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-quote.entry.cjs.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,64BAA64B;;MCWx5B,QAAQ;;;;;;oBAmB4B,QAAQ;iBAExB;MAC/B,KAAK,EAAE,GAAG;MACV,MAAM,EAAE,GAAG;MACX,QAAQ,EAAE,QAAQ;KAClB;;EAGM,eAAe,CAAC,KAAc;IACpCA,2BAAW,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;GACrC;EAGM,YAAY,CAAC,KAAc;IACjCA,2BAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;MACjC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAGM,aAAa,CAAC,KAAc;IAClCA,2BAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;MAClC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;GACH;EAGM,eAAe,CAAC,KAA2B;IACjDC,8BAAc,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;GAC1H;EAEM,iBAAiB;IACvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;EAEM,MAAM;IACZ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC;IAChD,QACCC,QAACC,UAAI,QACJD,oBACC,KAAK,EAAE;QACN,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI;OAC3B,IAEA,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,OAAO,IAC/BA,wBAAY,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAChC,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,cAAc,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,cAAc,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACK,KAEbA,eAAG,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IACvB,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,cAAc,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,cAAc,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACJ,CACJ,EACA,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,KACzEA,4BACCA,sBACCA,sBAAU,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,EAAC,QAAQ,GAAG,CAC7E,CACK,CACb,CACO,CACH,EACN;GACF;;;;;;;;;;;;;;","names":["watchString","watchValidator","h","Host"],"sources":["./src/components/quote/style.css?tag=kol-quote&mode=default&encapsulation=shadow","./src/components/quote/shadow.tsx"],"sourcesContent":["@import url(../style.css);\ncite,\nfigure,\nq + figcaption {\n\tdisplay: inline;\n\tmargin: 0;\n\tpadding: 0;\n}\nblockquote:before {\n\tcontent: open-quote;\n}\nblockquote::after {\n\tcontent: close-quote;\n}\ncite:before {\n\tcontent: '—';\n}\n.block cite:before {\n\tpadding-right: 0.5em;\n}\n.inline cite:before {\n\tpadding: 0.5em;\n}\n","import { h, Component, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { ComponentApi, KoliBriQuoteVariant, States } from './types';\n\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements ComponentApi {\n\t/**\n\t * Setzt die Überschrift.\n\t */\n\t@Prop() public _caption?: string;\n\n\t/**\n\t * Link auf die Quelle des Zitates.\n\t */\n\t@Prop() public _href!: string;\n\n\t/**\n\t * Setzt den Text, also das Zitat selbst.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Setzt die Variante des Zitats.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: States = {\n\t\t_href: '…', // ⚠ required\n\t\t_quote: '…', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\twatchString(this, '_caption', value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: string): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'block' || value === 'inline', new Set(['block', 'inline']), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCaption(this._caption);\n\t\tthis.validateHref(this._href);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot = this.state._quote !== '';\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<figure\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t\t<blockquote cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</blockquote>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<q cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</q>\n\t\t\t\t\t)}\n\t\t\t\t\t{typeof this.state._caption === 'string' && this.state._caption.length > 0 && (\n\t\t\t\t\t\t<figcaption>\n\t\t\t\t\t\t\t<cite>\n\t\t\t\t\t\t\t\t<kol-link _href={this.state._href} _label={this.state._caption} _target=\"_blank\" />\n\t\t\t\t\t\t\t</cite>\n\t\t\t\t\t\t</figcaption>\n\t\t\t\t\t)}\n\t\t\t\t</figure>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),reuse=require("./reuse-0fe7470f.js"),controller$1=require("./controller-536f457e.js"),prop_validators=require("./prop.validators-dd1f7878.js"),controllerIcon=require("./controller-icon-f01acf97.js"),controller=require("./controller-46148a56.js"),a11y_tipps=require("./a11y.tipps-6f0ad06e.js"),label=require("./label-dc5092d3.js"),dev_utils=require("./dev.utils-d69c0a9f.js");require("./tab-index-7bf0cb35.js"),require("./index-eb52922f.js"),require("./icon-71b1bd66.js");const validateInputSelectList=e=>{if("object"==typeof e&&null!==e){if("string"==typeof e.label&&e.label.length>0)return e.disabled=!0===e.disabled,e.label=`${e.label}`.trim(),!1===label.hasEnoughReadableChars(e.label,3)&&!1===label.containsOnlyNumbers(e.label)&&a11y_tipps.a11yHint(`Ein abweichendes Aria-Label (${e.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`),!Array.isArray(e.options)||void 0===e.options.find((e=>!1===validateInputSelectList(e)));if("number"==typeof e.label)return!0}return!1};class SelectController extends controllerIcon.InputIconController{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find((t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options))),this.filterValuesInOptions=(e,t)=>e.filter((e=>void 0!==this.isValueInOptions(e,t))),this.beforePatchListValue=(e,t)=>{const i=t.has("_list")?t.get("_list"):this.component.state._list;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,i);const e=t.has("_value")?t.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],i);!1===this.component._multiple&&0===a.length?(t.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(e)&&a.length<e.length&&(t.set("_value",a),this.onStateChange())}},this.component=e}validateHeight(e){prop_validators.watchString(this.component,"_height",e)}validateList(e){prop_validators.watchJsonArrayString(this.component,"_list",validateInputSelectList,e,void 0,{hooks:{beforePatch:this.beforePatchListValue}})}validateMultiple(e){prop_validators.watchBoolean(this.component,"_multiple",e,{hooks:{beforePatch:this.beforePatchListValue}})}validateRequired(e){prop_validators.watchBoolean(this.component,"_required",e)}validateSize(e){prop_validators.watchNumber(this.component,"_size",e,{min:1})}validateValue(e){prop_validators.watchJsonArrayString(this.component,"_value",(()=>!0),e,void 0,{hooks:{beforePatch:this.beforePatchListValue}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(e){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof e){const t=setTimeout((()=>{clearTimeout(t),e(reuse.STATE_CHANGE_EVENT)}))}},this.validateHeight(this.component._height),this.validateList(this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateSize(this.component._size),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",isSelected=(e,t)=>Array.isArray(e)&&e.includes(t),KolSelect=class{renderOptgroup(e,t){var i;return index.h("optgroup",{disabled:!0===e.disabled,label:e.label},null===(i=e.options)||void 0===i?void 0:i.map(((e,i)=>{const a=`${t}-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):index.h("option",{disabled:!0===e.disabled,key:a,selected:isSelected(this.state._value,e.value),value:a},e.label)})))}render(){const{ariaDiscribedBy:e}=controller$1.getRenderStates(this.state);return index.h(index.Host,{class:{"has-value":this.state._hasValue}},index.h("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.ref)||void 0===e?void 0:e.focus()}},index.h("span",{slot:"label"},index.h("slot",null)),index.h("select",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,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._size,slot:"input",spellcheck:"false",style:{height:this.state._height}},{onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus},{onChange:this.onChange}),this.state._list.map(((e,t)=>{const i=`-${t}`;return Array.isArray(e.options)?this.renderOptgroup(e,i):index.h("option",{disabled:!0===e.disabled,key:i,selected:isSelected(this.state._value,e.value),value:i},e.label)})))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.ref=e,reuse.propagateFocus(this.host,this.ref)},this.onChange=e=>{var t,i;this._value=Array.from((null===(t=this.ref)||void 0===t?void 0:t.options)||[]).filter((e=>!0===e.selected)).map((e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value})),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(e,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._height=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=void 0,this._size=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_height:"",_id:dev_utils.nonce(),_list:[],_multiple:!1,_value:[]},this.controller=new SelectController(this,"textarea",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHeight(e){this.controller.validateHeight(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcon(e){this.controller.validateIcon(e)}validateId(e){this.controller.validateId(e)}validateList(e){this.controller.validateList(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateSize(e){this.controller.validateSize(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}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((e=>this.state._hasValue=!!e))}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_size:["validateSize"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolSelect.style={default:defaultStyleCss},exports.kol_select=KolSelect;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),reuse=require("./reuse-0fe7470f.js"),controller$1=require("./controller-521c7ae9.js"),prop_validators=require("./prop.validators-dd1f7878.js"),controllerIcon=require("./controller-icon-0a88c097.js"),controller=require("./controller-7f4b0caf.js"),a11y_tipps=require("./a11y.tipps-6f0ad06e.js"),label=require("./label-dc5092d3.js"),dev_utils=require("./dev.utils-d69c0a9f.js");require("./tab-index-7bf0cb35.js"),require("./index-eb52922f.js"),require("./icon-71b1bd66.js");const validateInputSelectList=e=>{if("object"==typeof e&&null!==e){if("string"==typeof e.label&&e.label.length>0)return e.disabled=!0===e.disabled,e.label=`${e.label}`.trim(),!1===label.hasEnoughReadableChars(e.label,3)&&!1===label.containsOnlyNumbers(e.label)&&a11y_tipps.a11yHint(`Ein abweichendes Aria-Label (${e.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`),!Array.isArray(e.options)||void 0===e.options.find((e=>!1===validateInputSelectList(e)));if("number"==typeof e.label)return!0}return!1};class SelectController extends controllerIcon.InputIconController{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find((t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options))),this.filterValuesInOptions=(e,t)=>e.filter((e=>void 0!==this.isValueInOptions(e,t))),this.beforePatchListValue=(e,t)=>{const i=t.has("_list")?t.get("_list"):this.component.state._list;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,i);const e=t.has("_value")?t.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],i);!1===this.component._multiple&&0===a.length?(t.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(e)&&a.length<e.length&&(t.set("_value",a),this.onStateChange())}},this.component=e}validateHeight(e){prop_validators.watchString(this.component,"_height",e)}validateList(e){prop_validators.watchJsonArrayString(this.component,"_list",validateInputSelectList,e,void 0,{hooks:{beforePatch:this.beforePatchListValue}})}validateMultiple(e){prop_validators.watchBoolean(this.component,"_multiple",e,{hooks:{beforePatch:this.beforePatchListValue}})}validateRequired(e){prop_validators.watchBoolean(this.component,"_required",e)}validateSize(e){prop_validators.watchNumber(this.component,"_size",e,{min:1})}validateValue(e){prop_validators.watchJsonArrayString(this.component,"_value",(()=>!0),e,void 0,{hooks:{beforePatch:this.beforePatchListValue}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(e){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof e){const t=setTimeout((()=>{clearTimeout(t),e(reuse.STATE_CHANGE_EVENT)}))}},this.validateHeight(this.component._height),this.validateList(this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateSize(this.component._size),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",isSelected=(e,t)=>Array.isArray(e)&&e.includes(t),KolSelect=class{renderOptgroup(e,t){var i;return index.h("optgroup",{disabled:!0===e.disabled,label:e.label},null===(i=e.options)||void 0===i?void 0:i.map(((e,i)=>{const a=`${t}-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):index.h("option",{disabled:!0===e.disabled,key:a,selected:isSelected(this.state._value,e.value),value:a},e.label)})))}render(){const{ariaDescribedBy:e}=controller$1.getRenderStates(this.state);return index.h(index.Host,{class:{"has-value":this.state._hasValue}},index.h("kol-input",{class:{select:!0},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.ref)||void 0===e?void 0:e.focus()}},index.h("span",{slot:"label"},index.h("slot",null)),index.h("select",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,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._size,slot:"input",spellcheck:"false",style:{height:this.state._height}},{onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus},{onChange:this.onChange}),this.state._list.map(((e,t)=>{const i=`-${t}`;return Array.isArray(e.options)?this.renderOptgroup(e,i):index.h("option",{disabled:!0===e.disabled,key:i,selected:isSelected(this.state._value,e.value),value:i},e.label)})))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.ref=e,reuse.propagateFocus(this.host,this.ref)},this.onChange=e=>{var t,i;this._value=Array.from((null===(t=this.ref)||void 0===t?void 0:t.options)||[]).filter((e=>!0===e.selected)).map((e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value})),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(e,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._height=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=void 0,this._size=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_height:"",_id:dev_utils.nonce(),_list:[],_multiple:!1,_value:[]},this.controller=new SelectController(this,"textarea",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHeight(e){this.controller.validateHeight(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcon(e){this.controller.validateIcon(e)}validateId(e){this.controller.validateId(e)}validateList(e){this.controller.validateList(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateSize(e){this.controller.validateSize(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}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((e=>this.state._hasValue=!!e))}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_size:["validateSize"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolSelect.style={default:defaultStyleCss},exports.kol_select=KolSelect;

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

@@ -1 +1 @@
-{"file":"kol-select.entry.cjs.js","mappings":"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","names":["hasEnoughReadableChars","containsOnlyNumbers","a11yHint","InputIconController","fillKeyOptionMap","watchString","watchJsonArrayString","watchBoolean","watchNumber","STATE_CHANGE_EVENT","h","index","getRenderStates","Host","propagateFocus","nonce"],"sources":["./src/utils/validators/list.ts","./src/components/select/controller.ts","./src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","./src/components/select/component.tsx"],"sourcesContent":["import { Optgroup, SelectOption } from '../../types/input/types';\nimport { a11yHint } from '../a11y.tipps';\nimport { containsOnlyNumbers, hasEnoughReadableChars } from '../../types/props/label';\n\nexport const validateInputSelectList = <T>(option: SelectOption<T>): boolean => {\n\tif (typeof option === 'object' && option !== null) {\n\t\tif (typeof option.label === 'string' && option.label.length > 0) {\n\t\t\toption.disabled = option.disabled === true;\n\t\t\toption.label = `${option.label}`.trim();\n\t\t\tif (hasEnoughReadableChars(option.label, 3) === false && containsOnlyNumbers(option.label) === false) {\n\t\t\t\ta11yHint(\n\t\t\t\t\t`Ein abweichendes Aria-Label (${option.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (Array.isArray((option as Optgroup<T>).options)) {\n\t\t\t\treturn (\n\t\t\t\t\t(option as Optgroup<T>).options.find((item) => {\n\t\t\t\t\t\treturn validateInputSelectList(item) === false;\n\t\t\t\t\t}) === undefined\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn true;\n\t\t} else if (typeof option.label === 'number') {\n\t\t\treturn true;\n\t\t}\n\t}\n\treturn false;\n};\n","import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\nimport { Props, Watches } from './types';\nimport { validateInputSelectList } from '../../utils/validators/list';\n\nexport class SelectController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & Props, 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 beforePatchListValue = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst list = nextState.has('_list') ? nextState.get('_list') : this.component.state._list;\n\t\tif (Array.isArray(list) && list.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, list 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(Array.isArray(value) && value.length > 0 ? (value as string[]) : [], list as SelectOption<W3CInputValue>[]);\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\tlist[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\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated Use _size instead.\n\t */\n\tpublic validateHeight(value?: string): void {\n\t\twatchString(this.component, '_height', value);\n\t}\n\n\tpublic validateList<T>(value?: SelectOption<T>[] | string): void {\n\t\twatchJsonArrayString(this.component, '_list', validateInputSelectList, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\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.beforePatchListValue,\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 validateSize(value?: number): void {\n\t\twatchNumber(this.component, '_size', value, {\n\t\t\tmin: 1,\n\t\t});\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.beforePatchListValue,\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.validateHeight(this.component._height);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateSize(this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { propagateFocus } from '../../utils/reuse';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\nconst isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements ComponentApi {\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\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled === true} 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 === true}\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 { ariaDiscribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\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_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<select\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t\t/**\n\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 * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\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} else {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\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\tvalue={key}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t</option>\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</select>\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 * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob eine individuelle Höhe übergeben werden soll.\n\t *\n\t * @deprecated Use _size instead.\n\t */\n\t@Prop() public _height?: string;\n\n\t/**\n\t * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _list!: Stringified<SelectOption<W3CInputValue>[]>;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop({ reflect: true }) public _multiple?: boolean = false;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\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 * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: States = {\n\t\t_hasValue: false,\n\t\t_height: '',\n\t\t_id: nonce(), // ⚠ required\n\t\t_list: [],\n\t\t_multiple: false,\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'textarea', 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('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(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('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(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('_list')\n\tpublic validateList(value?: Stringified<SelectOption<W3CInputValue>[]>): void {\n\t\tthis.controller.validateList(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('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(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\t/**\n\t\t * TODO: Find values via value keys.\n\t\t */\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\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\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":"kol-select.entry.cjs.js","mappings":"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","names":["hasEnoughReadableChars","containsOnlyNumbers","a11yHint","InputIconController","fillKeyOptionMap","watchString","watchJsonArrayString","watchBoolean","watchNumber","STATE_CHANGE_EVENT","h","index","getRenderStates","Host","propagateFocus","nonce"],"sources":["./src/utils/validators/list.ts","./src/components/select/controller.ts","./src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","./src/components/select/component.tsx"],"sourcesContent":["import { Optgroup, SelectOption } from '../../types/input/types';\nimport { a11yHint } from '../a11y.tipps';\nimport { containsOnlyNumbers, hasEnoughReadableChars } from '../../types/props/label';\n\nexport const validateInputSelectList = <T>(option: SelectOption<T>): boolean => {\n\tif (typeof option === 'object' && option !== null) {\n\t\tif (typeof option.label === 'string' && option.label.length > 0) {\n\t\t\toption.disabled = option.disabled === true;\n\t\t\toption.label = `${option.label}`.trim();\n\t\t\tif (hasEnoughReadableChars(option.label, 3) === false && containsOnlyNumbers(option.label) === false) {\n\t\t\t\ta11yHint(\n\t\t\t\t\t`Ein abweichendes Aria-Label (${option.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (Array.isArray((option as Optgroup<T>).options)) {\n\t\t\t\treturn (\n\t\t\t\t\t(option as Optgroup<T>).options.find((item) => {\n\t\t\t\t\t\treturn validateInputSelectList(item) === false;\n\t\t\t\t\t}) === undefined\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn true;\n\t\t} else if (typeof option.label === 'number') {\n\t\t\treturn true;\n\t\t}\n\t}\n\treturn false;\n};\n","import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\nimport { Props, Watches } from './types';\nimport { validateInputSelectList } from '../../utils/validators/list';\n\nexport class SelectController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & Props, 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 beforePatchListValue = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst list = nextState.has('_list') ? nextState.get('_list') : this.component.state._list;\n\t\tif (Array.isArray(list) && list.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, list 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(Array.isArray(value) && value.length > 0 ? (value as string[]) : [], list as SelectOption<W3CInputValue>[]);\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\tlist[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\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated Use _size instead.\n\t */\n\tpublic validateHeight(value?: string): void {\n\t\twatchString(this.component, '_height', value);\n\t}\n\n\tpublic validateList<T>(value?: SelectOption<T>[] | string): void {\n\t\twatchJsonArrayString(this.component, '_list', validateInputSelectList, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\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.beforePatchListValue,\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 validateSize(value?: number): void {\n\t\twatchNumber(this.component, '_size', value, {\n\t\t\tmin: 1,\n\t\t});\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.beforePatchListValue,\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.validateHeight(this.component._height);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateSize(this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { propagateFocus } from '../../utils/reuse';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\nconst isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements ComponentApi {\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\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled === true} 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 === true}\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\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tselect: true,\n\t\t\t\t\t}}\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_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<select\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t\t/**\n\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 * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\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} else {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\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\tvalue={key}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t</option>\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</select>\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 * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob eine individuelle Höhe übergeben werden soll.\n\t *\n\t * @deprecated Use _size instead.\n\t */\n\t@Prop() public _height?: string;\n\n\t/**\n\t * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _list!: Stringified<SelectOption<W3CInputValue>[]>;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop({ reflect: true }) public _multiple?: boolean = false;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\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 * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: States = {\n\t\t_hasValue: false,\n\t\t_height: '',\n\t\t_id: nonce(), // ⚠ required\n\t\t_list: [],\n\t\t_multiple: false,\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'textarea', 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('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(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('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(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('_list')\n\tpublic validateList(value?: Stringified<SelectOption<W3CInputValue>[]>): void {\n\t\tthis.controller.validateList(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('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(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\t/**\n\t\t * TODO: Find values via value keys.\n\t\t */\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\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\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/cjs/kol-skip-nav.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),a11y_tipps=require("./a11y.tipps-6f0ad06e.js"),prop_validators=require("./prop.validators-dd1f7878.js"),validation=require("./validation-60fd00e2.js");require("./dev.utils-d69c0a9f.js"),require("./reuse-0fe7470f.js"),require("./index-eb52922f.js");const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}",KolSkipNav=class{constructor(i){index.registerInstance(this,i),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return index.h("nav",{"aria-label":this.state._ariaLabel},index.h("ul",null,this.state._links.map(((i,e)=>index.h("li",{key:e},index.h("kol-link",Object.assign({},i,{_stealth:!0})))))))}validateAriaLabel(i){prop_validators.watchString(this,"_ariaLabel",i,{required:!0}),a11y_tipps.a11yHintLabelingLandmarks(i)}validateLinks(i){validation.watchNavLinks("KolSkipNav",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};KolSkipNav.style={default:defaultStyleCss},exports.kol_skip_nav=KolSkipNav;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),a11y_tipps=require("./a11y.tipps-6f0ad06e.js"),prop_validators=require("./prop.validators-dd1f7878.js"),validation=require("./validation-60fd00e2.js");require("./dev.utils-d69c0a9f.js"),require("./reuse-0fe7470f.js"),require("./index-eb52922f.js");const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}",KolSkipNav=class{constructor(i){index.registerInstance(this,i),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return index.h("nav",{"aria-label":this.state._ariaLabel},index.h("ul",null,this.state._links.map(((i,e)=>index.h("li",{key:e},index.h("kol-link",Object.assign({},i,{_stealth:!0})))))))}validateAriaLabel(i){prop_validators.watchString(this,"_ariaLabel",i,{required:!0}),a11y_tipps.a11yHintLabelingLandmarks(i)}validateLinks(i){validation.watchNavLinks("KolSkipNav",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};KolSkipNav.style={default:defaultStyleCss},exports.kol_skip_nav=KolSkipNav;

package/dist/cjs/kol-skip-nav.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"kol-skip-nav.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,stBAAstB;;MC8BjuB,UAAU;;;;;iBA+BU;MAC/B,UAAU,EAAE,GAAG;MACf,MAAM,EAAE,EAAE;KACV;;EAjCM,MAAM;IACZ,QACCA,+BAAiB,IAAI,CAAC,KAAK,CAAC,UAAU,IACrCA,oBACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAEC,OAAa;MACrD,QACCD,gBAAI,GAAG,EAAEC,OAAK,IAKbD,sCAAc,IAAI,IAAE,QAAQ,EAAE,IAAI,IAAa,CAC3C,EACJ;KACF,CAAC,CACE,CACA,EACL;GACF;EAkBM,iBAAiB,CAAC,KAAc;IACtCE,2BAAW,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE;MACtC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;IACHC,oCAAyB,CAAC,KAAK,CAAC,CAAC;GACjC;EAGM,aAAa,CAAC,KAAgC;IACpDC,wBAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;GACzC;EAEM,iBAAiB;IACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;;;;;;;;;;;;","names":["h","index","watchString","a11yHintLabelingLandmarks","watchNavLinks"],"sources":["./src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","./src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { LinkProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { watchNavLinks } from '../nav/validation';\n\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<LinkProps[]>;\n};\ntype OptionalProps = unknown;\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: LinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t{/*\n\t\t\t\t\t\t\t\t\tThis stealth link should be replaced with the kol-link-wc and\n\t\t\t\t\t\t\t\t\tstyled only inside skip-nav css.\n\t\t\t\t\t\t\t\t*/}\n\t\t\t\t\t\t\t\t<kol-link {...link} _stealth={true}></kol-link>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Setzt die Liste der darzustellenden Links.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"version":3}
+{"file":"kol-skip-nav.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,wuBAAwuB;;MC8BnvB,UAAU;;;;;iBA+BU;MAC/B,UAAU,EAAE,GAAG;MACf,MAAM,EAAE,EAAE;KACV;;EAjCM,MAAM;IACZ,QACCA,+BAAiB,IAAI,CAAC,KAAK,CAAC,UAAU,IACrCA,oBACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAEC,OAAa;MACrD,QACCD,gBAAI,GAAG,EAAEC,OAAK,IAKbD,sCAAc,IAAI,IAAE,QAAQ,EAAE,IAAI,IAAa,CAC3C,EACJ;KACF,CAAC,CACE,CACA,EACL;GACF;EAkBM,iBAAiB,CAAC,KAAc;IACtCE,2BAAW,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE;MACtC,QAAQ,EAAE,IAAI;KACd,CAAC,CAAC;IACHC,oCAAyB,CAAC,KAAK,CAAC,CAAC;GACjC;EAGM,aAAa,CAAC,KAAgC;IACpDC,wBAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;GACzC;EAEM,iBAAiB;IACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;;;;;;;;;;;;","names":["h","index","watchString","a11yHintLabelingLandmarks","watchNavLinks"],"sources":["./src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","./src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { LinkProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { watchNavLinks } from '../nav/validation';\n\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<LinkProps[]>;\n};\ntype OptionalProps = unknown;\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: LinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t{/*\n\t\t\t\t\t\t\t\t\tThis stealth link should be replaced with the kol-link-wc and\n\t\t\t\t\t\t\t\t\tstyled only inside skip-nav css.\n\t\t\t\t\t\t\t\t*/}\n\t\t\t\t\t\t\t\t<kol-link {...link} _stealth={true}></kol-link>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Setzt die Liste der darzustellenden Links.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"version":3}

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

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

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

@@ -1 +1 @@
-{"file":"kol-span.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,opBAAopB;;MCa/pB,OAAO;;;;qBAiBmC,KAAK;;;EAhBpD,MAAM;IACZ,QACCA,yBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAG,CACvB,EACb;GACF;;;;;;;;","names":["h"],"sources":["./src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","./src/components/span/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n","import { Component, h, JSX, Prop } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Iconklasse (z.B.: \"codicon codicon-home\")\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Setzt den sichtbaren Text des Elements.\n\t */\n\t@Prop() public _label!: string;\n}\n"],"version":3}
+{"file":"kol-span.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,sqBAAsqB;;MCajrB,OAAO;;;;qBAiBmC,KAAK;;;EAhBpD,MAAM;IACZ,QACCA,yBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAG,CACvB,EACb;GACF;;;;;;;;","names":["h"],"sources":["./src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","./src/components/span/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n","import { Component, h, JSX, Prop } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Iconklasse (z.B.: \"codicon codicon-home\")\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Setzt den sichtbaren Text des Elements.\n\t */\n\t@Prop() public _label!: string;\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),prop_validators=require("./prop.validators-dd1f7878.js"),i18n=require("./i18n-32046f50.js");require("./a11y.tipps-6f0ad06e.js"),require("./dev.utils-d69c0a9f.js"),require("./reuse-0fe7470f.js"),require("./index-eb52922f.js"),require("./index-a96d7f87.js");const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.spin{display:inline-block;height:1rem;position:relative;width:3rem}.spin span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-radius:50%;border:0.1rem solid #fff;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}.spin span:first-child{background-color:#fc0;z-index:0;animation:2s infinite spin1;left:0.1rem}.spin span:nth-child(2){background-color:red;z-index:1;animation:2s infinite spin2;left:0.1rem}.spin span:nth-child(3){background-color:#000;z-index:1;animation:2s infinite spin2;left:1.1rem}.spin span:nth-child(4){background-color:#666;z-index:0;animation:2s infinite spin3;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}",KolSpin=class{constructor(i){index.registerInstance(this,i),this.showToggled=!1,this._show=!1,this.state={}}render(){return index.h(index.Host,null,this.state._show?index.h("span",{"aria-busy":"true","aria-label":i18n.translate("kol-action-running"),"aria-live":"polite",class:"spin",role:"alert"},index.h("span",{class:"bg-spin-1"}),index.h("span",{class:"bg-spin-2"}),index.h("span",{class:"bg-spin-3"}),index.h("span",{class:"bg-neutral"})):this.showToggled&&index.h("span",{"aria-label":i18n.translate("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,prop_validators.watchBoolean(this,"_show",i)}componentWillLoad(){this.validateShow(this._show)}static get watchers(){return{_show:["validateShow"]}}};KolSpin.style={default:defaultStyleCss},exports.kol_spin=KolSpin;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),prop_validators=require("./prop.validators-dd1f7878.js"),i18n=require("./i18n-c10806ae.js");require("./a11y.tipps-6f0ad06e.js"),require("./dev.utils-d69c0a9f.js"),require("./reuse-0fe7470f.js"),require("./index-eb52922f.js"),require("./index-b6484e6a.js");const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.spin{display:inline-block;height:1rem;position:relative;width:3rem}.spin span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-radius:50%;border:0.1rem solid #fff;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}.spin span:first-child{background-color:#fc0;z-index:0;animation:2s infinite spin1;left:0.1rem}.spin span:nth-child(2){background-color:red;z-index:1;animation:2s infinite spin2;left:0.1rem}.spin span:nth-child(3){background-color:#000;z-index:1;animation:2s infinite spin2;left:1.1rem}.spin span:nth-child(4){background-color:#666;z-index:0;animation:2s infinite spin3;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}",KolSpin=class{constructor(i){index.registerInstance(this,i),this.showToggled=!1,this._show=!1,this.state={}}render(){return index.h(index.Host,null,this.state._show?index.h("span",{"aria-busy":"true","aria-label":i18n.translate("kol-action-running"),"aria-live":"polite",class:"spin",role:"alert"},index.h("span",{class:"bg-spin-1"}),index.h("span",{class:"bg-spin-2"}),index.h("span",{class:"bg-spin-3"}),index.h("span",{class:"bg-neutral"})):this.showToggled&&index.h("span",{"aria-label":i18n.translate("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,prop_validators.watchBoolean(this,"_show",i)}componentWillLoad(){this.validateShow(this._show)}static get watchers(){return{_show:["validateShow"]}}};KolSpin.style={default:defaultStyleCss},exports.kol_spin=KolSpin;

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

@@ -1 +1 @@
-{"file":"kol-spin.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,w8CAAw8C;;MCuBn9C,OAAO;;;IAyBX,gBAAW,GAAG,KAAK,CAAC;iBAJsB,KAAK;iBAEvB,EAAE;;EAtB3B,MAAM;IACZ,QACCA,QAACC,UAAI,QACH,IAAI,CAAC,KAAK,CAAC,KAAK,IAChBD,+BAAgB,MAAM,gBAAaE,cAAS,CAAC,oBAAoB,CAAC,eAAY,QAAQ,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,IAC/GF,kBAAM,KAAK,EAAC,WAAW,GAAQ,EAC/BA,kBAAM,KAAK,EAAC,WAAW,GAAQ,EAC/BA,kBAAM,KAAK,EAAC,WAAW,GAAQ,EAC/BA,kBAAM,KAAK,EAAC,YAAY,GAAQ,CAC1B,KAEP,IAAI,CAAC,WAAW,IAAIA,gCAAkBE,cAAS,CAAC,iBAAiB,CAAC,eAAY,OAAO,eAAW,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC7H,CACK,EACN;GACF;EAYM,YAAY,CAAC,KAAe;IAClC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;IACrEC,4BAAY,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;GACnC;EAEM,iBAAiB;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC9B;;;;;;;;;;;","names":["h","Host","translate","watchBoolean"],"sources":["./src/components/spin/style.css?tag=kol-spin&mode=default&encapsulation=shadow","./src/components/spin/component.tsx"],"sourcesContent":["@import url(../style.css);\n.spin {\n\tdisplay: inline-block;\n\theight: 1rem;\n\tposition: relative;\n\twidth: 3rem;\n}\n.spin span {\n\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\tborder-radius: 50%;\n\tborder: 0.1rem solid #fff;\n\theight: 0.8rem;\n\tposition: absolute;\n\ttop: 0.1rem;\n\twidth: 0.8rem;\n}\n.spin span:first-child {\n\tbackground-color: #fc0;\n\tz-index: 0;\n\tanimation: 2s infinite spin1;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(2) {\n\tbackground-color: red;\n\tz-index: 1;\n\tanimation: 2s infinite spin2;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(3) {\n\tbackground-color: #000;\n\tz-index: 1;\n\tanimation: 2s infinite spin2;\n\tleft: 1.1rem;\n}\n.spin span:nth-child(4) {\n\tbackground-color: #666;\n\tz-index: 0;\n\tanimation: 2s infinite spin3;\n\tleft: 2.1rem;\n}\n@keyframes spin1 {\n\t0% {\n\t\ttransform: scale(0);\n\t}\n\t100% {\n\t\ttransform: scale(1);\n\t}\n}\n@keyframes spin2 {\n\t0% {\n\t\ttransform: translate(0, 0);\n\t}\n\t100% {\n\t\ttransform: translate(1rem, 0);\n\t}\n}\n@keyframes spin3 {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\t100% {\n\t\ttransform: scale(0);\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { translate } from '../../i18n';\n\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\tshow: boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span aria-busy=\"true\" aria-label={translate('kol-action-running')} aria-live=\"polite\" class=\"spin\" role=\"alert\">\n\t\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={translate('kol-action-done')} aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.\n\t */\n\t@Prop({ reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: States = {};\n\n\tprivate showToggled = false;\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\twatchBoolean(this, '_show', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"version":3}
+{"file":"kol-spin.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,09CAA09C;;MCuBr+C,OAAO;;;IAyBX,gBAAW,GAAG,KAAK,CAAC;iBAJsB,KAAK;iBAEvB,EAAE;;EAtB3B,MAAM;IACZ,QACCA,QAACC,UAAI,QACH,IAAI,CAAC,KAAK,CAAC,KAAK,IAChBD,+BAAgB,MAAM,gBAAaE,cAAS,CAAC,oBAAoB,CAAC,eAAY,QAAQ,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,IAC/GF,kBAAM,KAAK,EAAC,WAAW,GAAQ,EAC/BA,kBAAM,KAAK,EAAC,WAAW,GAAQ,EAC/BA,kBAAM,KAAK,EAAC,WAAW,GAAQ,EAC/BA,kBAAM,KAAK,EAAC,YAAY,GAAQ,CAC1B,KAEP,IAAI,CAAC,WAAW,IAAIA,gCAAkBE,cAAS,CAAC,iBAAiB,CAAC,eAAY,OAAO,eAAW,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC7H,CACK,EACN;GACF;EAYM,YAAY,CAAC,KAAe;IAClC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;IACrEC,4BAAY,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;GACnC;EAEM,iBAAiB;IACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC9B;;;;;;;;;;;","names":["h","Host","translate","watchBoolean"],"sources":["./src/components/spin/style.css?tag=kol-spin&mode=default&encapsulation=shadow","./src/components/spin/component.tsx"],"sourcesContent":["@import url(../style.css);\n.spin {\n\tdisplay: inline-block;\n\theight: 1rem;\n\tposition: relative;\n\twidth: 3rem;\n}\n.spin span {\n\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\tborder-radius: 50%;\n\tborder: 0.1rem solid #fff;\n\theight: 0.8rem;\n\tposition: absolute;\n\ttop: 0.1rem;\n\twidth: 0.8rem;\n}\n.spin span:first-child {\n\tbackground-color: #fc0;\n\tz-index: 0;\n\tanimation: 2s infinite spin1;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(2) {\n\tbackground-color: red;\n\tz-index: 1;\n\tanimation: 2s infinite spin2;\n\tleft: 0.1rem;\n}\n.spin span:nth-child(3) {\n\tbackground-color: #000;\n\tz-index: 1;\n\tanimation: 2s infinite spin2;\n\tleft: 1.1rem;\n}\n.spin span:nth-child(4) {\n\tbackground-color: #666;\n\tz-index: 0;\n\tanimation: 2s infinite spin3;\n\tleft: 2.1rem;\n}\n@keyframes spin1 {\n\t0% {\n\t\ttransform: scale(0);\n\t}\n\t100% {\n\t\ttransform: scale(1);\n\t}\n}\n@keyframes spin2 {\n\t0% {\n\t\ttransform: translate(0, 0);\n\t}\n\t100% {\n\t\ttransform: translate(1rem, 0);\n\t}\n}\n@keyframes spin3 {\n\t0% {\n\t\ttransform: scale(1);\n\t}\n\t100% {\n\t\ttransform: scale(0);\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { translate } from '../../i18n';\n\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\tshow: boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span aria-busy=\"true\" aria-label={translate('kol-action-running')} aria-live=\"polite\" class=\"spin\" role=\"alert\">\n\t\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={translate('kol-action-done')} aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.\n\t */\n\t@Prop({ reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: States = {};\n\n\tprivate showToggled = false;\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\twatchBoolean(this, '_show', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),prop_validators=require("./prop.validators-dd1f7878.js"),i18n=require("./i18n-32046f50.js");require("./a11y.tipps-6f0ad06e.js"),require("./dev.utils-d69c0a9f.js"),require("./reuse-0fe7470f.js"),require("./index-eb52922f.js"),require("./index-a96d7f87.js");const KolSymbol=class{constructor(e){index.registerInstance(this,e),this._ariaLabel=void 0,this._symbol=void 0,this.state={_ariaLabel:i18n.translate("kol-warning"),_symbol:"…"}}render(){return index.h(index.Host,null,index.h("span",{"aria-label":this.state._ariaLabel,role:"term"},this.state._symbol))}validateAriaLabel(e){prop_validators.watchString(this,"_ariaLabel",e,{required:!0})}validateSymbol(e){prop_validators.watchString(this,"_symbol",e,{required:!0})}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateSymbol(this._symbol)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_symbol:["validateSymbol"]}}};exports.kol_symbol=KolSymbol;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),prop_validators=require("./prop.validators-dd1f7878.js"),i18n=require("./i18n-c10806ae.js");require("./a11y.tipps-6f0ad06e.js"),require("./dev.utils-d69c0a9f.js"),require("./reuse-0fe7470f.js"),require("./index-eb52922f.js"),require("./index-b6484e6a.js");const KolSymbol=class{constructor(e){index.registerInstance(this,e),this._ariaLabel=void 0,this._symbol=void 0,this.state={_ariaLabel:i18n.translate("kol-warning"),_symbol:"…"}}render(){return index.h(index.Host,null,index.h("span",{"aria-label":this.state._ariaLabel,role:"term"},this.state._symbol))}validateAriaLabel(e){prop_validators.watchString(this,"_ariaLabel",e,{required:!0})}validateSymbol(e){prop_validators.watchString(this,"_symbol",e,{required:!0})}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateSymbol(this._symbol)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_symbol:["validateSymbol"]}}};exports.kol_symbol=KolSymbol;