@public-ui/components 2.2.11 → 2.2.12

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

@@ -1 +1 @@
-{"file":"kol-logo.js","mappings":"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","names":["KolLogo"],"sources":["src/components/logo/style.scss?tag=kol-logo&mode=default&encapsulation=shadow","src/components/logo/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../style' as *;\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t\tfont-size: rem(16);\n\t}\n\n\ttext {\n\t\tfont-size: rem(16);\n\t\tletter-spacing: normal;\n\t\tword-spacing: normal;\n\t}\n\n\tsvg {\n\t\tmax-height: 100%;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { devHint, setState } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { BUND_LOGO_TEXT_MAP, Bundesamt, Bundesanstalt, Bundesministerium } from '../../enums/bund';\nimport { translate } from '../../i18n';\n\nimport type { API, States } from './types';\nfunction enumToArray(enumeration: Record<string, string>, enumAsMap: Map<string, string> = new Map()): Map<string, string> {\n\tObject.entries(enumeration).map(([key, value]) => {\n\t\tenumAsMap.set(value, key);\n\t});\n\treturn enumAsMap;\n}\n\nconst ENUM_AS_MAP = enumToArray(Bundesamt, enumToArray(Bundesanstalt, enumToArray(Bundesministerium)));\n\nfunction getAriaLabel(organ: string): string {\n\tif (ENUM_AS_MAP.has(organ)) {\n\t\treturn ENUM_AS_MAP.get(organ) as string;\n\t} else {\n\t\treturn '';\n\t}\n}\n\nconst Adler = (): JSX.Element => (\n\t<path\n\t\td=\"M21.72,12.77c0.04-0.33,0.06-0.67,0.06-1c0-0.2,0-0.43,0-0.69c3.06,0,5.74-2.25,5.74-4.78\nc-0.09-1.07-0.56-2.08-1.32-2.84l0.32-0.07c1,0.89,1.61,2.14,1.7,3.48c0,3-3,5.85-6.5,5.92 M18.64,2.21\nc-0.05-0.33-0.19-0.64-0.39-0.91c0-0.31,0.14-0.61,0.64-0.36c-0.27,0.27-0.06,0.76-0.06,0.76s0.55-0.26,0.44-0.62\nC20.09,1.28,19.5,2.38,18.64,2.21 M17.93,3.77c-0.12-0.47-0.34-0.9-0.64-1.27c-0.3-0.42-0.77-0.69-1.29-0.73\nc-0.34,0.03-0.68,0.12-1,0.25c-0.16-0.28-0.27-0.58-0.32-0.9c0-0.22,0.38-0.44,1.1-0.44c1.58,0,2.52,0.71,2.52,1.91\nC18.26,3.01,18.14,3.41,17.93,3.77 M22,24.16c0.13,0,0.26,0.02,0.38,0.07c0.64,1.3,1.4,2.53,2.29,3.68l0,0l0,0\nc0.81-0.14,1.63-0.22,2.45-0.24l0,0c0.1-0.01,0.2,0.01,0.28,0.07c0.07,0.09,0.1,0.2,0.09,0.31c-0.01,0.28-0.08,0.55-0.21,0.79\nc-0.46-0.4-1.07-0.59-1.68-0.51c-0.24,0.01-0.48,0.05-0.71,0.12h-0.07h-0.07l0.48,0.49c0.77,0.83,1.44,1.43,1.44,1.83\nc-0.04,0.31-0.22,0.58-0.48,0.74c-0.22-0.98-0.8-1.84-1.62-2.42h-0.06v0.27c0,0.19,0,0.47,0,0.77c0,1.49-0.15,1.72-0.67,1.72\nc-0.09,0.01-0.19,0.01-0.28,0c0.33-0.49,0.48-1.08,0.41-1.67v-0.7c0-0.27,0.03-0.53,0.06-0.8v-0.11h-0.08\nc-0.33-0.05-0.67-0.09-1-0.1c-0.57-0.07-1.14,0.07-1.6,0.41c-0.24-0.18-0.41-0.44-0.48-0.73c0-0.32,0.19-0.34,0.45-0.34\nc0.14-0.01,0.27-0.01,0.41,0c0.59,0.09,1.18,0.13,1.78,0.12h0.06v-0.06c-0.5-1.13-1.18-2.17-2-3.09c0.1-0.35,0.2-0.59,0.54-0.59\nM12.64,27.87v0.06h0.06c0.55-0.01,1.1-0.06,1.64-0.16c0.14-0.01,0.27-0.01,0.41,0c0.26,0,0.45,0,0.45,0.34\nc-0.07,0.29-0.24,0.55-0.48,0.73c-0.46-0.34-1.03-0.49-1.6-0.41c-0.33,0.01-0.67,0.05-1,0.1H12v0.11\nc0.03,0.27,0.06,0.53,0.06,0.8v0.7c-0.05,0.58,0.1,1.15,0.42,1.63c-0.09,0.01-0.19,0.01-0.28,0c-0.52,0-0.67-0.23-0.67-1.72\nc0-0.3,0-0.58,0-0.77V29l-0.06,0.05c-0.82,0.58-1.39,1.44-1.61,2.42c-0.28-0.14-0.47-0.4-0.53-0.7c0-0.43,0.65-1.07,1.39-1.81\nl0.43-0.43v-0.06h-0.14c-0.23-0.07-0.47-0.11-0.71-0.12c-0.61-0.08-1.22,0.11-1.68,0.51c-0.13-0.24-0.2-0.51-0.21-0.79\nc0.01-0.11,0.06-0.22,0.14-0.3c0.08-0.06,0.18-0.08,0.28-0.07l0,0c0.82,0.02,1.64,0.1,2.45,0.24l0,0l0,0\nc0.88-1.15,1.64-2.38,2.28-3.68c0.12-0.05,0.25-0.07,0.38-0.07c0.35,0,0.44,0.24,0.54,0.59c-0.82,0.92-1.5,1.96-2,3.09\nM7.78,6.87c0.08-1.36,0.7-2.62,1.72-3.52l0.32,0.07C9.06,4.19,8.6,5.19,8.51,6.26c0,2.56,2.73,4.78,5.82,4.78\nc0,0.22,0,0.45,0,0.69c-0.01,0.35,0,0.69,0.03,1.04c-3.5,0-6.58-2.86-6.58-5.92 M31.25,12.23c1.57,2.49,2.8,2.45,4.66,2.45\nc-1.19-0.97-2.21-2.14-3-3.46L30,6.65c-0.29-1.44-1.03-2.75-2.12-3.73c0.31-0.1,0.6-0.24,0.87-0.42c-1.88,0-3.73-1-4.75-1\nc-0.55-0.05-1.03,0.36-1.08,0.91c0,0.58,0.63,1.16,1.73,1.16c0.31,0,0.62-0.04,0.92-0.09c0.65,0.74,1.03,1.67,1.08,2.65\nc0,2-2.41,3.58-4.83,3.58h-0.41c-0.5-0.67-0.84-1.45-1-2.28c0-1.6,1.05-2.9,1.05-4.48c0-0.68-0.24-1.33-0.67-1.85\nc0.29-0.23,0.53-0.52,0.7-0.85c-0.22,0.08-0.45,0.11-0.68,0.09c-1.16,0-2.11-0.3-3-0.3c-0.53,0-0.67,0.16-0.67,0.31\nc-0.01,0.05-0.01,0.1,0,0.15c-0.19-0.08-0.39-0.13-0.59-0.17c-0.29-0.05-0.58-0.08-0.88-0.08c-1.13,0-1.52,0.47-1.52,0.87\nc0.07,0.52,0.27,1.01,0.57,1.44c0.4-0.2,0.84-0.31,1.28-0.34c0.6,0,1.13,0.57,1.41,1.24c-0.29,0.05-0.59,0.07-0.88,0.07\nc-0.68-0.03-1.36-0.16-2-0.39l0,0c0,0,0.31,0.56,0.92,0.78c0.72,0.22,1.46,0.37,2.21,0.45c-0.08,0.21-0.23,0.38-0.43,0.49\nc-0.05,0.02-0.09,0.02-0.14,0c-0.74-0.14-1.45-0.35-2.14-0.65H14.9c0,0.42,1.09,1.35,2.07,1.71c-1.06,1.1-1.87,2.41-2.39,3.85\nh-0.41c-2.42,0-4.82-1.57-4.82-3.58c0.05-0.98,0.43-1.91,1.07-2.65c0.3,0.05,0.61,0.09,0.92,0.09c1.1,0,1.69-0.58,1.74-1.16\nc-0.04-0.55-0.52-0.96-1.07-0.92c0,0,0,0-0.01,0c-1,0-2.88,1-4.76,1C7.51,2.73,7.8,2.87,8.11,2.97C7.03,3.94,6.29,5.23,6,6.65\nl-2.87,4.59c-0.79,1.32-1.81,2.49-3,3.46c1.86,0,3.09,0,4.66-2.45L6.26,9.9c0.11,0.31,0.24,0.61,0.4,0.9l-2.97,4.67\nc-0.79,1.32-1.8,2.49-3,3.46c1.85,0,3.08,0,4.65-2.44l2.52-4c0.19,0.2,0.39,0.4,0.6,0.58l-3.59,5.7c-0.79,1.32-1.8,2.49-3,3.45\nc1.85,0,3.08,0.05,4.65-2.44L10,14.2c0.22,0.14,0.46,0.28,0.7,0.41l-4.27,6.77c-0.79,1.31-1.81,2.48-3,3.45\nc1.85,0,3.08,0,4.65-2.44l4.36-7c0.25,0.1,0.51,0.2,0.78,0.28l-4.95,7.9c-0.79,1.31-1.81,2.48-3,3.45c1.85,0,3.08,0.05,4.65-2.43\nl5.24-8.39h0.16c0.14,0.42,0.22,0.86,0.24,1.3c0,2.64-1.73,5-3.8,6.76c0.19,0.06,0.38,0.09,0.58,0.08c0.3,0.01,0.6-0.01,0.9-0.05\nc-0.57,1.13-1.24,2.21-2,3.23c-0.77-0.13-1.54-0.2-2.32-0.22c-0.67,0-0.75,0.4-0.75,0.75c-0.01,0.53,0.22,1.03,0.62,1.38\nc0.13-0.31,0.38-0.73,1.63-0.73h0.13C10.11,29.13,9,30.06,9,30.77c0.06,0.66,0.59,1.18,1.25,1.24c-0.02-0.14-0.02-0.28,0-0.42\nc0.13-0.69,0.48-1.33,1-1.8c-0.01,0.1-0.01,0.2,0,0.3c0,1.43,0.13,2.08,1,2.08c0.31-0.01,0.61-0.12,0.86-0.31\nc-0.5-0.44-0.73-1.11-0.62-1.77c0-0.21,0-0.41,0-0.69c0.02-0.2,0.02-0.41,0-0.61c0.24-0.02,0.47-0.02,0.71,0\nc0,0,1.29-0.1,1.6,0.57c0.35-0.32,0.86-0.78,0.86-1.27c0-0.33-0.16-0.71-0.83-0.71c-0.25,0-1,0.16-1.7,0.16\nc0.48-0.84,1.04-1.64,1.66-2.39c0.1,0.39,0.31,0.74,0.62,1c0.12-1.17,0.54-2.28,1.21-3.24c0.16,0.93,0.24,1.87,0.23,2.82\nc0,3.55-0.85,6.17-2.66,6.67c0.26,0.46,0.73,0.75,1.25,0.78c0.66,0,1-0.75,1.39-1.46c0.19,0.53,0.72,1.8,1.25,1.8\ns1.06-1.27,1.25-1.8c0.37,0.71,0.73,1.46,1.39,1.46c0.52-0.03,1-0.33,1.26-0.78c-1.82-0.5-2.67-3.12-2.67-6.67\nc-0.01-0.95,0.07-1.89,0.23-2.82c0.68,0.96,1.1,2.07,1.21,3.24c0.31-0.26,0.53-0.61,0.63-1c0.61,0.75,1.15,1.54,1.62,2.38\nc-0.66,0-1.45-0.16-1.7-0.16c-0.67,0-0.82,0.38-0.82,0.71c0,0.49,0.51,1,0.86,1.27c0.3-0.67,1.59-0.57,1.59-0.57\nc0.24-0.02,0.47-0.02,0.71,0c-0.02,0.2-0.02,0.41,0,0.61v0.69c0.11,0.66-0.12,1.33-0.62,1.77c0.25,0.19,0.55,0.3,0.86,0.31\nc0.91,0,1-0.65,1-2.08c0.01-0.1,0.01-0.2,0-0.3c0.52,0.47,0.87,1.11,1,1.8c0.02,0.14,0.02,0.28,0,0.42\nc0.61-0.11,1.06-0.62,1.12-1.23c0-0.74-1.15-1.67-1.52-2.08h0.13c1.25,0,1.5,0.42,1.63,0.73c0.4-0.35,0.63-0.85,0.62-1.38\nc0-0.35-0.07-0.75-0.75-0.75c-0.78,0.02-1.55,0.09-2.32,0.22c-0.76-1.02-1.43-2.1-2-3.23c0.3,0.04,0.6,0.06,0.9,0.05\nc0.19,0.01,0.39-0.02,0.57-0.08c-2.07-1.79-3.8-4.12-3.8-6.76c0.02-0.44,0.1-0.88,0.24-1.3h0.16l5.24,8.39\nc1.57,2.48,2.8,2.43,4.65,2.43c-1.19-0.97-2.21-2.14-3-3.45l-4.92-7.87c0.27-0.08,0.53-0.18,0.79-0.28l4.35,7\nc1.57,2.48,2.8,2.44,4.65,2.44c-1.19-0.97-2.21-2.14-3-3.45l-4.23-6.77c0.24-0.13,0.48-0.27,0.7-0.41l3.42,5.55\nc1.57,2.49,2.8,2.44,4.65,2.44c-1.19-0.97-2.21-2.13-3-3.45l-3.55-5.69c0.2-0.18,0.4-0.38,0.59-0.58l2.52,4\nc1.57,2.48,2.8,2.44,4.65,2.44c-1.2-0.97-2.21-2.14-3-3.46l-2.99-4.7c0.16-0.29,0.29-0.59,0.4-0.9L31.25,12.23z\"\n\t></path>\n);\n\n/**\n * @deprecated\n */\n@Component({\n\ttag: 'kol-logo',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolLogo implements API {\n\t/**\n\t * Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an.\n\t */\n\t@Prop() public _org!: Bundesministerium | Bundesamt | Bundesanstalt;\n\n\t@State() public state: States = {\n\t\t_org: Bundesanstalt['Informationstechnikzentrum Bund'],\n\t};\n\n\t@Watch('_org')\n\tpublic validateOrg(value?: Bundesministerium | Bundesamt | Bundesanstalt): void {\n\t\tif (typeof value === 'string' && ENUM_AS_MAP.has(value)) {\n\t\t\tsetState(this, '_org', value);\n\t\t} else {\n\t\t\tdevHint(`The abbreviation (${value as string}) used is not defined!`);\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOrg(this._org);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-logo\">\n\t\t\t\t<svg\n\t\t\t\t\taria-label={translate('kol-logo-description', { placeholders: { orgShort: this.state._org, orgLong: getAriaLabel(this.state._org) } })}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\tviewBox=\"0 0 225 100\"\n\t\t\t\t>\n\t\t\t\t\t<rect width=\"100%\" height=\"100%\" fill=\"white\"></rect>\n\t\t\t\t\t<svg x=\"0\" y=\"4\" height=\"75\">\n\t\t\t\t\t\t<Adler />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg x=\"40.5\" y=\"3.5\" height=\"100\">\n\t\t\t\t\t\t<rect width=\"5\" height=\"30\"></rect>\n\t\t\t\t\t\t<rect y=\"30\" width=\"5\" height=\"30\" fill=\"red\"></rect>\n\t\t\t\t\t\t<rect y=\"60\" width=\"5\" height=\"30\" fill=\"#fc0\"></rect>\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg x=\"50\" y=\"0\">\n\t\t\t\t\t\t<text x=\"0\" y=\"-0.05em\" font-family=\"Verdana\" style={{ backgroundColor: 'white', color: 'black' }}>\n\t\t\t\t\t\t\t{BUND_LOGO_TEXT_MAP.has(this.state._org) ? (\n\t\t\t\t\t\t\t\t<tspan>\n\t\t\t\t\t\t\t\t\t{BUND_LOGO_TEXT_MAP.get(this.state._org)?.map((text: string, index: number) => {\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\" key={`kol-logo-text-${index}`}>\n\t\t\t\t\t\t\t\t\t\t\t\t{text}\n\t\t\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<tspan fill=\"red\">\n\t\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\">\n\t\t\t\t\t\t\t\t\t\tDer Schlüsselwert\n\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\" font-weight=\"bold\">\n\t\t\t\t\t\t\t\t\t\t'{this.state._org}'\n\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\">\n\t\t\t\t\t\t\t\t\t\tist nicht definiert.\n\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\">\n\t\t\t\t\t\t\t\t\t\toder freigegeben.\n\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t</svg>\n\t\t\t\t</svg>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-logo.js","mappings":"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","names":["KolLogo"],"sources":["src/components/logo/style.scss?tag=kol-logo&mode=default&encapsulation=shadow","src/components/logo/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../style' as *;\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\ttext {\n\t\tletter-spacing: normal;\n\t\tword-spacing: normal;\n\t}\n\n\tsvg {\n\t\tmax-height: 100%;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { devHint, setState } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { BUND_LOGO_TEXT_MAP, Bundesamt, Bundesanstalt, Bundesministerium } from '../../enums/bund';\nimport { translate } from '../../i18n';\n\nimport type { API, States } from './types';\nfunction enumToArray(enumeration: Record<string, string>, enumAsMap: Map<string, string> = new Map()): Map<string, string> {\n\tObject.entries(enumeration).map(([key, value]) => {\n\t\tenumAsMap.set(value, key);\n\t});\n\treturn enumAsMap;\n}\n\nconst ENUM_AS_MAP = enumToArray(Bundesamt, enumToArray(Bundesanstalt, enumToArray(Bundesministerium)));\n\nfunction getAriaLabel(organ: string): string {\n\tif (ENUM_AS_MAP.has(organ)) {\n\t\treturn ENUM_AS_MAP.get(organ) as string;\n\t} else {\n\t\treturn '';\n\t}\n}\n\nconst Adler = (): JSX.Element => (\n\t<path\n\t\td=\"M21.72,12.77c0.04-0.33,0.06-0.67,0.06-1c0-0.2,0-0.43,0-0.69c3.06,0,5.74-2.25,5.74-4.78\nc-0.09-1.07-0.56-2.08-1.32-2.84l0.32-0.07c1,0.89,1.61,2.14,1.7,3.48c0,3-3,5.85-6.5,5.92 M18.64,2.21\nc-0.05-0.33-0.19-0.64-0.39-0.91c0-0.31,0.14-0.61,0.64-0.36c-0.27,0.27-0.06,0.76-0.06,0.76s0.55-0.26,0.44-0.62\nC20.09,1.28,19.5,2.38,18.64,2.21 M17.93,3.77c-0.12-0.47-0.34-0.9-0.64-1.27c-0.3-0.42-0.77-0.69-1.29-0.73\nc-0.34,0.03-0.68,0.12-1,0.25c-0.16-0.28-0.27-0.58-0.32-0.9c0-0.22,0.38-0.44,1.1-0.44c1.58,0,2.52,0.71,2.52,1.91\nC18.26,3.01,18.14,3.41,17.93,3.77 M22,24.16c0.13,0,0.26,0.02,0.38,0.07c0.64,1.3,1.4,2.53,2.29,3.68l0,0l0,0\nc0.81-0.14,1.63-0.22,2.45-0.24l0,0c0.1-0.01,0.2,0.01,0.28,0.07c0.07,0.09,0.1,0.2,0.09,0.31c-0.01,0.28-0.08,0.55-0.21,0.79\nc-0.46-0.4-1.07-0.59-1.68-0.51c-0.24,0.01-0.48,0.05-0.71,0.12h-0.07h-0.07l0.48,0.49c0.77,0.83,1.44,1.43,1.44,1.83\nc-0.04,0.31-0.22,0.58-0.48,0.74c-0.22-0.98-0.8-1.84-1.62-2.42h-0.06v0.27c0,0.19,0,0.47,0,0.77c0,1.49-0.15,1.72-0.67,1.72\nc-0.09,0.01-0.19,0.01-0.28,0c0.33-0.49,0.48-1.08,0.41-1.67v-0.7c0-0.27,0.03-0.53,0.06-0.8v-0.11h-0.08\nc-0.33-0.05-0.67-0.09-1-0.1c-0.57-0.07-1.14,0.07-1.6,0.41c-0.24-0.18-0.41-0.44-0.48-0.73c0-0.32,0.19-0.34,0.45-0.34\nc0.14-0.01,0.27-0.01,0.41,0c0.59,0.09,1.18,0.13,1.78,0.12h0.06v-0.06c-0.5-1.13-1.18-2.17-2-3.09c0.1-0.35,0.2-0.59,0.54-0.59\nM12.64,27.87v0.06h0.06c0.55-0.01,1.1-0.06,1.64-0.16c0.14-0.01,0.27-0.01,0.41,0c0.26,0,0.45,0,0.45,0.34\nc-0.07,0.29-0.24,0.55-0.48,0.73c-0.46-0.34-1.03-0.49-1.6-0.41c-0.33,0.01-0.67,0.05-1,0.1H12v0.11\nc0.03,0.27,0.06,0.53,0.06,0.8v0.7c-0.05,0.58,0.1,1.15,0.42,1.63c-0.09,0.01-0.19,0.01-0.28,0c-0.52,0-0.67-0.23-0.67-1.72\nc0-0.3,0-0.58,0-0.77V29l-0.06,0.05c-0.82,0.58-1.39,1.44-1.61,2.42c-0.28-0.14-0.47-0.4-0.53-0.7c0-0.43,0.65-1.07,1.39-1.81\nl0.43-0.43v-0.06h-0.14c-0.23-0.07-0.47-0.11-0.71-0.12c-0.61-0.08-1.22,0.11-1.68,0.51c-0.13-0.24-0.2-0.51-0.21-0.79\nc0.01-0.11,0.06-0.22,0.14-0.3c0.08-0.06,0.18-0.08,0.28-0.07l0,0c0.82,0.02,1.64,0.1,2.45,0.24l0,0l0,0\nc0.88-1.15,1.64-2.38,2.28-3.68c0.12-0.05,0.25-0.07,0.38-0.07c0.35,0,0.44,0.24,0.54,0.59c-0.82,0.92-1.5,1.96-2,3.09\nM7.78,6.87c0.08-1.36,0.7-2.62,1.72-3.52l0.32,0.07C9.06,4.19,8.6,5.19,8.51,6.26c0,2.56,2.73,4.78,5.82,4.78\nc0,0.22,0,0.45,0,0.69c-0.01,0.35,0,0.69,0.03,1.04c-3.5,0-6.58-2.86-6.58-5.92 M31.25,12.23c1.57,2.49,2.8,2.45,4.66,2.45\nc-1.19-0.97-2.21-2.14-3-3.46L30,6.65c-0.29-1.44-1.03-2.75-2.12-3.73c0.31-0.1,0.6-0.24,0.87-0.42c-1.88,0-3.73-1-4.75-1\nc-0.55-0.05-1.03,0.36-1.08,0.91c0,0.58,0.63,1.16,1.73,1.16c0.31,0,0.62-0.04,0.92-0.09c0.65,0.74,1.03,1.67,1.08,2.65\nc0,2-2.41,3.58-4.83,3.58h-0.41c-0.5-0.67-0.84-1.45-1-2.28c0-1.6,1.05-2.9,1.05-4.48c0-0.68-0.24-1.33-0.67-1.85\nc0.29-0.23,0.53-0.52,0.7-0.85c-0.22,0.08-0.45,0.11-0.68,0.09c-1.16,0-2.11-0.3-3-0.3c-0.53,0-0.67,0.16-0.67,0.31\nc-0.01,0.05-0.01,0.1,0,0.15c-0.19-0.08-0.39-0.13-0.59-0.17c-0.29-0.05-0.58-0.08-0.88-0.08c-1.13,0-1.52,0.47-1.52,0.87\nc0.07,0.52,0.27,1.01,0.57,1.44c0.4-0.2,0.84-0.31,1.28-0.34c0.6,0,1.13,0.57,1.41,1.24c-0.29,0.05-0.59,0.07-0.88,0.07\nc-0.68-0.03-1.36-0.16-2-0.39l0,0c0,0,0.31,0.56,0.92,0.78c0.72,0.22,1.46,0.37,2.21,0.45c-0.08,0.21-0.23,0.38-0.43,0.49\nc-0.05,0.02-0.09,0.02-0.14,0c-0.74-0.14-1.45-0.35-2.14-0.65H14.9c0,0.42,1.09,1.35,2.07,1.71c-1.06,1.1-1.87,2.41-2.39,3.85\nh-0.41c-2.42,0-4.82-1.57-4.82-3.58c0.05-0.98,0.43-1.91,1.07-2.65c0.3,0.05,0.61,0.09,0.92,0.09c1.1,0,1.69-0.58,1.74-1.16\nc-0.04-0.55-0.52-0.96-1.07-0.92c0,0,0,0-0.01,0c-1,0-2.88,1-4.76,1C7.51,2.73,7.8,2.87,8.11,2.97C7.03,3.94,6.29,5.23,6,6.65\nl-2.87,4.59c-0.79,1.32-1.81,2.49-3,3.46c1.86,0,3.09,0,4.66-2.45L6.26,9.9c0.11,0.31,0.24,0.61,0.4,0.9l-2.97,4.67\nc-0.79,1.32-1.8,2.49-3,3.46c1.85,0,3.08,0,4.65-2.44l2.52-4c0.19,0.2,0.39,0.4,0.6,0.58l-3.59,5.7c-0.79,1.32-1.8,2.49-3,3.45\nc1.85,0,3.08,0.05,4.65-2.44L10,14.2c0.22,0.14,0.46,0.28,0.7,0.41l-4.27,6.77c-0.79,1.31-1.81,2.48-3,3.45\nc1.85,0,3.08,0,4.65-2.44l4.36-7c0.25,0.1,0.51,0.2,0.78,0.28l-4.95,7.9c-0.79,1.31-1.81,2.48-3,3.45c1.85,0,3.08,0.05,4.65-2.43\nl5.24-8.39h0.16c0.14,0.42,0.22,0.86,0.24,1.3c0,2.64-1.73,5-3.8,6.76c0.19,0.06,0.38,0.09,0.58,0.08c0.3,0.01,0.6-0.01,0.9-0.05\nc-0.57,1.13-1.24,2.21-2,3.23c-0.77-0.13-1.54-0.2-2.32-0.22c-0.67,0-0.75,0.4-0.75,0.75c-0.01,0.53,0.22,1.03,0.62,1.38\nc0.13-0.31,0.38-0.73,1.63-0.73h0.13C10.11,29.13,9,30.06,9,30.77c0.06,0.66,0.59,1.18,1.25,1.24c-0.02-0.14-0.02-0.28,0-0.42\nc0.13-0.69,0.48-1.33,1-1.8c-0.01,0.1-0.01,0.2,0,0.3c0,1.43,0.13,2.08,1,2.08c0.31-0.01,0.61-0.12,0.86-0.31\nc-0.5-0.44-0.73-1.11-0.62-1.77c0-0.21,0-0.41,0-0.69c0.02-0.2,0.02-0.41,0-0.61c0.24-0.02,0.47-0.02,0.71,0\nc0,0,1.29-0.1,1.6,0.57c0.35-0.32,0.86-0.78,0.86-1.27c0-0.33-0.16-0.71-0.83-0.71c-0.25,0-1,0.16-1.7,0.16\nc0.48-0.84,1.04-1.64,1.66-2.39c0.1,0.39,0.31,0.74,0.62,1c0.12-1.17,0.54-2.28,1.21-3.24c0.16,0.93,0.24,1.87,0.23,2.82\nc0,3.55-0.85,6.17-2.66,6.67c0.26,0.46,0.73,0.75,1.25,0.78c0.66,0,1-0.75,1.39-1.46c0.19,0.53,0.72,1.8,1.25,1.8\ns1.06-1.27,1.25-1.8c0.37,0.71,0.73,1.46,1.39,1.46c0.52-0.03,1-0.33,1.26-0.78c-1.82-0.5-2.67-3.12-2.67-6.67\nc-0.01-0.95,0.07-1.89,0.23-2.82c0.68,0.96,1.1,2.07,1.21,3.24c0.31-0.26,0.53-0.61,0.63-1c0.61,0.75,1.15,1.54,1.62,2.38\nc-0.66,0-1.45-0.16-1.7-0.16c-0.67,0-0.82,0.38-0.82,0.71c0,0.49,0.51,1,0.86,1.27c0.3-0.67,1.59-0.57,1.59-0.57\nc0.24-0.02,0.47-0.02,0.71,0c-0.02,0.2-0.02,0.41,0,0.61v0.69c0.11,0.66-0.12,1.33-0.62,1.77c0.25,0.19,0.55,0.3,0.86,0.31\nc0.91,0,1-0.65,1-2.08c0.01-0.1,0.01-0.2,0-0.3c0.52,0.47,0.87,1.11,1,1.8c0.02,0.14,0.02,0.28,0,0.42\nc0.61-0.11,1.06-0.62,1.12-1.23c0-0.74-1.15-1.67-1.52-2.08h0.13c1.25,0,1.5,0.42,1.63,0.73c0.4-0.35,0.63-0.85,0.62-1.38\nc0-0.35-0.07-0.75-0.75-0.75c-0.78,0.02-1.55,0.09-2.32,0.22c-0.76-1.02-1.43-2.1-2-3.23c0.3,0.04,0.6,0.06,0.9,0.05\nc0.19,0.01,0.39-0.02,0.57-0.08c-2.07-1.79-3.8-4.12-3.8-6.76c0.02-0.44,0.1-0.88,0.24-1.3h0.16l5.24,8.39\nc1.57,2.48,2.8,2.43,4.65,2.43c-1.19-0.97-2.21-2.14-3-3.45l-4.92-7.87c0.27-0.08,0.53-0.18,0.79-0.28l4.35,7\nc1.57,2.48,2.8,2.44,4.65,2.44c-1.19-0.97-2.21-2.14-3-3.45l-4.23-6.77c0.24-0.13,0.48-0.27,0.7-0.41l3.42,5.55\nc1.57,2.49,2.8,2.44,4.65,2.44c-1.19-0.97-2.21-2.13-3-3.45l-3.55-5.69c0.2-0.18,0.4-0.38,0.59-0.58l2.52,4\nc1.57,2.48,2.8,2.44,4.65,2.44c-1.2-0.97-2.21-2.14-3-3.46l-2.99-4.7c0.16-0.29,0.29-0.59,0.4-0.9L31.25,12.23z\"\n\t></path>\n);\n\n/**\n * @deprecated\n */\n@Component({\n\ttag: 'kol-logo',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolLogo implements API {\n\t/**\n\t * Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an.\n\t */\n\t@Prop() public _org!: Bundesministerium | Bundesamt | Bundesanstalt;\n\n\t@State() public state: States = {\n\t\t_org: Bundesanstalt['Informationstechnikzentrum Bund'],\n\t};\n\n\t@Watch('_org')\n\tpublic validateOrg(value?: Bundesministerium | Bundesamt | Bundesanstalt): void {\n\t\tif (typeof value === 'string' && ENUM_AS_MAP.has(value)) {\n\t\t\tsetState(this, '_org', value);\n\t\t} else {\n\t\t\tdevHint(`The abbreviation (${value as string}) used is not defined!`);\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOrg(this._org);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-logo\">\n\t\t\t\t<svg\n\t\t\t\t\taria-label={translate('kol-logo-description', { placeholders: { orgShort: this.state._org, orgLong: getAriaLabel(this.state._org) } })}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\tviewBox=\"0 0 225 100\"\n\t\t\t\t>\n\t\t\t\t\t<rect width=\"100%\" height=\"100%\" fill=\"white\"></rect>\n\t\t\t\t\t<svg x=\"0\" y=\"4\" height=\"75\">\n\t\t\t\t\t\t<Adler />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg x=\"40.5\" y=\"3.5\" height=\"100\">\n\t\t\t\t\t\t<rect width=\"5\" height=\"30\"></rect>\n\t\t\t\t\t\t<rect y=\"30\" width=\"5\" height=\"30\" fill=\"red\"></rect>\n\t\t\t\t\t\t<rect y=\"60\" width=\"5\" height=\"30\" fill=\"#fc0\"></rect>\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg x=\"50\" y=\"0\">\n\t\t\t\t\t\t<text x=\"0\" y=\"-0.05em\" font-family=\"Verdana\" style={{ backgroundColor: 'white', color: 'black' }}>\n\t\t\t\t\t\t\t{BUND_LOGO_TEXT_MAP.has(this.state._org) ? (\n\t\t\t\t\t\t\t\t<tspan>\n\t\t\t\t\t\t\t\t\t{BUND_LOGO_TEXT_MAP.get(this.state._org)?.map((text: string, index: number) => {\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\" key={`kol-logo-text-${index}`}>\n\t\t\t\t\t\t\t\t\t\t\t\t{text}\n\t\t\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<tspan fill=\"red\">\n\t\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\">\n\t\t\t\t\t\t\t\t\t\tDer Schlüsselwert\n\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\" font-weight=\"bold\">\n\t\t\t\t\t\t\t\t\t\t'{this.state._org}'\n\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\">\n\t\t\t\t\t\t\t\t\t\tist nicht definiert.\n\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t<tspan x=\"0\" dy=\"1.1em\">\n\t\t\t\t\t\t\t\t\t\toder freigegeben.\n\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t</svg>\n\t\t\t\t</svg>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/kol-modal.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{w as watchValidator,s as setState,d as watchString}from"./prop.validators.js";import{v as validateLabel}from"./label.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: 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 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 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}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-component {\n  .kol-modal {\n    border: 0;\n    padding: 0;\n  }\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.33);\n  }\n}",KolModalDefaultStyle0=defaultStyleCss,KolModal$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._activeElement=void 0,this._label=void 0,this._on=void 0,this._width="100%",this.state={_activeElement:null,_label:"",_width:"100%"}}componentDidRender(){var e;this.state._activeElement&&(null===(e=this.refDialog)||void 0===e||e.showModal())}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var e,n;null===(n=null===(e=this.state._on)||void 0===e?void 0:e.onClose)||void 0===n||n.call(e)}async openModal(){var e;null===(e=this.refDialog)||void 0===e||e.showModal()}async closeModal(){var e,n;this._activeElement=null,null===(n=null===(e=this.refDialog)||void 0===e?void 0:e.close)||void 0===n||n.call(e)}render(){return h("dialog",{key:"60cb0446cef2f09e240cf1c726c291b9ed7d236d",class:"kol-modal",ref:e=>{this.refDialog=e},style:{width:this.state._width},"aria-label":this.state._label,onClose:this.handleNativeCloseEvent.bind(this)},h("div",{key:"58dab73678e09f898a432f3a22879a1f150a98a5"},h("slot",{key:"ea74a2c036fd070e2ed21731888a24b4846174fe"})))}validateActiveElement(e){watchValidator(this,"_activeElement",(e=>"object"==typeof e||null===e),new Set(["HTMLElement","null"]),e,{defaultValue:null,hooks:{afterPatch:()=>{this.state._activeElement?this.openModal():this.closeModal()}}})}validateLabel(e){validateLabel(this,e,{required:!0})}validateOn(e){if("object"==typeof e&&null!==e){const n={};"function"!=typeof e.onClose&&!0!==e.onClose||(n.onClose=e.onClose),setState(this,"_on",n)}}validateWidth(e){watchString(this,"_width",e,{defaultValue:"100%"})}componentWillLoad(){this.validateActiveElement(this._activeElement),this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width)}static get watchers(){return{_activeElement:["validateActiveElement"],_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"]}}static get style(){return{default:KolModalDefaultStyle0}}},[33,"kol-modal",{_activeElement:[1040],_label:[1],_on:[16],_width:[1],state:[32],openModal:[64],closeModal:[64]},void 0,{_activeElement:["validateActiveElement"],_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-modal"].forEach((e=>{if("kol-modal"===e)customElements.get(e)||customElements.define(e,KolModal$1)}))}const KolModal=KolModal$1,defineCustomElement=defineCustomElement$1;export{KolModal,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{w as watchValidator,k as setState,l as watchString}from"./index2.js";import{v as validateLabel}from"./label.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\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     * 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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: 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 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 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}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-component {\n  .kol-modal {\n    border: 0;\n    padding: 0;\n  }\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.33);\n  }\n}",KolModalDefaultStyle0=defaultStyleCss,KolModal$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._activeElement=void 0,this._label=void 0,this._on=void 0,this._width="100%",this.state={_activeElement:null,_label:"",_width:"100%"}}componentDidRender(){var e;this.state._activeElement&&(null===(e=this.refDialog)||void 0===e||e.showModal())}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var e,n;null===(n=null===(e=this.state._on)||void 0===e?void 0:e.onClose)||void 0===n||n.call(e)}async openModal(){var e;null===(e=this.refDialog)||void 0===e||e.showModal()}async closeModal(){var e,n;this._activeElement=null,null===(n=null===(e=this.refDialog)||void 0===e?void 0:e.close)||void 0===n||n.call(e)}render(){return h("dialog",{key:"60cb0446cef2f09e240cf1c726c291b9ed7d236d",class:"kol-modal",ref:e=>{this.refDialog=e},style:{width:this.state._width},"aria-label":this.state._label,onClose:this.handleNativeCloseEvent.bind(this)},h("div",{key:"58dab73678e09f898a432f3a22879a1f150a98a5"},h("slot",{key:"ea74a2c036fd070e2ed21731888a24b4846174fe"})))}validateActiveElement(e){watchValidator(this,"_activeElement",(e=>"object"==typeof e||null===e),new Set(["HTMLElement","null"]),e,{defaultValue:null,hooks:{afterPatch:()=>{this.state._activeElement?this.openModal():this.closeModal()}}})}validateLabel(e){validateLabel(this,e,{required:!0})}validateOn(e){if("object"==typeof e&&null!==e){const n={};"function"!=typeof e.onClose&&!0!==e.onClose||(n.onClose=e.onClose),setState(this,"_on",n)}}validateWidth(e){watchString(this,"_width",e,{defaultValue:"100%"})}componentWillLoad(){this.validateActiveElement(this._activeElement),this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width)}static get watchers(){return{_activeElement:["validateActiveElement"],_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"]}}static get style(){return{default:KolModalDefaultStyle0}}},[33,"kol-modal",{_activeElement:[1040],_label:[1],_on:[16],_width:[1],state:[32],openModal:[64],closeModal:[64]},void 0,{_activeElement:["validateActiveElement"],_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-modal"].forEach((e=>{if("kol-modal"===e)customElements.get(e)||customElements.define(e,KolModal$1)}))}const KolModal=KolModal$1,defineCustomElement=defineCustomElement$1;export{KolModal,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-modal.js","mappings":"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","names":["KolModal"],"sources":["src/components/modal/style.scss?tag=kol-modal&mode=default&encapsulation=shadow","src/components/modal/shadow.tsx"],"sourcesContent":["@use '../style' as *;\n\n@layer kol-component {\n\t.kol-modal {\n\t\tborder: 0;\n\t\tpadding: 0;\n\n\t\t&::backdrop {\n\t\t\tbackground-color: rgb(0, 0, 0, 0.33);\n\t\t}\n\t}\n}\n","import type { KoliBriModalEventCallbacks, LabelPropType, ModalAPI, ModalStates } from '../../schema';\nimport { setState, validateLabel, watchString, watchValidator } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Method } from '@stencil/core';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\n/**\n * https://en.wikipedia.org/wiki/Modal_window\n *\n * @slot - The modal's contents.\n */\n@Component({\n\ttag: 'kol-modal',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolModal implements ModalAPI {\n\tprivate refDialog?: HTMLDialogElement;\n\n\tpublic componentDidRender(): void {\n\t\tif (this.state._activeElement) {\n\t\t\tthis.refDialog?.showModal();\n\t\t}\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tvoid this.closeModal();\n\t}\n\n\tprivate handleNativeCloseEvent() {\n\t\tthis.state._on?.onClose?.();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tasync openModal() {\n\t\tthis.refDialog?.showModal();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeModal() {\n\t\tthis._activeElement = null;\n\n\t\t/* The optional chaining for the `close` method is not strictly necessary, but a simple/lazy workaround for HTMLDialog not being implemented in jsdom, causing Jest tests to fail. It may be removed in the future. */\n\t\tthis.refDialog?.close?.();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<dialog\n\t\t\t\tclass=\"kol-modal\"\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.refDialog = el;\n\t\t\t\t}}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: this.state._width,\n\t\t\t\t}}\n\t\t\t\taria-label={this.state._label}\n\t\t\t\tonClose={this.handleNativeCloseEvent.bind(this)}\n\t\t\t>\n\t\t\t\t{/* It's necessary to have a block element container for cross-browser compatibility. The display property for the slot content is unknown and could be inline. */}\n\t\t\t\t<div>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</dialog>\n\t\t);\n\t}\n\n\t/**\n\t * Legacy property - while set to an HTMLElement, the modal is open.\n\t * @deprecated Use methode `openModal` and `closeModal` instead.\n\t */\n\t@Prop({ mutable: true }) public _activeElement?: HTMLElement | null;\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 modal callback functions.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t/**\n\t * Defines the width of the modal. (max-width: 100%)\n\t */\n\t@Prop() public _width?: string = '100%';\n\n\t@State() public state: ModalStates = {\n\t\t_activeElement: null,\n\t\t_label: '', // ⚠ required\n\t\t_width: '100%',\n\t};\n\n\t@Watch('_activeElement')\n\tpublic validateActiveElement(value?: HTMLElement | null): void {\n\t\twatchValidator(this, '_activeElement', (value): boolean => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {\n\t\t\tdefaultValue: null,\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.state._activeElement) {\n\t\t\t\t\t\tvoid this.openModal();\n\t\t\t\t\t} else {\n\t\t\t\t\t\tvoid this.closeModal();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriModalEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriModalEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' || value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriModalEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_width')\n\tpublic validateWidth(value?: string): void {\n\t\twatchString(this, '_width', value, {\n\t\t\tdefaultValue: '100%',\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateActiveElement(this._activeElement);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateWidth(this._width);\n\t}\n}\n"],"version":3}
+{"file":"kol-modal.js","mappings":"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","names":["KolModal"],"sources":["src/components/modal/style.scss?tag=kol-modal&mode=default&encapsulation=shadow","src/components/modal/shadow.tsx"],"sourcesContent":["@use '../style' as *;\n\n@layer kol-component {\n\t.kol-modal {\n\t\tborder: 0;\n\t\tpadding: 0;\n\n\t\t&::backdrop {\n\t\t\tbackground-color: rgb(0, 0, 0, 0.33);\n\t\t}\n\t}\n}\n","import type { KoliBriModalEventCallbacks, LabelPropType, ModalAPI, ModalStates } from '../../schema';\nimport { setState, validateLabel, watchString, watchValidator } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Method } from '@stencil/core';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\n/**\n * https://en.wikipedia.org/wiki/Modal_window\n *\n * @slot - The modal's contents.\n */\n@Component({\n\ttag: 'kol-modal',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolModal implements ModalAPI {\n\tprivate refDialog?: HTMLDialogElement;\n\n\tpublic componentDidRender(): void {\n\t\tif (this.state._activeElement) {\n\t\t\tthis.refDialog?.showModal();\n\t\t}\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tvoid this.closeModal();\n\t}\n\n\tprivate handleNativeCloseEvent() {\n\t\tthis.state._on?.onClose?.();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tasync openModal() {\n\t\tthis.refDialog?.showModal();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeModal() {\n\t\tthis._activeElement = null;\n\n\t\t/* The optional chaining for the `close` method is not strictly necessary, but a simple/lazy workaround for HTMLDialog not being implemented in jsdom, causing Jest tests to fail. It may be removed in the future. */\n\t\tthis.refDialog?.close?.();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<dialog\n\t\t\t\tclass=\"kol-modal\"\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.refDialog = el;\n\t\t\t\t}}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: this.state._width,\n\t\t\t\t}}\n\t\t\t\taria-label={this.state._label}\n\t\t\t\tonClose={this.handleNativeCloseEvent.bind(this)}\n\t\t\t>\n\t\t\t\t{/* It's necessary to have a block element container for cross-browser compatibility. The display property for the slot content is unknown and could be inline. */}\n\t\t\t\t<div>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</dialog>\n\t\t);\n\t}\n\n\t/**\n\t * Legacy property - while set to an HTMLElement, the modal is open.\n\t * @deprecated Use methode `openModal` and `closeModal` instead.\n\t */\n\t@Prop({ mutable: true }) public _activeElement?: HTMLElement | null;\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 modal callback functions.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t/**\n\t * Defines the width of the modal. (max-width: 100%)\n\t */\n\t@Prop() public _width?: string = '100%';\n\n\t@State() public state: ModalStates = {\n\t\t_activeElement: null,\n\t\t_label: '', // ⚠ required\n\t\t_width: '100%',\n\t};\n\n\t@Watch('_activeElement')\n\tpublic validateActiveElement(value?: HTMLElement | null): void {\n\t\twatchValidator(this, '_activeElement', (value): boolean => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {\n\t\t\tdefaultValue: null,\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.state._activeElement) {\n\t\t\t\t\t\tvoid this.openModal();\n\t\t\t\t\t} else {\n\t\t\t\t\t\tvoid this.closeModal();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriModalEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriModalEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' || value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriModalEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_width')\n\tpublic validateWidth(value?: string): void {\n\t\twatchString(this, '_width', value, {\n\t\t\tdefaultValue: '100%',\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateActiveElement(this._activeElement);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateWidth(this._width);\n\t}\n}\n"],"version":3}

package/dist/components/kol-nav.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as translate}from"./i18n2.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{l as KolLinkWcTag,c as KolButtonWcTag}from"./component-names.js";import{b as watchBoolean,t as devWarning,h as a11yHintLabelingLandmarks,q as devHint,w as watchValidator}from"./prop.validators.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateLabel}from"./label.js";const validateCollapsible=(n,e)=>{watchBoolean(n,"_collapsible",e)},validateHasCompactButton=(n,e)=>{watchBoolean(n,"_hasCompactButton",e)},validateHasIconsWhenExpanded=(n,e)=>{watchBoolean(n,"_hasIconsWhenExpanded",e)},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: 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 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 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}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host > div {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    place-items: center;\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .list.horizontal {\n    flex-wrap: wrap;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry-item {\n    flex-grow: 1;\n  }\n  .entry .kol-span-wc {\n    place-items: start;\n  }\n  .entry .button {\n    text-align: left;\n  }\n}",KolNavDefaultStyle0=defaultStyleCss,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(){super(),this.__registerHost(),this.__attachShadow(),this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>h("ul",{class:"list "+(0===n.deep&&"horizontal"===n.orientation?" horizontal":" vertical"),"data-deep":n.deep},n.links.map(((e,t)=>this.li(n.collapsible,n.hideLabel,n.deep,t,e,n.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_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))})}entry(n,e,t,a,i){const o=this.state._hasIconsWhenExpanded||this.state._hideLabel?a._icons||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0;return h("div",{class:{entry:!0,"hide-label":e}},entryIsLink(a)?h(KolLinkWcTag,Object.assign({class:"entry-item"},a,{_hideLabel:e,_icons:o})):h(KolButtonWcTag,{class:"entry-item",_label:a._label,_hideLabel:e,_icons:o,_on:{onClick:(n,e)=>{entryIsButton(a)&&"function"==typeof a._on.onClick?a._on.onClick(n,e):this.handleToggleExpansionClick(a._children)}}}),t?this.expandButton(n,a,i):"")}expandButton(n,e,t){return h(KolButtonWcTag,{class:"expand-button",_ariaExpanded:t,_disabled:!n,_icons:"codicon codicon-"+(t?"remove":"add"),_hideLabel:!0,_label:`${translate(t?"kol-nav-label-close":"kol-nav-label-open",{placeholders:{label:e._label}})}`,_on:{onClick:()=>this.handleToggleExpansionClick(e._children)}})}li(n,e,t,a,i,o){const l=!!i._active,s=Array.isArray(i._children)&&i._children.length>0,d=Boolean(i._children&&this.state._expandedChildren.includes(i._children));return h("li",{class:{active:l,expanded:d,"has-children":s},key:a},this.entry(n,e,s,i,d),d&&h(this.linkList,{collapsible:n,hideLabel:e,deep:t+1,links:i._children||[],orientation:o}))}initializeExpandedChildren(){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(){let n=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,devWarning("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const e=!0===this.state._collapsible,t=!0===this.state._hideLabel,a=this.state._orientation;return h(Host,{key:"2f99b331652b65a6a32b0437f7b6ff97e0c479c4",class:"kol-nav"},h("div",{key:"d1825525e2da6232d7a866d2d404bcf8cd470216",class:{nav:!0,[a]:!0,"is-compact":this.state._hideLabel}},h("nav",{key:"17062f279e5193ac2f70324d1cdea290ee8390dd","aria-label":this.state._label,id:"nav"},h(this.linkList,{key:"e03c1e27b4c635ed92b3f2f3f53299ca029dbd1e",collapsible:e,hideLabel:t,deep:0,links:this.state._links,orientation:a})),n&&h("div",{key:"a2f2f57fa121eb06842b97954e4eb1235fb8bfd6",class:"compact"},h(KolButtonWcTag,{key:"53141f7e5a40005cf8a657c520b23cce17dced74",class:"toggle-button",_ariaControls:"nav",_ariaExpanded:!t,_icons:t?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:translate(t?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_variant:"ghost"}))))}validateCollapsible(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.")}validateOrientation(n){watchValidator(this,"_orientation",(n=>"horizontal"===n||"vertical"===n),new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}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.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}static get style(){return{default:KolNavDefaultStyle0}}},[33,"kol-nav",{_collapsible:[4],_hasCompactButton:[4,"_has-compact-button"],_hasIconsWhenExpanded:[4,"_has-icons-when-expanded"],_hideLabel:[4,"_hide-label"],_label:[1],_links:[1],_orientation:[1],state:[32]},void 0,{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}]);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,Host}from"@stencil/core/internal/client";import{i as watchBoolean,E as devWarning,t as a11yHintLabelingLandmarks,D as devHint,w as watchValidator}from"./index2.js";import{t as translate}from"./i18n2.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{l as KolLinkWcTag,c as KolButtonWcTag}from"./component-names.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateLabel}from"./label.js";const validateCollapsible=(n,e)=>{watchBoolean(n,"_collapsible",e)},validateHasCompactButton=(n,e)=>{watchBoolean(n,"_hasCompactButton",e)},validateHasIconsWhenExpanded=(n,e)=>{watchBoolean(n,"_hasIconsWhenExpanded",e)},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\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     * 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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: 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 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 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}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host > div {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    place-items: center;\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .list.horizontal {\n    flex-wrap: wrap;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry-item {\n    flex-grow: 1;\n  }\n  .entry .kol-span-wc {\n    place-items: start;\n  }\n  .entry .button {\n    text-align: left;\n  }\n}",KolNavDefaultStyle0=defaultStyleCss,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(){super(),this.__registerHost(),this.__attachShadow(),this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>h("ul",{class:"list "+(0===n.deep&&"horizontal"===n.orientation?" horizontal":" vertical"),"data-deep":n.deep},n.links.map(((e,t)=>this.li(n.collapsible,n.hideLabel,n.deep,t,e,n.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_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))})}entry(n,e,t,a,i){const o=this.state._hasIconsWhenExpanded||this.state._hideLabel?a._icons||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0;return h("div",{class:{entry:!0,"hide-label":e}},entryIsLink(a)?h(KolLinkWcTag,Object.assign({class:"entry-item"},a,{_hideLabel:e,_icons:o})):h(KolButtonWcTag,{class:"entry-item",_label:a._label,_hideLabel:e,_icons:o,_on:{onClick:(n,e)=>{entryIsButton(a)&&"function"==typeof a._on.onClick?a._on.onClick(n,e):this.handleToggleExpansionClick(a._children)}}}),t?this.expandButton(n,a,i):"")}expandButton(n,e,t){return h(KolButtonWcTag,{class:"expand-button",_ariaExpanded:t,_disabled:!n,_icons:"codicon codicon-"+(t?"remove":"add"),_hideLabel:!0,_label:`${translate(t?"kol-nav-label-close":"kol-nav-label-open",{placeholders:{label:e._label}})}`,_on:{onClick:()=>this.handleToggleExpansionClick(e._children)}})}li(n,e,t,a,i,o){const l=!!i._active,s=Array.isArray(i._children)&&i._children.length>0,d=Boolean(i._children&&this.state._expandedChildren.includes(i._children));return h("li",{class:{active:l,expanded:d,"has-children":s},key:a},this.entry(n,e,s,i,d),d&&h(this.linkList,{collapsible:n,hideLabel:e,deep:t+1,links:i._children||[],orientation:o}))}initializeExpandedChildren(){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(){let n=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,devWarning("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const e=!0===this.state._collapsible,t=!0===this.state._hideLabel,a=this.state._orientation;return h(Host,{key:"d9108ec054086cf2f6b65cce95822b3b63c4db4a",class:"kol-nav"},h("div",{key:"cb1f7e7c6b19cab07c80c72cd2cc7de3a1a12d51",class:{nav:!0,[a]:!0,"is-compact":this.state._hideLabel}},h("nav",{key:"5105b5b852a1d61bfa0cfc0a81ddc9144010b453","aria-label":this.state._label,id:"nav"},h(this.linkList,{key:"e022de29606bd54b3052f28f6eac2b0fe069548f",collapsible:e,hideLabel:t,deep:0,links:this.state._links,orientation:a})),n&&h("div",{key:"f8efb0785c1f2ad67c5f1779813c1c6c42953244",class:"compact"},h(KolButtonWcTag,{key:"c71f67af07946aea47527f3b1e95ace6293e276c",class:"toggle-button",_ariaControls:"nav",_ariaExpanded:!t,_icons:t?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:translate(t?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_variant:"ghost"}))))}validateCollapsible(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.")}validateOrientation(n){watchValidator(this,"_orientation",(n=>"horizontal"===n||"vertical"===n),new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}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.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}static get style(){return{default:KolNavDefaultStyle0}}},[33,"kol-nav",{_collapsible:[4],_hasCompactButton:[4,"_has-compact-button"],_hasIconsWhenExpanded:[4,"_has-icons-when-expanded"],_hideLabel:[4,"_hide-label"],_label:[1],_links:[1],_orientation:[1],state:[32]},void 0,{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}]);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"],"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 '../style' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t:host > div {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tplace-items: center;\n\t}\n\n\t.list {\n\t\tdisplay: flex;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.list.vertical {\n\t\tflex-direction: column;\n\t}\n\n\t.list.horizontal {\n\t\tflex-wrap: wrap;\n\t}\n\n\t.entry {\n\t\tdisplay: flex;\n\t}\n\n\t.entry-item {\n\t\tflex-grow: 1;\n\t}\n\n\t.entry {\n\t\t.kol-span-wc {\n\t\t\tplace-items: start;\n\t\t}\n\n\t\t.button {\n\t\t\ttext-align: left;\n\t\t}\n\t}\n}\n","import type {\n\tButtonOrLinkOrTextWithChildrenProps,\n\tButtonWithChildrenProps,\n\tCollapsiblePropType,\n\tHideLabelPropType,\n\tLabelPropType,\n\tLinkProps,\n\tLinkWithChildrenProps,\n\tNavAPI,\n\tNavStates,\n\tOrientation,\n\tStringified,\n} from '../../schema';\nimport {\n\ta11yHintLabelingLandmarks,\n\tdevHint,\n\tdevWarning,\n\tvalidateCollapsible,\n\tvalidateHasCompactButton,\n\tvalidateHasIconsWhenExpanded,\n\tvalidateHideLabel,\n\tvalidateLabel,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from './validation';\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport type { StencilUnknown } from '../../schema';\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 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 entry(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\thasChildren: boolean,\n\t\tentry: ButtonOrLinkOrTextWithChildrenProps,\n\t\texpanded: boolean,\n\t): JSX.Element {\n\t\tconst icons =\n\t\t\tthis.state._hasIconsWhenExpanded || this.state._hideLabel\n\t\t\t\t? entry._icons || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)\n\t\t\t\t: undefined;\n\n\t\treturn (\n\t\t\t<div class={{ entry: true, 'hide-label': hideLabel }}>\n\t\t\t\t{entryIsLink(entry) ? (\n\t\t\t\t\t<KolLinkWcTag class=\"entry-item\" {...entry} _hideLabel={hideLabel} _icons={icons} />\n\t\t\t\t) : (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"entry-item\"\n\t\t\t\t\t\t_label={entry._label}\n\t\t\t\t\t\t_hideLabel={hideLabel}\n\t\t\t\t\t\t_icons={icons}\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} else {\n\t\t\t\t\t\t\t\t\tthis.handleToggleExpansionClick(entry._children);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{hasChildren ? this.expandButton(collapsible, entry as ButtonWithChildrenProps, expanded) : ''}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate expandButton(collapsible: boolean, link: ButtonWithChildrenProps, expanded: boolean): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tclass=\"expand-button\"\n\t\t\t\t_ariaExpanded={expanded}\n\t\t\t\t_disabled={!collapsible}\n\t\t\t\t_icons={'codicon codicon-' + (expanded ? 'remove' : 'add')}\n\t\t\t\t_hideLabel\n\t\t\t\t_label={`${expanded ? translate('kol-nav-label-close', { placeholders: { label: link._label } }) : translate('kol-nav-label-open', { placeholders: { label: link._label } })}`}\n\t\t\t\t_on={{ onClick: () => this.handleToggleExpansionClick(link._children) }}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tprivate li(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\tdeep: number,\n\t\tindex: number,\n\t\tlink: ButtonOrLinkOrTextWithChildrenProps,\n\t\torientation: Orientation,\n\t): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={{\n\t\t\t\t\tactive,\n\t\t\t\t\texpanded,\n\t\t\t\t\t'has-children': hasChildren,\n\t\t\t\t}}\n\t\t\t\tkey={index}\n\t\t\t>\n\t\t\t\t{this.entry(collapsible, hideLabel, hasChildren, link, expanded)}\n\t\t\t\t{expanded && <this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={deep + 1} links={link._children || []} orientation={orientation} />}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: {\n\t\tcollapsible: boolean;\n\t\thideLabel: HideLabelPropType;\n\t\tdeep: number;\n\t\tlinks: ButtonOrLinkOrTextWithChildrenProps[];\n\t\torientation: Orientation;\n\t}): JSX.Element => {\n\t\treturn (\n\t\t\t<ul class={`list ${props.deep === 0 && props.orientation === 'horizontal' ? ' horizontal' : ' vertical'}`} data-deep={props.deep}>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tprivate initializeExpandedChildren() {\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\tlet hasCompactButton = this.state._hasCompactButton;\n\t\tif (this.state._orientation === 'horizontal' && this.state._hasCompactButton === true) {\n\t\t\thasCompactButton = false;\n\t\t\tdevWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);\n\t\t}\n\t\tconst collapsible = this.state._collapsible === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\t\tconst orientation = this.state._orientation;\n\t\treturn (\n\t\t\t<Host class=\"kol-nav\">\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tnav: true,\n\t\t\t\t\t\t[orientation]: true,\n\t\t\t\t\t\t'is-compact': this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<nav aria-label={this.state._label} id=\"nav\">\n\t\t\t\t\t\t<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={0} links={this.state._links} orientation={orientation}></this.linkList>\n\t\t\t\t\t</nav>\n\t\t\t\t\t{hasCompactButton && (\n\t\t\t\t\t\t<div class=\"compact\">\n\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\tclass=\"toggle-button\"\n\t\t\t\t\t\t\t\t_ariaControls=\"nav\"\n\t\t\t\t\t\t\t\t_ariaExpanded={!hideLabel}\n\t\t\t\t\t\t\t\t_icons={hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left'}\n\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t_label={translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel: this.state._hideLabel === false,\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines if navigation nodes can be collapsed or not. Enabled by default.\n\t * @TODO: Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _collapsible?: boolean = true;\n\n\t/**\n\t * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\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/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t@State() public state: 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_orientation: 'vertical',\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}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' || value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t},\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCollapsible(this._collapsible);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateHasCompactButton(this._hasCompactButton);\n\t\tthis.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n\n// console.log(\n//   stringifyJson([\n//     { _label: '1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//     { _label: '2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n//     {\n//       _active: true,\n//       _label: '3 Navigationspunkt',\n//       _href: '#abc',\n//       _icons: 'codicon codicon-folder-closed',\n//       _children: [\n//         { _label: '3.1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n//         { _label: '3.2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//         {\n//           _active: true,\n//           _label: '3.3 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _active: true, _label: '3.3.1 Navigationspunkt (aktiv)', _href: '#abc' },\n//             { _label: '3.3.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         {\n//           _label: '3.4 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _label: '3.4.1 Navigationspunkt', _href: '#abc' },\n//             { _label: '3.4.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         { _label: '3.5 Navigationspunkt', _href: '#abc' },\n//       ],\n//     },\n//     { _label: '4 Navigationspunkt', _href: '#abc' },\n//   ])\n// );\n"],"version":3}
+{"file":"kol-nav.js","mappings":"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","names":["KolNav"],"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 '../style' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t:host > div {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tplace-items: center;\n\t}\n\n\t.list {\n\t\tdisplay: flex;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.list.vertical {\n\t\tflex-direction: column;\n\t}\n\n\t.list.horizontal {\n\t\tflex-wrap: wrap;\n\t}\n\n\t.entry {\n\t\tdisplay: flex;\n\t}\n\n\t.entry-item {\n\t\tflex-grow: 1;\n\t}\n\n\t.entry {\n\t\t.kol-span-wc {\n\t\t\tplace-items: start;\n\t\t}\n\n\t\t.button {\n\t\t\ttext-align: left;\n\t\t}\n\t}\n}\n","import type {\n\tButtonOrLinkOrTextWithChildrenProps,\n\tButtonWithChildrenProps,\n\tCollapsiblePropType,\n\tHideLabelPropType,\n\tLabelPropType,\n\tLinkProps,\n\tLinkWithChildrenProps,\n\tNavAPI,\n\tNavStates,\n\tOrientation,\n\tStringified,\n} from '../../schema';\nimport {\n\ta11yHintLabelingLandmarks,\n\tdevHint,\n\tdevWarning,\n\tvalidateCollapsible,\n\tvalidateHasCompactButton,\n\tvalidateHasIconsWhenExpanded,\n\tvalidateHideLabel,\n\tvalidateLabel,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from './validation';\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport type { StencilUnknown } from '../../schema';\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 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 entry(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\thasChildren: boolean,\n\t\tentry: ButtonOrLinkOrTextWithChildrenProps,\n\t\texpanded: boolean,\n\t): JSX.Element {\n\t\tconst icons =\n\t\t\tthis.state._hasIconsWhenExpanded || this.state._hideLabel\n\t\t\t\t? entry._icons || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)\n\t\t\t\t: undefined;\n\n\t\treturn (\n\t\t\t<div class={{ entry: true, 'hide-label': hideLabel }}>\n\t\t\t\t{entryIsLink(entry) ? (\n\t\t\t\t\t<KolLinkWcTag class=\"entry-item\" {...entry} _hideLabel={hideLabel} _icons={icons} />\n\t\t\t\t) : (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"entry-item\"\n\t\t\t\t\t\t_label={entry._label}\n\t\t\t\t\t\t_hideLabel={hideLabel}\n\t\t\t\t\t\t_icons={icons}\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} else {\n\t\t\t\t\t\t\t\t\tthis.handleToggleExpansionClick(entry._children);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{hasChildren ? this.expandButton(collapsible, entry as ButtonWithChildrenProps, expanded) : ''}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate expandButton(collapsible: boolean, link: ButtonWithChildrenProps, expanded: boolean): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tclass=\"expand-button\"\n\t\t\t\t_ariaExpanded={expanded}\n\t\t\t\t_disabled={!collapsible}\n\t\t\t\t_icons={'codicon codicon-' + (expanded ? 'remove' : 'add')}\n\t\t\t\t_hideLabel\n\t\t\t\t_label={`${expanded ? translate('kol-nav-label-close', { placeholders: { label: link._label } }) : translate('kol-nav-label-open', { placeholders: { label: link._label } })}`}\n\t\t\t\t_on={{ onClick: () => this.handleToggleExpansionClick(link._children) }}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tprivate li(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\tdeep: number,\n\t\tindex: number,\n\t\tlink: ButtonOrLinkOrTextWithChildrenProps,\n\t\torientation: Orientation,\n\t): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={{\n\t\t\t\t\tactive,\n\t\t\t\t\texpanded,\n\t\t\t\t\t'has-children': hasChildren,\n\t\t\t\t}}\n\t\t\t\tkey={index}\n\t\t\t>\n\t\t\t\t{this.entry(collapsible, hideLabel, hasChildren, link, expanded)}\n\t\t\t\t{expanded && <this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={deep + 1} links={link._children || []} orientation={orientation} />}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: {\n\t\tcollapsible: boolean;\n\t\thideLabel: HideLabelPropType;\n\t\tdeep: number;\n\t\tlinks: ButtonOrLinkOrTextWithChildrenProps[];\n\t\torientation: Orientation;\n\t}): JSX.Element => {\n\t\treturn (\n\t\t\t<ul class={`list ${props.deep === 0 && props.orientation === 'horizontal' ? ' horizontal' : ' vertical'}`} data-deep={props.deep}>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tprivate initializeExpandedChildren() {\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\tlet hasCompactButton = this.state._hasCompactButton;\n\t\tif (this.state._orientation === 'horizontal' && this.state._hasCompactButton === true) {\n\t\t\thasCompactButton = false;\n\t\t\tdevWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);\n\t\t}\n\t\tconst collapsible = this.state._collapsible === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\t\tconst orientation = this.state._orientation;\n\t\treturn (\n\t\t\t<Host class=\"kol-nav\">\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tnav: true,\n\t\t\t\t\t\t[orientation]: true,\n\t\t\t\t\t\t'is-compact': this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<nav aria-label={this.state._label} id=\"nav\">\n\t\t\t\t\t\t<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={0} links={this.state._links} orientation={orientation}></this.linkList>\n\t\t\t\t\t</nav>\n\t\t\t\t\t{hasCompactButton && (\n\t\t\t\t\t\t<div class=\"compact\">\n\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\tclass=\"toggle-button\"\n\t\t\t\t\t\t\t\t_ariaControls=\"nav\"\n\t\t\t\t\t\t\t\t_ariaExpanded={!hideLabel}\n\t\t\t\t\t\t\t\t_icons={hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left'}\n\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t_label={translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel: this.state._hideLabel === false,\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines if navigation nodes can be collapsed or not. Enabled by default.\n\t * @TODO: Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _collapsible?: boolean = true;\n\n\t/**\n\t * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\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/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t@State() public state: 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_orientation: 'vertical',\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}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' || value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t},\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCollapsible(this._collapsible);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateHasCompactButton(this._hasCompactButton);\n\t\tthis.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n\n// console.log(\n//   stringifyJson([\n//     { _label: '1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//     { _label: '2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n//     {\n//       _active: true,\n//       _label: '3 Navigationspunkt',\n//       _href: '#abc',\n//       _icons: 'codicon codicon-folder-closed',\n//       _children: [\n//         { _label: '3.1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n//         { _label: '3.2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//         {\n//           _active: true,\n//           _label: '3.3 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _active: true, _label: '3.3.1 Navigationspunkt (aktiv)', _href: '#abc' },\n//             { _label: '3.3.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         {\n//           _label: '3.4 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _label: '3.4.1 Navigationspunkt', _href: '#abc' },\n//             { _label: '3.4.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         { _label: '3.5 Navigationspunkt', _href: '#abc' },\n//       ],\n//     },\n//     { _label: '4 Navigationspunkt', _href: '#abc' },\n//   ])\n// );\n"],"version":3}

package/dist/components/kol-pagination.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as translate}from"./i18n2.js";import{n as nonce}from"./dev.utils2.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{c as KolButtonWcTag,n as KolSelectTag}from"./component-names.js";import{S as STATE_CHANGE_EVENT}from"./common.js";import{v as watchNumber,w as watchValidator,i as watchJsonArrayString,p as parseJson}from"./prop.validators.js";import{v as validateCustomClass}from"./custom-class.js";import{v as validateLabel}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";const validateMax=(t,e,n)=>{watchNumber(t,"_max",e,n)},defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: 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 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 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}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    align-items: center;\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n  }\n  .navigation-list {\n    align-items: center;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 0.5em;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .separator:before {\n    content: \"•••\";\n  }\n}",KolPaginationDefaultStyle0=defaultStyleCss,leftDoubleArrowIcon={left:"codicon codicon-debug-reverse-continue"},leftSingleArrow={left:"codicon codicon-chevron-left"},rightSingleArrowIcon={right:"codicon codicon-chevron-right"},rightDoubleArrowIcon={right:"codicon codicon-debug-continue"};function getUserLanguage(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}const userLanguage=getUserLanguage(),NUMBER_FORMATTER=new Intl.NumberFormat(userLanguage,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),KolPagination$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.nonce=nonce(),this.calcCount=(t,e=1)=>Math.ceil(t/e),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this.onClick=(t,e)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,e),this.onChangePage(t,e)},this.onChangePage=(t,e)=>{const n=setTimeout((()=>{clearTimeout(n),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,e)}))},this.onChangePageSize=(t,e)=>{if("number"==typeof(e=parseInt(e[0]))&&e>0&&this._pageSize!==e){this._pageSize=e;const n=setTimeout((()=>{clearTimeout(n),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize)}))}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,e)=>{let n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;const a=e.has("_pageSizeOptions")?e.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(a)&&a.length>0){const t=a.find((t=>t.value===n));n=void 0===t?a[0].value:t.value,e.set("_pageSize",n)}const i=e.has("_page")?e.get("_page"):this.state._page,o=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,i,e.get("_pageSize"),o)},this.syncPage=(t,e,n,a)=>{if(a>0){const i=this.calcCount(a,n);i>0&&(e>i?(t.set("_page",i),this.onChangePage(STATE_CHANGE_EVENT,i)):e<1&&(t.set("_page",1),this.onChangePage(STATE_CHANGE_EVENT,1)))}},this.beforePageSizeOptions=(t,e)=>{const n=[];if(Array.isArray(t))for(const e of t)"number"==typeof e&&n.push({label:translate("kol-page-per-site",{placeholders:{entries:`${e}`}}),value:e});e.set("_pageSizeOptions",n),this.beforePageSize(n,e)},this._boundaryCount=1,this._customClass=void 0,this._label=void 0,this._hasButtons=!0,this._page=void 0,this._pageSize=1,this._pageSizeOptions=[],this._on=void 0,this._siblingCount=1,this._tooltipAlign="top",this._max=void 0,this.state={_boundaryCount:1,_label:translate("kol-pagination"),_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0}}render(){var t;let e=!1;const n=this.getCount(),a=Array.from(Array(n).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>n-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(e=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===e?(e=!1,h("li",{key:nonce()},h("span",{class:"separator","aria-hidden":"true"}))):null));return h(Host,{class:"kol-pagination"},h("nav",{"aria-label":this.state._label},h("ul",{class:"navigation-list"},this.state._hasButtons.first&&h("li",null,h(KolButtonWcTag,{class:"first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:leftDoubleArrowIcon,_hideLabel:!0,_label:translate("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&h("li",null,h(KolButtonWcTag,{class:"previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:leftSingleArrow,_hideLabel:!0,_label:translate("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),a,this.state._hasButtons.next&&h("li",null,h(KolButtonWcTag,{class:"next",exportparts:"icon",_customClass:this.state._customClass,_disabled:n<=this.state._page,_icons:rightSingleArrowIcon,_hideLabel:!0,_label:translate("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&h("li",null,h(KolButtonWcTag,{class:"last",exportparts:"icon",_customClass:this.state._customClass,_disabled:n<=this.state._page,_icons:rightDoubleArrowIcon,_hideLabel:!0,_label:translate("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&h(KolSelectTag,{_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:translate("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return h("li",{key:nonce()},h(KolButtonWcTag,{exportparts:"icon",_customClass:this.state._customClass,_label:"",_on:{onClick:e=>{this.onClick(e,t)}}},h("span",{slot:"expert"},h("span",{class:"visually-hidden"},translate("kol-page"))," ",NUMBER_FORMATTER.format(t))))}getSelectedPageButton(t){return h("li",{key:nonce()},h(KolButtonWcTag,{class:"selected",_customClass:this.state._customClass,_disabled:!0,_label:""},h("span",{slot:"expert"},h("span",{class:"visually-hidden"},translate("kol-page"))," ",NUMBER_FORMATTER.format(t))))}validateBoundaryCount(t){watchNumber(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){validateCustomClass(this,t)}validateLabel(t,e,n=!1){n||removeNavLabel(this.state._label),validateLabel(this,t),addNavLabel(this.state._label)}validateHasButtons(t){watchValidator(this,"_hasButtons",(t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,e)=>{if("boolean"==typeof t)e.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=parseJson(t)}catch(t){e.delete("_hasButtons")}"object"==typeof t&&null!==t&&e.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){watchNumber(this,"_page",t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize,a=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,t,n,a)}}})}validatePageSize(t){watchNumber(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){watchJsonArrayString(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){watchNumber(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){validateMax(this,t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_page")?e.get("_page"):this.state._page,a=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;this.syncPage(e,n,a,t)}}})}validateTooltipAlign(t){validateTooltipAlign(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}static get style(){return{default:KolPaginationDefaultStyle0}}},[33,"kol-pagination",{_boundaryCount:[2,"_boundary-count"],_customClass:[1,"_custom-class"],_label:[1],_hasButtons:[8,"_has-buttons"],_page:[2],_pageSize:[1026,"_page-size"],_pageSizeOptions:[1,"_page-size-options"],_on:[16],_siblingCount:[2,"_sibling-count"],_tooltipAlign:[1,"_tooltip-align"],_max:[2],state:[32]},void 0,{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-pagination"].forEach((t=>{if("kol-pagination"===t)customElements.get(t)||customElements.define(t,KolPagination$1)}))}const KolPagination=KolPagination$1,defineCustomElement=defineCustomElement$1;export{KolPagination,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{F as watchNumber,S as STATE_CHANGE_EVENT,w as watchValidator,v as watchJsonArrayString,m as parseJson}from"./index2.js";import{t as translate}from"./i18n2.js";import{n as nonce}from"./dev.utils.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{c as KolButtonWcTag,n as KolSelectTag}from"./component-names.js";import{v as validateCustomClass}from"./custom-class.js";import{v as validateLabel}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";const validateMax=(t,e,n)=>{watchNumber(t,"_max",e,n)},defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\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     * 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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: 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 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 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}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    align-items: center;\n    display: grid;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n  }\n  .navigation-list {\n    align-items: center;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 0.5em;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .separator:before {\n    content: \"•••\";\n  }\n}",KolPaginationDefaultStyle0=defaultStyleCss,leftDoubleArrowIcon={left:"codicon codicon-debug-reverse-continue"},leftSingleArrow={left:"codicon codicon-chevron-left"},rightSingleArrowIcon={right:"codicon codicon-chevron-right"},rightDoubleArrowIcon={right:"codicon codicon-debug-continue"};function getUserLanguage(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}const userLanguage=getUserLanguage(),NUMBER_FORMATTER=new Intl.NumberFormat(userLanguage,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),KolPagination$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.nonce=nonce(),this.calcCount=(t,e=1)=>Math.ceil(t/e),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this.onClick=(t,e)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,e),this.onChangePage(t,e)},this.onChangePage=(t,e)=>{const n=setTimeout((()=>{clearTimeout(n),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,e)}))},this.onChangePageSize=(t,e)=>{if("number"==typeof(e=parseInt(e[0]))&&e>0&&this._pageSize!==e){this._pageSize=e;const n=setTimeout((()=>{clearTimeout(n),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize)}))}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,e)=>{let n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;const a=e.has("_pageSizeOptions")?e.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(a)&&a.length>0){const t=a.find((t=>t.value===n));n=void 0===t?a[0].value:t.value,e.set("_pageSize",n)}const i=e.has("_page")?e.get("_page"):this.state._page,o=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,i,e.get("_pageSize"),o)},this.syncPage=(t,e,n,a)=>{if(a>0){const i=this.calcCount(a,n);i>0&&(e>i?(t.set("_page",i),this.onChangePage(STATE_CHANGE_EVENT,i)):e<1&&(t.set("_page",1),this.onChangePage(STATE_CHANGE_EVENT,1)))}},this.beforePageSizeOptions=(t,e)=>{const n=[];if(Array.isArray(t))for(const e of t)"number"==typeof e&&n.push({label:translate("kol-page-per-site",{placeholders:{entries:`${e}`}}),value:e});e.set("_pageSizeOptions",n),this.beforePageSize(n,e)},this._boundaryCount=1,this._customClass=void 0,this._label=void 0,this._hasButtons=!0,this._page=void 0,this._pageSize=1,this._pageSizeOptions=[],this._on=void 0,this._siblingCount=1,this._tooltipAlign="top",this._max=void 0,this.state={_boundaryCount:1,_label:translate("kol-pagination"),_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0}}render(){var t;let e=!1;const n=this.getCount(),a=Array.from(Array(n).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>n-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(e=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===e?(e=!1,h("li",{key:nonce()},h("span",{class:"separator","aria-hidden":"true"}))):null));return h(Host,{class:"kol-pagination"},h("nav",{"aria-label":this.state._label},h("ul",{class:"navigation-list"},this.state._hasButtons.first&&h("li",null,h(KolButtonWcTag,{class:"first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:leftDoubleArrowIcon,_hideLabel:!0,_label:translate("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&h("li",null,h(KolButtonWcTag,{class:"previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:leftSingleArrow,_hideLabel:!0,_label:translate("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),a,this.state._hasButtons.next&&h("li",null,h(KolButtonWcTag,{class:"next",exportparts:"icon",_customClass:this.state._customClass,_disabled:n<=this.state._page,_icons:rightSingleArrowIcon,_hideLabel:!0,_label:translate("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&h("li",null,h(KolButtonWcTag,{class:"last",exportparts:"icon",_customClass:this.state._customClass,_disabled:n<=this.state._page,_icons:rightDoubleArrowIcon,_hideLabel:!0,_label:translate("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&h(KolSelectTag,{_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:translate("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return h("li",{key:nonce()},h(KolButtonWcTag,{exportparts:"icon",_customClass:this.state._customClass,_label:"",_on:{onClick:e=>{this.onClick(e,t)}}},h("span",{slot:"expert"},h("span",{class:"visually-hidden"},translate("kol-page"))," ",NUMBER_FORMATTER.format(t))))}getSelectedPageButton(t){return h("li",{key:nonce()},h(KolButtonWcTag,{class:"selected",_customClass:this.state._customClass,_disabled:!0,_label:""},h("span",{slot:"expert"},h("span",{class:"visually-hidden"},translate("kol-page"))," ",NUMBER_FORMATTER.format(t))))}validateBoundaryCount(t){watchNumber(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){validateCustomClass(this,t)}validateLabel(t,e,n=!1){n||removeNavLabel(this.state._label),validateLabel(this,t),addNavLabel(this.state._label)}validateHasButtons(t){watchValidator(this,"_hasButtons",(t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,e)=>{if("boolean"==typeof t)e.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=parseJson(t)}catch(t){e.delete("_hasButtons")}"object"==typeof t&&null!==t&&e.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){watchNumber(this,"_page",t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize,a=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,t,n,a)}}})}validatePageSize(t){watchNumber(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){watchJsonArrayString(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){watchNumber(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){validateMax(this,t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_page")?e.get("_page"):this.state._page,a=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;this.syncPage(e,n,a,t)}}})}validateTooltipAlign(t){validateTooltipAlign(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}static get style(){return{default:KolPaginationDefaultStyle0}}},[33,"kol-pagination",{_boundaryCount:[2,"_boundary-count"],_customClass:[1,"_custom-class"],_label:[1],_hasButtons:[8,"_has-buttons"],_page:[2],_pageSize:[1026,"_page-size"],_pageSizeOptions:[1,"_page-size-options"],_on:[16],_siblingCount:[2,"_sibling-count"],_tooltipAlign:[1,"_tooltip-align"],_max:[2],state:[32]},void 0,{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-pagination"].forEach((t=>{if("kol-pagination"===t)customElements.get(t)||customElements.define(t,KolPagination$1)}))}const KolPagination=KolPagination$1,defineCustomElement=defineCustomElement$1;export{KolPagination,defineCustomElement};