@public-ui/components 4.0.0-beta.1 → 4.0.0-rc.1

package/dist/components/kol-icon.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{h as watchString}from"./common.js";import{v as validateLabel}from"./label.js";import{c as clsx}from"./clsx.js";import{a as BEM_CLASS_ICON,b as BEM_CLASS_ICON__ICON}from"./bem.js";class IconController{constructor(n){this.component=n}validateIcons(n){watchString(this.component,"_icons",n,{required:!0})}validateLabel(n){validateLabel(this.component,n,{required:!0,defaultValue:""})}componentWillLoad(){this.validateIcons(this.component._icons),this.validateLabel(this.component._label)}}const defaultStyleCss='/* forward the rem function */\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1766411598417"); /* IE9*/\n  src: url("kolicons.eot?t=1766411598417#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1766411598417") format("woff2"), url("kolicons.woff?t=1766411598417") format("woff"), url("kolicons.ttf?t=1766411598417") format("truetype"), url("kolicons.svg?t=1766411598417#kolicons") format("svg"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=" kolicon-"] {\n  font-family: "kolicons" !important;\n  font-size: 16px;\n  font-style: normal;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: "\\ea01";\n}\n\n.kolicon-alert-info::before {\n  content: "\\ea02";\n}\n\n.kolicon-alert-success::before {\n  content: "\\ea03";\n}\n\n.kolicon-alert-warning::before {\n  content: "\\ea04";\n}\n\n.kolicon-check::before {\n  content: "\\ea05";\n}\n\n.kolicon-chevron-double-left::before {\n  content: "\\ea06";\n}\n\n.kolicon-chevron-double-right::before {\n  content: "\\ea07";\n}\n\n.kolicon-chevron-down::before {\n  content: "\\ea08";\n}\n\n.kolicon-chevron-left::before {\n  content: "\\ea09";\n}\n\n.kolicon-chevron-right::before {\n  content: "\\ea0a";\n}\n\n.kolicon-chevron-up::before {\n  content: "\\ea0b";\n}\n\n.kolicon-cogwheel::before {\n  content: "\\ea0c";\n}\n\n.kolicon-cross::before {\n  content: "\\ea0d";\n}\n\n.kolicon-eye-closed::before {\n  content: "\\ea0e";\n}\n\n.kolicon-eye::before {\n  content: "\\ea0f";\n}\n\n.kolicon-kolibri::before {\n  content: "\\ea10";\n}\n\n.kolicon-link-external::before {\n  content: "\\ea11";\n}\n\n.kolicon-link::before {\n  content: "\\ea12";\n}\n\n.kolicon-minus::before {\n  content: "\\ea13";\n}\n\n.kolicon-plus::before {\n  content: "\\ea14";\n}\n\n.kolicon-settings::before {\n  content: "\\ea15";\n}\n\n.kolicon-sort-asc::before {\n  content: "\\ea16";\n}\n\n.kolicon-sort-desc::before {\n  content: "\\ea17";\n}\n\n.kolicon-sort-neutral::before {\n  content: "\\ea18";\n}\n\n.kolicon-version::before {\n  content: "\\ea19";\n}\n\n@layer kol-component {\n  /* :host implicitly inherits font-size, see below */\n  :host {\n    color: inherit;\n    display: contents;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}',KolIcon$1=proxyCustomElement(class extends HTMLElement{render(){const n=this.state._label.length>0;return h(Host,{key:"0310e88acca66642d5a2f1b0783c4b51e7d57178",exportparts:"icon",class:BEM_CLASS_ICON},h("i",{key:"defda52dda0896dfc3aa3271e34a679cad2d81de","aria-hidden":n?void 0:"true","aria-label":n?this.state._label:void 0,class:clsx(BEM_CLASS_ICON__ICON,this.state._icons),part:"icon",role:n?"img":"presentation"}))}constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.state={_icons:"kolicon-logo",_label:""},this.controller=new IconController(this)}validateIcons(n){this.controller.validateIcons(n)}validateLabel(n){this.controller.validateLabel(n)}componentWillLoad(){this.controller.componentWillLoad()}static get watchers(){return{_icons:["validateIcons"],_label:["validateLabel"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-icon",{_icons:[1],_label:[1],state:[32]},void 0,{_icons:["validateIcons"],_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-icon"].forEach(n=>{if("kol-icon"===n)customElements.get(n)||customElements.define(n,KolIcon$1)})}const KolIcon=KolIcon$1,defineCustomElement=defineCustomElement$1;export{KolIcon,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{h as watchString}from"./common.js";import{v as validateLabel}from"./label.js";import{c as clsx}from"./clsx.js";import{a as BEM_CLASS_ICON,b as BEM_CLASS_ICON__ICON}from"./bem.js";class IconController{constructor(n){this.component=n}validateIcons(n){watchString(this.component,"_icons",n,{required:!0})}validateLabel(n){validateLabel(this.component,n,{required:!0,defaultValue:""})}componentWillLoad(){this.validateIcons(this.component._icons),this.validateLabel(this.component._label)}}const defaultStyleCss='/* forward the rem function */\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1767874565399"); /* IE9*/\n  src: url("kolicons.eot?t=1767874565399#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1767874565399") format("woff2"), url("kolicons.woff?t=1767874565399") format("woff"), url("kolicons.ttf?t=1767874565399") format("truetype"), url("kolicons.svg?t=1767874565399#kolicons") format("svg"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=" kolicon-"] {\n  font-family: "kolicons";\n  font-size: inherit;\n  font-style: normal;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: "\\ea01";\n}\n\n.kolicon-alert-info::before {\n  content: "\\ea02";\n}\n\n.kolicon-alert-success::before {\n  content: "\\ea03";\n}\n\n.kolicon-alert-warning::before {\n  content: "\\ea04";\n}\n\n.kolicon-check::before {\n  content: "\\ea05";\n}\n\n.kolicon-chevron-double-left::before {\n  content: "\\ea06";\n}\n\n.kolicon-chevron-double-right::before {\n  content: "\\ea07";\n}\n\n.kolicon-chevron-down::before {\n  content: "\\ea08";\n}\n\n.kolicon-chevron-left::before {\n  content: "\\ea09";\n}\n\n.kolicon-chevron-right::before {\n  content: "\\ea0a";\n}\n\n.kolicon-chevron-up::before {\n  content: "\\ea0b";\n}\n\n.kolicon-cogwheel::before {\n  content: "\\ea0c";\n}\n\n.kolicon-cross::before {\n  content: "\\ea0d";\n}\n\n.kolicon-eye-closed::before {\n  content: "\\ea0e";\n}\n\n.kolicon-eye::before {\n  content: "\\ea0f";\n}\n\n.kolicon-house::before {\n  content: "\\ea10";\n}\n\n.kolicon-kolibri::before {\n  content: "\\ea11";\n}\n\n.kolicon-link-external::before {\n  content: "\\ea12";\n}\n\n.kolicon-link::before {\n  content: "\\ea13";\n}\n\n.kolicon-minus::before {\n  content: "\\ea14";\n}\n\n.kolicon-plus::before {\n  content: "\\ea15";\n}\n\n.kolicon-settings::before {\n  content: "\\ea16";\n}\n\n.kolicon-sort-asc::before {\n  content: "\\ea17";\n}\n\n.kolicon-sort-desc::before {\n  content: "\\ea18";\n}\n\n.kolicon-sort-neutral::before {\n  content: "\\ea19";\n}\n\n.kolicon-version::before {\n  content: "\\ea1a";\n}\n\n@layer kol-component {\n  /* :host implicitly inherits font-size, see below */\n  :host {\n    color: inherit;\n    display: contents;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}',KolIcon$1=proxyCustomElement(class extends HTMLElement{render(){const n=this.state._label.length>0;return h(Host,{key:"0310e88acca66642d5a2f1b0783c4b51e7d57178",exportparts:"icon",class:BEM_CLASS_ICON},h("i",{key:"defda52dda0896dfc3aa3271e34a679cad2d81de","aria-hidden":n?void 0:"true","aria-label":n?this.state._label:void 0,class:clsx(BEM_CLASS_ICON__ICON,this.state._icons),part:"icon",role:n?"img":"presentation"}))}constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.state={_icons:"kolicon-logo",_label:""},this.controller=new IconController(this)}validateIcons(n){this.controller.validateIcons(n)}validateLabel(n){this.controller.validateLabel(n)}componentWillLoad(){this.controller.componentWillLoad()}static get watchers(){return{_icons:["validateIcons"],_label:["validateLabel"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-icon",{_icons:[1],_label:[1],state:[32]},void 0,{_icons:["validateIcons"],_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-icon"].forEach(n=>{if("kol-icon"===n)customElements.get(n)||customElements.define(n,KolIcon$1)})}const KolIcon=KolIcon$1,defineCustomElement=defineCustomElement$1;export{KolIcon,defineCustomElement};

package/dist/components/kol-icon.js.map

@@ -1 +1 @@
-{"file":"kol-icon.js","mappings":";;;;;;;;;MAMa,cAAc,CAAA;AAG1B,IAAA,WAAA,CAAmB,SAAoB,EAAA;AACtC,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS;;AAGpB,IAAA,aAAa,CAAC,KAAc,EAAA;AAClC,QAAA,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;AAG1D,IAAA,aAAa,CAAC,KAAqB,EAAA;AACzC,QAAA,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;;IAGpE,iBAAiB,GAAA;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;QACzC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;;AAE1C;;ACzBD,MAAM,eAAe,GAAG,q3EAAq3E;;MCkBh4EA,SAAO,GAAAC,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;IAEZ,MAAM,GAAA;QACZ,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;AACjD,QAAA,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,MAAM,EAAC,KAAK,EAAE,cAAc,EAAA,EAC7C,CAOc,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAA,YAAY,GAAG,SAAS,GAAG,MAAM,EAAA,YAAA,EAClC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,EACxD,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EACpD,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,YAAY,GAAG,KAAK,GAAG,cAAc,EAAA,CACvC,CACC;;AAmBT,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;QALgB,IAAA,CAAA,KAAK,GAAe;AACnC,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,MAAM,EAAE,EAAE;SACV;QAGA,IAAI,CAAC,UAAU,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC;AAC1C;AAGM,IAAA,aAAa,CAAC,KAAc,EAAA;AAClC,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC;;AAI9B,IAAA,aAAa,CAAC,KAAqB,EAAA;AACzC,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC;;IAG9B,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolIcon","__stencil_proxyCustomElement"],"sources":["src/components/icon/controller.ts","src/components/icon/style.scss?tag=kol-icon&mode=default&encapsulation=shadow","src/components/icon/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { IconProps, IconWatches, LabelPropType } from '../../schema';\nimport { validateLabel, watchString } from '../../schema';\n\ntype Component = Generic.Element.Component & IconProps;\n\nexport class IconController implements IconWatches {\n\tprotected readonly component: Component;\n\n\tpublic constructor(component: Component) {\n\t\tthis.component = component;\n\t}\n\n\tpublic validateIcons(value?: string): void {\n\t\twatchString(this.component, '_icons', value, { required: true });\n\t}\n\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this.component, value, { required: true, defaultValue: '' });\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcons(this.component._icons);\n\t\tthis.validateLabel(this.component._label);\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../../../assets/kolicons/style' as *;\n\n@layer kol-component {\n\t/* :host implicitly inherits font-size, see below */\n\t:host {\n\t\tcolor: inherit;\n\t\tdisplay: contents;\n\n\t\tfont-size: inherit;\n\t\tfont-weight: inherit;\n\t\tline-height: inherit;\n\t}\n}\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { IconAPI, IconStates, LabelPropType } from '../../schema';\nimport { IconController } from './controller';\n\nimport type { JSX } from '@stencil/core';\nimport clsx from 'clsx';\nimport { BEM_CLASS_ICON, BEM_CLASS_ICON__ICON } from './bem';\n\n/**\n * @part icon - Ermöglicht das Styling des inneren Icons.\n */\n@Component({\n\ttag: 'kol-icon',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolIcon implements IconAPI {\n\tprivate readonly controller: IconController;\n\tpublic render(): JSX.Element {\n\t\tconst hasAriaLabel = this.state._label.length > 0;\n\t\treturn (\n\t\t\t<Host exportparts=\"icon\" class={BEM_CLASS_ICON}>\n\t\t\t\t<i\n\t\t\t\t\t/**\n\t\t\t\t\t * Die Auszeichnung `aria-hidden` ist eigentlich nicht erforderlich, da die aktuellen\n\t\t\t\t\t * Screenreader, wie NVDA und JAWS, es auch ohne `aria-hidden` nicht vorlesen.\n\t\t\t\t\t *\n\t\t\t\t\t * Referenz: https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden\n\t\t\t\t\t */\n\t\t\t\t\taria-hidden={hasAriaLabel ? undefined : 'true'}\n\t\t\t\t\taria-label={hasAriaLabel ? this.state._label : undefined}\n\t\t\t\t\tclass={clsx(BEM_CLASS_ICON__ICON, this.state._icons)}\n\t\t\t\t\tpart=\"icon\"\n\t\t\t\t\trole={hasAriaLabel ? 'img' : 'presentation'}\n\t\t\t\t></i>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons!: string;\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@State() public state: IconStates = {\n\t\t_icons: 'kolicon-logo',\n\t\t_label: '', // ⚠ required\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new IconController(this);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: string): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"version":3}
+{"file":"kol-icon.js","mappings":";;;;;;;;;MAMa,cAAc,CAAA;AAG1B,IAAA,WAAA,CAAmB,SAAoB,EAAA;AACtC,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS;;AAGpB,IAAA,aAAa,CAAC,KAAc,EAAA;AAClC,QAAA,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;AAG1D,IAAA,aAAa,CAAC,KAAqB,EAAA;AACzC,QAAA,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;;IAGpE,iBAAiB,GAAA;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;QACzC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;;AAE1C;;ACzBD,MAAM,eAAe,GAAG,o6EAAo6E;;MCkB/6EA,SAAO,GAAAC,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;IAEZ,MAAM,GAAA;QACZ,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;AACjD,QAAA,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,MAAM,EAAC,KAAK,EAAE,cAAc,EAAA,EAC7C,CAOc,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAA,YAAY,GAAG,SAAS,GAAG,MAAM,EAAA,YAAA,EAClC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,EACxD,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EACpD,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,YAAY,GAAG,KAAK,GAAG,cAAc,EAAA,CACvC,CACC;;AAmBT,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;QALgB,IAAA,CAAA,KAAK,GAAe;AACnC,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,MAAM,EAAE,EAAE;SACV;QAGA,IAAI,CAAC,UAAU,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC;AAC1C;AAGM,IAAA,aAAa,CAAC,KAAc,EAAA;AAClC,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC;;AAI9B,IAAA,aAAa,CAAC,KAAqB,EAAA;AACzC,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC;;IAG9B,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolIcon","__stencil_proxyCustomElement"],"sources":["src/components/icon/controller.ts","src/components/icon/style.scss?tag=kol-icon&mode=default&encapsulation=shadow","src/components/icon/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { IconProps, IconWatches, LabelPropType } from '../../schema';\nimport { validateLabel, watchString } from '../../schema';\n\ntype Component = Generic.Element.Component & IconProps;\n\nexport class IconController implements IconWatches {\n\tprotected readonly component: Component;\n\n\tpublic constructor(component: Component) {\n\t\tthis.component = component;\n\t}\n\n\tpublic validateIcons(value?: string): void {\n\t\twatchString(this.component, '_icons', value, { required: true });\n\t}\n\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this.component, value, { required: true, defaultValue: '' });\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcons(this.component._icons);\n\t\tthis.validateLabel(this.component._label);\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../../../assets/kolicons/style' as *;\n\n@layer kol-component {\n\t/* :host implicitly inherits font-size, see below */\n\t:host {\n\t\tcolor: inherit;\n\t\tdisplay: contents;\n\n\t\tfont-size: inherit;\n\t\tfont-weight: inherit;\n\t\tline-height: inherit;\n\t}\n}\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { IconAPI, IconStates, LabelPropType } from '../../schema';\nimport { IconController } from './controller';\n\nimport type { JSX } from '@stencil/core';\nimport clsx from 'clsx';\nimport { BEM_CLASS_ICON, BEM_CLASS_ICON__ICON } from './bem';\n\n/**\n * @part icon - Ermöglicht das Styling des inneren Icons.\n */\n@Component({\n\ttag: 'kol-icon',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolIcon implements IconAPI {\n\tprivate readonly controller: IconController;\n\tpublic render(): JSX.Element {\n\t\tconst hasAriaLabel = this.state._label.length > 0;\n\t\treturn (\n\t\t\t<Host exportparts=\"icon\" class={BEM_CLASS_ICON}>\n\t\t\t\t<i\n\t\t\t\t\t/**\n\t\t\t\t\t * Die Auszeichnung `aria-hidden` ist eigentlich nicht erforderlich, da die aktuellen\n\t\t\t\t\t * Screenreader, wie NVDA und JAWS, es auch ohne `aria-hidden` nicht vorlesen.\n\t\t\t\t\t *\n\t\t\t\t\t * Referenz: https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden\n\t\t\t\t\t */\n\t\t\t\t\taria-hidden={hasAriaLabel ? undefined : 'true'}\n\t\t\t\t\taria-label={hasAriaLabel ? this.state._label : undefined}\n\t\t\t\t\tclass={clsx(BEM_CLASS_ICON__ICON, this.state._icons)}\n\t\t\t\t\tpart=\"icon\"\n\t\t\t\t\trole={hasAriaLabel ? 'img' : 'presentation'}\n\t\t\t\t></i>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons!: string;\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@State() public state: IconStates = {\n\t\t_icons: 'kolicon-logo',\n\t\t_label: '', // ⚠ required\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new IconController(this);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: string): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"version":3}

package/dist/components/kol-input-number.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{F as FormFieldStateWrapper}from"./controller2.js";import{I as InputIconController,a as InputContainerStateWrapperFc}from"./controller-icon.js";import{I as InputStateWrapper}from"./InputStateWrapper.js";import"./Alert.js";import"./common.js";import"./i18n.js";import{K as KolIconFc}from"./Icon.js";import"./markdown.js";import{n as nonce}from"./dev.utils.js";import{p as propagateSubmitEventToForm}from"./controller.js";import{v as validateAutoComplete}from"./auto-complete.js";import{v as validatePlaceholder}from"./placeholder.js";import{v as validateReadOnly}from"./read-only.js";import{v as validateRequired}from"./required.js";import{v as validateSuggestions}from"./suggestions.js";class InputNumberController extends InputIconController{constructor(e,t,n){super(e,t,n),this.component=e}validateAutoComplete(e){validateAutoComplete(this.component,e)}validateSuggestions(e){validateSuggestions(this.component,e)}validateMax(e){this.validateNumber("_max",e)}validateMin(e){this.validateNumber("_min",e)}validatePlaceholder(e){validatePlaceholder(this.component,e)}validateReadOnly(e){validateReadOnly(this.component,e)}validateRequired(e){validateRequired(this.component,e)}validateStep(e){this.validateNumber("_step",e)}validateValue(e){this.validateNumber("_value",e),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateSuggestions(this.component._suggestions),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateValue(this.component._value)}}const defaultStyleCss='/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-input-number input {\n    appearance: textfield;\n    text-align: right;\n  }\n  .kol-input-number input::-webkit-inner-spin-button {\n    display: none;\n  }\n}',KolInputNumber$1=proxyCustomElement(class extends HTMLElement{async getValue(){return this.remapValue(this.state._value)}async focus(){var e;return Promise.resolve(null===(e=this.inputRef)||void 0===e?void 0:e.focus())}setInitialValueType(e){this.controller.isNumberString(e)?this._initialValueType="NumberString":"number"!=typeof e||isNaN(e)?this._initialValueType="null":this._initialValueType="number"}remapValue(e){return null==e?null:"NumberString"===this._initialValueType?String(e):e}getFormFieldProps(){return{state:this.state,class:clsx("kol-input-number","number",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,type:"number"},this.controller.onFacade),{onInput:this.onInput,onChange:this.onChange,onKeyDown:this.onKeyDown,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}getStepUpButton(){return this._disabled||this._readOnly?null:h("button",{type:"button",tabIndex:-1,class:"kol-input-number__step-button kol-input-number__step-button-up kol-input-container__smart-button","data-testid":"kol-input-number-step-up",onClick:()=>{var e,t;null===(e=this.inputRef)||void 0===e||e.stepUp(),null===(t=this.inputRef)||void 0===t||t.focus()},disabled:this._disabled||this._readOnly},h(KolIconFc,{icons:"kolicon-plus",label:""}))}getStepDownButton(){return this._disabled||this._readOnly?null:h("button",{type:"button",tabIndex:-1,class:"kol-input-number__step-button kol-input-number__step-button-down kol-input-container__smart-button","data-testid":"kol-input-number-step-down",onClick:()=>{var e,t;null===(e=this.inputRef)||void 0===e||e.stepDown(),null===(t=this.inputRef)||void 0===t||t.focus()},disabled:this._disabled||this._readOnly},h(KolIconFc,{icons:"kolicon-minus",label:""}))}render(){return h(FormFieldStateWrapper,Object.assign({key:"07aa7fdbf82349d7f5a44a5996520b1c24e49731"},this.getFormFieldProps()),h(InputContainerStateWrapperFc,{key:"0fed1f5634f212f5909eb9296b180b7ed4ca5014",state:this.state,startAdornment:this.getStepDownButton(),endAdornment:this.getStepUpButton()},h(InputStateWrapper,Object.assign({key:"829301460ae419b52ca49329154788966a09d49d"},this.getInputProps()))))}constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.inputRef=e},this.onInput=e=>{var t;const n=null===(t=this.inputRef)||void 0===t?void 0:t.value;this._value=this.remapValue(""===n?null:Number(n)),this.controller.onFacade.onInput(e,!0,this._value)},this.onChange=e=>{var t;const n=null===(t=this.inputRef)||void 0===t?void 0:t.value,i=this.remapValue(""===n?null:Number(n));this.controller.onFacade.onChange(e,i)},this.onKeyDown=e=>{this.controller.onFacade.onKeyDown(e),"Enter"!==e.code&&"NumpadEnter"!==e.code||propagateSubmitEventToForm({form:this.host})},this._autoComplete="off",this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._readOnly=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[]},this._initialValueType="null",this.inputHasFocus=!1,this.controller=new InputNumberController(this,"number",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMax(e){this.controller.validateMax(e)}validateMin(e){this.controller.validateMin(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateStep(e){this.controller.validateStep(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),null!=e&&this.setInitialValueType(e)}componentWillLoad(){void 0!==this._value&&this.setInitialValueType(this._value),this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-input-number",{_accessKey:[1,"_access-key"],_autoComplete:[1,"_auto-complete"],_disabled:[4],_hideMsg:[4,"_hide-msg"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_max:[8],_min:[8],_msg:[1],_name:[1],_on:[16],_placeholder:[1],_readOnly:[4,"_read-only"],_required:[4],_shortKey:[1,"_short-key"],_smartButton:[1,"_smart-button"],_suggestions:[1],_step:[8],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1544],state:[32],_initialValueType:[32],inputHasFocus:[32],getValue:[64],focus:[64]},void 0,{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-number"].forEach(e=>{if("kol-input-number"===e)customElements.get(e)||customElements.define(e,KolInputNumber$1)})}const KolInputNumber=KolInputNumber$1,defineCustomElement=defineCustomElement$1;export{KolInputNumber,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{F as FormFieldStateWrapper}from"./controller2.js";import{I as InputIconController,a as InputContainerStateWrapperFc}from"./controller-icon.js";import{I as InputStateWrapper}from"./InputStateWrapper.js";import"./Alert.js";import"./common.js";import"./i18n.js";import{K as KolIconFc}from"./Icon.js";import"./markdown.js";import{n as nonce}from"./dev.utils.js";import{p as propagateSubmitEventToForm}from"./controller.js";import{v as validateAutoComplete}from"./auto-complete.js";import{v as validatePlaceholder}from"./placeholder.js";import{v as validateReadOnly}from"./read-only.js";import{v as validateRequired}from"./required.js";import{v as validateSuggestions}from"./suggestions.js";class InputNumberController extends InputIconController{constructor(e,t,n){super(e,t,n),this.component=e}validateAutoComplete(e){validateAutoComplete(this.component,e)}validateSuggestions(e){validateSuggestions(this.component,e)}validateMax(e){this.validateNumber("_max",e)}validateMin(e){this.validateNumber("_min",e)}validatePlaceholder(e){validatePlaceholder(this.component,e)}validateReadOnly(e){validateReadOnly(this.component,e)}validateRequired(e){validateRequired(this.component,e)}validateStep(e){this.validateNumber("_step",e)}validateValue(e){this.validateNumber("_value",e),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateSuggestions(this.component._suggestions),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateValue(this.component._value)}}const defaultStyleCss='/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-input-number input {\n    appearance: textfield;\n    text-align: right;\n  }\n  .kol-input-number input::-webkit-inner-spin-button {\n    display: none;\n  }\n}',KolInputNumber$1=proxyCustomElement(class extends HTMLElement{async getValue(){return this.remapValue(this.state._value)}async focus(){var e;return Promise.resolve(null===(e=this.inputRef)||void 0===e?void 0:e.focus())}setInitialValueType(e){this.controller.isNumberString(e)?this._initialValueType="NumberString":"number"!=typeof e||isNaN(e)?this._initialValueType="null":this._initialValueType="number"}remapValue(e){return null==e?null:"NumberString"===this._initialValueType?String(e):e}getFormFieldProps(){return{state:this.state,class:clsx("kol-input-number","number",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,type:"number"},this.controller.onFacade),{onInput:this.onInput,onChange:this.onChange,onKeyDown:this.onKeyDown,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}getStepUpButton(){return this._disabled||this._readOnly?null:h("button",{type:"button",tabIndex:-1,class:"kol-input-number__step-button kol-input-number__step-button-up kol-input-container__smart-button","data-testid":"kol-input-number-step-up",onClick:e=>{var t,n,i;null===(t=this.inputRef)||void 0===t||t.stepUp();const o=null===(n=this.inputRef)||void 0===n?void 0:n.value;this._value=this.remapValue(""===o?null:Number(o)),this.controller.onFacade.onInput(e,!0,this._value),null===(i=this.inputRef)||void 0===i||i.focus()},disabled:this._disabled||this._readOnly},h(KolIconFc,{icons:"kolicon-plus",label:""}))}getStepDownButton(){return this._disabled||this._readOnly?null:h("button",{type:"button",tabIndex:-1,class:"kol-input-number__step-button kol-input-number__step-button-down kol-input-container__smart-button","data-testid":"kol-input-number-step-down",onClick:e=>{var t,n,i;null===(t=this.inputRef)||void 0===t||t.stepDown();const o=null===(n=this.inputRef)||void 0===n?void 0:n.value;this._value=this.remapValue(""===o?null:Number(o)),this.controller.onFacade.onInput(e,!0,this._value),null===(i=this.inputRef)||void 0===i||i.focus()},disabled:this._disabled||this._readOnly},h(KolIconFc,{icons:"kolicon-minus",label:""}))}render(){return h(FormFieldStateWrapper,Object.assign({key:"4f21bbecc49439fa060e1aa1b21eb1ce5bf0757e"},this.getFormFieldProps()),h(InputContainerStateWrapperFc,{key:"fc9d7a84d183b451f0f189803217092744086e2c",state:this.state,startAdornment:this.getStepDownButton(),endAdornment:this.getStepUpButton()},h(InputStateWrapper,Object.assign({key:"838359548ecca6a0c807475f9ef8d88ffb4dd038"},this.getInputProps()))))}constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.inputRef=e},this.onInput=e=>{var t;const n=null===(t=this.inputRef)||void 0===t?void 0:t.value;this._value=this.remapValue(""===n?null:Number(n)),this.controller.onFacade.onInput(e,!0,this._value)},this.onChange=e=>{var t;const n=null===(t=this.inputRef)||void 0===t?void 0:t.value,i=this.remapValue(""===n?null:Number(n));this.controller.onFacade.onChange(e,i)},this.onKeyDown=e=>{this.controller.onFacade.onKeyDown(e),"Enter"!==e.code&&"NumpadEnter"!==e.code||propagateSubmitEventToForm({form:this.host})},this._autoComplete="off",this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._readOnly=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[]},this._initialValueType="null",this.inputHasFocus=!1,this.controller=new InputNumberController(this,"number",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMax(e){this.controller.validateMax(e)}validateMin(e){this.controller.validateMin(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateStep(e){this.controller.validateStep(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),null!=e&&this.setInitialValueType(e)}componentWillLoad(){void 0!==this._value&&this.setInitialValueType(this._value),this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-input-number",{_accessKey:[1,"_access-key"],_autoComplete:[1,"_auto-complete"],_disabled:[4],_hideMsg:[4,"_hide-msg"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_max:[8],_min:[8],_msg:[1],_name:[1],_on:[16],_placeholder:[1],_readOnly:[4,"_read-only"],_required:[4],_shortKey:[1,"_short-key"],_smartButton:[1,"_smart-button"],_suggestions:[1],_step:[8],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1544],state:[32],_initialValueType:[32],inputHasFocus:[32],getValue:[64],focus:[64]},void 0,{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-number"].forEach(e=>{if("kol-input-number"===e)customElements.get(e)||customElements.define(e,KolInputNumber$1)})}const KolInputNumber=KolInputNumber$1,defineCustomElement=defineCustomElement$1;export{KolInputNumber,defineCustomElement};

package/dist/components/kol-input-number.js.map

@@ -1 +1 @@
-{"file":"kol-input-number.js","mappings":"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","names":["KolInputNumber","__stencil_proxyCustomElement","KolFormFieldStateWrapperFc","KolInputContainerFc","KolInputStateWrapperFc"],"sources":["src/components/input-number/controller.ts","src/components/input-number/style.scss?tag=kol-input-number&mode=default&encapsulation=shadow","src/components/input-number/shadow.tsx"],"sourcesContent":["import type {\n\tAutoCompletePropType,\n\tInputNumberProps,\n\tInputNumberWatches,\n\tNumberString,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tSuggestionsPropType,\n} from '../../schema';\nimport { validateReadOnly, validateRequired, validateSuggestions } from '../../schema';\nimport { validateAutoComplete } from '../../schema/props/auto-complete';\nimport { type PlaceholderPropType, validatePlaceholder } from '../../schema/props/placeholder';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class InputNumberController extends InputIconController implements InputNumberWatches {\n\tprotected readonly component: Generic.Element.Component & InputNumberProps;\n\n\tpublic constructor(component: Generic.Element.Component & InputNumberProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: AutoCompletePropType): void {\n\t\tvalidateAutoComplete(this.component, value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateMax(value?: number | NumberString): void {\n\t\tthis.validateNumber('_max', value);\n\t}\n\n\tpublic validateMin(value?: number | NumberString): void {\n\t\tthis.validateNumber('_min', value);\n\t}\n\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tvalidatePlaceholder(this.component, value);\n\t}\n\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tvalidateReadOnly(this.component, value);\n\t}\n\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tvalidateRequired(this.component, value);\n\t}\n\n\tpublic validateStep(value?: number | NumberString): void {\n\t\tthis.validateNumber('_step', value);\n\t}\n\n\tpublic validateValue(value?: number | NumberString | null): void {\n\t\tthis.validateNumber('_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../../styles/kol-form-field-mixin' as *;\n@use '../../styles/kol-input-container-mixin' as *;\n@use '../../styles/kol-input-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@layer kol-component {\n\t@include kol-alert;\n\t@include kol-form-field;\n\t@include kol-input-container;\n\t@include kol-input;\n\n\t.kol-input-number {\n\t\tinput {\n\t\t\tappearance: textfield;\n\t\t\ttext-align: right;\n\n\t\t\t&::-webkit-inner-spin-button {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX, VNode } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport type {\n\tAutoCompletePropType,\n\tButtonProps,\n\tDisabledPropType,\n\tFocusableElement,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputNumberAPI,\n\tInputNumberStates,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tNumberString,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tShortKeyPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';\nimport { KolIconFc } from '../../functional-components';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { InputNumberController } from './controller';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-number',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputNumber implements InputNumberAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputNumberElement;\n\tprivate inputRef?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.inputRef = ref;\n\t};\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<number | NumberString | null> {\n\t\treturn this.remapValue(this.state._value);\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\treturn Promise.resolve(this.inputRef?.focus());\n\t}\n\n\tprivate setInitialValueType(value?: number | NumberString | null) {\n\t\tif (this.controller.isNumberString(value)) {\n\t\t\tthis._initialValueType = 'NumberString';\n\t\t} else if (typeof value === 'number' && !isNaN(value)) {\n\t\t\tthis._initialValueType = 'number';\n\t\t} else {\n\t\t\tthis._initialValueType = 'null';\n\t\t}\n\t}\n\n\t/**\n\t * Map the value to the initial format. E.g., if the user provided a string initially, return a string.\n\t * @param value\n\t * @private\n\t */\n\tprivate remapValue(value?: number | null): number | NumberString | null {\n\t\tif (value === undefined || value === null) {\n\t\t\treturn null;\n\t\t} else if (this._initialValueType === 'NumberString') {\n\t\t\treturn String(value) as NumberString;\n\t\t}\n\t\treturn value;\n\t}\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tconst newValue = this.inputRef?.value;\n\t\tthis._value = this.remapValue(newValue === '' ? null : Number(newValue));\n\t\tthis.controller.onFacade.onInput(event, true, this._value);\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tconst newValue = this.inputRef?.value;\n\t\tconst mappedValue = this.remapValue(newValue === '' ? null : Number(newValue));\n\t\tthis.controller.onFacade.onChange(event, mappedValue);\n\t};\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tthis.controller.onFacade.onKeyDown(event);\n\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.inputRef,\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-input-number', 'number', {\n\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getInputProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\tref: this.catchRef,\n\t\t\tstate: this.state,\n\t\t\ttype: 'number',\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput,\n\t\t\tonChange: this.onChange,\n\t\t\tonKeyDown: this.onKeyDown,\n\t\t\tonFocus: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate getStepUpButton(): VNode | null {\n\t\tif (this._disabled || this._readOnly) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabIndex={-1}\n\t\t\t\tclass=\"kol-input-number__step-button kol-input-number__step-button-up kol-input-container__smart-button\"\n\t\t\t\tdata-testid=\"kol-input-number-step-up\"\n\t\t\t\tonClick={(): void => {\n\t\t\t\t\tthis.inputRef?.stepUp();\n\t\t\t\t\tthis.inputRef?.focus();\n\t\t\t\t}}\n\t\t\t\tdisabled={this._disabled || this._readOnly}\n\t\t\t>\n\t\t\t\t<KolIconFc icons=\"kolicon-plus\" label=\"\" />\n\t\t\t</button>\n\t\t);\n\t}\n\n\tprivate getStepDownButton(): VNode | null {\n\t\tif (this._disabled || this._readOnly) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabIndex={-1}\n\t\t\t\tclass=\"kol-input-number__step-button kol-input-number__step-button-down kol-input-container__smart-button\"\n\t\t\t\tdata-testid=\"kol-input-number-step-down\"\n\t\t\t\tonClick={(): void => {\n\t\t\t\t\tthis.inputRef?.stepDown();\n\t\t\t\t\tthis.inputRef?.focus();\n\t\t\t\t}}\n\t\t\t\tdisabled={this._disabled || this._readOnly}\n\t\t\t>\n\t\t\t\t<KolIconFc icons=\"kolicon-minus\" label=\"\" />\n\t\t\t</button>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state} startAdornment={this.getStepDownButton()} endAdornment={this.getStepUpButton()}>\n\t\t\t\t\t<KolInputStateWrapperFc {...this.getInputProps()} />\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputNumberController;\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: AutoCompletePropType = 'off';\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t * @deprecated Will be removed in the next major version.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the maximum value of the element.\n\t */\n\t@Prop() public _max?: number | NumberString;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number | NumberString;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Defines the step size for value changes.\n\t */\n\t@Prop() public _step?: number | NumberString;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: number | NumberString | null;\n\n\t@State() public state: InputNumberStates = {\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t};\n\t@State() private _initialValueType: 'number' | 'NumberString' | 'null' = 'null';\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputNumberController(this, 'number', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: AutoCompletePropType): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number | NumberString): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number | NumberString): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number | NumberString): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number | NumberString | null): void {\n\t\tthis.controller.validateValue(value);\n\t\tif (value !== undefined && value !== null) {\n\t\t\t// Don't switch type when value was reset to null\n\t\t\tthis.setInitialValueType(value);\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tif (this._value !== undefined) {\n\t\t\tthis.setInitialValueType(this._value);\n\t\t}\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n}\n"],"version":3}
+{"file":"kol-input-number.js","mappings":"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","names":["KolInputNumber","__stencil_proxyCustomElement","KolFormFieldStateWrapperFc","KolInputContainerFc","KolInputStateWrapperFc"],"sources":["src/components/input-number/controller.ts","src/components/input-number/style.scss?tag=kol-input-number&mode=default&encapsulation=shadow","src/components/input-number/shadow.tsx"],"sourcesContent":["import type {\n\tAutoCompletePropType,\n\tInputNumberProps,\n\tInputNumberWatches,\n\tNumberString,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tSuggestionsPropType,\n} from '../../schema';\nimport { validateReadOnly, validateRequired, validateSuggestions } from '../../schema';\nimport { validateAutoComplete } from '../../schema/props/auto-complete';\nimport { type PlaceholderPropType, validatePlaceholder } from '../../schema/props/placeholder';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class InputNumberController extends InputIconController implements InputNumberWatches {\n\tprotected readonly component: Generic.Element.Component & InputNumberProps;\n\n\tpublic constructor(component: Generic.Element.Component & InputNumberProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: AutoCompletePropType): void {\n\t\tvalidateAutoComplete(this.component, value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateMax(value?: number | NumberString): void {\n\t\tthis.validateNumber('_max', value);\n\t}\n\n\tpublic validateMin(value?: number | NumberString): void {\n\t\tthis.validateNumber('_min', value);\n\t}\n\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tvalidatePlaceholder(this.component, value);\n\t}\n\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tvalidateReadOnly(this.component, value);\n\t}\n\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tvalidateRequired(this.component, value);\n\t}\n\n\tpublic validateStep(value?: number | NumberString): void {\n\t\tthis.validateNumber('_step', value);\n\t}\n\n\tpublic validateValue(value?: number | NumberString | null): void {\n\t\tthis.validateNumber('_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../../styles/kol-form-field-mixin' as *;\n@use '../../styles/kol-input-container-mixin' as *;\n@use '../../styles/kol-input-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@layer kol-component {\n\t@include kol-alert;\n\t@include kol-form-field;\n\t@include kol-input-container;\n\t@include kol-input;\n\n\t.kol-input-number {\n\t\tinput {\n\t\t\tappearance: textfield;\n\t\t\ttext-align: right;\n\n\t\t\t&::-webkit-inner-spin-button {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX, VNode } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport type {\n\tAutoCompletePropType,\n\tButtonProps,\n\tDisabledPropType,\n\tFocusableElement,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputNumberAPI,\n\tInputNumberStates,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tNumberString,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tShortKeyPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';\nimport { KolIconFc } from '../../functional-components';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { InputNumberController } from './controller';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-number',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputNumber implements InputNumberAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputNumberElement;\n\tprivate inputRef?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.inputRef = ref;\n\t};\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<number | NumberString | null> {\n\t\treturn this.remapValue(this.state._value);\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\treturn Promise.resolve(this.inputRef?.focus());\n\t}\n\n\tprivate setInitialValueType(value?: number | NumberString | null) {\n\t\tif (this.controller.isNumberString(value)) {\n\t\t\tthis._initialValueType = 'NumberString';\n\t\t} else if (typeof value === 'number' && !isNaN(value)) {\n\t\t\tthis._initialValueType = 'number';\n\t\t} else {\n\t\t\tthis._initialValueType = 'null';\n\t\t}\n\t}\n\n\t/**\n\t * Map the value to the initial format. E.g., if the user provided a string initially, return a string.\n\t * @param value\n\t * @private\n\t */\n\tprivate remapValue(value?: number | null): number | NumberString | null {\n\t\tif (value === undefined || value === null) {\n\t\t\treturn null;\n\t\t} else if (this._initialValueType === 'NumberString') {\n\t\t\treturn String(value) as NumberString;\n\t\t}\n\t\treturn value;\n\t}\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tconst newValue = this.inputRef?.value;\n\t\tthis._value = this.remapValue(newValue === '' ? null : Number(newValue));\n\t\tthis.controller.onFacade.onInput(event, true, this._value);\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tconst newValue = this.inputRef?.value;\n\t\tconst mappedValue = this.remapValue(newValue === '' ? null : Number(newValue));\n\t\tthis.controller.onFacade.onChange(event, mappedValue);\n\t};\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tthis.controller.onFacade.onKeyDown(event);\n\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.inputRef,\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-input-number', 'number', {\n\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getInputProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\tref: this.catchRef,\n\t\t\tstate: this.state,\n\t\t\ttype: 'number',\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput,\n\t\t\tonChange: this.onChange,\n\t\t\tonKeyDown: this.onKeyDown,\n\t\t\tonFocus: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate getStepUpButton(): VNode | null {\n\t\tif (this._disabled || this._readOnly) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabIndex={-1}\n\t\t\t\tclass=\"kol-input-number__step-button kol-input-number__step-button-up kol-input-container__smart-button\"\n\t\t\t\tdata-testid=\"kol-input-number-step-up\"\n\t\t\t\tonClick={(event: MouseEvent): void => {\n\t\t\t\t\tthis.inputRef?.stepUp();\n\t\t\t\t\t// Manually trigger onInput since stepUp() doesn't fire input events\n\t\t\t\t\tconst newValue = this.inputRef?.value;\n\t\t\t\t\tthis._value = this.remapValue(newValue === '' ? null : Number(newValue));\n\t\t\t\t\t// Pass MouseEvent as Event - onInput handler accepts generic Event type\n\t\t\t\t\tthis.controller.onFacade.onInput(event, true, this._value);\n\t\t\t\t\tthis.inputRef?.focus();\n\t\t\t\t}}\n\t\t\t\tdisabled={this._disabled || this._readOnly}\n\t\t\t>\n\t\t\t\t<KolIconFc icons=\"kolicon-plus\" label=\"\" />\n\t\t\t</button>\n\t\t);\n\t}\n\n\tprivate getStepDownButton(): VNode | null {\n\t\tif (this._disabled || this._readOnly) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabIndex={-1}\n\t\t\t\tclass=\"kol-input-number__step-button kol-input-number__step-button-down kol-input-container__smart-button\"\n\t\t\t\tdata-testid=\"kol-input-number-step-down\"\n\t\t\t\tonClick={(event: MouseEvent): void => {\n\t\t\t\t\tthis.inputRef?.stepDown();\n\t\t\t\t\t// Manually trigger onInput since stepDown() doesn't fire input events\n\t\t\t\t\tconst newValue = this.inputRef?.value;\n\t\t\t\t\tthis._value = this.remapValue(newValue === '' ? null : Number(newValue));\n\t\t\t\t\t// Pass MouseEvent as Event - onInput handler accepts generic Event type\n\t\t\t\t\tthis.controller.onFacade.onInput(event, true, this._value);\n\t\t\t\t\tthis.inputRef?.focus();\n\t\t\t\t}}\n\t\t\t\tdisabled={this._disabled || this._readOnly}\n\t\t\t>\n\t\t\t\t<KolIconFc icons=\"kolicon-minus\" label=\"\" />\n\t\t\t</button>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state} startAdornment={this.getStepDownButton()} endAdornment={this.getStepUpButton()}>\n\t\t\t\t\t<KolInputStateWrapperFc {...this.getInputProps()} />\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputNumberController;\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: AutoCompletePropType = 'off';\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t * @deprecated Will be removed in the next major version.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the maximum value of the element.\n\t */\n\t@Prop() public _max?: number | NumberString;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number | NumberString;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Defines the step size for value changes.\n\t */\n\t@Prop() public _step?: number | NumberString;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: number | NumberString | null;\n\n\t@State() public state: InputNumberStates = {\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t};\n\t@State() private _initialValueType: 'number' | 'NumberString' | 'null' = 'null';\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputNumberController(this, 'number', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: AutoCompletePropType): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number | NumberString): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number | NumberString): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number | NumberString): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number | NumberString | null): void {\n\t\tthis.controller.validateValue(value);\n\t\tif (value !== undefined && value !== null) {\n\t\t\t// Don't switch type when value was reset to null\n\t\t\tthis.setInitialValueType(value);\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tif (this._value !== undefined) {\n\t\t\tthis.setInitialValueType(this._value);\n\t\t}\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n}\n"],"version":3}

package/dist/components/kol-link.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{f as KolLinkWcTag}from"./component-names.js";const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolLink$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.catchRef=n=>{this.linkWcRef=n},this._disabled=!1,this._hideLabel=!1,this._inline=!0,this._tooltipAlign="right"}async focus(){var n;return Promise.resolve(null===(n=this.linkWcRef)||void 0===n?void 0:n.focus())}render(){return h(KolLinkWcTag,{key:"5e0f4af8177fdafc0ba16a394edc95f5d6893700",ref:this.catchRef,_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_inline:this._inline,_label:this._label,_on:this._on,_shortKey:this._shortKey,_target:this._target,_tooltipAlign:this._tooltipAlign},h("slot",{key:"c8d72e1786756ae591534397e749430e1c45d875",name:"expert",slot:"expert"}))}static get style(){return{default:defaultStyleCss}}},[289,"kol-link",{_accessKey:[1,"_access-key"],_ariaCurrentValue:[1,"_aria-current-value"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_disabled:[4],_download:[1],_hideLabel:[4,"_hide-label"],_href:[1],_icons:[1],_inline:[4],_label:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_target:[1],_tooltipAlign:[1,"_tooltip-align"],focus:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-link"].forEach(n=>{if("kol-link"===n)customElements.get(n)||customElements.define(n,KolLink$1)})}const KolLink=KolLink$1,defineCustomElement=defineCustomElement$1;export{KolLink,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{f as KolLinkWcTag}from"./component-names.js";const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolLink$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.catchRef=n=>{this.linkWcRef=n},this._disabled=!1,this._hideLabel=!1,this._inline=!0,this._tooltipAlign="right"}async focus(){var n;return Promise.resolve(null===(n=this.linkWcRef)||void 0===n?void 0:n.focus())}render(){return h(KolLinkWcTag,{key:"5e0f4af8177fdafc0ba16a394edc95f5d6893700",ref:this.catchRef,_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_inline:this._inline,_label:this._label,_on:this._on,_shortKey:this._shortKey,_target:this._target,_tooltipAlign:this._tooltipAlign},h("slot",{key:"c8d72e1786756ae591534397e749430e1c45d875",name:"expert",slot:"expert"}))}static get style(){return{default:defaultStyleCss}}},[289,"kol-link",{_accessKey:[1,"_access-key"],_ariaCurrentValue:[1,"_aria-current-value"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_disabled:[4],_download:[1],_hideLabel:[4,"_hide-label"],_href:[1],_icons:[1],_inline:[4],_label:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_target:[1],_tooltipAlign:[1,"_tooltip-align"],focus:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-link"].forEach(n=>{if("kol-link"===n)customElements.get(n)||customElements.define(n,KolLink$1)})}const KolLink=KolLink$1,defineCustomElement=defineCustomElement$1;export{KolLink,defineCustomElement};

package/dist/components/kol-link.js.map

@@ -1 +1 @@
-{"file":"kol-link.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,u/OAAu/O;;MC6BlgPA,SAAO,GAAAC,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AAPpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAUkB,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,GAA0B,KAAI;AAC1D,YAAA,IAAI,CAAC,SAAS,GAAG,GAAG;AACrB,SAAC;AAqEc,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAY3B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AAe5B,QAAA,IAAO,CAAA,OAAA,GAAoB,IAAI;AAgC/B,QAAA,IAAa,CAAA,aAAA,GAA0B,OAAO;AAC7D;AA3HO,IAAA,MAAM,KAAK,GAAA;;AACjB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE,CAAC;;IAGzC,MAAM,GAAA;AACZ,QAAA,QACC,EAAC,YAAY,EAAA,EAAA,GAAA,EAAA,0CAAA,EACZ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,IAAI,CAAC,aAAa,EAAA,EAMjC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,CAAQ,CAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolLink","__stencil_proxyCustomElement"],"sources":["src/components/link/style.scss?tag=kol-link&mode=default&encapsulation=shadow","src/components/link/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../@shared/kol-link-mixin' as *;\n\n@layer kol-component {\n\t@include kol-link-styles('kol-link');\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaCurrentValuePropType,\n\tAriaDescriptionPropType,\n\tDownloadPropType,\n\tFocusableElement,\n\tHrefPropType,\n\tInlinePropType,\n\tKoliBriIconsProp,\n\tLabelWithExpertSlotPropType,\n\tLinkOnCallbacksPropType,\n\tLinkProps,\n\tLinkTargetPropType,\n\tShortKeyPropType,\n\tStringified,\n\tTooltipAlignPropType,\n} from '../../schema';\n\n@Component({\n\ttag: 'kol-link',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolLink implements LinkProps, FocusableElement {\n\tprivate linkWcRef?: HTMLKolLinkWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tthis.linkWcRef = ref;\n\t};\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\treturn Promise.resolve(this.linkWcRef?.focus());\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolLinkWcTag\n\t\t\t\tref={this.catchRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaCurrentValue={this._ariaCurrentValue}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_download={this._download}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_href={this._href}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_inline={this._inline}\n\t\t\t\t_label={this._label}\n\t\t\t\t_on={this._on}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_target={this._target}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t>\n\t\t\t\t{/*\n\t\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t*/}\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolLinkWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-current attribute.\n\t */\n\t@Prop() public _ariaCurrentValue?: AriaCurrentValuePropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t * @TODO: Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Tells the browser that the link contains a file. Optionally sets the filename.\n\t */\n\t@Prop() public _download?: DownloadPropType;\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 * 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 icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = true;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the callback functions for links.\n\t */\n\t@Prop() public _on?: LinkOnCallbacksPropType;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t *\n\t * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines where to open the link.\n\t */\n\t@Prop() public _target?: LinkTargetPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'right';\n}\n"],"version":3}
+{"file":"kol-link.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,4qPAA4qP;;MC6BvrPA,SAAO,GAAAC,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AAPpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAUkB,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,GAA0B,KAAI;AAC1D,YAAA,IAAI,CAAC,SAAS,GAAG,GAAG;AACrB,SAAC;AAqEc,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAY3B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AAe5B,QAAA,IAAO,CAAA,OAAA,GAAoB,IAAI;AAgC/B,QAAA,IAAa,CAAA,aAAA,GAA0B,OAAO;AAC7D;AA3HO,IAAA,MAAM,KAAK,GAAA;;AACjB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE,CAAC;;IAGzC,MAAM,GAAA;AACZ,QAAA,QACC,EAAC,YAAY,EAAA,EAAA,GAAA,EAAA,0CAAA,EACZ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,IAAI,CAAC,aAAa,EAAA,EAMjC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,CAAQ,CAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolLink","__stencil_proxyCustomElement"],"sources":["src/components/link/style.scss?tag=kol-link&mode=default&encapsulation=shadow","src/components/link/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../@shared/kol-link-mixin' as *;\n\n@layer kol-component {\n\t@include kol-link-styles('kol-link');\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaCurrentValuePropType,\n\tAriaDescriptionPropType,\n\tDownloadPropType,\n\tFocusableElement,\n\tHrefPropType,\n\tInlinePropType,\n\tKoliBriIconsProp,\n\tLabelWithExpertSlotPropType,\n\tLinkOnCallbacksPropType,\n\tLinkProps,\n\tLinkTargetPropType,\n\tShortKeyPropType,\n\tStringified,\n\tTooltipAlignPropType,\n} from '../../schema';\n\n@Component({\n\ttag: 'kol-link',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolLink implements LinkProps, FocusableElement {\n\tprivate linkWcRef?: HTMLKolLinkWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tthis.linkWcRef = ref;\n\t};\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\treturn Promise.resolve(this.linkWcRef?.focus());\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolLinkWcTag\n\t\t\t\tref={this.catchRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaCurrentValue={this._ariaCurrentValue}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_download={this._download}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_href={this._href}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_inline={this._inline}\n\t\t\t\t_label={this._label}\n\t\t\t\t_on={this._on}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_target={this._target}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t>\n\t\t\t\t{/*\n\t\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t*/}\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolLinkWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-current attribute.\n\t */\n\t@Prop() public _ariaCurrentValue?: AriaCurrentValuePropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t * @TODO: Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Tells the browser that the link contains a file. Optionally sets the filename.\n\t */\n\t@Prop() public _download?: DownloadPropType;\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 * 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 icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = true;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the callback functions for links.\n\t */\n\t@Prop() public _on?: LinkOnCallbacksPropType;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t *\n\t * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines where to open the link.\n\t */\n\t@Prop() public _target?: LinkTargetPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'right';\n}\n"],"version":3}

package/dist/components/kol-nav.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as watchBoolean,d as a11yHintLabelingLandmarks,l as devHint}from"./common.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateLabel}from"./label.js";import{c as clsx}from"./clsx.js";import{f as KolLinkWcTag,d as KolButtonWcTag}from"./component-names.js";import{t as translate}from"./i18n.js";import{n as nonce}from"./dev.utils.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";const validateCollapsible=(n,e)=>{watchBoolean(n,"_collapsible",e)},validateHasCompactButton=(n,e)=>{watchBoolean(n,"_hasCompactButton",e)},validateHasIconsWhenExpanded=(n,e)=>{watchBoolean(n,"_hasIconsWhenExpanded",e)},defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-nav {\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__list {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    flex-direction: column;\n    list-style: none;\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-button {\n    text-align: left;\n  }\n  .kol-span {\n    width: 100%;\n    justify-content: flex-start;\n  }\n  .kol-span__container {\n    width: 100%;\n  }\n  .kol-span__container .kol-span__label {\n    flex: 1;\n  }\n}",entryIsLink=n=>"string"==typeof n._href,entryIsButton=n=>{var e;return void 0===n._href&&"function"==typeof(null===(e=n._on)||void 0===e?void 0:e.onClick)},KolNav$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.navId="kol-nav-"+nonce(),this.listId=this.navId+"-list",this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>h("ul",{class:clsx("kol-nav__list",{"kol-nav__list--nested":n.deep>0,"kol-nav__list--vertical":0!==n.deep}),id:n.deep>0?n.id:void 0},n.links.map((e,t)=>this.li(n.collapsible,n.deep,t,e,n.id))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_expandedChildren:[]}}expandChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,n]})}collapseChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter(e=>e!==n)})}buildIconObject(n,e,t){const i={left:"",right:""};return this.state._hasIconsWhenExpanded&&t&&(i.left=t),this.state._hideLabel&&(i.left=t||"kolicon-link"),n&&(i.right=e?"kolicon-minus":"kolicon-plus"),i}entry(n,e,t,i,a){var l;const o=this.buildIconObject(n&&e,i,null===(l=t._icons)||void 0===l?void 0:l.toString());return h("div",{class:"kol-nav__entry-wrapper"},entryIsLink(t)?h(KolLinkWcTag,Object.assign({class:clsx("kol-nav__entry kol-nav__entry--link",{"kol-nav__entry--collapsible":n})},t,{_hideLabel:this.state._hideLabel,_icons:o,_ariaControls:n&&e&&i?a:void 0,_ariaExpanded:n&&e?i:void 0})):h(KolButtonWcTag,{class:clsx("kol-nav__entry kol-nav__entry--button",{"kol-nav__entry--collapsible":n}),_label:t._label,_hideLabel:this.state._hideLabel,_icons:o,_ariaControls:n&&e&&i?a:void 0,_ariaExpanded:n&&e?i:void 0,_on:{onClick:(n,e)=>{entryIsButton(t)&&"function"==typeof t._on.onClick&&t._on.onClick(n,e),this.handleToggleExpansionClick(t._children)}}}))}li(n,e,t,i,a){const l=!!i._active,o=Array.isArray(i._children)&&i._children.length>0,s=Boolean(i._children&&this.state._expandedChildren.includes(i._children)),d=a+"_"+e+"_"+t;return h("li",{class:clsx("kol-nav__list-item",{"kol-nav__list-item--active":l,"kol-nav__list-item--expanded":s,"kol-nav__list-item--has-children":o}),key:t},this.entry(n,o,i,s,d),s&&h(this.linkList,{collapsible:n,deep:e+1,links:i._children||[],id:d}))}initializeExpandedChildren(){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[]});const n=e=>{if(e._active)return e._children&&this.expandChildren(e._children),!0;if(e._children)for(const t of e._children)if(n(t))return this.expandChildren(e._children),!0;return!1};this.state._links.forEach(n)}render(){const n=!0===this.state._collapsible;return h("div",{key:"c5d68a1e9267bf338e45d238b9f7661e44a2e378",class:clsx("kol-nav",{"kol-nav--is-compact":this.state._hideLabel})},h("nav",{key:"17473413770976a81f562e3bd9f17ae11b654b2b","aria-label":this.state._label,class:"kol-nav__navigation",id:this.navId},h(this.linkList,{key:"0623790874a038d9df84ffb301efea8559ee0a4c",collapsible:n,deep:0,links:this.state._links,id:this.listId})),this.state._hasCompactButton&&h("div",{key:"6d54e0a8ac6af286ecc70abc98f076f481bab771",class:"kol-nav__compact"},h(KolButtonWcTag,{key:"6a37dc386c94294196ce9543a132c6d63406d7dd",class:"kol-nav__toggle-button",_ariaControls:this.navId,_ariaExpanded:!this.state._hideLabel,_icons:this.state._hideLabel?"kolicon-chevron-right":"kolicon-chevron-left",_hideLabel:!0,_label:translate(this.state._hideLabel?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!this.state._hideLabel})}},_tooltipAlign:"right"})))}validateCollapsible(n){validateCollapsible(this,n)}validateHasCompactButton(n){validateHasCompactButton(this,n)}validateHasIconsWhenExpanded(n){validateHasIconsWhenExpanded(this,n)}validateHideLabel(n){validateHideLabel(this,n)}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),a11yHintLabelingLandmarks(n),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolNav",this,n),devHint("[KolNav] The navigation structure is not yet validated recursively."),this.initializeExpandedChildren()}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.initializeExpandedChildren()}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-nav",{_collapsible:[4],_hasCompactButton:[4,"_has-compact-button"],_hasIconsWhenExpanded:[4,"_has-icons-when-expanded"],_hideLabel:[4,"_hide-label"],_label:[1],_links:[1],state:[32]},void 0,{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-nav"].forEach(n=>{if("kol-nav"===n)customElements.get(n)||customElements.define(n,KolNav$1)})}const KolNav=KolNav$1,defineCustomElement=defineCustomElement$1;export{KolNav,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as watchBoolean,d as a11yHintLabelingLandmarks,l as devHint}from"./common.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateLabel}from"./label.js";import{c as clsx}from"./clsx.js";import{f as KolLinkWcTag,d as KolButtonWcTag}from"./component-names.js";import{t as translate}from"./i18n.js";import{n as nonce}from"./dev.utils.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";const validateCollapsible=(n,e)=>{watchBoolean(n,"_collapsible",e)},validateHasCompactButton=(n,e)=>{watchBoolean(n,"_hasCompactButton",e)},validateHasIconsWhenExpanded=(n,e)=>{watchBoolean(n,"_hasIconsWhenExpanded",e)},defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-nav {\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__navigation .kol-span {\n    width: 100%;\n    justify-content: flex-start;\n  }\n  .kol-nav__navigation .kol-span__container {\n    width: 100%;\n  }\n  .kol-nav__navigation .kol-span__container .kol-span__label {\n    flex: 1;\n  }\n  .kol-nav__list {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    flex-direction: column;\n    list-style: none;\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-button {\n    text-align: left;\n  }\n}",entryIsLink=n=>"string"==typeof n._href,entryIsButton=n=>{var e;return void 0===n._href&&"function"==typeof(null===(e=n._on)||void 0===e?void 0:e.onClick)},KolNav$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.navId="kol-nav-"+nonce(),this.listId=this.navId+"-list",this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>h("ul",{class:clsx("kol-nav__list",{"kol-nav__list--nested":n.deep>0,"kol-nav__list--vertical":0!==n.deep}),id:n.deep>0?n.id:void 0},n.links.map((e,t)=>this.li(n.collapsible,n.deep,t,e,n.id))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_expandedChildren:[]}}expandChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,n]})}collapseChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter(e=>e!==n)})}buildIconObject(n,e,t){const i={left:"",right:""};return this.state._hasIconsWhenExpanded&&t&&(i.left=t),this.state._hideLabel&&(i.left=t||"kolicon-link"),n&&(i.right=e?"kolicon-minus":"kolicon-plus"),i}entry(n,e,t,i,a){var l;const o=this.buildIconObject(n&&e,i,null===(l=t._icons)||void 0===l?void 0:l.toString());return h("div",{class:"kol-nav__entry-wrapper"},entryIsLink(t)?h(KolLinkWcTag,Object.assign({class:clsx("kol-nav__entry kol-nav__entry--link",{"kol-nav__entry--collapsible":n})},t,{_hideLabel:this.state._hideLabel,_icons:o,_ariaControls:n&&e&&i?a:void 0,_ariaExpanded:n&&e?i:void 0})):h(KolButtonWcTag,{class:clsx("kol-nav__entry kol-nav__entry--button",{"kol-nav__entry--collapsible":n}),_label:t._label,_hideLabel:this.state._hideLabel,_icons:o,_ariaControls:n&&e&&i?a:void 0,_ariaExpanded:n&&e?i:void 0,_on:{onClick:(n,e)=>{entryIsButton(t)&&"function"==typeof t._on.onClick&&t._on.onClick(n,e),this.handleToggleExpansionClick(t._children)}}}))}li(n,e,t,i,a){const l=!!i._active,o=Array.isArray(i._children)&&i._children.length>0,s=Boolean(i._children&&this.state._expandedChildren.includes(i._children)),d=a+"_"+e+"_"+t;return h("li",{class:clsx("kol-nav__list-item",{"kol-nav__list-item--active":l,"kol-nav__list-item--expanded":s,"kol-nav__list-item--has-children":o}),key:t},this.entry(n,o,i,s,d),s&&h(this.linkList,{collapsible:n,deep:e+1,links:i._children||[],id:d}))}initializeExpandedChildren(){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[]});const n=e=>{if(e._active)return e._children&&this.expandChildren(e._children),!0;if(e._children)for(const t of e._children)if(n(t))return this.expandChildren(e._children),!0;return!1};this.state._links.forEach(n)}render(){const n=!0===this.state._collapsible;return h("div",{key:"c5d68a1e9267bf338e45d238b9f7661e44a2e378",class:clsx("kol-nav",{"kol-nav--is-compact":this.state._hideLabel})},h("nav",{key:"17473413770976a81f562e3bd9f17ae11b654b2b","aria-label":this.state._label,class:"kol-nav__navigation",id:this.navId},h(this.linkList,{key:"0623790874a038d9df84ffb301efea8559ee0a4c",collapsible:n,deep:0,links:this.state._links,id:this.listId})),this.state._hasCompactButton&&h("div",{key:"6d54e0a8ac6af286ecc70abc98f076f481bab771",class:"kol-nav__compact"},h(KolButtonWcTag,{key:"6a37dc386c94294196ce9543a132c6d63406d7dd",class:"kol-nav__toggle-button",_ariaControls:this.navId,_ariaExpanded:!this.state._hideLabel,_icons:this.state._hideLabel?"kolicon-chevron-right":"kolicon-chevron-left",_hideLabel:!0,_label:translate(this.state._hideLabel?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!this.state._hideLabel})}},_tooltipAlign:"right"})))}validateCollapsible(n){validateCollapsible(this,n)}validateHasCompactButton(n){validateHasCompactButton(this,n)}validateHasIconsWhenExpanded(n){validateHasIconsWhenExpanded(this,n)}validateHideLabel(n){validateHideLabel(this,n)}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),a11yHintLabelingLandmarks(n),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolNav",this,n),devHint("[KolNav] The navigation structure is not yet validated recursively."),this.initializeExpandedChildren()}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.initializeExpandedChildren()}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-nav",{_collapsible:[4],_hasCompactButton:[4,"_has-compact-button"],_hasIconsWhenExpanded:[4,"_has-icons-when-expanded"],_hideLabel:[4,"_hide-label"],_label:[1],_links:[1],state:[32]},void 0,{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-nav"].forEach(n=>{if("kol-nav"===n)customElements.get(n)||customElements.define(n,KolNav$1)})}const KolNav=KolNav$1,defineCustomElement=defineCustomElement$1;export{KolNav,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-nav.js","mappings":"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","names":["KolNav","__stencil_proxyCustomElement"],"sources":["src/schema/props/collapsible.ts","src/schema/props/has-compact-button.ts","src/schema/props/has-icons-when-expanded.ts","src/components/nav/style.scss?tag=kol-nav&mode=default&encapsulation=shadow","src/components/nav/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\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 type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\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 type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HasIconsWhenExpandedPropType = boolean;\n\n/**\n * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n */\nexport type PropHasIconsWhenExpanded = {\n\thasIconsWhenExpanded: HasIconsWhenExpandedPropType;\n};\n\n/* validator */\nexport const validateHasIconsWhenExpanded = (component: Generic.Element.Component, value?: HasIconsWhenExpandedPropType): void => {\n\twatchBoolean(component, '_hasIconsWhenExpanded', value);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-nav {\n\t\t$root: &;\n\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\n\t\t&__navigation {\n\t\t\t#{$root}:not(#{$root}--is-compact) & {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\n\t\t&__list {\n\t\t\tdisplay: flex;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tflex-direction: column;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t&__entry-wrapper {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t&__entry {\n\t\t\tflex-grow: 1;\n\t\t}\n\t}\n\n\t.kol-button {\n\t\ttext-align: left;\n\t}\n\n\t.kol-span {\n\t\twidth: 100%;\n\t\tjustify-content: flex-start;\n\n\t\t&__container {\n\t\t\twidth: 100%;\n\n\t\t\t.kol-span__label {\n\t\t\t\tflex: 1;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tButtonOrLinkOrTextWithChildrenProps,\n\tButtonWithChildrenProps,\n\tCollapsiblePropType,\n\tHideLabelPropType,\n\tKoliBriIconsProp,\n\tLabelPropType,\n\tLinkProps,\n\tLinkWithChildrenProps,\n\tNavAPI,\n\tNavStates,\n\tStringified,\n} from '../../schema';\nimport {\n\ta11yHintLabelingLandmarks,\n\tdevHint,\n\tvalidateCollapsible,\n\tvalidateHasCompactButton,\n\tvalidateHasIconsWhenExpanded,\n\tvalidateHideLabel,\n\tvalidateLabel,\n} from '../../schema';\n\nimport clsx from 'clsx';\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport type { StencilUnknown } from '../../schema';\nimport { nonce } from '../../utils/dev.utils';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\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\nconst entryIsLink = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is LinkWithChildrenProps => {\n\treturn typeof (entryProps as LinkProps)._href === 'string';\n};\n\nconst entryIsButton = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is ButtonWithChildrenProps => {\n\treturn (entryProps as LinkProps)._href === undefined && typeof (entryProps as ButtonWithChildrenProps)._on?.onClick === 'function';\n};\n\n@Component({\n\ttag: 'kol-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolNav implements NavAPI {\n\tprivate readonly navId = 'kol-nav-' + nonce();\n\n\tprivate readonly listId = this.navId + '-list';\n\n\tprivate expandChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [...this.state._expandedChildren, children],\n\t\t};\n\t}\n\tprivate collapseChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren !== children),\n\t\t};\n\t}\n\n\tprivate readonly handleToggleExpansionClick = (children?: ButtonOrLinkOrTextWithChildrenProps[]): void => {\n\t\tif (children) {\n\t\t\tif (this.state._expandedChildren.includes(children)) {\n\t\t\t\tthis.collapseChildren(children);\n\t\t\t} else {\n\t\t\t\tthis.expandChildren(children);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate buildIconObject(collapsible: boolean, expanded: boolean, leftIcon?: string): KoliBriIconsProp {\n\t\tconst icon = {\n\t\t\tleft: '',\n\t\t\tright: '',\n\t\t};\n\t\tif (this.state._hasIconsWhenExpanded && leftIcon) {\n\t\t\ticon.left = leftIcon;\n\t\t}\n\t\tif (this.state._hideLabel) {\n\t\t\tif (leftIcon) {\n\t\t\t\ticon.left = leftIcon;\n\t\t\t} else {\n\t\t\t\ticon.left = 'kolicon-link';\n\t\t\t}\n\t\t}\n\t\tif (collapsible) {\n\t\t\tif (expanded) {\n\t\t\t\ticon.right = 'kolicon-minus';\n\t\t\t} else {\n\t\t\t\ticon.right = 'kolicon-plus';\n\t\t\t}\n\t\t}\n\t\treturn icon;\n\t}\n\n\tprivate entry(collapsible: boolean, hasChildren: boolean, entry: ButtonOrLinkOrTextWithChildrenProps, expanded: boolean, ariaID: string): JSX.Element {\n\t\tconst icons = this.buildIconObject(collapsible && hasChildren, expanded, entry._icons?.toString());\n\n\t\treturn (\n\t\t\t<div class=\"kol-nav__entry-wrapper\">\n\t\t\t\t{entryIsLink(entry) ? (\n\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\tclass={clsx('kol-nav__entry kol-nav__entry--link', {\n\t\t\t\t\t\t\t'kol-nav__entry--collapsible': collapsible,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{...entry}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_ariaControls={collapsible && hasChildren && expanded ? ariaID : undefined}\n\t\t\t\t\t\t_ariaExpanded={collapsible && hasChildren ? expanded : undefined}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={clsx('kol-nav__entry kol-nav__entry--button', {\n\t\t\t\t\t\t\t'kol-nav__entry--collapsible': collapsible,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t_label={entry._label}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_ariaControls={collapsible && hasChildren && expanded ? ariaID : undefined}\n\t\t\t\t\t\t_ariaExpanded={collapsible && hasChildren ? expanded : undefined}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: (event: MouseEvent, value: Stringified<StencilUnknown>) => {\n\t\t\t\t\t\t\t\tif (entryIsButton(entry) && typeof entry._on.onClick === 'function') {\n\t\t\t\t\t\t\t\t\tentry._on.onClick(event, value);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tthis.handleToggleExpansionClick(entry._children);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate li(collapsible: boolean, deep: number, index: number, link: ButtonOrLinkOrTextWithChildrenProps, ariaIDparent: string): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));\n\t\tconst ariaID = ariaIDparent + '_' + deep + '_' + index;\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={clsx('kol-nav__list-item', {\n\t\t\t\t\t'kol-nav__list-item--active': active,\n\t\t\t\t\t'kol-nav__list-item--expanded': expanded,\n\t\t\t\t\t'kol-nav__list-item--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, hasChildren, link, expanded, ariaID)}\n\t\t\t\t{expanded && <this.linkList collapsible={collapsible} deep={deep + 1} links={link._children || []} id={ariaID} />}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: { collapsible: boolean; deep: number; links: ButtonOrLinkOrTextWithChildrenProps[]; id: string }): JSX.Element => {\n\t\treturn (\n\t\t\t<ul\n\t\t\t\tclass={clsx('kol-nav__list', {\n\t\t\t\t\t'kol-nav__list--nested': props.deep > 0,\n\t\t\t\t\t'kol-nav__list--vertical': props.deep !== 0,\n\t\t\t\t})}\n\t\t\t\tid={props.deep > 0 ? props.id : undefined}\n\t\t\t>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.deep, index, link, props.id);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tprivate initializeExpandedChildren() {\n\t\t//Reset expandedChildren before recalculation\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [],\n\t\t};\n\t\t/**\n\t\t * Recursively process branches and expand branches which are active or have active children somewhere in the tree.\n\t\t * @param {ButtonOrLinkOrTextWithChildrenProps} branch\n\t\t * @return boolean - true indicates that the current branch or a child branch is active\n\t\t */\n\t\tconst handleBranch = (branch: ButtonOrLinkOrTextWithChildrenProps) => {\n\t\t\tif (branch._active) {\n\t\t\t\tif (branch._children) {\n\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t} else if (branch._children) {\n\t\t\t\tfor (const childBranch of branch._children) {\n\t\t\t\t\tif (handleBranch(childBranch)) {\n\t\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false;\n\t\t};\n\t\tthis.state._links.forEach(handleBranch);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst collapsible = this.state._collapsible === true;\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={clsx('kol-nav', {\n\t\t\t\t\t'kol-nav--is-compact': this.state._hideLabel,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<nav aria-label={this.state._label} class=\"kol-nav__navigation\" id={this.navId}>\n\t\t\t\t\t<this.linkList collapsible={collapsible} deep={0} links={this.state._links} id={this.listId}></this.linkList>\n\t\t\t\t</nav>\n\t\t\t\t{this.state._hasCompactButton && (\n\t\t\t\t\t<div class=\"kol-nav__compact\">\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"kol-nav__toggle-button\"\n\t\t\t\t\t\t\t_ariaControls={this.navId}\n\t\t\t\t\t\t\t_ariaExpanded={!this.state._hideLabel}\n\t\t\t\t\t\t\t_icons={this.state._hideLabel ? 'kolicon-chevron-right' : 'kolicon-chevron-left'}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_label={translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t_hideLabel: !this.state._hideLabel,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\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 * Creates a button below the navigation, that toggles _collapsible.\n\t */\n\t@Prop() public _hasCompactButton?: boolean = false;\n\n\t/**\n\t * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n\t */\n\t@Prop() public _hasIconsWhenExpanded?: 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@State() public state: NavStates = {\n\t\t_collapsible: true,\n\t\t_hasCompactButton: false,\n\t\t_hasIconsWhenExpanded: false,\n\t\t_hideLabel: false,\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t\t_expandedChildren: [],\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('_hasIconsWhenExpanded')\n\tpublic validateHasIconsWhenExpanded(value?: boolean): void {\n\t\tvalidateHasIconsWhenExpanded(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\t\trequired: true,\n\t\t});\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] The navigation structure is not yet validated recursively.`);\n\t\t//Re-initialize expansion on links change\n\t\tthis.initializeExpandedChildren();\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.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}
+{"file":"kol-nav.js","mappings":"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","names":["KolNav","__stencil_proxyCustomElement"],"sources":["src/schema/props/collapsible.ts","src/schema/props/has-compact-button.ts","src/schema/props/has-icons-when-expanded.ts","src/components/nav/style.scss?tag=kol-nav&mode=default&encapsulation=shadow","src/components/nav/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\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 type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\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 type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HasIconsWhenExpandedPropType = boolean;\n\n/**\n * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n */\nexport type PropHasIconsWhenExpanded = {\n\thasIconsWhenExpanded: HasIconsWhenExpandedPropType;\n};\n\n/* validator */\nexport const validateHasIconsWhenExpanded = (component: Generic.Element.Component, value?: HasIconsWhenExpandedPropType): void => {\n\twatchBoolean(component, '_hasIconsWhenExpanded', value);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-nav {\n\t\t$root: &;\n\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\n\t\t&__navigation {\n\t\t\t#{$root}:not(#{$root}--is-compact) & {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.kol-span {\n\t\t\t\twidth: 100%;\n\t\t\t\tjustify-content: flex-start;\n\n\t\t\t\t&__container {\n\t\t\t\t\twidth: 100%;\n\n\t\t\t\t\t.kol-span__label {\n\t\t\t\t\t\tflex: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__list {\n\t\t\tdisplay: flex;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tflex-direction: column;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t&__entry-wrapper {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t&__entry {\n\t\t\tflex-grow: 1;\n\t\t}\n\t}\n\n\t.kol-button {\n\t\ttext-align: left;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tButtonOrLinkOrTextWithChildrenProps,\n\tButtonWithChildrenProps,\n\tCollapsiblePropType,\n\tHideLabelPropType,\n\tKoliBriIconsProp,\n\tLabelPropType,\n\tLinkProps,\n\tLinkWithChildrenProps,\n\tNavAPI,\n\tNavStates,\n\tStringified,\n} from '../../schema';\nimport {\n\ta11yHintLabelingLandmarks,\n\tdevHint,\n\tvalidateCollapsible,\n\tvalidateHasCompactButton,\n\tvalidateHasIconsWhenExpanded,\n\tvalidateHideLabel,\n\tvalidateLabel,\n} from '../../schema';\n\nimport clsx from 'clsx';\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport type { StencilUnknown } from '../../schema';\nimport { nonce } from '../../utils/dev.utils';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\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\nconst entryIsLink = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is LinkWithChildrenProps => {\n\treturn typeof (entryProps as LinkProps)._href === 'string';\n};\n\nconst entryIsButton = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is ButtonWithChildrenProps => {\n\treturn (entryProps as LinkProps)._href === undefined && typeof (entryProps as ButtonWithChildrenProps)._on?.onClick === 'function';\n};\n\n@Component({\n\ttag: 'kol-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolNav implements NavAPI {\n\tprivate readonly navId = 'kol-nav-' + nonce();\n\n\tprivate readonly listId = this.navId + '-list';\n\n\tprivate expandChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [...this.state._expandedChildren, children],\n\t\t};\n\t}\n\tprivate collapseChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren !== children),\n\t\t};\n\t}\n\n\tprivate readonly handleToggleExpansionClick = (children?: ButtonOrLinkOrTextWithChildrenProps[]): void => {\n\t\tif (children) {\n\t\t\tif (this.state._expandedChildren.includes(children)) {\n\t\t\t\tthis.collapseChildren(children);\n\t\t\t} else {\n\t\t\t\tthis.expandChildren(children);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate buildIconObject(collapsible: boolean, expanded: boolean, leftIcon?: string): KoliBriIconsProp {\n\t\tconst icon = {\n\t\t\tleft: '',\n\t\t\tright: '',\n\t\t};\n\t\tif (this.state._hasIconsWhenExpanded && leftIcon) {\n\t\t\ticon.left = leftIcon;\n\t\t}\n\t\tif (this.state._hideLabel) {\n\t\t\tif (leftIcon) {\n\t\t\t\ticon.left = leftIcon;\n\t\t\t} else {\n\t\t\t\ticon.left = 'kolicon-link';\n\t\t\t}\n\t\t}\n\t\tif (collapsible) {\n\t\t\tif (expanded) {\n\t\t\t\ticon.right = 'kolicon-minus';\n\t\t\t} else {\n\t\t\t\ticon.right = 'kolicon-plus';\n\t\t\t}\n\t\t}\n\t\treturn icon;\n\t}\n\n\tprivate entry(collapsible: boolean, hasChildren: boolean, entry: ButtonOrLinkOrTextWithChildrenProps, expanded: boolean, ariaID: string): JSX.Element {\n\t\tconst icons = this.buildIconObject(collapsible && hasChildren, expanded, entry._icons?.toString());\n\n\t\treturn (\n\t\t\t<div class=\"kol-nav__entry-wrapper\">\n\t\t\t\t{entryIsLink(entry) ? (\n\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\tclass={clsx('kol-nav__entry kol-nav__entry--link', {\n\t\t\t\t\t\t\t'kol-nav__entry--collapsible': collapsible,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{...entry}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_ariaControls={collapsible && hasChildren && expanded ? ariaID : undefined}\n\t\t\t\t\t\t_ariaExpanded={collapsible && hasChildren ? expanded : undefined}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={clsx('kol-nav__entry kol-nav__entry--button', {\n\t\t\t\t\t\t\t'kol-nav__entry--collapsible': collapsible,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t_label={entry._label}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_ariaControls={collapsible && hasChildren && expanded ? ariaID : undefined}\n\t\t\t\t\t\t_ariaExpanded={collapsible && hasChildren ? expanded : undefined}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: (event: MouseEvent, value: Stringified<StencilUnknown>) => {\n\t\t\t\t\t\t\t\tif (entryIsButton(entry) && typeof entry._on.onClick === 'function') {\n\t\t\t\t\t\t\t\t\tentry._on.onClick(event, value);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tthis.handleToggleExpansionClick(entry._children);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate li(collapsible: boolean, deep: number, index: number, link: ButtonOrLinkOrTextWithChildrenProps, ariaIDparent: string): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));\n\t\tconst ariaID = ariaIDparent + '_' + deep + '_' + index;\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={clsx('kol-nav__list-item', {\n\t\t\t\t\t'kol-nav__list-item--active': active,\n\t\t\t\t\t'kol-nav__list-item--expanded': expanded,\n\t\t\t\t\t'kol-nav__list-item--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, hasChildren, link, expanded, ariaID)}\n\t\t\t\t{expanded && <this.linkList collapsible={collapsible} deep={deep + 1} links={link._children || []} id={ariaID} />}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: { collapsible: boolean; deep: number; links: ButtonOrLinkOrTextWithChildrenProps[]; id: string }): JSX.Element => {\n\t\treturn (\n\t\t\t<ul\n\t\t\t\tclass={clsx('kol-nav__list', {\n\t\t\t\t\t'kol-nav__list--nested': props.deep > 0,\n\t\t\t\t\t'kol-nav__list--vertical': props.deep !== 0,\n\t\t\t\t})}\n\t\t\t\tid={props.deep > 0 ? props.id : undefined}\n\t\t\t>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.deep, index, link, props.id);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tprivate initializeExpandedChildren() {\n\t\t//Reset expandedChildren before recalculation\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [],\n\t\t};\n\t\t/**\n\t\t * Recursively process branches and expand branches which are active or have active children somewhere in the tree.\n\t\t * @param {ButtonOrLinkOrTextWithChildrenProps} branch\n\t\t * @return boolean - true indicates that the current branch or a child branch is active\n\t\t */\n\t\tconst handleBranch = (branch: ButtonOrLinkOrTextWithChildrenProps) => {\n\t\t\tif (branch._active) {\n\t\t\t\tif (branch._children) {\n\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t} else if (branch._children) {\n\t\t\t\tfor (const childBranch of branch._children) {\n\t\t\t\t\tif (handleBranch(childBranch)) {\n\t\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false;\n\t\t};\n\t\tthis.state._links.forEach(handleBranch);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst collapsible = this.state._collapsible === true;\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={clsx('kol-nav', {\n\t\t\t\t\t'kol-nav--is-compact': this.state._hideLabel,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<nav aria-label={this.state._label} class=\"kol-nav__navigation\" id={this.navId}>\n\t\t\t\t\t<this.linkList collapsible={collapsible} deep={0} links={this.state._links} id={this.listId}></this.linkList>\n\t\t\t\t</nav>\n\t\t\t\t{this.state._hasCompactButton && (\n\t\t\t\t\t<div class=\"kol-nav__compact\">\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"kol-nav__toggle-button\"\n\t\t\t\t\t\t\t_ariaControls={this.navId}\n\t\t\t\t\t\t\t_ariaExpanded={!this.state._hideLabel}\n\t\t\t\t\t\t\t_icons={this.state._hideLabel ? 'kolicon-chevron-right' : 'kolicon-chevron-left'}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_label={translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t_hideLabel: !this.state._hideLabel,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\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 * Creates a button below the navigation, that toggles _collapsible.\n\t */\n\t@Prop() public _hasCompactButton?: boolean = false;\n\n\t/**\n\t * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n\t */\n\t@Prop() public _hasIconsWhenExpanded?: 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@State() public state: NavStates = {\n\t\t_collapsible: true,\n\t\t_hasCompactButton: false,\n\t\t_hasIconsWhenExpanded: false,\n\t\t_hideLabel: false,\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t\t_expandedChildren: [],\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('_hasIconsWhenExpanded')\n\tpublic validateHasIconsWhenExpanded(value?: boolean): void {\n\t\tvalidateHasIconsWhenExpanded(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\t\trequired: true,\n\t\t});\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] The navigation structure is not yet validated recursively.`);\n\t\t//Re-initialize expansion on links change\n\t\tthis.initializeExpandedChildren();\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.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}