npm - @public-ui/components - Versions diffs - 2.0.0-rc.11 → 2.0.0-rc.12 - Mend

@public-ui/components 2.0.0-rc.11 → 2.0.0-rc.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1119) hide show

package/dist/components/kol-nav.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{e as watchBoolean,z as devWarning,G as a11yHintLabelingLandmarks,d as devHint,w as watchValidator}from"./prop.validators.js";import{a as validateHideLabel,d as defineCustomElement$3}from"./component2.js";import{v as validateLabel}from"./label.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation.js";import{d as defineCustomElement$8}from"./shadow3.js";import{d as defineCustomElement$7}from"./component11.js";import{d as defineCustomElement$6}from"./component5.js";import{d as defineCustomElement$5}from"./component.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$2}from"./component3.js";const validateCollapsible=(t,e)=>{watchBoolean(t,"_collapsible",e)},validateHasCompactButton=(t,e)=>{watchBoolean(t,"_hasCompactButton",e)},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host > div {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\tnav {\n\t\twidth: 100%;\n\t}\n\n\t.list {\n\t\tdisplay: flex;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.list.vertical {\n\t\tflex-direction: column;\n\t}\n\n\t.entry {\n\t\tdisplay: flex;\n\t}\n\n\t.button-link-text-switch {\n\t\tflex-grow: 1;\n\t}\n\n\t.entry kol-span-wc {\n\t\tjustify-items: start;\n\t}\n}\n",KolNav$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.onClick=t=>{t._active=!t._active,this.state=Object.assign({},this.state)},this.hasActiveChild=t=>!!(Array.isArray(t._children)&&t._children.length>0)&&t._children.some(this.hasActiveChild),this.linkList=t=>h("ul",{class:"list "+(0===t.deep&&"horizontal"===t.orientation?" horizontal":" vertical"),"data-deep":t.deep},t.links.map(((e,n)=>this.li(t.collapsible,t.hideLabel,t.deep,n,e,t.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hideLabel:!1,_label:"…",_links:[],_orientation:"vertical"}}entry(t,e,n,i,a){return h("div",{class:{entry:!0,"hide-label":e}},h("kol-button-link-text-switch",{class:"button-link-text-switch",_link:Object.assign(Object.assign({},i),{_hideLabel:e})}),n?this.expandButton(t,i,a):"")}expandButton(t,e,n){return h("kol-button-wc",{class:"expand-button",_ariaExpanded:n,_disabled:!t,_icons:"codicon codicon-"+(n?"remove":"add"),_hideLabel:!0,_label:`Untermenü zu ${e._label} ${n?"schließen":"öffnen"}`,_on:{onClick:()=>this.onClick(e)}})}li(t,e,n,i,a,l){const o=!!a._active,s=Array.isArray(a._children)&&a._children.length>0,r=s&&o;return h("li",{class:{active:o,expanded:r,"has-children":s},key:i},this.entry(t,e,s,a,o),r?h(this.linkList,{collapsible:t,hideLabel:e,deep:n+1,links:a._children||[],orientation:l}):"")}render(){let t=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(t=!1,devWarning("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const e=!0===this.state._collapsible,n=!0===this.state._hideLabel,i=this.state._orientation;return h(Host,null,h("div",{class:{[i]:!0}},h("nav",{"aria-label":this.state._label,id:"nav"},h(this.linkList,{collapsible:e,hideLabel:n,deep:0,links:this.state._links,orientation:i})),t&&h("div",{class:"compact"},h("kol-button",{_ariaControls:"nav",_ariaExpanded:!n,_icons:n?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:translate(n?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_variant:"ghost"}))))}validateCollapsible(t){validateCollapsible(this,t)}validateHasCompactButton(t){validateHasCompactButton(this,t)}validateHideLabel(t){validateHideLabel(this,t)}validateLabel(t,e,n=!1){n||removeNavLabel(this.state._label),validateLabel(this,t),a11yHintLabelingLandmarks(t),addNavLabel(this.state._label)}validateLinks(t){watchNavLinks("KolNav",this,t),devHint("[KolNav] Die Navigationsstruktur wird noch nicht rekursiv validiert.")}validateOrientation(t){watchValidator(this,"_orientation",(t=>"horizontal"===t||"vertical"===t),new Set(["Orientation {horizontal, vertical}"]),t,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-nav",{_collapsible:[4],_hasCompactButton:[4,"_has-compact-button"],_hideLabel:[4,"_hide-label"],_label:[1],_links:[1],_orientation:[1],state:[32]},void 0,{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-nav","kol-button","kol-button-link-text-switch","kol-button-wc","kol-icon","kol-link-wc","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-nav":customElements.get(t)||customElements.define(t,KolNav$1);break;case"kol-button":customElements.get(t)||defineCustomElement$8();break;case"kol-button-link-text-switch":customElements.get(t)||defineCustomElement$7();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$6();break;case"kol-icon":customElements.get(t)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolNav=KolNav$1,defineCustomElement=defineCustomElement$1;export{KolNav,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{e as watchBoolean,z as devWarning,G as a11yHintLabelingLandmarks,d as devHint,w as watchValidator}from"./prop.validators.js";import{a as validateHideLabel,d as defineCustomElement$3}from"./component2.js";import{v as validateLabel}from"./label.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation.js";import{d as defineCustomElement$8}from"./shadow3.js";import{d as defineCustomElement$7}from"./component11.js";import{d as defineCustomElement$6}from"./component5.js";import{d as defineCustomElement$5}from"./component.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$2}from"./component3.js";const validateCollapsible=(t,e)=>{watchBoolean(t,"_collapsible",e)},validateHasCompactButton=(t,e)=>{watchBoolean(t,"_hasCompactButton",e)},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host > div {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\tnav {\n\t\twidth: 100%;\n\t}\n\n\t.list {\n\t\tdisplay: flex;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.list.vertical {\n\t\tflex-direction: column;\n\t}\n\n\t.entry {\n\t\tdisplay: flex;\n\t}\n\n\t.button-link-text-switch {\n\t\tflex-grow: 1;\n\t}\n\n\t.entry kol-span-wc {\n\t\tjustify-items: start;\n\t}\n}\n",KolNav$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.onClick=t=>{t._active=!t._active,this.state=Object.assign({},this.state)},this.hasActiveChild=t=>!!(Array.isArray(t._children)&&t._children.length>0)&&t._children.some(this.hasActiveChild),this.linkList=t=>h("ul",{class:"list "+(0===t.deep&&"horizontal"===t.orientation?" horizontal":" vertical"),"data-deep":t.deep},t.links.map(((e,n)=>this.li(t.collapsible,t.hideLabel,t.deep,n,e,t.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hideLabel:!1,_label:"…",_links:[],_orientation:"vertical"}}entry(t,e,n,i,a){return h("div",{class:{entry:!0,"hide-label":e}},h("kol-button-link-text-switch",{class:"button-link-text-switch",_link:Object.assign(Object.assign({},i),{_hideLabel:e})}),n?this.expandButton(t,i,a):"")}expandButton(t,e,n){return h("kol-button-wc",{class:"expand-button",_ariaExpanded:n,_disabled:!t,_icons:"codicon codicon-"+(n?"remove":"add"),_hideLabel:!0,_label:`Untermenü zu ${e._label} ${n?"schließen":"öffnen"}`,_on:{onClick:()=>this.onClick(e)}})}li(t,e,n,i,a,l){const o=!!a._active,s=Array.isArray(a._children)&&a._children.length>0,r=s&&o;return h("li",{class:{active:o,expanded:r,"has-children":s},key:i},this.entry(t,e,s,a,o),r?h(this.linkList,{collapsible:t,hideLabel:e,deep:n+1,links:a._children||[],orientation:l}):"")}render(){let t=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(t=!1,devWarning("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const e=!0===this.state._collapsible,n=!0===this.state._hideLabel,i=this.state._orientation;return h(Host,null,h("div",{class:{[i]:!0}},h("nav",{"aria-label":this.state._label,id:"nav"},h(this.linkList,{collapsible:e,hideLabel:n,deep:0,links:this.state._links,orientation:i})),t&&h("div",{class:"compact"},h("kol-button",{_ariaControls:"nav",_ariaExpanded:!n,_icons:n?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:translate(n?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_variant:"ghost"}))))}validateCollapsible(t){validateCollapsible(this,t)}validateHasCompactButton(t){validateHasCompactButton(this,t)}validateHideLabel(t){validateHideLabel(this,t)}validateLabel(t,e,n=!1){n||removeNavLabel(this.state._label),validateLabel(this,t),a11yHintLabelingLandmarks(t),addNavLabel(this.state._label)}validateLinks(t){watchNavLinks("KolNav",this,t),devHint("[KolNav] Die Navigationsstruktur wird noch nicht rekursiv validiert.")}validateOrientation(t){watchValidator(this,"_orientation",(t=>"horizontal"===t||"vertical"===t),new Set(["Orientation {horizontal, vertical}"]),t,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-nav",{_collapsible:[4],_hasCompactButton:[4,"_has-compact-button"],_hideLabel:[4,"_hide-label"],_label:[1],_links:[1],_orientation:[1],state:[32]},void 0,{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-nav","kol-button","kol-button-link-text-switch","kol-button-wc","kol-icon","kol-link-wc","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-nav":customElements.get(t)||customElements.define(t,KolNav$1);break;case"kol-button":customElements.get(t)||defineCustomElement$8();break;case"kol-button-link-text-switch":customElements.get(t)||defineCustomElement$7();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$6();break;case"kol-icon":customElements.get(t)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolNav=KolNav$1,defineCustomElement=defineCustomElement$1;export{KolNav,defineCustomElement};

package/dist/components/kol-nav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-nav.js","mappings":"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","names":["KolNav"],"sources":["src/types/props/collapsible.ts","src/types/props/has-compact-button.ts","src/components/nav/style.css?tag=kol-nav&mode=default&encapsulation=shadow","src/components/nav/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types /\nexport type CollapsiblePropType = boolean;\n\n/\n Defines if navigation nodes can be collapsed or not.\n /\nexport type PropCollapsible = {\n\tcollapsible: CollapsiblePropType;\n};\n\n/ validator /\nexport const validateCollapsible = (component: Generic.Element.Component, value?: CollapsiblePropType): void => {\n\twatchBoolean(component, '_collapsible', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\ntype HasCompactButtonPropType = boolean;\n\n/\n Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n /\nexport type PropHasCompactButton = {\n\thasCompactButton: HasCompactButtonPropType;\n};\n\n/ validator /\nexport const validateHasCompactButton = (component: Generic.Element.Component, value?: HasCompactButtonPropType): void => {\n\twatchBoolean(component, '_hasCompactButton', value);\n};\n","@import url(../style.css);\n@layer kol-component {\n\t:host > div {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\tnav {\n\t\twidth: 100%;\n\t}\n\n\t.list {\n\t\tdisplay: flex;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.list.vertical {\n\t\tflex-direction: column;\n\t}\n\n\t.entry {\n\t\tdisplay: flex;\n\t}\n\n\t.button-link-text-switch {\n\t\tflex-grow: 1;\n\t}\n\n\t.entry kol-span-wc {\n\t\tjustify-items: start;\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { ButtonOrLinkOrTextWithChildrenProps, ButtonWithChildrenProps } from '../../types/button-link-text';\nimport { Stringified } from '../../types/common';\nimport { Orientation } from '../../types/orientation';\nimport { CollapsiblePropType, validateCollapsible } from '../../types/props/collapsible';\nimport { validateHasCompactButton } from '../../types/props/has-compact-button';\nimport { HideLabelPropType, validateHideLabel } from '../../types/props/hide-label';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { a11yHintLabelingLandmarks, devHint, devWarning } from '../../utils/a11y.tipps';\nimport { watchValidator } from '../../utils/prop.validators';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { API, States } from './types';\nimport { watchNavLinks } from './validation';\n\nconst linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\tif (typeof link === 'object' && typeof link._label === 'string' / && typeof newLink._href === 'string' /) {\n\t\tif (Array.isArray(link._children)) {\n\t\t\treturn linksValidator(link._children);\n\t\t}\n\t\treturn false;\n\t}\n\treturn true;\n};\n\nconst linksValidator = (links: ButtonOrLinkOrTextWithChildrenProps[]): boolean => {\n\tif (Array.isArray(links)) {\n\t\treturn links.find(linkValidator) !== undefined;\n\t}\n\treturn true;\n};\n\n@Component({\n\ttag: 'kol-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolNav implements API {\n\tprivate readonly onClick = (link: ButtonOrLinkOrTextWithChildrenProps): void => {\n\t\tlink._active = !link._active;\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t};\n\t};\n\n\tprivate readonly hasActiveChild = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\t\tif (Array.isArray(link._children) && link._children.length > 0) {\n\t\t\treturn link._children.some(this.hasActiveChild);\n\t\t}\n\n\t\treturn false;\n\t};\n\n\tprivate entry(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\thasChildren: boolean,\n\t\tlink: ButtonOrLinkOrTextWithChildrenProps,\n\t\texpanded: boolean\n\t): JSX.Element {\n\t\treturn (\n\t\t\t<div class={{ entry: true, 'hide-label': hideLabel }}>\n\t\t\t\t<kol-button-link-text-switch\n\t\t\t\t\tclass=\"button-link-text-switch\"\n\t\t\t\t\t_link={{\n\t\t\t\t\t\t...link,\n\t\t\t\t\t\t_hideLabel: hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t{hasChildren ? this.expandButton(collapsible, link as ButtonWithChildrenProps, expanded) : ''}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate expandButton(collapsible: boolean, link: ButtonWithChildrenProps, expanded: boolean): JSX.Element {\n\t\treturn (\n\t\t\t<kol-button-wc\n\t\t\t\tclass=\"expand-button\"\n\t\t\t\t_ariaExpanded={expanded}\n\t\t\t\t_disabled={!collapsible}\n\t\t\t\t_icons={'codicon codicon-' + (expanded ? 'remove' : 'add')}\n\t\t\t\t_hideLabel\n\t\t\t\t_label={`Untermenü zu ${link._label} ${expanded ? 'schließen' : 'öffnen'}`}\n\t\t\t\t_on={{ onClick: () => this.onClick(link) }}\n\t\t\t></kol-button-wc>\n\t\t);\n\t}\n\n\tprivate li(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\tdeep: number,\n\t\tindex: number,\n\t\tlink: ButtonOrLinkOrTextWithChildrenProps,\n\t\torientation: Orientation\n\t): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = hasChildren && active;\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={{\n\t\t\t\t\tactive,\n\t\t\t\t\texpanded,\n\t\t\t\t\t'has-children': hasChildren,\n\t\t\t\t}}\n\t\t\t\tkey={index}\n\t\t\t>\n\t\t\t\t{this.entry(collapsible, hideLabel, hasChildren, link, active)}\n\t\t\t\t{expanded ? (\n\t\t\t\t\t<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={deep + 1} links={link._children \|\| []} orientation={orientation} />\n\t\t\t\t) : (\n\t\t\t\t\t''\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: {\n\t\tcollapsible: boolean;\n\t\thideLabel: HideLabelPropType;\n\t\tdeep: number;\n\t\tlinks: ButtonOrLinkOrTextWithChildrenProps[];\n\t\torientation: Orientation;\n\t}): JSX.Element => {\n\t\treturn (\n\t\t\t<ul class={`list ${props.deep === 0 && props.orientation === 'horizontal' ? ' horizontal' : ' vertical'}`} data-deep={props.deep}>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tlet hasCompactButton = this.state._hasCompactButton;\n\t\tif (this.state._orientation === 'horizontal' && this.state._hasCompactButton === true) {\n\t\t\thasCompactButton = false;\n\t\t\tdevWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);\n\t\t}\n\t\tconst collapsible = this.state._collapsible === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\t\tconst orientation = this.state._orientation;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[orientation]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<nav aria-label={this.state._label} id=\"nav\">\n\t\t\t\t\t\t<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={0} links={this.state._links} orientation={orientation}></this.linkList>\n\t\t\t\t\t</nav>\n\t\t\t\t\t{hasCompactButton && (\n\t\t\t\t\t\t<div class=\"compact\">\n\t\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\t\t_ariaControls=\"nav\"\n\t\t\t\t\t\t\t\t_ariaExpanded={!hideLabel}\n\t\t\t\t\t\t\t\t_icons={hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left'}\n\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t_label={translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel: this.state._hideLabel === false,\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Defines if navigation nodes can be collapsed or not. Enabled by default.\n\t * @TODO: Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _collapsible?: boolean = true;\n\n\t/\n\t Gibt an, ob die Navigation eine zusätzliche Schaltfläche zum Aus- und Einklappen der Navigation anzeigen soll.\n\t /\n\t@Prop() public _hasCompactButton?: boolean = false;\n\n\t/\n\t Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label!: LabelPropType;\n\n\t/\n\t Defines the list of links, buttons or texts to render.\n\t /\n\t@Prop() public _links!: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>;\n\n\t/\n\t Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t@State() public state: States = {\n\t\t_collapsible: true,\n\t\t_hasCompactButton: false,\n\t\t_hideLabel: false,\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\t@Watch('_collapsible')\n\tpublic validateCollapsible(value?: CollapsiblePropType): void {\n\t\tvalidateCollapsible(this, value);\n\t}\n\n\t@Watch('_hasCompactButton')\n\tpublic validateHasCompactButton(value?: boolean): void {\n\t\tvalidateHasCompactButton(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType) {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value);\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>): void {\n\t\twatchNavLinks('KolNav', this, value);\n\t\tdevHint(`[KolNav] Die Navigationsstruktur wird noch nicht rekursiv validiert.`);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' \|\| value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t}\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCollapsible(this._collapsible);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateHasCompactButton(this._hasCompactButton);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n\n// console.log(\n// stringifyJson([\n// { _label: '1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n// { _label: '2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n// {\n// _active: true,\n// _label: '3 Navigationspunkt',\n// _href: '#abc',\n// _icons: 'codicon codicon-folder-closed',\n// _children: [\n// { _label: '3.1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n// { _label: '3.2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n// {\n// _active: true,\n// _label: '3.3 Navigationspunkt',\n// _href: '#abc',\n// _children: [\n// { _active: true, _label: '3.3.1 Navigationspunkt (aktiv)', _href: '#abc' },\n// { _label: '3.3.2 Navigationspunkt', _href: '#abc' },\n// ],\n// },\n// {\n// _label: '3.4 Navigationspunkt',\n// _href: '#abc',\n// _children: [\n// { _label: '3.4.1 Navigationspunkt', _href: '#abc' },\n// { _label: '3.4.2 Navigationspunkt', _href: '#abc' },\n// ],\n// },\n// { _label: '3.5 Navigationspunkt', _href: '#abc' },\n// ],\n// },\n// { _label: '4 Navigationspunkt', _href: '#abc' },\n// ])\n// );\n"],"version":3}
1	+ {"file":"kol-nav.js","mappings":"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","names":["KolNav"],"sources":["src/types/props/collapsible.ts","src/types/props/has-compact-button.ts","src/components/nav/style.css?tag=kol-nav&mode=default&encapsulation=shadow","src/components/nav/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types /\nexport type CollapsiblePropType = boolean;\n\n/\n Defines if navigation nodes can be collapsed or not.\n /\nexport type PropCollapsible = {\n\tcollapsible: CollapsiblePropType;\n};\n\n/ validator /\nexport const validateCollapsible = (component: Generic.Element.Component, value?: CollapsiblePropType): void => {\n\twatchBoolean(component, '_collapsible', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\ntype HasCompactButtonPropType = boolean;\n\n/\n Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n /\nexport type PropHasCompactButton = {\n\thasCompactButton: HasCompactButtonPropType;\n};\n\n/ validator /\nexport const validateHasCompactButton = (component: Generic.Element.Component, value?: HasCompactButtonPropType): void => {\n\twatchBoolean(component, '_hasCompactButton', value);\n};\n","@import url(../style.css);\n@layer kol-component {\n\t:host > div {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\tnav {\n\t\twidth: 100%;\n\t}\n\n\t.list {\n\t\tdisplay: flex;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.list.vertical {\n\t\tflex-direction: column;\n\t}\n\n\t.entry {\n\t\tdisplay: flex;\n\t}\n\n\t.button-link-text-switch {\n\t\tflex-grow: 1;\n\t}\n\n\t.entry kol-span-wc {\n\t\tjustify-items: start;\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { ButtonOrLinkOrTextWithChildrenProps, ButtonWithChildrenProps } from '../../types/button-link-text';\nimport { Stringified } from '../../types/common';\nimport { Orientation } from '../../types/orientation';\nimport { CollapsiblePropType, validateCollapsible } from '../../types/props/collapsible';\nimport { validateHasCompactButton } from '../../types/props/has-compact-button';\nimport { HideLabelPropType, validateHideLabel } from '../../types/props/hide-label';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { a11yHintLabelingLandmarks, devHint, devWarning } from '../../utils/a11y.tipps';\nimport { watchValidator } from '../../utils/prop.validators';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { API, States } from './types';\nimport { watchNavLinks } from './validation';\n\nconst linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\tif (typeof link === 'object' && typeof link._label === 'string' / && typeof newLink._href === 'string' /) {\n\t\tif (Array.isArray(link._children)) {\n\t\t\treturn linksValidator(link._children);\n\t\t}\n\t\treturn false;\n\t}\n\treturn true;\n};\n\nconst linksValidator = (links: ButtonOrLinkOrTextWithChildrenProps[]): boolean => {\n\tif (Array.isArray(links)) {\n\t\treturn links.find(linkValidator) !== undefined;\n\t}\n\treturn true;\n};\n\n@Component({\n\ttag: 'kol-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolNav implements API {\n\tprivate readonly onClick = (link: ButtonOrLinkOrTextWithChildrenProps): void => {\n\t\tlink._active = !link._active;\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t};\n\t};\n\n\tprivate readonly hasActiveChild = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\t\tif (Array.isArray(link._children) && link._children.length > 0) {\n\t\t\treturn link._children.some(this.hasActiveChild);\n\t\t}\n\n\t\treturn false;\n\t};\n\n\tprivate entry(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\thasChildren: boolean,\n\t\tlink: ButtonOrLinkOrTextWithChildrenProps,\n\t\texpanded: boolean\n\t): JSX.Element {\n\t\treturn (\n\t\t\t<div class={{ entry: true, 'hide-label': hideLabel }}>\n\t\t\t\t<kol-button-link-text-switch\n\t\t\t\t\tclass=\"button-link-text-switch\"\n\t\t\t\t\t_link={{\n\t\t\t\t\t\t...link,\n\t\t\t\t\t\t_hideLabel: hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t{hasChildren ? this.expandButton(collapsible, link as ButtonWithChildrenProps, expanded) : ''}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate expandButton(collapsible: boolean, link: ButtonWithChildrenProps, expanded: boolean): JSX.Element {\n\t\treturn (\n\t\t\t<kol-button-wc\n\t\t\t\tclass=\"expand-button\"\n\t\t\t\t_ariaExpanded={expanded}\n\t\t\t\t_disabled={!collapsible}\n\t\t\t\t_icons={'codicon codicon-' + (expanded ? 'remove' : 'add')}\n\t\t\t\t_hideLabel\n\t\t\t\t_label={`Untermenü zu ${link._label} ${expanded ? 'schließen' : 'öffnen'}`}\n\t\t\t\t_on={{ onClick: () => this.onClick(link) }}\n\t\t\t></kol-button-wc>\n\t\t);\n\t}\n\n\tprivate li(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\tdeep: number,\n\t\tindex: number,\n\t\tlink: ButtonOrLinkOrTextWithChildrenProps,\n\t\torientation: Orientation\n\t): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = hasChildren && active;\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={{\n\t\t\t\t\tactive,\n\t\t\t\t\texpanded,\n\t\t\t\t\t'has-children': hasChildren,\n\t\t\t\t}}\n\t\t\t\tkey={index}\n\t\t\t>\n\t\t\t\t{this.entry(collapsible, hideLabel, hasChildren, link, active)}\n\t\t\t\t{expanded ? (\n\t\t\t\t\t<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={deep + 1} links={link._children \|\| []} orientation={orientation} />\n\t\t\t\t) : (\n\t\t\t\t\t''\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: {\n\t\tcollapsible: boolean;\n\t\thideLabel: HideLabelPropType;\n\t\tdeep: number;\n\t\tlinks: ButtonOrLinkOrTextWithChildrenProps[];\n\t\torientation: Orientation;\n\t}): JSX.Element => {\n\t\treturn (\n\t\t\t<ul class={`list ${props.deep === 0 && props.orientation === 'horizontal' ? ' horizontal' : ' vertical'}`} data-deep={props.deep}>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tlet hasCompactButton = this.state._hasCompactButton;\n\t\tif (this.state._orientation === 'horizontal' && this.state._hasCompactButton === true) {\n\t\t\thasCompactButton = false;\n\t\t\tdevWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);\n\t\t}\n\t\tconst collapsible = this.state._collapsible === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\t\tconst orientation = this.state._orientation;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[orientation]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<nav aria-label={this.state._label} id=\"nav\">\n\t\t\t\t\t\t<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={0} links={this.state._links} orientation={orientation}></this.linkList>\n\t\t\t\t\t</nav>\n\t\t\t\t\t{hasCompactButton && (\n\t\t\t\t\t\t<div class=\"compact\">\n\t\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\t\t_ariaControls=\"nav\"\n\t\t\t\t\t\t\t\t_ariaExpanded={!hideLabel}\n\t\t\t\t\t\t\t\t_icons={hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left'}\n\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t_label={translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel: this.state._hideLabel === false,\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Defines if navigation nodes can be collapsed or not. Enabled by default.\n\t * @TODO: Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _collapsible?: boolean = true;\n\n\t/\n\t Gibt an, ob die Navigation eine zusätzliche Schaltfläche zum Aus- und Einklappen der Navigation anzeigen soll.\n\t /\n\t@Prop() public _hasCompactButton?: boolean = false;\n\n\t/\n\t Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label!: LabelPropType;\n\n\t/\n\t Defines the list of links, buttons or texts to render.\n\t /\n\t@Prop() public _links!: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>;\n\n\t/\n\t Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t@State() public state: States = {\n\t\t_collapsible: true,\n\t\t_hasCompactButton: false,\n\t\t_hideLabel: false,\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\t@Watch('_collapsible')\n\tpublic validateCollapsible(value?: CollapsiblePropType): void {\n\t\tvalidateCollapsible(this, value);\n\t}\n\n\t@Watch('_hasCompactButton')\n\tpublic validateHasCompactButton(value?: boolean): void {\n\t\tvalidateHasCompactButton(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType) {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value);\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>): void {\n\t\twatchNavLinks('KolNav', this, value);\n\t\tdevHint(`[KolNav] Die Navigationsstruktur wird noch nicht rekursiv validiert.`);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' \|\| value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t}\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCollapsible(this._collapsible);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateHasCompactButton(this._hasCompactButton);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n\n// console.log(\n// stringifyJson([\n// { _label: '1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n// { _label: '2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n// {\n// _active: true,\n// _label: '3 Navigationspunkt',\n// _href: '#abc',\n// _icons: 'codicon codicon-folder-closed',\n// _children: [\n// { _label: '3.1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n// { _label: '3.2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n// {\n// _active: true,\n// _label: '3.3 Navigationspunkt',\n// _href: '#abc',\n// _children: [\n// { _active: true, _label: '3.3.1 Navigationspunkt (aktiv)', _href: '#abc' },\n// { _label: '3.3.2 Navigationspunkt', _href: '#abc' },\n// ],\n// },\n// {\n// _label: '3.4 Navigationspunkt',\n// _href: '#abc',\n// _children: [\n// { _label: '3.4.1 Navigationspunkt', _href: '#abc' },\n// { _label: '3.4.2 Navigationspunkt', _href: '#abc' },\n// ],\n// },\n// { _label: '3.5 Navigationspunkt', _href: '#abc' },\n// ],\n// },\n// { _label: '4 Navigationspunkt', _href: '#abc' },\n// ])\n// );\n"],"version":3}

package/dist/components/kol-pagination.d.ts CHANGED Viewed

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 interface KolPagination extends Components.KolPagination, HTMLElement {}
 export const KolPagination: {
-  prototype: KolPagination;
-  new (): KolPagination;
+    prototype: KolPagination;
+    new (): KolPagination;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/kol-popover-wc.d.ts CHANGED Viewed

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 interface KolPopoverWc extends Components.KolPopoverWc, HTMLElement {}
 export const KolPopoverWc: {
-  prototype: KolPopoverWc;
-  new (): KolPopoverWc;
+    prototype: KolPopoverWc;
+    new (): KolPopoverWc;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/kol-popover-wc.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{b as alignFloatingElements,c as validateAlign}from"./align-floating-elements.js";import{v as validateShow}from"./show.js";import{m as getDocument}from"./prop.validators.js";const styleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tkol-popover {\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .popover {\n\t\tbackground-color: #fff;\n\t\tmin-height: max-content;\n\t\tmin-width: max-content;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .hidden {\n\t\tdisplay: none;\n\t}\n\n\tkol-popover .show {\n\t\tanimation: 0.3s ease-in forwards fadeInOpacity;\n\t}\n\n\tkol-popover .disappear {\n\t\tanimation: 0.3s ease-in backwards fadeInOpacity;\n\t}\n\n\tkol-popover .arrow {\n\t\tbackground-color: inherit;\n\t\theight: var(--font-size);\n\t\tposition: absolute;\n\t\trotate: 0.125turn;\n\t\twidth: var(--font-size);\n\t\tz-index: -1;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n",KolPopover=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.hidePopoverByEscape=t=>{"Escape"===t.key&&this.hidePopover()},this.hidePopoverByClickOutside=t=>{this.host&&!this.host.contains(t.target)&&this.hidePopover()},this.catchHostAndTriggerElement=t=>{t&&(this.host=t,this.triggerElement=t.previousElementSibling)},this.catchPopoverElement=t=>{this.popoverElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this._show=!1,this.state={_align:"top",_show:!1,_visible:!1}}async showPopover(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(await alignFloatingElements({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))}hidePopover(){var t;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody()}addListenersToBody(){var t;const e=getDocument().body;e.addEventListener("keyup",this.hidePopoverByEscape),e.addEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var t;const e=getDocument().body;e.removeEventListener("keyup",this.hidePopoverByEscape),e.removeEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return h(Host,{ref:this.catchHostAndTriggerElement},h("div",{class:{popover:!0,hidden:!this.state._show,show:this.state._visible},ref:this.catchPopoverElement},h("div",{class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),h("slot",null)))}validateAlign(t){validateAlign(this,t)}validateShow(t){validateShow(this,t),t&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_show:["validateShow"]}}static get style(){return styleCss}},[4,"kol-popover-wc",{_align:[1],_show:[1540],state:[32]},void 0,{_align:["validateAlign"],_show:["validateShow"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-popover-wc"].forEach((t=>{if("kol-popover-wc"===t)customElements.get(t)||customElements.define(t,KolPopover)}))}const KolPopoverWc=KolPopover,defineCustomElement=defineCustomElement$1;export{KolPopoverWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{b as alignFloatingElements,c as validateAlign}from"./align-floating-elements.js";import{v as validateShow}from"./show.js";import{m as getDocument}from"./prop.validators.js";const styleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tkol-popover {\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .popover {\n\t\tbackground-color: #fff;\n\t\tmin-height: max-content;\n\t\tmin-width: max-content;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .hidden {\n\t\tdisplay: none;\n\t}\n\n\tkol-popover .show {\n\t\tanimation: 0.3s ease-in forwards fadeInOpacity;\n\t}\n\n\tkol-popover .disappear {\n\t\tanimation: 0.3s ease-in backwards fadeInOpacity;\n\t}\n\n\tkol-popover .arrow {\n\t\tbackground-color: inherit;\n\t\theight: var(--font-size);\n\t\tposition: absolute;\n\t\trotate: 0.125turn;\n\t\twidth: var(--font-size);\n\t\tz-index: -1;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n",KolPopover=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.hidePopoverByEscape=t=>{"Escape"===t.key&&this.hidePopover()},this.hidePopoverByClickOutside=t=>{this.host&&!this.host.contains(t.target)&&this.hidePopover()},this.catchHostAndTriggerElement=t=>{t&&(this.host=t,this.triggerElement=t.previousElementSibling)},this.catchPopoverElement=t=>{this.popoverElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this._show=!1,this.state={_align:"top",_show:!1,_visible:!1}}async showPopover(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(await alignFloatingElements({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))}hidePopover(){var t;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody()}addListenersToBody(){var t;const e=getDocument().body;e.addEventListener("keyup",this.hidePopoverByEscape),e.addEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var t;const e=getDocument().body;e.removeEventListener("keyup",this.hidePopoverByEscape),e.removeEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return h(Host,{ref:this.catchHostAndTriggerElement},h("div",{class:{popover:!0,hidden:!this.state._show,show:this.state._visible},ref:this.catchPopoverElement},h("div",{class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),h("slot",null)))}validateAlign(t){validateAlign(this,t)}validateShow(t){validateShow(this,t),t&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_show:["validateShow"]}}static get style(){return styleCss}},[4,"kol-popover-wc",{_align:[1],_show:[1540],state:[32]},void 0,{_align:["validateAlign"],_show:["validateShow"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-popover-wc"].forEach((t=>{if("kol-popover-wc"===t)customElements.get(t)||customElements.define(t,KolPopover)}))}const KolPopoverWc=KolPopover,defineCustomElement=defineCustomElement$1;export{KolPopoverWc,defineCustomElement};

package/dist/components/kol-popover-wc.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-popover-wc.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,~~w/GAAw/G~~;;~~MCgB5/G~~,UAAU;;;;~~IA4Bd~~,wBAAmB,GAAG,CAAC,KAAoB;~~MAClD~~,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ;~~QAAE~~,IAAI,CAAC,WAAW,EAAE,CAAC;~~KAC~~/C,CAAC;~~IACM~~,8BAAyB,GAAG,CAAC,KAAiB;~~MACrD~~,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC,EAAE;~~QAClE~~,IAAI,CAAC,WAAW,EAAE,CAAC;~~OACnB~~;~~KACD~~,CAAC;~~IAyBM~~,+BAA0B,GAAG,CAAC,OAA2B;~~MAChE~~,IAAI,OAAO,EAAE;~~QACZ~~,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;~~QACpB~~,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,sBAA4C,CAAC;~~OAC3E~~;~~KACD~~,CAAC;~~IACM~~,wBAAmB,GAAG,CAAC,OAAwB;~~MACtD~~,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;~~KAC9B~~,CAAC;~~IACM~~,sBAAiB,GAAG,CAAC,OAAwB;~~MACpD~~,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;~~KAC5B~~,CAAC;~~kBAgBsC~~,KAAK;~~iBAMoB~~,KAAK;~~iBAEtC~~;~~MAC~~/B,MAAM,EAAE,KAAK;~~MACb~~,KAAK,EAAE,KAAK;~~MACZ~~,QAAQ,EAAE,KAAK;~~KACf~~;;~~EA7FO~~,MAAM,WAAW;~~IACxB~~,IAAI,CAAC,kBAAkB,EAAE,CAAC;~~IAE1B~~,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,EAAE;~~MAC~~/C,MAAM,qBAAqB,CAAC;~~QAC3B~~,KAAK,EAAE,IAAI,CAAC,MAAM;~~QAClB~~,gBAAgB,EAAE,IAAI,CAAC,cAAc;~~QACrC~~,YAAY,EAAE,IAAI,CAAC,YAAY;~~QAC~~/B,eAAe,EAAE,IAAI,CAAC,cAAc;~~OACpC~~,CAAC,CAAC;~~MACH~~,IAAI,CAAC,KAAK,mCAAQ,IAAI,CAAC,KAAK,KAAE,QAAQ,EAAE,IAAI,GAAE,CAAC;~~KAC~~/C;~~GACD~~;~~EACO~~,WAAW;;~~IAClB~~,IAAI,CAAC,KAAK,mCACN,IAAI,CAAC,KAAK,KACb,QAAQ,EAAE,KAAK,GACf,CAAC;~~IACF~~,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;~~IACnB~~,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,EAAE,CAAC;~~IAC7B~~,IAAI,CAAC,qBAAqB,EAAE,CAAC;~~GAC7B~~;~~EAWO~~,kBAAkB;;~~IACzB~~,MAAM,IAAI,GAAG,WAAW,EAAE,CAAC,IAAI,CAAC;~~IAChC~~,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;~~IACzD~~,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,yBAAyB,CAAC,CAAC;~~IAC~~/D,MAAA,QAAQ,CAAC,gBAAgB,0CAAE,gBAAgB,CAC1C,QAAQ,EACR;~~MACC~~,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;~~KACxB~~,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,CACjB,CAAC;~~GACF~~;~~EACO~~,qBAAqB;;~~IAC5B~~,MAAM,IAAI,GAAG,WAAW,EAAE,CAAC,IAAI,CAAC;~~IAChC~~,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;~~IAC5D~~,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,yBAAyB,CAAC,CAAC;~~IAClE~~,MAAA,QAAQ,CAAC,gBAAgB,0CAAE,mBAAmB,CAAC,QAAQ,EAAE;~~MACxD~~,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;~~KACxB~~,CAAC,CAAC;~~GACH~~;~~EAgBM~~,MAAM;~~IACZ~~,QACC,EAAC,IAAI,IAAC,GAAG,EAAE,IAAI,CAAC,0BAA0B,IACzC,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,mBAAmB,IACjH,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,iBAAiB,GAAI,EACzE,eAAQ,CACH,CACA,EACN;~~GACF~~;~~EAoBM~~,aAAa,CAAC,KAAqB;~~IACzC~~,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;~~GAC3B~~;~~EAGM~~,YAAY,CAAC,KAAoB;~~IACvC~~,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;~~IAC1B~~,IAAI,KAAK;~~MAAE~~,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;~~GACnC~~;~~EAEM~~,iBAAiB;~~IACvB~~,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;~~IAChC~~,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;~~GAC9B~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/popover/style.css?tag=kol-popover-wc","src/components/popover/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\tkol-popover {\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .popover {\n\t\tbackground-color: #fff;\n\t\tmin-height: max-content;\n\t\tmin-width: max-content;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .hidden {\n\t\tdisplay: none;\n\t}\n\n\tkol-popover .show {\n\t\tanimation: 0.3s ease-in forwards fadeInOpacity;\n\t}\n\n\tkol-popover .disappear {\n\t\tanimation: 0.3s ease-in backwards fadeInOpacity;\n\t}\n\n\tkol-popover .arrow {\n\t\tbackground-color: inherit;\n\t\theight: var(--font-size);\n\t\tposition: absolute;\n\t\trotate: 0.125turn;\n\t\twidth: var(--font-size);\n\t\tz-index: -1;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { AlignPropType, validateAlign } from '../../types/props/align';\nimport { ShowPropType, validateShow } from '../../types/props/show';\nimport { getDocument } from '../../utils/dev.utils';\nimport { API, States } from './types';\nimport { alignFloatingElements } from '../../utils/align-floating-elements';\n\n/*\n @slot - Der Inhalt des Popover.\n /\n@Component({\n\ttag: 'kol-popover-wc',\n\tstyleUrl: './style.css',\n\tshadow: false,\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\tprivate async showPopover(): Promise<void> {\n\t\tthis.addListenersToBody();\n\n\t\tif (this.triggerElement && this.popoverElement) {\n\t\t\tawait alignFloatingElements({\n\t\t\t\talign: this._align,\n\t\t\t\treferenceElement: this.triggerElement,\n\t\t\t\tarrowElement: this.arrowElement,\n\t\t\t\tfloatingElement: this.popoverElement,\n\t\t\t});\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(\n\t\t\t'scroll',\n\t\t\t() => {\n\t\t\t\tvoid this.showPopover();\n\t\t\t},\n\t\t\t{ passive: true }\n\t\t);\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', () => {\n\t\t\tvoid this.showPopover();\n\t\t});\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._align}`} 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 Defines the alignment of the tooltip, popover or tabs in relation to the element.\n\t /\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/\n\t Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_align: 'top',\n\t\t_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) void this.showPopover();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-popover-wc.js","mappings":"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","names":[],"sources":["src/components/popover/style.css?tag=kol-popover-wc","src/components/popover/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\tkol-popover {\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .popover {\n\t\tbackground-color: #fff;\n\t\tmin-height: max-content;\n\t\tmin-width: max-content;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .hidden {\n\t\tdisplay: none;\n\t}\n\n\tkol-popover .show {\n\t\tanimation: 0.3s ease-in forwards fadeInOpacity;\n\t}\n\n\tkol-popover .disappear {\n\t\tanimation: 0.3s ease-in backwards fadeInOpacity;\n\t}\n\n\tkol-popover .arrow {\n\t\tbackground-color: inherit;\n\t\theight: var(--font-size);\n\t\tposition: absolute;\n\t\trotate: 0.125turn;\n\t\twidth: var(--font-size);\n\t\tz-index: -1;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { AlignPropType, validateAlign } from '../../types/props/align';\nimport { ShowPropType, validateShow } from '../../types/props/show';\nimport { getDocument } from '../../utils/dev.utils';\nimport { API, States } from './types';\nimport { alignFloatingElements } from '../../utils/align-floating-elements';\n\n/*\n @slot - Der Inhalt des Popover.\n /\n@Component({\n\ttag: 'kol-popover-wc',\n\tstyleUrl: './style.css',\n\tshadow: false,\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\tprivate async showPopover(): Promise<void> {\n\t\tthis.addListenersToBody();\n\n\t\tif (this.triggerElement && this.popoverElement) {\n\t\t\tawait alignFloatingElements({\n\t\t\t\talign: this._align,\n\t\t\t\treferenceElement: this.triggerElement,\n\t\t\t\tarrowElement: this.arrowElement,\n\t\t\t\tfloatingElement: this.popoverElement,\n\t\t\t});\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(\n\t\t\t'scroll',\n\t\t\t() => {\n\t\t\t\tvoid this.showPopover();\n\t\t\t},\n\t\t\t{ passive: true }\n\t\t);\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', () => {\n\t\t\tvoid this.showPopover();\n\t\t});\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._align}`} 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 Defines the alignment of the tooltip, popover or tabs in relation to the element.\n\t /\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/\n\t Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_align: 'top',\n\t\t_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) void this.showPopover();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"version":3}

package/dist/components/kol-progress.d.ts CHANGED Viewed

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 interface KolProgress extends Components.KolProgress, HTMLElement {}
 export const KolProgress: {
-  prototype: KolProgress;
-  new (): KolProgress;
+    prototype: KolProgress;
+    new (): KolProgress;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/kol-progress.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{D as watchNumber,b as watchString,w as watchValidator}from"./prop.validators.js";var KoliBriProgressVariantEnum;!function(t){t.bar="bar",t.cycle="cycle",t["cycle-value-label"]="cycle-value-label",t["cycle-label-value"]="cycle-label-value"}(KoliBriProgressVariantEnum||(KoliBriProgressVariantEnum={}));const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tprogress {\n\t\tdisplay: block;\n\t\theight: 0;\n\t\toverflow: hidden;\n\t\twidth: 0;\n\t}\n\n\t.bar .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.bar .background {\n\t\tfill: lightgray;\n\t\tstroke: white;\n\t}\n\n\t.bar .progress {\n\t\tfill: #0075ff;\n\t\tstroke: transparent;\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t.cycle .background {\n\t\tfill: transparent;\n\t\tstroke: lightgray;\n\t}\n\n\t.cycle .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.cycle .whitespace {\n\t\tfill: transparent;\n\t\tstroke: white;\n\t}\n\n\t.cycle .progress {\n\t\tfill: transparent;\n\t\tstroke: #0075ff;\n\t\ttransform-origin: 50% 50%;\n\t\ttransform: rotate(-90deg);\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */\n\t@media (prefers-reduced-motion) {\n\t\t.progress {\n\t\t\ttransition-duration: 0s;\n\t\t\ttransition-delay: 0s;\n\t\t}\n\t}\n}\n",VALID_VARIANTS=Object.keys(KoliBriProgressVariantEnum),createProgressSVG=t=>{let e="43%",n=t._label?"57%":"50%";switch(t._variant){case"cycle-value-label":t._label&&(e="57%",n="43%");case"cycle":case"cycle-label-value":return h("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},h("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),h("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),h("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(t._value/t._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),t._label&&h("text",{"aria-hidden":"true",x:"50%",y:e,"text-anchor":"middle",fill:"currentColor"},t._label),h("text",{"aria-hidden":"true",x:"50%",y:n,"text-anchor":"middle",fill:"currentColor"},t._value,t._unit));default:return h("div",{class:"bar"},t._label&&h("div",null,t._label),h("div",{style:{display:"flex",gap:"0.3em"}},h("svg",{width:"100",viewBox:"0 0 102 8",xmlns:"http://www.w3.org/2000/svg"},h("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100"}),h("rect",{class:"progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:t._value/t._max*95}),h("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100"})),h("text",{"aria-hidden":"true","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},t._value,t._unit)))}},KolProcess=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return h(Host,null,createProgressSVG(this.state),h("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),h("span",{"aria-live":"polite","aria-relevant":"removals text",hidden:!0},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(t){validateLabel(this,t)}validateMax(t){"number"!=typeof t&&(t=100),watchNumber(this,"_max",t,{required:!0})}validateUnit(t){watchString(this,"_unit",t)}validateValue(t){"number"!=typeof t&&(t=0),watchNumber(this,"_value",t,{required:!0})}validateVariant(t){watchValidator(this,"_variant",(t=>"string"==typeof t&&VALID_VARIANTS.includes(t)),new Set(VALID_VARIANTS),t)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),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"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-progress",{_label:[1],_max:[2],_unit:[1],_value:[2],_variant:[1],state:[32]},void 0,{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-progress"].forEach((t=>{if("kol-progress"===t)customElements.get(t)||customElements.define(t,KolProcess)}))}const KolProgress=KolProcess,defineCustomElement=defineCustomElement$1;export{KolProgress,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{D as watchNumber,b as watchString,w as watchValidator}from"./prop.validators.js";var KoliBriProgressVariantEnum;!function(t){t.bar="bar",t.cycle="cycle",t["cycle-value-label"]="cycle-value-label",t["cycle-label-value"]="cycle-label-value"}(KoliBriProgressVariantEnum||(KoliBriProgressVariantEnum={}));const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tprogress {\n\t\tdisplay: block;\n\t\theight: 0;\n\t\toverflow: hidden;\n\t\twidth: 0;\n\t}\n\n\t.bar .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.bar .background {\n\t\tfill: lightgray;\n\t\tstroke: white;\n\t}\n\n\t.bar .progress {\n\t\tfill: #0075ff;\n\t\tstroke: transparent;\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t.cycle .background {\n\t\tfill: transparent;\n\t\tstroke: lightgray;\n\t}\n\n\t.cycle .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.cycle .whitespace {\n\t\tfill: transparent;\n\t\tstroke: white;\n\t}\n\n\t.cycle .progress {\n\t\tfill: transparent;\n\t\tstroke: #0075ff;\n\t\ttransform-origin: 50% 50%;\n\t\ttransform: rotate(-90deg);\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */\n\t@media (prefers-reduced-motion) {\n\t\t.progress {\n\t\t\ttransition-duration: 0s;\n\t\t\ttransition-delay: 0s;\n\t\t}\n\t}\n}\n",VALID_VARIANTS=Object.keys(KoliBriProgressVariantEnum),createProgressSVG=t=>{let e="43%",n=t._label?"57%":"50%";switch(t._variant){case"cycle-value-label":t._label&&(e="57%",n="43%");case"cycle":case"cycle-label-value":return h("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},h("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),h("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),h("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(t._value/t._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),t._label&&h("text",{"aria-hidden":"true",x:"50%",y:e,"text-anchor":"middle",fill:"currentColor"},t._label),h("text",{"aria-hidden":"true",x:"50%",y:n,"text-anchor":"middle",fill:"currentColor"},t._value,t._unit));default:return h("div",{class:"bar"},t._label&&h("div",null,t._label),h("div",{style:{display:"flex",gap:"0.3em"}},h("svg",{width:"100",viewBox:"0 0 102 8",xmlns:"http://www.w3.org/2000/svg"},h("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100"}),h("rect",{class:"progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:t._value/t._max*95}),h("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100"})),h("text",{"aria-hidden":"true","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},t._value,t._unit)))}},KolProcess=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return h(Host,null,createProgressSVG(this.state),h("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),h("span",{"aria-live":"polite","aria-relevant":"removals text",hidden:!0},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(t){validateLabel(this,t)}validateMax(t){"number"!=typeof t&&(t=100),watchNumber(this,"_max",t,{required:!0})}validateUnit(t){watchString(this,"_unit",t)}validateValue(t){"number"!=typeof t&&(t=0),watchNumber(this,"_value",t,{required:!0})}validateVariant(t){watchValidator(this,"_variant",(t=>"string"==typeof t&&VALID_VARIANTS.includes(t)),new Set(VALID_VARIANTS),t)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),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"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-progress",{_label:[1],_max:[2],_unit:[1],_value:[2],_variant:[1],state:[32]},void 0,{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-progress"].forEach((t=>{if("kol-progress"===t)customElements.get(t)||customElements.define(t,KolProcess)}))}const KolProgress=KolProcess,defineCustomElement=defineCustomElement$1;export{KolProgress,defineCustomElement};

package/dist/components/kol-progress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-progress.js","mappings":"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","names":[],"sources":["src/types/progress.ts","src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/component.tsx"],"sourcesContent":["export enum KoliBriProgressVariantEnum {\n\t'bar' = 'bar',\n\t'cycle' = 'cycle',\n\t'cycle-value-label' = 'cycle-value-label',\n\t'cycle-label-value' = 'cycle-label-value',\n}\n\nexport type KoliBriProgressVariantType = `${KoliBriProgressVariantEnum}`;\n","@import url(../style.css);\n@layer kol-component {\n\tprogress {\n\t\tdisplay: block;\n\t\theight: 0;\n\t\toverflow: hidden;\n\t\twidth: 0;\n\t}\n\n\t.bar .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.bar .background {\n\t\tfill: lightgray;\n\t\tstroke: white;\n\t}\n\n\t.bar .progress {\n\t\tfill: #0075ff;\n\t\tstroke: transparent;\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t.cycle .background {\n\t\tfill: transparent;\n\t\tstroke: lightgray;\n\t}\n\n\t.cycle .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.cycle .whitespace {\n\t\tfill: transparent;\n\t\tstroke: white;\n\t}\n\n\t.cycle .progress {\n\t\tfill: transparent;\n\t\tstroke: #0075ff;\n\t\ttransform-origin: 50% 50%;\n\t\ttransform: rotate(-90deg);\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion /\n\t@media (prefers-reduced-motion) {\n\t\t.progress {\n\t\t\ttransition-duration: 0s;\n\t\t\ttransition-delay: 0s;\n\t\t}\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { KoliBriProgressVariantEnum, KoliBriProgressVariantType } from '../../types/progress';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { API, States } from './types';\n\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: States): JSX.Element => {\n\tconst fullCircle = 342;\n\tconst textPositionTop = '43%';\n\tconst textPositionBottom = '57%';\n\n\tlet labelY = textPositionTop;\n\tlet valueY = state._label ? textPositionBottom : '50%';\n\tswitch (state._variant) {\n\t\tcase 'cycle-value-label':\n\t\t\tif (state._label) {\n\t\t\t\tlabelY = textPositionBottom;\n\t\t\t\tvalueY = textPositionTop;\n\t\t\t}\n\t\t// eslint-disable-next-line no-fallthrough\n\t\tcase 'cycle':\n\t\tcase 'cycle-label-value':\n\t\t\treturn (\n\t\t\t\t<svg class=\"cycle\" width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle class=\"background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) fullCircle)}px ${fullCircle}px`}\n\t\t\t\t\t\tstroke-width=\"6\"\n\t\t\t\t\t\tcx=\"60\"\n\t\t\t\t\t\tcy=\"60\"\n\t\t\t\t\t\tr=\"54.5\"\n\t\t\t\t\t></circle>\n\t\t\t\t\t{state._label && (\n\t\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={labelY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._label}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t)}\n\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={valueY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div class=\"bar\">\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 102 8\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<rect class=\"background\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100\"></rect>\n\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\t\t\tx=\"2.5\"\n\t\t\t\t\t\t\t\ty=\"2.5\"\n\t\t\t\t\t\t\t\theight=\"7\"\n\t\t\t\t\t\t\t\trx=\"3.5\"\n\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\t\t\t\twidth={95 * (state._value / state._max)}\n\t\t\t\t\t\t\t></rect>\n\t\t\t\t\t\t\t<rect class=\"border\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100\"></rect>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<text aria-hidden=\"true\" 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 API {\n\tprivate interval?: number;\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 Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label?: LabelPropType;\n\n\t/\n\t Defines at which value the progress display is completed.\n\t /\n\t@Prop() public _max!: number;\n\n\t/\n\t Defines the unit of the step values (not shown).\n\t /\n\t@Prop() public _unit?: string = '%';\n\n\t/\n\t Defines the progress.\n\t /\n\t@Prop() public _value!: number;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriProgressVariantType;\n\n\t@State() public state: States = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, 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('_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\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressVariantType): void {\n\t\twatchValidator(this, '_variant', (value) => typeof value === 'string' && VALID_VARIANTS.includes(value), new Set(VALID_VARIANTS), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\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) as unknown as number;\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-progress.js","mappings":"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","names":[],"sources":["src/types/progress.ts","src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/component.tsx"],"sourcesContent":["export enum KoliBriProgressVariantEnum {\n\t'bar' = 'bar',\n\t'cycle' = 'cycle',\n\t'cycle-value-label' = 'cycle-value-label',\n\t'cycle-label-value' = 'cycle-label-value',\n}\n\nexport type KoliBriProgressVariantType = `${KoliBriProgressVariantEnum}`;\n","@import url(../style.css);\n@layer kol-component {\n\tprogress {\n\t\tdisplay: block;\n\t\theight: 0;\n\t\toverflow: hidden;\n\t\twidth: 0;\n\t}\n\n\t.bar .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.bar .background {\n\t\tfill: lightgray;\n\t\tstroke: white;\n\t}\n\n\t.bar .progress {\n\t\tfill: #0075ff;\n\t\tstroke: transparent;\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t.cycle .background {\n\t\tfill: transparent;\n\t\tstroke: lightgray;\n\t}\n\n\t.cycle .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.cycle .whitespace {\n\t\tfill: transparent;\n\t\tstroke: white;\n\t}\n\n\t.cycle .progress {\n\t\tfill: transparent;\n\t\tstroke: #0075ff;\n\t\ttransform-origin: 50% 50%;\n\t\ttransform: rotate(-90deg);\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion /\n\t@media (prefers-reduced-motion) {\n\t\t.progress {\n\t\t\ttransition-duration: 0s;\n\t\t\ttransition-delay: 0s;\n\t\t}\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { KoliBriProgressVariantEnum, KoliBriProgressVariantType } from '../../types/progress';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { API, States } from './types';\n\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: States): JSX.Element => {\n\tconst fullCircle = 342;\n\tconst textPositionTop = '43%';\n\tconst textPositionBottom = '57%';\n\n\tlet labelY = textPositionTop;\n\tlet valueY = state._label ? textPositionBottom : '50%';\n\tswitch (state._variant) {\n\t\tcase 'cycle-value-label':\n\t\t\tif (state._label) {\n\t\t\t\tlabelY = textPositionBottom;\n\t\t\t\tvalueY = textPositionTop;\n\t\t\t}\n\t\t// eslint-disable-next-line no-fallthrough\n\t\tcase 'cycle':\n\t\tcase 'cycle-label-value':\n\t\t\treturn (\n\t\t\t\t<svg class=\"cycle\" width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle class=\"background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) fullCircle)}px ${fullCircle}px`}\n\t\t\t\t\t\tstroke-width=\"6\"\n\t\t\t\t\t\tcx=\"60\"\n\t\t\t\t\t\tcy=\"60\"\n\t\t\t\t\t\tr=\"54.5\"\n\t\t\t\t\t></circle>\n\t\t\t\t\t{state._label && (\n\t\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={labelY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._label}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t)}\n\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={valueY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div class=\"bar\">\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 102 8\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<rect class=\"background\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100\"></rect>\n\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\t\t\tx=\"2.5\"\n\t\t\t\t\t\t\t\ty=\"2.5\"\n\t\t\t\t\t\t\t\theight=\"7\"\n\t\t\t\t\t\t\t\trx=\"3.5\"\n\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\t\t\t\twidth={95 * (state._value / state._max)}\n\t\t\t\t\t\t\t></rect>\n\t\t\t\t\t\t\t<rect class=\"border\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100\"></rect>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<text aria-hidden=\"true\" 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 API {\n\tprivate interval?: number;\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 Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label?: LabelPropType;\n\n\t/\n\t Defines at which value the progress display is completed.\n\t /\n\t@Prop() public _max!: number;\n\n\t/\n\t Defines the unit of the step values (not shown).\n\t /\n\t@Prop() public _unit?: string = '%';\n\n\t/\n\t Defines the progress.\n\t /\n\t@Prop() public _value!: number;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriProgressVariantType;\n\n\t@State() public state: States = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, 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('_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\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressVariantType): void {\n\t\twatchValidator(this, '_variant', (value) => typeof value === 'string' && VALID_VARIANTS.includes(value), new Set(VALID_VARIANTS), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\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) as unknown as number;\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"version":3}

package/dist/components/kol-quote.d.ts CHANGED Viewed

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 interface KolQuote extends Components.KolQuote, HTMLElement {}
 export const KolQuote: {
-  prototype: KolQuote;
-  new (): KolQuote;
+    prototype: KolQuote;
+    new (): KolQuote;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/kol-quote.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{b as watchString,w as watchValidator,l as showExpertSlot}from"./prop.validators.js";import{d as defineCustomElement$6}from"./component.js";import{d as defineCustomElement$5}from"./shadow2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const koliBriQuoteVariantOptions=["block","inline"],defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tcite,\n\tfigure,\n\tq + figcaption {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tblockquote:before {\n\t\tcontent: open-quote;\n\t}\n\n\tblockquote::after {\n\t\tcontent: close-quote;\n\t}\n\n\tcite:before {\n\t\tcontent: '—';\n\t}\n\n\t.block cite:before {\n\t\tpadding-right: 0.5em;\n\t}\n\n\t.inline cite:before {\n\t\tpadding: 0.5em;\n\t}\n}\n",KolQuote$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateLabel(t){validateLabel(this,t)}validateHref(t){watchString(this,"_href",t,{required:!0})}validateQuote(t){watchString(this,"_quote",t,{required:!0})}validateVariant(t){watchValidator(this,"_variant",(t=>"string"==typeof t&&koliBriQuoteVariantOptions.includes(t)),new Set(koliBriQuoteVariantOptions),t)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const t=showExpertSlot(this.state._quote);return h(Host,null,h("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?h("blockquote",{cite:this.state._href},this.state._quote,h("span",{"aria-hidden":t?void 0:"true",hidden:!t},h("slot",{name:"expert"}))):h("q",{cite:this.state._href},this.state._quote,h("span",{"aria-hidden":t?void 0:"true",hidden:!t},h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&h("figcaption",null,h("cite",null,h("kol-link",{_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-quote",{_label:[1],_href:[1],_quote:[1],_variant:[1],state:[32]},void 0,{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-quote","kol-icon","kol-link","kol-link-wc","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-quote":customElements.get(t)||customElements.define(t,KolQuote$1);break;case"kol-icon":customElements.get(t)||defineCustomElement$6();break;case"kol-link":customElements.get(t)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolQuote=KolQuote$1,defineCustomElement=defineCustomElement$1;export{KolQuote,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{b as watchString,w as watchValidator,l as showExpertSlot}from"./prop.validators.js";import{d as defineCustomElement$6}from"./component.js";import{d as defineCustomElement$5}from"./shadow2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const koliBriQuoteVariantOptions=["block","inline"],defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tcite,\n\tfigure,\n\tq + figcaption {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tblockquote:before {\n\t\tcontent: open-quote;\n\t}\n\n\tblockquote::after {\n\t\tcontent: close-quote;\n\t}\n\n\tcite:before {\n\t\tcontent: '—';\n\t}\n\n\t.block cite:before {\n\t\tpadding-right: 0.5em;\n\t}\n\n\t.inline cite:before {\n\t\tpadding: 0.5em;\n\t}\n}\n",KolQuote$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateLabel(t){validateLabel(this,t)}validateHref(t){watchString(this,"_href",t,{required:!0})}validateQuote(t){watchString(this,"_quote",t,{required:!0})}validateVariant(t){watchValidator(this,"_variant",(t=>"string"==typeof t&&koliBriQuoteVariantOptions.includes(t)),new Set(koliBriQuoteVariantOptions),t)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const t=showExpertSlot(this.state._quote);return h(Host,null,h("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?h("blockquote",{cite:this.state._href},this.state._quote,h("span",{"aria-hidden":t?void 0:"true",hidden:!t},h("slot",{name:"expert"}))):h("q",{cite:this.state._href},this.state._quote,h("span",{"aria-hidden":t?void 0:"true",hidden:!t},h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&h("figcaption",null,h("cite",null,h("kol-link",{_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-quote",{_label:[1],_href:[1],_quote:[1],_variant:[1],state:[32]},void 0,{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-quote","kol-icon","kol-link","kol-link-wc","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-quote":customElements.get(t)||customElements.define(t,KolQuote$1);break;case"kol-icon":customElements.get(t)||defineCustomElement$6();break;case"kol-link":customElements.get(t)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolQuote=KolQuote$1,defineCustomElement=defineCustomElement$1;export{KolQuote,defineCustomElement};

package/dist/components/kol-quote.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-quote.js","mappings":";;;;;;;;;;;;AAKO,MAAM,0BAA0B,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU;;ACLtE,MAAM,eAAe,GAAG,~~unGAAunG~~;;~~MCeloGA~~,UAAQ;;;;;;;;~~oBAmB4B~~,QAAQ;~~iBAExB~~;~~MAC~~/B,KAAK,EAAE,GAAG;~~MACV~~,MAAM,EAAE,GAAG;~~MACX~~,QAAQ,EAAE,QAAQ;~~KAClB~~;;~~EAGM~~,aAAa,CAAC,KAAqB;~~IACzC~~,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;~~GAC3B~~;~~EAGM~~,YAAY,CAAC,KAAoB;~~IACvC~~,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;~~MACjC~~,QAAQ,EAAE,IAAI;~~KACd~~,CAAC,CAAC;~~GACH~~;~~EAGM~~,aAAa,CAAC,KAAc;~~IAClC~~,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;~~MAClC~~,QAAQ,EAAE,IAAI;~~KACd~~,CAAC,CAAC;~~GACH~~;~~EAGM~~,eAAe,CAAC,KAA2B;~~IACjD~~,cAAc,CACb,IAAI,EACJ,UAAU,EACV,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,0BAA0B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAClF,IAAI,GAAG,CAAC,0BAA0B,CAAC,EACnC,KAAK,CACL,CAAC;~~GACF~~;~~EAEM~~,iBAAiB;~~IACvB~~,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;~~IAC9B~~,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;~~IAChC~~,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;~~IAChC~~,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;~~GACpC~~;~~EAEM~~,MAAM;~~IACZ~~,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;~~IACxD~~,QACC,EAAC,IAAI,QACJ,cACC,KAAK,EAAE;~~QACN~~,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI;~~OAC3B~~,IAEA,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,OAAO,IAC/B,kBAAY,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAChC,IAAI,CAAC,KAAK,CAAC,MAAM,EAClB,2BAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7E,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACK,KAEb,SAAG,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IACvB,IAAI,CAAC,KAAK,CAAC,MAAM,EAClB,2BAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7E,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACJ,CACJ,EACA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,KACrE,sBACC,gBACC,gBAAU,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAC,QAAQ,GAAG,CAC3E,CACK,CACb,CACO,CACH,EACN;~~GACF~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolQuote"],"sources":["src/components/quote/types.ts","src/components/quote/style.css?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { PropHref } from '../../types/props/href';\nimport { PropLabel } from '../../types/props/label';\n\nexport const koliBriQuoteVariantOptions = ['block', 'inline'] as const;\nexport type KoliBriQuoteVariant = (typeof koliBriQuoteVariantOptions)[number];\n\ntype RequiredProps = {\n\tquote: string;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalProps = {\n\tvariant: KoliBriQuoteVariant;\n} & PropLabel;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tquote: string;\n\tvariant: KoliBriQuoteVariant;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalStates = PropLabel;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nexport type API = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n","@import url(../style.css);\n@layer kol-component {\n\tcite,\n\tfigure,\n\tq + figcaption {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tblockquote:before {\n\t\tcontent: open-quote;\n\t}\n\n\tblockquote::after {\n\t\tcontent: close-quote;\n\t}\n\n\tcite:before {\n\t\tcontent: '—';\n\t}\n\n\t.block cite:before {\n\t\tpadding-right: 0.5em;\n\t}\n\n\t.inline cite:before {\n\t\tpadding: 0.5em;\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HrefPropType } from '../../types/props/href';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { showExpertSlot } from '../../utils/reuse';\nimport { API, KoliBriQuoteVariant, koliBriQuoteVariantOptions, 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 API {\n\t/*\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label?: string;\n\n\t/\n\t Sets the target URI of the link or citation source.\n\t /\n\t@Prop() public _href!: HrefPropType;\n\n\t/\n\t Defines the text of the quote.\n\t /\n\t@Prop() public _quote!: string;\n\n\t/\n\t Defines which variant should be used for presentation.\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('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): 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(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value),\n\t\t\tnew Set(koliBriQuoteVariantOptions),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\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={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\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={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\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._label === 'string' && this.state._label.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._label} _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}
1	+ {"file":"kol-quote.js","mappings":";;;;;;;;;;;;AAKO,MAAM,0BAA0B,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU;;ACLtE,MAAM,eAAe,GAAG,w9GAAw9G;;MCen+GA,UAAQ;;;;;;;;wBAmB4B,QAAQ;qBAExB;YAC/B,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,QAAQ,EAAE,QAAQ;SAClB;;IAGM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC3B;IAGM,YAAY,CAAC,KAAoB;QACvC,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;YACjC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,aAAa,CAAC,KAAc;QAClC,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;YAClC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAA2B;QACjD,cAAc,CACb,IAAI,EACJ,UAAU,EACV,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,0BAA0B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAClF,IAAI,GAAG,CAAC,0BAA0B,CAAC,EACnC,KAAK,CACL,CAAC;KACF;IAEM,iBAAiB;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;IAEM,MAAM;QACZ,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxD,QACC,EAAC,IAAI,QACJ,cACC,KAAK,EAAE;gBACN,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI;aAC3B,IAEA,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,OAAO,IAC/B,kBAAY,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAChC,IAAI,CAAC,KAAK,CAAC,MAAM,EAClB,2BAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7E,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACK,KAEb,SAAG,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IACvB,IAAI,CAAC,KAAK,CAAC,MAAM,EAClB,2BAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7E,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACJ,CACJ,EACA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,KACrE,sBACC,gBACC,gBAAU,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAC,QAAQ,GAAG,CAC3E,CACK,CACb,CACO,CACH,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolQuote"],"sources":["src/components/quote/types.ts","src/components/quote/style.css?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { PropHref } from '../../types/props/href';\nimport { PropLabel } from '../../types/props/label';\n\nexport const koliBriQuoteVariantOptions = ['block', 'inline'] as const;\nexport type KoliBriQuoteVariant = (typeof koliBriQuoteVariantOptions)[number];\n\ntype RequiredProps = {\n\tquote: string;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalProps = {\n\tvariant: KoliBriQuoteVariant;\n} & PropLabel;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tquote: string;\n\tvariant: KoliBriQuoteVariant;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalStates = PropLabel;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nexport type API = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n","@import url(../style.css);\n@layer kol-component {\n\tcite,\n\tfigure,\n\tq + figcaption {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tblockquote:before {\n\t\tcontent: open-quote;\n\t}\n\n\tblockquote::after {\n\t\tcontent: close-quote;\n\t}\n\n\tcite:before {\n\t\tcontent: '—';\n\t}\n\n\t.block cite:before {\n\t\tpadding-right: 0.5em;\n\t}\n\n\t.inline cite:before {\n\t\tpadding: 0.5em;\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HrefPropType } from '../../types/props/href';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { showExpertSlot } from '../../utils/reuse';\nimport { API, KoliBriQuoteVariant, koliBriQuoteVariantOptions, 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 API {\n\t/*\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label?: string;\n\n\t/\n\t Sets the target URI of the link or citation source.\n\t /\n\t@Prop() public _href!: HrefPropType;\n\n\t/\n\t Defines the text of the quote.\n\t /\n\t@Prop() public _quote!: string;\n\n\t/\n\t Defines which variant should be used for presentation.\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('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): 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(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value),\n\t\t\tnew Set(koliBriQuoteVariantOptions),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\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={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\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={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\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._label === 'string' && this.state._label.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._label} _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/components/kol-select.d.ts CHANGED Viewed

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 interface KolSelect extends Components.KolSelect, HTMLElement {}
 export const KolSelect: {
-  prototype: KolSelect;
-  new (): KolSelect;
+    prototype: KolSelect;
+    new (): KolSelect;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/kol-skip-nav.d.ts CHANGED Viewed

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 interface KolSkipNav extends Components.KolSkipNav, HTMLElement {}
 export const KolSkipNav: {
-  prototype: KolSkipNav;
-  new (): KolSkipNav;
+    prototype: KolSkipNav;
+    new (): KolSkipNav;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/kol-skip-nav.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation.js";import{d as defineCustomElement$5}from"./component.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tul {\n\t\tdisplay: grid;\n\t\tlist-style: none;\n\t\tplace-items: center;\n\t}\n\n\tul li {\n\t\theight: 0;\n\t}\n\n\tkol-link-wc a {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\tkol-link-wc a:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tposition: unset;\n\t}\n}\n",KolSkipNav$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return h("nav",{"aria-label":this.state._label},h("ul",null,this.state._links.map(((t,n)=>h("li",{key:n},h("kol-link-wc",Object.assign({},t)))))))}validateLabel(t,n,e=!1){e||removeNavLabel(this.state._label),validateLabel(this,t),addNavLabel(this.state._label)}validateLinks(t){watchNavLinks("KolSkipNav",this,t)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-skip-nav",{_label:[1],_links:[1],state:[32]},void 0,{_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-skip-nav","kol-icon","kol-link-wc","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-skip-nav":customElements.get(t)||customElements.define(t,KolSkipNav$1);break;case"kol-icon":customElements.get(t)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolSkipNav=KolSkipNav$1,defineCustomElement=defineCustomElement$1;export{KolSkipNav,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation.js";import{d as defineCustomElement$5}from"./component.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tul {\n\t\tdisplay: grid;\n\t\tlist-style: none;\n\t\tplace-items: center;\n\t}\n\n\tul li {\n\t\theight: 0;\n\t}\n\n\tkol-link-wc a {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\tkol-link-wc a:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tposition: unset;\n\t}\n}\n",KolSkipNav$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return h("nav",{"aria-label":this.state._label},h("ul",null,this.state._links.map(((t,n)=>h("li",{key:n},h("kol-link-wc",Object.assign({},t)))))))}validateLabel(t,n,e=!1){e||removeNavLabel(this.state._label),validateLabel(this,t),addNavLabel(this.state._label)}validateLinks(t){watchNavLinks("KolSkipNav",this,t)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-skip-nav",{_label:[1],_links:[1],state:[32]},void 0,{_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-skip-nav","kol-icon","kol-link-wc","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-skip-nav":customElements.get(t)||customElements.define(t,KolSkipNav$1);break;case"kol-icon":customElements.get(t)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolSkipNav=KolSkipNav$1,defineCustomElement=defineCustomElement$1;export{KolSkipNav,defineCustomElement};

package/dist/components/kol-skip-nav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-skip-nav.js","mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG~~,8mGAA8mG~~;;~~MCgBznGA~~,YAAU;;;;;;;~~iBA2BU~~;~~MAC~~/B,MAAM,EAAE,GAAG;~~MACX~~,MAAM,EAAE,EAAE;~~KACV~~;;~~EA7BM~~,MAAM;~~IACZ~~,QACC,yBAAiB,IAAI,CAAC,KAAK,CAAC,MAAM,IACjC,cACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,KAAa;~~MACrD~~,QACC,UAAI,GAAG,EAAE,KAAK,IACb,mCAAiB,IAAI,EAAgB,CACjC,EACJ;~~KACF~~,CAAC,CACE,CACA,EACL;~~GACF~~;~~EAkBM~~,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;~~IACrF~~,IAAI,CAAC,OAAO,EAAE;~~MACb~~,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;~~KAClC~~;~~IACD~~,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;~~IAC3B~~,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;~~GAC~~/B;~~EAGM~~,aAAa,CAAC,KAAgC;~~IACpD~~,aAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;~~GACzC~~;~~EAEM~~,iBAAiB;~~IACvB~~,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;~~IACjD~~,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;~~GAChC~~;~~EAEM~~,oBAAoB;~~IAC1B~~,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;~~GAClC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolSkipNav"],"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);\n@layer kol-component {\n\tul {\n\t\tdisplay: grid;\n\t\tlist-style: none;\n\t\tplace-items: center;\n\t}\n\n\tul li {\n\t\theight: 0;\n\t}\n\n\tkol-link-wc a {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\tkol-link-wc a:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tposition: unset;\n\t}\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { LinkProps } from '../link/types';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, States } from './types';\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 API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._label}>\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<kol-link-wc {...link}></kol-link-wc>\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 Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label!: LabelPropType;\n\n\t/\n\t Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-skip-nav.js","mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,+8GAA+8G;;MCgB19GA,YAAU;;;;;;;qBA2BU;YAC/B,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,EAAE;SACV;;IA7BM,MAAM;QACZ,QACC,yBAAiB,IAAI,CAAC,KAAK,CAAC,MAAM,IACjC,cACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,KAAa;YACrD,QACC,UAAI,GAAG,EAAE,KAAK,IACb,mCAAiB,IAAI,EAAgB,CACjC,EACJ;SACF,CAAC,CACE,CACA,EACL;KACF;IAkBM,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;QACrF,IAAI,CAAC,OAAO,EAAE;YACb,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAClC;QACD,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC3B,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAC/B;IAGM,aAAa,CAAC,KAAgC;QACpD,aAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACzC;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;IAEM,oBAAoB;QAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolSkipNav"],"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);\n@layer kol-component {\n\tul {\n\t\tdisplay: grid;\n\t\tlist-style: none;\n\t\tplace-items: center;\n\t}\n\n\tul li {\n\t\theight: 0;\n\t}\n\n\tkol-link-wc a {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\tkol-link-wc a:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tposition: unset;\n\t}\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { LinkProps } from '../link/types';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, States } from './types';\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 API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._label}>\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<kol-link-wc {...link}></kol-link-wc>\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 Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label!: LabelPropType;\n\n\t/\n\t Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}

package/dist/components/kol-span-wc.d.ts CHANGED Viewed

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 interface KolSpanWc extends Components.KolSpanWc, HTMLElement {}
 export const KolSpanWc: {
-  prototype: KolSpanWc;
-  new (): KolSpanWc;
+    prototype: KolSpanWc;
+    new (): KolSpanWc;
 };
 /**
  * Used to define this component and all nested components recursively.