@public-ui/components 2.0.2 → 2.0.4-rc.0

package/dist/kolibri/kol-nav.entry.js.map

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

package/dist/kolibri/kol-pagination.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e}from"./index-5dfe6d77.js";import{a as i}from"./i18n-9a4c8edc.js";import{v as s}from"./custom-class-6cd3b804.js";import{v as o}from"./label-8258848f.js";import{v as a}from"./tooltip-align-a3d27a89.js";import{n as l}from"./dev.utils-889226ab.js";import{e as h,w as r,c as d,p as c}from"./prop.validators-c12923a5.js";import{r as p,a as u}from"./unique-nav-labels-62d9802d.js";import{S as f}from"./reuse-d79ab469.js";import"./index-12eec578.js";import"./a11y.tipps-f14bff66.js";import"./alignment-3d2d9391.js";const b=(t,e,n)=>{h(t,"_max",e,n)},m="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tgap: 1rem;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\t.navigation-list {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 0.5em;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.separator:before {\n\t\tcontent: '•••';\n\t}\n}\n",g={left:"codicon codicon-debug-reverse-continue"},_={left:"codicon codicon-chevron-left"},y={right:"codicon codicon-chevron-right"},v={right:"codicon codicon-debug-continue"},k=class{constructor(e){t(this,e),this.nonce=l(),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 i=e.has("_pageSizeOptions")?e.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(i)&&i.length>0){const t=i.find((t=>t.value===n));n=void 0===t?i[0].value:t.value,e.set("_pageSize",n)}const s=e.has("_page")?e.get("_page"):this.state._page,a=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,s,e.get("_pageSize"),a)},this.syncPage=(t,e,n,i)=>{if(i>0){const s=this.calcCount(i,n);s>0&&(e>s?(t.set("_page",s),this.onChangePage(f,s)):e<1&&(t.set("_page",1),this.onChangePage(f,1)))}},this.beforePageSizeOptions=(t,e)=>{const n=[];if(Array.isArray(t))for(const e of t)"number"==typeof e&&n.push({label:i("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:i("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 s=!1;const a=this.getCount(),o=Array.from(Array(a).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>a-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(s=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===s?(s=!1,n("li",null,n("span",{class:"separator",key:`${this.nonce}-el-${t}`,"aria-hidden":"true"}))):null));return n(e,null,n("nav",{"aria-label":this.state._label},n("ul",{class:"navigation-list"},this.state._hasButtons.first&&n("li",null,n("kol-button-wc",{class:"first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:g,_hideLabel:!0,_label:i("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&n("li",null,n("kol-button-wc",{class:"previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:_,_hideLabel:!0,_label:i("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),o,this.state._hasButtons.next&&n("li",null,n("kol-button-wc",{class:"next",exportparts:"icon",_customClass:this.state._customClass,_disabled:a<=this.state._page,_icons:y,_hideLabel:!0,_label:i("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&n("li",null,n("kol-button-wc",{class:"last",exportparts:"icon",_customClass:this.state._customClass,_disabled:a<=this.state._page,_icons:v,_hideLabel:!0,_label:i("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&n("kol-select",{_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:i("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return n("li",null,n("kol-button-wc",{exportparts:"icon",key:`${this.nonce}-${t}`,_customClass:this.state._customClass,_label:`${t}`,_on:{onClick:e=>{this.onClick(e,t)}}}))}getSelectedPageButton(t){return n("li",null,n("kol-button-wc",{class:"selected",key:`${this.nonce}-selected`,_customClass:this.state._customClass,_disabled:!0,_label:`${t}`}))}validateBoundaryCount(t){h(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){s(this,t)}validateLabel(t,e,n=!1){n||p(this.state._label),o(this,t),u(this.state._label)}validateHasButtons(t){r(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=c(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){h(this,"_page",t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize,i=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,t,n,i)}}})}validatePageSize(t){h(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){d(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){h(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){b(this,t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_page")?e.get("_page"):this.state._page,i=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;this.syncPage(e,n,i,t)}}})}validateTooltipAlign(t){a(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(){p(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"]}}};k.style={default:m};export{k as kol_pagination};
+import{r as t,h as n,H as e}from"./index-0b7aa54b.js";import{Q as i,Y as s,a7 as o,v as a,w as l,l as h,a8 as r,a as d,j as c}from"./index-807d8631.js";import{a as u}from"./i18n-346a0ba2.js";import{n as p}from"./dev.utils-d2e25c84.js";import{r as f,a as b}from"./unique-nav-labels-62d9802d.js";import"./index-88a06abd.js";const g="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tgap: 1rem;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\t.navigation-list {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 0.5em;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.separator:before {\n\t\tcontent: '•••';\n\t}\n}\n",m=g,_={left:"codicon codicon-debug-reverse-continue"},y={left:"codicon codicon-chevron-left"},v={right:"codicon codicon-chevron-right"},k={right:"codicon codicon-debug-continue"},w=class{constructor(e){t(this,e),this.nonce=p(),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 i=e.has("_pageSizeOptions")?e.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(i)&&i.length>0){const t=i.find((t=>t.value===n));n=void 0===t?i[0].value:t.value,e.set("_pageSize",n)}const s=e.has("_page")?e.get("_page"):this.state._page,a=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,s,e.get("_pageSize"),a)},this.syncPage=(t,e,n,s)=>{if(s>0){const a=this.calcCount(s,n);a>0&&(e>a?(t.set("_page",a),this.onChangePage(i,a)):e<1&&(t.set("_page",1),this.onChangePage(i,1)))}},this.beforePageSizeOptions=(t,e)=>{const n=[];if(Array.isArray(t))for(const e of t)"number"==typeof e&&n.push({label:u("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:u("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 i=!1;const s=this.getCount(),a=Array.from(Array(s).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>s-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(i=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===i?(i=!1,n("li",null,n("span",{class:"separator",key:`${this.nonce}-el-${t}`,"aria-hidden":"true"}))):null));return n(e,null,n("nav",{"aria-label":this.state._label},n("ul",{class:"navigation-list"},this.state._hasButtons.first&&n("li",null,n("kol-button-wc",{class:"first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:_,_hideLabel:!0,_label:u("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&n("li",null,n("kol-button-wc",{class:"previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:y,_hideLabel:!0,_label:u("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),a,this.state._hasButtons.next&&n("li",null,n("kol-button-wc",{class:"next",exportparts:"icon",_customClass:this.state._customClass,_disabled:s<=this.state._page,_icons:v,_hideLabel:!0,_label:u("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&n("li",null,n("kol-button-wc",{class:"last",exportparts:"icon",_customClass:this.state._customClass,_disabled:s<=this.state._page,_icons:k,_hideLabel:!0,_label:u("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&n("kol-select",{_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:u("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return n("li",null,n("kol-button-wc",{exportparts:"icon",key:`${this.nonce}-${t}`,_customClass:this.state._customClass,_label:`${t}`,_on:{onClick:e=>{this.onClick(e,t)}}}))}getSelectedPageButton(t){return n("li",null,n("kol-button-wc",{class:"selected",key:`${this.nonce}-selected`,_customClass:this.state._customClass,_disabled:!0,_label:`${t}`}))}validateBoundaryCount(t){s(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){o(this,t)}validateLabel(t,e,n=!1){n||f(this.state._label),a(this,t),b(this.state._label)}validateHasButtons(t){l(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=c(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){s(this,"_page",t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize,i=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,t,n,i)}}})}validatePageSize(t){s(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){h(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){s(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){r(this,t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_page")?e.get("_page"):this.state._page,i=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;this.syncPage(e,n,i,t)}}})}validateTooltipAlign(t){d(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(){f(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"]}}};w.style={default:m};export{w as kol_pagination};

package/dist/kolibri/kol-pagination.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["validateMax","component","value","options","watchNumber","defaultStyleCss","leftDoubleArrowIcon","left","leftSingleArrow","rightSingleArrowIcon","right","rightDoubleArrowIcon","KolPagination","this","nonce","calcCount","total","pageSize","Math","ceil","getCount","state","_max","_pageSize","onClick","event","page","_on","onChangePage","timeout","setTimeout","clearTimeout","onChangePageSize","parseInt","onGoToFirst","onGoToEnd","onGoBackward","_page","onGoForward","beforePageSize","_nextValue","nextState","has","get","pageSizeOptions","_pageSizeOptions","Array","isArray","length","find","option","undefined","set","syncPage","count","STATE_CHANGE_EVENT","beforePageSizeOptions","nextValue","push","label","translate","placeholders","entries","_boundaryCount","_label","_hasButtons","first","last","next","previous","_siblingCount","render","ellipsis","pageButtons","from","keys","map","index","getSelectedPageButton","getUnselectedPageButton","h","class","key","Host","exportparts","_customClass","_disabled","_icons","_hideLabel","_tooltipAlign","_a","_id","_options","onChange","_value","validateBoundaryCount","max","validateCustomClass","validateLabel","_oldValue","initial","removeNavLabel","addNavLabel","validateHasButtons","watchValidator","Set","hooks","beforePatch","parseJson","e","delete","Object","assign","validateOn","validatePage","validatePageSize","validatePageSizeOptions","watchJsonArrayString","validateSiblingCount","validateTooltipAlign","componentWillLoad","disconnectedCallback"],"sources":["src/types/props/max.ts","src/components/pagination/style.css?tag=kol-pagination&mode=default&encapsulation=shadow","src/components/pagination/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchNumber, WatchNumberOptions } from '../../utils/prop.validators';\nimport { RowsPropType } from './rows';\n\n/* types */\nexport type MaxPropType = number;\n\n/**\n * Number of rows of the input element that should be visible at the same time.\n */\nexport type PropMax = {\n\tmax: MaxPropType;\n};\n\n/* validator */\nexport const validateMax = (component: Generic.Element.Component, value?: RowsPropType, options?: WatchNumberOptions): void => {\n\twatchNumber(component, '_max', value, options);\n};\n","@import url(../style.css);\n@layer kol-component {\n\t:host {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tgap: 1rem;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\t.navigation-list {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 0.5em;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.separator:before {\n\t\tcontent: '•••';\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { Option } from '../../types/input/types';\nimport { CustomClassPropType, validateCustomClass } from '../../types/props/custom-class';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { TooltipAlignPropType, validateTooltipAlign } from '../../types/props/tooltip-align';\nimport { nonce } from '../../utils/dev.utils';\nimport { parseJson, watchJsonArrayString, watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { API, KoliBriPaginationButtonCallbacks, PaginationHasButton, States } from './types';\nimport { MaxPropType, validateMax } from '../../types/props/max';\n\nconst leftDoubleArrowIcon = {\n\tleft: 'codicon codicon-debug-reverse-continue',\n};\nconst leftSingleArrow = {\n\tleft: 'codicon codicon-chevron-left',\n};\nconst rightSingleArrowIcon = {\n\tright: 'codicon codicon-chevron-right',\n};\nconst rightDoubleArrowIcon = {\n\tright: 'codicon codicon-debug-continue',\n};\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements API {\n\tprivate readonly nonce = nonce();\n\n\tprivate readonly calcCount = (total: number, pageSize = 1): number => Math.ceil(total / pageSize);\n\n\tprivate readonly getCount = (): number => this.calcCount(this.state._max, this.state._pageSize);\n\n\tpublic render(): JSX.Element {\n\t\tlet ellipsis = false;\n\t\tconst count = this.getCount();\n\t\tconst pageButtons = Array.from(Array(count).keys())\n\t\t\t.map((index: number) => index + 1)\n\t\t\t.map((page: number) => {\n\t\t\t\tif (\n\t\t\t\t\tpage <= this.state._boundaryCount ||\n\t\t\t\t\tpage > count - this.state._boundaryCount ||\n\t\t\t\t\t(page >= this.state._page - this.state._siblingCount && page <= this.state._page + this.state._siblingCount)\n\t\t\t\t) {\n\t\t\t\t\tellipsis = true;\n\t\t\t\t\tif (this.state._page === page) {\n\t\t\t\t\t\treturn this.getSelectedPageButton(page);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn this.getUnselectedPageButton(page);\n\t\t\t\t\t}\n\t\t\t\t} else if (ellipsis === true) {\n\t\t\t\t\tellipsis = false;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<span class=\"separator\" key={`${this.nonce}-el-${page}`} aria-hidden=\"true\"></span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t});\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"navigation-list\">\n\t\t\t\t\t\t{this.state._hasButtons.first && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\t\tclass=\"first\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t\t\t_icons={leftDoubleArrowIcon}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-first')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoToFirst}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._hasButtons.previous && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\t\tclass=\"previous\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t\t\t_icons={leftSingleArrow}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-back')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoBackward}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{pageButtons}\n\t\t\t\t\t\t{this.state._hasButtons.next && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\t\tclass=\"next\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t\t\t_icons={rightSingleArrowIcon}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-next')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoForward}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._hasButtons.last && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\t\tclass=\"last\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t\t\t_icons={rightDoubleArrowIcon}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-last')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoToEnd}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t\t{this.state._pageSizeOptions?.length > 0 && (\n\t\t\t\t\t<kol-select\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_id={`pagination-size-${this.nonce}`}\n\t\t\t\t\t\t_label={translate('kol-entries-per-site')}\n\t\t\t\t\t\t_options={this.state._pageSizeOptions}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonChange: this.onChangePageSize,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_value={[this.state._pageSize]}\n\t\t\t\t\t></kol-select>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the amount of pages to show next to the outer arrow buttons.\n\t */\n\t@Prop() public _boundaryCount?: number = 1;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which navigation buttons to render (first, last, next, previous buttons).\n\t */\n\t@Prop() public _hasButtons?: boolean | Stringified<PaginationHasButton> = true;\n\n\t/**\n\t * Defines the current page.\n\t */\n\t@Prop() public _page!: number;\n\n\t/**\n\t * Defines the amount of entries to show per page.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _pageSize = 1;\n\n\t/**\n\t * Defines the options for the page-size-select.\n\t */\n\t@Prop() public _pageSizeOptions: Stringified<number[]> = [];\n\n\t/**\n\t * Gibt an, auf welche Callback-Events reagiert werden.\n\t */\n\t@Prop() public _on!: KoliBriPaginationButtonCallbacks;\n\n\t/**\n\t * Defines the amount of pages to show next to the current page.\n\t */\n\t@Prop() public _siblingCount?: number = 1;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines the maximum number of pages.\n\t */\n\t@Prop() public _max!: MaxPropType;\n\n\t@State() public state: States = {\n\t\t_boundaryCount: 1,\n\t\t_label: translate('kol-pagination'),\n\t\t_hasButtons: {\n\t\t\tfirst: true,\n\t\t\tlast: true,\n\t\t\tnext: true,\n\t\t\tprevious: true,\n\t\t},\n\t\t_on: {\n\t\t\tonClick: () => null,\n\t\t},\n\t\t_page: 0,\n\t\t_pageSize: 1,\n\t\t_pageSizeOptions: [],\n\t\t_siblingCount: 1,\n\t\t_max: 0,\n\t};\n\n\tprivate onClick = (event: Event, page: number) => {\n\t\tif (typeof this.state._on.onClick === 'function') {\n\t\t\tthis.state._on.onClick(event, page);\n\t\t}\n\t\tthis.onChangePage(event, page);\n\t};\n\n\tprivate onChangePage = (event: Event, page: number) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tif (typeof this.state._on.onChangePage === 'function') {\n\t\t\t\tthis.state._on.onChangePage(event, page);\n\t\t\t}\n\t\t});\n\t};\n\n\tprivate onChangePageSize = (event: Event, value: unknown) => {\n\t\tvalue = parseInt((value as string[])[0]);\n\t\tif (typeof value === 'number' && value > 0 && this._pageSize !== value) {\n\t\t\tthis._pageSize = value;\n\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t\tif (typeof this.state._on.onChangePageSize === 'function') {\n\t\t\t\t\tthis.state._on.onChangePageSize(event, this._pageSize);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate readonly onGoToFirst = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, 1);\n\t\t},\n\t};\n\tprivate readonly onGoToEnd = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.getCount());\n\t\t},\n\t};\n\tprivate readonly onGoBackward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page - 1);\n\t\t},\n\t};\n\tprivate readonly onGoForward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page + 1);\n\t\t},\n\t};\n\n\tprivate getUnselectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<li>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\tkey={`${this.nonce}-${page}`}\n\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t_label={`${page}`}\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonClick: (event: Event) => {\n\t\t\t\t\t\t\tthis.onClick(event, page);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t></kol-button-wc>\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate getSelectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<li>\n\t\t\t\t<kol-button-wc class=\"selected\" key={`${this.nonce}-selected`} _customClass={this.state._customClass} _disabled={true} _label={`${page}`} />\n\t\t\t</li>\n\t\t);\n\t}\n\n\t@Watch('_boundaryCount')\n\tpublic validateBoundaryCount(value?: number): void {\n\t\twatchNumber(this, '_boundaryCount', Math.max(0, value ?? 1));\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: CustomClassPropType): void {\n\t\tvalidateCustomClass(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(label?: LabelPropType, _oldValue?: LabelPropType, initial = false) {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label);\n\t\t}\n\t\tvalidateLabel(this, label);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_hasButtons')\n\tpublic validateHasButtons(value?: string | boolean | Stringified<PaginationHasButton>): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_hasButtons',\n\t\t\t(value) => typeof value === 'boolean' || typeof value === 'string' || (typeof value === 'object' && value !== null),\n\t\t\tnew Set(['Boolean', 'PaginationHasButton']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: (nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\t\tif (typeof nextValue === 'boolean') {\n\t\t\t\t\t\t\tnextState.set('_hasButtons', {\n\t\t\t\t\t\t\t\tfirst: nextValue,\n\t\t\t\t\t\t\t\tlast: nextValue,\n\t\t\t\t\t\t\t\tnext: nextValue,\n\t\t\t\t\t\t\t\tprevious: nextValue,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tif (typeof nextValue === 'string') {\n\t\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\t\tnextValue = parseJson<PaginationHasButton>(nextValue);\n\t\t\t\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\t\t\t\tnextState.delete('_hasButtons');\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (typeof nextValue === 'object' && nextValue !== null) {\n\t\t\t\t\t\t\t\tnextState.set('_hasButtons', {\n\t\t\t\t\t\t\t\t\t...this.state._hasButtons,\n\t\t\t\t\t\t\t\t\tfirst:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).first === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).first === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.first,\n\t\t\t\t\t\t\t\t\tlast:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).last === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).last === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.last,\n\t\t\t\t\t\t\t\t\tnext:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).next === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).next === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.next,\n\t\t\t\t\t\t\t\t\tprevious:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).previous === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).previous === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.previous,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriPaginationButtonCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_page')\n\tpublic validatePage(value?: number): void {\n\t\twatchNumber(this, '_page', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\tconst pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\t\t\t\tconst total = nextState.has('_max') ? (nextState.get('_max') as number) : this.state._max;\n\t\t\t\t\tthis.syncPage(nextState, _nextValue as number, pageSize, total);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tprivate beforePageSize = (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\tlet pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\tconst pageSizeOptions = nextState.has('_pageSizeOptions') ? (nextState.get('_pageSizeOptions') as Option<number>[]) : this.state._pageSizeOptions;\n\t\tif (Array.isArray(pageSizeOptions) && pageSizeOptions.length > 0) {\n\t\t\tconst find = pageSizeOptions.find((option) => option.value === pageSize);\n\t\t\tif (find === undefined) {\n\t\t\t\tpageSize = pageSizeOptions[0].value;\n\t\t\t} else {\n\t\t\t\tpageSize = find.value;\n\t\t\t}\n\t\t\tnextState.set('_pageSize', pageSize);\n\t\t}\n\t\tconst page = nextState.has('_page') ? (nextState.get('_page') as number) : this.state._page;\n\t\tconst total = nextState.has('_max') ? (nextState.get('_max') as number) : this.state._max;\n\t\tthis.syncPage(nextState, page, nextState.get('_pageSize') as number, total);\n\t};\n\n\tprivate syncPage = (nextState: Map<string, unknown>, page: number, pageSize: number, total: number) => {\n\t\t// count === 0 means no data\n\t\tif (total > 0) {\n\t\t\tconst count = this.calcCount(total, pageSize);\n\t\t\tif (count > 0) {\n\t\t\t\tif (page > count) {\n\t\t\t\t\tnextState.set('_page', count);\n\t\t\t\t\tthis.onChangePage(STATE_CHANGE_EVENT, count);\n\t\t\t\t} else if (page < 1) {\n\t\t\t\t\tnextState.set('_page', 1);\n\t\t\t\t\tthis.onChangePage(STATE_CHANGE_EVENT, 1);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate beforePageSizeOptions = (nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\tconst options: Option<number>[] = [];\n\t\tif (Array.isArray(nextValue)) {\n\t\t\tfor (const value of nextValue) {\n\t\t\t\tif (typeof value === 'number') {\n\t\t\t\t\toptions.push({\n\t\t\t\t\t\tlabel: translate('kol-page-per-site', { placeholders: { entries: `${value}` } }),\n\t\t\t\t\t\tvalue: value,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tnextState.set('_pageSizeOptions', options);\n\t\tthis.beforePageSize(options, nextState);\n\t};\n\n\t@Watch('_pageSize')\n\tpublic validatePageSize(value?: number): void {\n\t\twatchNumber(this, '_pageSize', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePageSize,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_pageSizeOptions')\n\tpublic validatePageSizeOptions(value?: Stringified<number[]>): void {\n\t\twatchJsonArrayString(this, '_pageSizeOptions', (value) => typeof value === 'number', value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePageSizeOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_siblingCount')\n\tpublic validateSiblingCount(value?: number): void {\n\t\twatchNumber(this, '_siblingCount', Math.max(0, value ?? 1));\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: MaxPropType): void {\n\t\tvalidateMax(this, value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\tconst page = nextState.has('_page') ? (nextState.get('_page') as number) : this.state._page;\n\t\t\t\t\tconst pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\t\t\t\tthis.syncPage(nextState, page, pageSize, _nextValue as number);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateBoundaryCount(this._boundaryCount);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateHasButtons(this._hasButtons);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateOn(this._on);\n\t\tthis.validatePage(this._page);\n\t\tthis.validatePageSize(this._pageSize);\n\t\tthis.validatePageSizeOptions(this._pageSizeOptions);\n\t\tthis.validateSiblingCount(this._siblingCount);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateMax(this._max);\n\n\t\t/**\n\t\t * Die Seite muss als letztes gesetzt werden, da sonst die Seite\n\t\t * nicht korrekt berechnet wird.\n\t\t */\n\t\tthis.validatePage(this._page);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;uhBAgBO,MAAMA,EAAc,CAACC,EAAsCC,EAAsBC,KACvFC,EAAYH,EAAW,OAAQC,EAAOC,EAAQ,ECjB/C,MAAME,EAAkB,88HCexB,MAAMC,EAAsB,CAC3BC,KAAM,0CAEP,MAAMC,EAAkB,CACvBD,KAAM,gCAEP,MAAME,EAAuB,CAC5BC,MAAO,iCAER,MAAMC,EAAuB,CAC5BD,MAAO,kC,MAUKE,EAAa,M,yBACRC,KAAAC,MAAQA,IAERD,KAAAE,UAAY,CAACC,EAAeC,EAAW,IAAcC,KAAKC,KAAKH,EAAQC,GAEvEJ,KAAAO,SAAW,IAAcP,KAAKE,UAAUF,KAAKQ,MAAMC,KAAMT,KAAKQ,MAAME,WA4L7EV,KAAAW,QAAU,CAACC,EAAcC,KAChC,UAAWb,KAAKQ,MAAMM,IAAIH,UAAY,WAAY,CACjDX,KAAKQ,MAAMM,IAAIH,QAAQC,EAAOC,E,CAE/Bb,KAAKe,aAAaH,EAAOC,EAAK,EAGvBb,KAAAe,aAAe,CAACH,EAAcC,KACrC,MAAMG,EAAUC,YAAW,KAC1BC,aAAaF,GACb,UAAWhB,KAAKQ,MAAMM,IAAIC,eAAiB,WAAY,CACtDf,KAAKQ,MAAMM,IAAIC,aAAaH,EAAOC,E,IAEnC,EAGKb,KAAAmB,iBAAmB,CAACP,EAAcvB,KACzCA,EAAQ+B,SAAU/B,EAAmB,IACrC,UAAWA,IAAU,UAAYA,EAAQ,GAAKW,KAAKU,YAAcrB,EAAO,CACvEW,KAAKU,UAAYrB,EACjB,MAAM2B,EAAUC,YAAW,KAC1BC,aAAaF,GACb,UAAWhB,KAAKQ,MAAMM,IAAIK,mBAAqB,WAAY,CAC1DnB,KAAKQ,MAAMM,IAAIK,iBAAiBP,EAAOZ,KAAKU,U,OAM/BV,KAAAqB,YAAc,CAC9BV,QAAUC,IACTZ,KAAKW,QAAQC,EAAO,EAAE,GAGPZ,KAAAsB,UAAY,CAC5BX,QAAUC,IACTZ,KAAKW,QAAQC,EAAOZ,KAAKO,WAAW,GAGrBP,KAAAuB,aAAe,CAC/BZ,QAAUC,IACTZ,KAAKW,QAAQC,EAAOZ,KAAKQ,MAAMgB,MAAQ,EAAE,GAG1BxB,KAAAyB,YAAc,CAC9Bd,QAAUC,IACTZ,KAAKW,QAAQC,EAAOZ,KAAKQ,MAAMgB,MAAQ,EAAE,GA+HnCxB,KAAA0B,eAAiB,CAACC,EAAqBC,KAC9C,IAAIxB,EAAWwB,EAAUC,IAAI,aAAgBD,EAAUE,IAAI,aAA0B9B,KAAKQ,MAAME,UAChG,MAAMqB,EAAkBH,EAAUC,IAAI,oBAAuBD,EAAUE,IAAI,oBAA2C9B,KAAKQ,MAAMwB,iBACjI,GAAIC,MAAMC,QAAQH,IAAoBA,EAAgBI,OAAS,EAAG,CACjE,MAAMC,EAAOL,EAAgBK,MAAMC,GAAWA,EAAOhD,QAAUe,IAC/D,GAAIgC,IAASE,UAAW,CACvBlC,EAAW2B,EAAgB,GAAG1C,K,KACxB,CACNe,EAAWgC,EAAK/C,K,CAEjBuC,EAAUW,IAAI,YAAanC,E,CAE5B,MAAMS,EAAOe,EAAUC,IAAI,SAAYD,EAAUE,IAAI,SAAsB9B,KAAKQ,MAAMgB,MACtF,MAAMrB,EAAQyB,EAAUC,IAAI,QAAWD,EAAUE,IAAI,QAAqB9B,KAAKQ,MAAMC,KACrFT,KAAKwC,SAASZ,EAAWf,EAAMe,EAAUE,IAAI,aAAwB3B,EAAM,EAGpEH,KAAAwC,SAAW,CAACZ,EAAiCf,EAAcT,EAAkBD,KAEpF,GAAIA,EAAQ,EAAG,CACd,MAAMsC,EAAQzC,KAAKE,UAAUC,EAAOC,GACpC,GAAIqC,EAAQ,EAAG,CACd,GAAI5B,EAAO4B,EAAO,CACjBb,EAAUW,IAAI,QAASE,GACvBzC,KAAKe,aAAa2B,EAAoBD,E,MAChC,GAAI5B,EAAO,EAAG,CACpBe,EAAUW,IAAI,QAAS,GACvBvC,KAAKe,aAAa2B,EAAoB,E,KAMlC1C,KAAA2C,sBAAwB,CAACC,EAAoBhB,KACpD,MAAMtC,EAA4B,GAClC,GAAI2C,MAAMC,QAAQU,GAAY,CAC7B,IAAK,MAAMvD,KAASuD,EAAW,CAC9B,UAAWvD,IAAU,SAAU,CAC9BC,EAAQuD,KAAK,CACZC,MAAOC,EAAU,oBAAqB,CAAEC,aAAc,CAAEC,QAAS,GAAG5D,OACpEA,MAAOA,G,GAKXuC,EAAUW,IAAI,mBAAoBjD,GAClCU,KAAK0B,eAAepC,EAASsC,EAAU,E,oBAlSC,E,mEAeiC,K,oCAUd,E,sBAKH,G,sCAUjB,E,mBAKc,M,+BAOtB,CAC/BsB,eAAgB,EAChBC,OAAQJ,EAAU,kBAClBK,YAAa,CACZC,MAAO,KACPC,KAAM,KACNC,KAAM,KACNC,SAAU,MAEX1C,IAAK,CACJH,QAAS,IAAM,MAEhBa,MAAO,EACPd,UAAW,EACXsB,iBAAkB,GAClByB,cAAe,EACfhD,KAAM,E,CAvLA,MAAAiD,G,MACN,IAAIC,EAAW,MACf,MAAMlB,EAAQzC,KAAKO,WACnB,MAAMqD,EAAc3B,MAAM4B,KAAK5B,MAAMQ,GAAOqB,QAC1CC,KAAKC,GAAkBA,EAAQ,IAC/BD,KAAKlD,IACL,GACCA,GAAQb,KAAKQ,MAAM0C,gBACnBrC,EAAO4B,EAAQzC,KAAKQ,MAAM0C,gBACzBrC,GAAQb,KAAKQ,MAAMgB,MAAQxB,KAAKQ,MAAMiD,eAAiB5C,GAAQb,KAAKQ,MAAMgB,MAAQxB,KAAKQ,MAAMiD,cAC7F,CACDE,EAAW,KACX,GAAI3D,KAAKQ,MAAMgB,QAAUX,EAAM,CAC9B,OAAOb,KAAKiE,sBAAsBpD,E,KAC5B,CACN,OAAOb,KAAKkE,wBAAwBrD,E,OAE/B,GAAI8C,IAAa,KAAM,CAC7BA,EAAW,MACX,OACCQ,EAAA,UACCA,EAAA,QAAMC,MAAM,YAAYC,IAAK,GAAGrE,KAAKC,YAAYY,IAAM,cAAc,S,KAGjE,CACN,OAAO,I,KAIV,OACCsD,EAACG,EAAI,KACJH,EAAA,oBAAiBnE,KAAKQ,MAAM2C,QAC3BgB,EAAA,MAAIC,MAAM,mBACRpE,KAAKQ,MAAM4C,YAAYC,OACvBc,EAAA,UACCA,EAAA,iBACCC,MAAM,QACNG,YAAY,OACZC,aAAcxE,KAAKQ,MAAMgE,aACzBC,UAAWzE,KAAKQ,MAAMgB,OAAS,EAC/BkD,OAAQjF,EACRkF,WAAU,KACVxB,OAAQJ,EAAU,kBAClBjC,IAAKd,KAAKqB,YACVuD,cAAe5E,KAAKQ,MAAMoE,iBAI5B5E,KAAKQ,MAAM4C,YAAYI,UACvBW,EAAA,UACCA,EAAA,iBACCC,MAAM,WACNG,YAAY,OACZC,aAAcxE,KAAKQ,MAAMgE,aACzBC,UAAWzE,KAAKQ,MAAMgB,OAAS,EAC/BkD,OAAQ/E,EACRgF,WAAU,KACVxB,OAAQJ,EAAU,iBAClBjC,IAAKd,KAAKuB,aACVqD,cAAe5E,KAAKQ,MAAMoE,iBAI5BhB,EACA5D,KAAKQ,MAAM4C,YAAYG,MACvBY,EAAA,UACCA,EAAA,iBACCC,MAAM,OACNG,YAAY,OACZC,aAAcxE,KAAKQ,MAAMgE,aACzBC,UAAWhC,GAASzC,KAAKQ,MAAMgB,MAC/BkD,OAAQ9E,EACR+E,WAAU,KACVxB,OAAQJ,EAAU,iBAClBjC,IAAKd,KAAKyB,YACVmD,cAAe5E,KAAKQ,MAAMoE,iBAI5B5E,KAAKQ,MAAM4C,YAAYE,MACvBa,EAAA,UACCA,EAAA,iBACCC,MAAM,OACNG,YAAY,OACZC,aAAcxE,KAAKQ,MAAMgE,aACzBC,UAAWhC,GAASzC,KAAKQ,MAAMgB,MAC/BkD,OAAQ5E,EACR6E,WAAU,KACVxB,OAAQJ,EAAU,iBAClBjC,IAAKd,KAAKsB,UACVsD,cAAe5E,KAAKQ,MAAMoE,qBAM9BC,EAAA7E,KAAKQ,MAAMwB,oBAAgB,MAAA6C,SAAA,SAAAA,EAAE1C,QAAS,GACtCgC,EAAA,cACCQ,WAAU,KACVG,IAAK,mBAAmB9E,KAAKC,QAC7BkD,OAAQJ,EAAU,wBAClBgC,SAAU/E,KAAKQ,MAAMwB,iBACrBlB,IAAK,CACJkE,SAAUhF,KAAKmB,kBAEhB8D,OAAQ,CAACjF,KAAKQ,MAAME,a,CAmIjB,uBAAAwD,CAAwBrD,GAC/B,OACCsD,EAAA,UACCA,EAAA,iBACCI,YAAY,OACZF,IAAK,GAAGrE,KAAKC,SAASY,IACtB2D,aAAcxE,KAAKQ,MAAMgE,aACzBrB,OAAQ,GAAGtC,IACXC,IAAK,CACJH,QAAUC,IACTZ,KAAKW,QAAQC,EAAOC,EAAK,K,CAQvB,qBAAAoD,CAAsBpD,GAC7B,OACCsD,EAAA,UACCA,EAAA,iBAAeC,MAAM,WAAWC,IAAK,GAAGrE,KAAKC,iBAAkBuE,aAAcxE,KAAKQ,MAAMgE,aAAcC,UAAW,KAAMtB,OAAQ,GAAGtC,M,CAM9H,qBAAAqE,CAAsB7F,GAC5BE,EAAYS,KAAM,iBAAkBK,KAAK8E,IAAI,EAAG9F,IAAK,MAALA,SAAK,EAALA,EAAS,G,CAInD,mBAAA+F,CAAoB/F,GAC1B+F,EAAoBpF,KAAMX,E,CAIpB,aAAAgG,CAAcvC,EAAuBwC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAexF,KAAKQ,MAAM2C,O,CAE3BkC,EAAcrF,KAAM8C,GACpB2C,EAAYzF,KAAKQ,MAAM2C,O,CAIjB,kBAAAuC,CAAmBrG,GACzBsG,EACC3F,KACA,eACCX,UAAiBA,IAAU,kBAAoBA,IAAU,iBAAoBA,IAAU,UAAYA,IAAU,MAC9G,IAAIuG,IAAI,CAAC,UAAW,wBACpBvG,EACA,CACCwG,MAAO,CACNC,YAAa,CAAClD,EAAoBhB,KACjC,UAAWgB,IAAc,UAAW,CACnChB,EAAUW,IAAI,cAAe,CAC5Bc,MAAOT,EACPU,KAAMV,EACNW,KAAMX,EACNY,SAAUZ,G,KAEL,CACN,UAAWA,IAAc,SAAU,CAClC,IACCA,EAAYmD,EAA+BnD,E,CAC1C,MAAOoD,GACRpE,EAAUqE,OAAO,c,EAInB,UAAWrD,IAAc,UAAYA,IAAc,KAAM,CACxDhB,EAAUW,IAAI,cAAa2D,OAAAC,OAAAD,OAAAC,OAAA,GACvBnG,KAAKQ,MAAM4C,aAAW,CACzBC,aACST,EAAkCS,QAAU,UAChDT,EAAkCS,QAAU,KAC7CrD,KAAKQ,MAAM4C,YAAYC,MAC3BC,YACSV,EAAkCU,OAAS,UAC/CV,EAAkCU,OAAS,KAC5CtD,KAAKQ,MAAM4C,YAAYE,KAC3BC,YACSX,EAAkCW,OAAS,UAC/CX,EAAkCW,OAAS,KAC5CvD,KAAKQ,MAAM4C,YAAYG,KAC3BC,gBACSZ,EAAkCY,WAAa,UACnDZ,EAAkCY,WAAa,KAChDxD,KAAKQ,MAAM4C,YAAYI,W,OAW5B,UAAA4C,CAAW/G,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChDW,KAAKQ,MAAK0F,OAAAC,OAAAD,OAAAC,OAAA,GACNnG,KAAKQ,OAAK,CACbM,IAAKzB,G,EAMD,YAAAgH,CAAahH,GACnBE,EAAYS,KAAM,QAASX,EAAO,CACjCwG,MAAO,CACNC,YAAa,CAACnE,EAAqBC,KAClC,MAAMxB,EAAWwB,EAAUC,IAAI,aAAgBD,EAAUE,IAAI,aAA0B9B,KAAKQ,MAAME,UAClG,MAAMP,EAAQyB,EAAUC,IAAI,QAAWD,EAAUE,IAAI,QAAqB9B,KAAKQ,MAAMC,KACrFT,KAAKwC,SAASZ,EAAWD,EAAsBvB,EAAUD,EAAM,I,CAwD5D,gBAAAmG,CAAiBjH,GACvBE,EAAYS,KAAM,YAAaX,EAAO,CACrCwG,MAAO,CACNC,YAAa9F,KAAK0B,iB,CAMd,uBAAA6E,CAAwBlH,GAC9BmH,EAAqBxG,KAAM,oBAAqBX,UAAiBA,IAAU,UAAUA,EAAOiD,UAAW,CACtGuD,MAAO,CACNC,YAAa9F,KAAK2C,wB,CAMd,oBAAA8D,CAAqBpH,GAC3BE,EAAYS,KAAM,gBAAiBK,KAAK8E,IAAI,EAAG9F,IAAK,MAALA,SAAK,EAALA,EAAS,G,CAIlD,WAAAF,CAAYE,GAClBF,EAAYa,KAAMX,EAAO,CACxBwG,MAAO,CACNC,YAAa,CAACnE,EAAqBC,KAClC,MAAMf,EAAOe,EAAUC,IAAI,SAAYD,EAAUE,IAAI,SAAsB9B,KAAKQ,MAAMgB,MACtF,MAAMpB,EAAWwB,EAAUC,IAAI,aAAgBD,EAAUE,IAAI,aAA0B9B,KAAKQ,MAAME,UAClGV,KAAKwC,SAASZ,EAAWf,EAAMT,EAAUuB,EAAqB,I,CAO3D,oBAAA+E,CAAqBrH,GAC3BqH,EAAqB1G,KAAMX,E,CAGrB,iBAAAsH,GACN3G,KAAKkF,sBAAsBlF,KAAKkD,gBAChClD,KAAKoF,oBAAoBpF,KAAKwE,cAC9BxE,KAAK0F,mBAAmB1F,KAAKoD,aAC7BpD,KAAKqF,cAAcrF,KAAKmD,OAAQb,UAAW,MAC3CtC,KAAKoG,WAAWpG,KAAKc,KACrBd,KAAKqG,aAAarG,KAAKwB,OACvBxB,KAAKsG,iBAAiBtG,KAAKU,WAC3BV,KAAKuG,wBAAwBvG,KAAKgC,kBAClChC,KAAKyG,qBAAqBzG,KAAKyD,eAC/BzD,KAAK0G,qBAAqB1G,KAAK4E,eAC/B5E,KAAKb,YAAYa,KAAKS,MAMtBT,KAAKqG,aAAarG,KAAKwB,M,CAGjB,oBAAAoF,GACNpB,EAAexF,KAAKQ,MAAM2C,O"}
+{"version":3,"names":["defaultStyleCss","KolPaginationDefaultStyle0","leftDoubleArrowIcon","left","leftSingleArrow","rightSingleArrowIcon","right","rightDoubleArrowIcon","KolPagination","this","nonce","calcCount","total","pageSize","Math","ceil","getCount","state","_max","_pageSize","onClick","event","page","_on","onChangePage","timeout","setTimeout","clearTimeout","onChangePageSize","value","parseInt","onGoToFirst","onGoToEnd","onGoBackward","_page","onGoForward","beforePageSize","_nextValue","nextState","has","get","pageSizeOptions","_pageSizeOptions","Array","isArray","length","find","option","undefined","set","syncPage","count","STATE_CHANGE_EVENT","beforePageSizeOptions","nextValue","options","push","label","translate","placeholders","entries","_boundaryCount","_label","_hasButtons","first","last","next","previous","_siblingCount","render","ellipsis","pageButtons","from","keys","map","index","getSelectedPageButton","getUnselectedPageButton","h","class","key","Host","exportparts","_customClass","_disabled","_icons","_hideLabel","_tooltipAlign","_a","_id","_options","onChange","_value","validateBoundaryCount","watchNumber","max","validateCustomClass","validateLabel","_oldValue","initial","removeNavLabel","addNavLabel","validateHasButtons","watchValidator","Set","hooks","beforePatch","parseJson","e","delete","Object","assign","validateOn","validatePage","validatePageSize","validatePageSizeOptions","watchJsonArrayString","validateSiblingCount","validateMax","validateTooltipAlign","componentWillLoad","disconnectedCallback"],"sources":["src/components/pagination/style.css?tag=kol-pagination&mode=default&encapsulation=shadow","src/components/pagination/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\t:host {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tgap: 1rem;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\t.navigation-list {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 0.5em;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.separator:before {\n\t\tcontent: '•••';\n\t}\n}\n","import type {\n\tCustomClassPropType,\n\tKoliBriPaginationButtonCallbacks,\n\tLabelPropType,\n\tMaxPropType,\n\tOption,\n\tPaginationAPI,\n\tPaginationHasButton,\n\tPaginationStates,\n\tStringified,\n\tTooltipAlignPropType,\n} from '@public-ui/schema';\nimport {\n\tparseJson,\n\tSTATE_CHANGE_EVENT,\n\tvalidateCustomClass,\n\tvalidateLabel,\n\tvalidateMax,\n\tvalidateTooltipAlign,\n\twatchJsonArrayString,\n\twatchNumber,\n\twatchValidator,\n} from '@public-ui/schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { nonce } from '../../utils/dev.utils';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\n\nimport type { JSX } from '@stencil/core';\nconst leftDoubleArrowIcon = {\n\tleft: 'codicon codicon-debug-reverse-continue',\n};\nconst leftSingleArrow = {\n\tleft: 'codicon codicon-chevron-left',\n};\nconst rightSingleArrowIcon = {\n\tright: 'codicon codicon-chevron-right',\n};\nconst rightDoubleArrowIcon = {\n\tright: 'codicon codicon-debug-continue',\n};\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements PaginationAPI {\n\tprivate readonly nonce = nonce();\n\n\tprivate readonly calcCount = (total: number, pageSize = 1): number => Math.ceil(total / pageSize);\n\n\tprivate readonly getCount = (): number => this.calcCount(this.state._max, this.state._pageSize);\n\n\tpublic render(): JSX.Element {\n\t\tlet ellipsis = false;\n\t\tconst count = this.getCount();\n\t\tconst pageButtons = Array.from(Array(count).keys())\n\t\t\t.map((index: number) => index + 1)\n\t\t\t.map((page: number) => {\n\t\t\t\tif (\n\t\t\t\t\tpage <= this.state._boundaryCount ||\n\t\t\t\t\tpage > count - this.state._boundaryCount ||\n\t\t\t\t\t(page >= this.state._page - this.state._siblingCount && page <= this.state._page + this.state._siblingCount)\n\t\t\t\t) {\n\t\t\t\t\tellipsis = true;\n\t\t\t\t\tif (this.state._page === page) {\n\t\t\t\t\t\treturn this.getSelectedPageButton(page);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn this.getUnselectedPageButton(page);\n\t\t\t\t\t}\n\t\t\t\t} else if (ellipsis === true) {\n\t\t\t\t\tellipsis = false;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<span class=\"separator\" key={`${this.nonce}-el-${page}`} aria-hidden=\"true\"></span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t});\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"navigation-list\">\n\t\t\t\t\t\t{this.state._hasButtons.first && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\t\tclass=\"first\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t\t\t_icons={leftDoubleArrowIcon}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-first')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoToFirst}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._hasButtons.previous && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\t\tclass=\"previous\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t\t\t_icons={leftSingleArrow}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-back')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoBackward}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{pageButtons}\n\t\t\t\t\t\t{this.state._hasButtons.next && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\t\tclass=\"next\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t\t\t_icons={rightSingleArrowIcon}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-next')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoForward}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._hasButtons.last && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\t\tclass=\"last\"\n\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t\t\t_icons={rightDoubleArrowIcon}\n\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t_label={translate('kol-page-last')}\n\t\t\t\t\t\t\t\t\t_on={this.onGoToEnd}\n\t\t\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t\t{this.state._pageSizeOptions?.length > 0 && (\n\t\t\t\t\t<kol-select\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_id={`pagination-size-${this.nonce}`}\n\t\t\t\t\t\t_label={translate('kol-entries-per-site')}\n\t\t\t\t\t\t_options={this.state._pageSizeOptions}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonChange: this.onChangePageSize,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_value={[this.state._pageSize]}\n\t\t\t\t\t></kol-select>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the amount of pages to show next to the outer arrow buttons.\n\t */\n\t@Prop() public _boundaryCount?: number = 1;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which navigation buttons to render (first, last, next, previous buttons).\n\t */\n\t@Prop() public _hasButtons?: boolean | Stringified<PaginationHasButton> = true;\n\n\t/**\n\t * Defines the current page.\n\t */\n\t@Prop() public _page!: number;\n\n\t/**\n\t * Defines the amount of entries to show per page.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _pageSize = 1;\n\n\t/**\n\t * Defines the options for the page-size-select.\n\t */\n\t@Prop() public _pageSizeOptions: Stringified<number[]> = [];\n\n\t/**\n\t * Gibt an, auf welche Callback-Events reagiert werden.\n\t */\n\t@Prop() public _on!: KoliBriPaginationButtonCallbacks;\n\n\t/**\n\t * Defines the amount of pages to show next to the current page.\n\t */\n\t@Prop() public _siblingCount?: number = 1;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines the maximum number of pages.\n\t */\n\t@Prop() public _max!: MaxPropType;\n\n\t@State() public state: PaginationStates = {\n\t\t_boundaryCount: 1,\n\t\t_label: translate('kol-pagination'),\n\t\t_hasButtons: {\n\t\t\tfirst: true,\n\t\t\tlast: true,\n\t\t\tnext: true,\n\t\t\tprevious: true,\n\t\t},\n\t\t_on: {\n\t\t\tonClick: () => null,\n\t\t},\n\t\t_page: 0,\n\t\t_pageSize: 1,\n\t\t_pageSizeOptions: [],\n\t\t_siblingCount: 1,\n\t\t_max: 0,\n\t};\n\n\tprivate onClick = (event: Event, page: number) => {\n\t\tif (typeof this.state._on.onClick === 'function') {\n\t\t\tthis.state._on.onClick(event, page);\n\t\t}\n\t\tthis.onChangePage(event, page);\n\t};\n\n\tprivate onChangePage = (event: Event, page: number) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tif (typeof this.state._on.onChangePage === 'function') {\n\t\t\t\tthis.state._on.onChangePage(event, page);\n\t\t\t}\n\t\t});\n\t};\n\n\tprivate onChangePageSize = (event: Event, value: unknown) => {\n\t\tvalue = parseInt((value as string[])[0]);\n\t\tif (typeof value === 'number' && value > 0 && this._pageSize !== value) {\n\t\t\tthis._pageSize = value;\n\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t\tif (typeof this.state._on.onChangePageSize === 'function') {\n\t\t\t\t\tthis.state._on.onChangePageSize(event, this._pageSize);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate readonly onGoToFirst = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, 1);\n\t\t},\n\t};\n\tprivate readonly onGoToEnd = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.getCount());\n\t\t},\n\t};\n\tprivate readonly onGoBackward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page - 1);\n\t\t},\n\t};\n\tprivate readonly onGoForward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page + 1);\n\t\t},\n\t};\n\n\tprivate getUnselectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<li>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\tkey={`${this.nonce}-${page}`}\n\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t_label={`${page}`}\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonClick: (event: Event) => {\n\t\t\t\t\t\t\tthis.onClick(event, page);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t></kol-button-wc>\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate getSelectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<li>\n\t\t\t\t<kol-button-wc class=\"selected\" key={`${this.nonce}-selected`} _customClass={this.state._customClass} _disabled={true} _label={`${page}`} />\n\t\t\t</li>\n\t\t);\n\t}\n\n\t@Watch('_boundaryCount')\n\tpublic validateBoundaryCount(value?: number): void {\n\t\twatchNumber(this, '_boundaryCount', Math.max(0, value ?? 1));\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: CustomClassPropType): void {\n\t\tvalidateCustomClass(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(label?: LabelPropType, _oldValue?: LabelPropType, initial = false) {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label);\n\t\t}\n\t\tvalidateLabel(this, label);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_hasButtons')\n\tpublic validateHasButtons(value?: string | boolean | Stringified<PaginationHasButton>): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_hasButtons',\n\t\t\t(value) => typeof value === 'boolean' || typeof value === 'string' || (typeof value === 'object' && value !== null),\n\t\t\tnew Set(['Boolean', 'PaginationHasButton']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: (nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\t\tif (typeof nextValue === 'boolean') {\n\t\t\t\t\t\t\tnextState.set('_hasButtons', {\n\t\t\t\t\t\t\t\tfirst: nextValue,\n\t\t\t\t\t\t\t\tlast: nextValue,\n\t\t\t\t\t\t\t\tnext: nextValue,\n\t\t\t\t\t\t\t\tprevious: nextValue,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tif (typeof nextValue === 'string') {\n\t\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\t\tnextValue = parseJson<PaginationHasButton>(nextValue);\n\t\t\t\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\t\t\t\tnextState.delete('_hasButtons');\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (typeof nextValue === 'object' && nextValue !== null) {\n\t\t\t\t\t\t\t\tnextState.set('_hasButtons', {\n\t\t\t\t\t\t\t\t\t...this.state._hasButtons,\n\t\t\t\t\t\t\t\t\tfirst:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).first === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).first === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.first,\n\t\t\t\t\t\t\t\t\tlast:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).last === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).last === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.last,\n\t\t\t\t\t\t\t\t\tnext:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).next === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).next === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.next,\n\t\t\t\t\t\t\t\t\tprevious:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).previous === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).previous === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.previous,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriPaginationButtonCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_page')\n\tpublic validatePage(value?: number): void {\n\t\twatchNumber(this, '_page', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\tconst pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\t\t\t\tconst total = nextState.has('_max') ? (nextState.get('_max') as number) : this.state._max;\n\t\t\t\t\tthis.syncPage(nextState, _nextValue as number, pageSize, total);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tprivate beforePageSize = (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\tlet pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\tconst pageSizeOptions = nextState.has('_pageSizeOptions') ? (nextState.get('_pageSizeOptions') as Option<number>[]) : this.state._pageSizeOptions;\n\t\tif (Array.isArray(pageSizeOptions) && pageSizeOptions.length > 0) {\n\t\t\tconst find = pageSizeOptions.find((option) => option.value === pageSize);\n\t\t\tif (find === undefined) {\n\t\t\t\tpageSize = pageSizeOptions[0].value;\n\t\t\t} else {\n\t\t\t\tpageSize = find.value;\n\t\t\t}\n\t\t\tnextState.set('_pageSize', pageSize);\n\t\t}\n\t\tconst page = nextState.has('_page') ? (nextState.get('_page') as number) : this.state._page;\n\t\tconst total = nextState.has('_max') ? (nextState.get('_max') as number) : this.state._max;\n\t\tthis.syncPage(nextState, page, nextState.get('_pageSize') as number, total);\n\t};\n\n\tprivate syncPage = (nextState: Map<string, unknown>, page: number, pageSize: number, total: number) => {\n\t\t// count === 0 means no data\n\t\tif (total > 0) {\n\t\t\tconst count = this.calcCount(total, pageSize);\n\t\t\tif (count > 0) {\n\t\t\t\tif (page > count) {\n\t\t\t\t\tnextState.set('_page', count);\n\t\t\t\t\tthis.onChangePage(STATE_CHANGE_EVENT, count);\n\t\t\t\t} else if (page < 1) {\n\t\t\t\t\tnextState.set('_page', 1);\n\t\t\t\t\tthis.onChangePage(STATE_CHANGE_EVENT, 1);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate beforePageSizeOptions = (nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\tconst options: Option<number>[] = [];\n\t\tif (Array.isArray(nextValue)) {\n\t\t\tfor (const value of nextValue) {\n\t\t\t\tif (typeof value === 'number') {\n\t\t\t\t\toptions.push({\n\t\t\t\t\t\tlabel: translate('kol-page-per-site', { placeholders: { entries: `${value}` } }),\n\t\t\t\t\t\tvalue: value,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tnextState.set('_pageSizeOptions', options);\n\t\tthis.beforePageSize(options, nextState);\n\t};\n\n\t@Watch('_pageSize')\n\tpublic validatePageSize(value?: number): void {\n\t\twatchNumber(this, '_pageSize', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePageSize,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_pageSizeOptions')\n\tpublic validatePageSizeOptions(value?: Stringified<number[]>): void {\n\t\twatchJsonArrayString(this, '_pageSizeOptions', (value) => typeof value === 'number', value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePageSizeOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_siblingCount')\n\tpublic validateSiblingCount(value?: number): void {\n\t\twatchNumber(this, '_siblingCount', Math.max(0, value ?? 1));\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: MaxPropType): void {\n\t\tvalidateMax(this, value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\tconst page = nextState.has('_page') ? (nextState.get('_page') as number) : this.state._page;\n\t\t\t\t\tconst pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\t\t\t\tthis.syncPage(nextState, page, pageSize, _nextValue as number);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateBoundaryCount(this._boundaryCount);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateHasButtons(this._hasButtons);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateOn(this._on);\n\t\tthis.validatePage(this._page);\n\t\tthis.validatePageSize(this._pageSize);\n\t\tthis.validatePageSizeOptions(this._pageSizeOptions);\n\t\tthis.validateSiblingCount(this._siblingCount);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateMax(this._max);\n\n\t\t/**\n\t\t * Die Seite muss als letztes gesetzt werden, da sonst die Seite\n\t\t * nicht korrekt berechnet wird.\n\t\t */\n\t\tthis.validatePage(this._page);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":"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"}

package/dist/kolibri/kol-popover-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e}from"./index-5dfe6d77.js";import{a as i}from"./alignment-3d2d9391.js";import{v as o}from"./show-9a06c90e.js";import{a as s}from"./dev.utils-889226ab.js";import{a}from"./align-floating-elements-e1edfaae.js";import"./prop.validators-c12923a5.js";import"./a11y.tipps-f14bff66.js";import"./reuse-d79ab469.js";const r="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tkol-popover {\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .popover {\n\t\tbackground-color: #fff;\n\t\tmin-height: max-content;\n\t\tmin-width: max-content;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .hidden {\n\t\tdisplay: none;\n\t}\n\n\tkol-popover .show {\n\t\tanimation: 0.3s ease-in forwards fadeInOpacity;\n\t}\n\n\tkol-popover .disappear {\n\t\tanimation: 0.3s ease-in backwards fadeInOpacity;\n\t}\n\n\tkol-popover .arrow {\n\t\tbackground-color: inherit;\n\t\theight: var(--font-size);\n\t\tposition: absolute;\n\t\trotate: 0.125turn;\n\t\twidth: var(--font-size);\n\t\tz-index: -1;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n",l=class{constructor(n){t(this,n),this.hidePopoverByEscape=t=>{"Escape"===t.key&&this.hidePopover()},this.hidePopoverByClickOutside=t=>{this.host&&!this.host.contains(t.target)&&this.hidePopover()},this.catchHostAndTriggerElement=t=>{t&&(this.host=t,this.triggerElement=t.previousElementSibling)},this.catchPopoverElement=t=>{this.popoverElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this._show=!1,this.state={_align:"top",_show:!1,_visible:!1}}async showPopover(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(await a({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))}hidePopover(){var t;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody()}addListenersToBody(){var t;const n=s().body;n.addEventListener("keyup",this.hidePopoverByEscape),n.addEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var t;const n=s().body;n.removeEventListener("keyup",this.hidePopoverByEscape),n.removeEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return n(e,{ref:this.catchHostAndTriggerElement},n("div",{class:{popover:!0,hidden:!this.state._show,show:this.state._visible},ref:this.catchPopoverElement},n("div",{class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),n("slot",null)))}validateAlign(t){i(this,t)}validateShow(t){o(this,t),t&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_show:["validateShow"]}}};l.style=r;export{l as kol_popover_wc};
+import{r as t,h as n,H as e}from"./index-0b7aa54b.js";import{ah as i,ad as o,al as s}from"./index-807d8631.js";import{a}from"./align-floating-elements-e01b2462.js";const l="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tkol-popover {\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .popover {\n\t\tbackground-color: #fff;\n\t\tmin-height: max-content;\n\t\tmin-width: max-content;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .hidden {\n\t\tdisplay: none;\n\t}\n\n\tkol-popover .show {\n\t\tanimation: 0.3s ease-in forwards fadeInOpacity;\n\t}\n\n\tkol-popover .disappear {\n\t\tanimation: 0.3s ease-in backwards fadeInOpacity;\n\t}\n\n\tkol-popover .arrow {\n\t\tbackground-color: inherit;\n\t\theight: var(--font-size);\n\t\tposition: absolute;\n\t\trotate: 0.125turn;\n\t\twidth: var(--font-size);\n\t\tz-index: -1;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n",r=l,h=class{constructor(n){t(this,n),this.hidePopoverByEscape=t=>{"Escape"===t.key&&this.hidePopover()},this.hidePopoverByClickOutside=t=>{this.host&&!this.host.contains(t.target)&&this.hidePopover()},this.catchHostAndTriggerElement=t=>{t&&(this.host=t,this.triggerElement=t.previousElementSibling)},this.catchPopoverElement=t=>{this.popoverElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this._show=!1,this.state={_align:"top",_show:!1,_visible:!1}}async showPopover(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(await a({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))}hidePopover(){var t;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody()}addListenersToBody(){var t;const n=s().body;n.addEventListener("keyup",this.hidePopoverByEscape),n.addEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var t;const n=s().body;n.removeEventListener("keyup",this.hidePopoverByEscape),n.removeEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return n(e,{ref:this.catchHostAndTriggerElement},n("div",{class:{popover:!0,hidden:!this.state._show,show:this.state._visible},ref:this.catchPopoverElement},n("div",{class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),n("slot",null)))}validateAlign(t){i(this,t)}validateShow(t){o(this,t),t&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_show:["validateShow"]}}};h.style=r;export{h as kol_popover_wc};

package/dist/kolibri/kol-popover-wc.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["styleCss","KolPopover","this","hidePopoverByEscape","event","key","hidePopover","hidePopoverByClickOutside","host","contains","target","catchHostAndTriggerElement","element","triggerElement","previousElementSibling","catchPopoverElement","popoverElement","catchArrowElement","arrowElement","_align","_show","_visible","showPopover","addListenersToBody","alignFloatingElements","align","referenceElement","floatingElement","state","Object","assign","_a","focus","removeListenersToBody","body","getDocument","addEventListener","document","scrollingElement","passive","removeEventListener","render","h","Host","ref","class","popover","hidden","show","validateAlign","value","validateShow","componentWillLoad"],"sources":["src/components/popover/style.css?tag=kol-popover-wc","src/components/popover/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\tkol-popover {\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .popover {\n\t\tbackground-color: #fff;\n\t\tmin-height: max-content;\n\t\tmin-width: max-content;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .hidden {\n\t\tdisplay: none;\n\t}\n\n\tkol-popover .show {\n\t\tanimation: 0.3s ease-in forwards fadeInOpacity;\n\t}\n\n\tkol-popover .disappear {\n\t\tanimation: 0.3s ease-in backwards fadeInOpacity;\n\t}\n\n\tkol-popover .arrow {\n\t\tbackground-color: inherit;\n\t\theight: var(--font-size);\n\t\tposition: absolute;\n\t\trotate: 0.125turn;\n\t\twidth: var(--font-size);\n\t\tz-index: -1;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { AlignPropType, validateAlign } from '../../types/props/align';\nimport { ShowPropType, validateShow } from '../../types/props/show';\nimport { getDocument } from '../../utils/dev.utils';\nimport { API, States } from './types';\nimport { alignFloatingElements } from '../../utils/align-floating-elements';\n\n/**\n * @slot - Der Inhalt des Popover.\n */\n@Component({\n\ttag: 'kol-popover-wc',\n\tstyleUrl: './style.css',\n\tshadow: false,\n})\nexport class KolPopover implements API {\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement | null;\n\tprivate host?: HTMLElement;\n\n\tprivate async showPopover(): Promise<void> {\n\t\tthis.addListenersToBody();\n\n\t\tif (this.triggerElement && this.popoverElement) {\n\t\t\tawait alignFloatingElements({\n\t\t\t\talign: this._align,\n\t\t\t\treferenceElement: this.triggerElement,\n\t\t\t\tarrowElement: this.arrowElement,\n\t\t\t\tfloatingElement: this.popoverElement,\n\t\t\t});\n\t\t\tthis.state = { ...this.state, _visible: true };\n\t\t}\n\t}\n\tprivate hidePopover(): void {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_visible: false,\n\t\t};\n\t\tthis._show = false;\n\t\tthis.triggerElement?.focus();\n\t\tthis.removeListenersToBody();\n\t}\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover();\n\t};\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover();\n\t\t}\n\t};\n\n\t/* EventListener functions */\n\tprivate addListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.addEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.addEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.addEventListener(\n\t\t\t'scroll',\n\t\t\t() => {\n\t\t\t\tvoid this.showPopover();\n\t\t\t},\n\t\t\t{ passive: true }\n\t\t);\n\t}\n\tprivate removeListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.removeEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.removeEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.removeEventListener('scroll', () => {\n\t\t\tvoid this.showPopover();\n\t\t});\n\t}\n\n\t/* catchElement functions */\n\tprivate catchHostAndTriggerElement = (element: HTMLElement | null): void => {\n\t\tif (element) {\n\t\t\tthis.host = element;\n\t\t\tthis.triggerElement = element.previousElementSibling as HTMLElement | null;\n\t\t}\n\t};\n\tprivate catchPopoverElement = (element?: HTMLDivElement): void => {\n\t\tthis.popoverElement = element;\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostAndTriggerElement}>\n\t\t\t\t<div class={{ popover: true, hidden: !this.state._show, show: this.state._visible }} ref={this.catchPopoverElement}>\n\t\t\t\t\t<div class={`arrow ${this.state._align}`} ref={this.catchArrowElement} />\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the alignment of the tooltip, popover or tabs in relation to the element.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_align: 'top',\n\t\t_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) void this.showPopover();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"mappings":";;;6UAAA,MAAMA,EAAW,w2I,MCgBJC,EAAU,M,yBA4BdC,KAAAC,oBAAuBC,IAC9B,GAAIA,EAAMC,MAAQ,SAAUH,KAAKI,aAAa,EAEvCJ,KAAAK,0BAA6BH,IACpC,GAAIF,KAAKM,OAASN,KAAKM,KAAKC,SAASL,EAAMM,QAAwB,CAClER,KAAKI,a,GA2BCJ,KAAAS,2BAA8BC,IACrC,GAAIA,EAAS,CACZV,KAAKM,KAAOI,EACZV,KAAKW,eAAiBD,EAAQE,sB,GAGxBZ,KAAAa,oBAAuBH,IAC9BV,KAAKc,eAAiBJ,CAAO,EAEtBV,KAAAe,kBAAqBL,IAC5BV,KAAKgB,aAAeN,CAAO,E,YAiBY,M,WAMyB,M,WAEjC,CAC/BO,OAAQ,MACRC,MAAO,MACPC,SAAU,M,CA5FH,iBAAMC,GACbpB,KAAKqB,qBAEL,GAAIrB,KAAKW,gBAAkBX,KAAKc,eAAgB,OACzCQ,EAAsB,CAC3BC,MAAOvB,KAAKiB,OACZO,iBAAkBxB,KAAKW,eACvBK,aAAchB,KAAKgB,aACnBS,gBAAiBzB,KAAKc,iBAEvBd,KAAK0B,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GAAQ5B,KAAK0B,OAAK,CAAEP,SAAU,M,EAGlC,WAAAf,G,MACPJ,KAAK0B,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACN5B,KAAK0B,OAAK,CACbP,SAAU,QAEXnB,KAAKkB,MAAQ,OACbW,EAAA7B,KAAKW,kBAAc,MAAAkB,SAAA,SAAAA,EAAEC,QACrB9B,KAAK+B,uB,CAYE,kBAAAV,G,MACP,MAAMW,EAAOC,IAAcD,KAC3BA,EAAKE,iBAAiB,QAASlC,KAAKC,qBACpC+B,EAAKE,iBAAiB,QAASlC,KAAKK,4BACpCwB,EAAAM,SAASC,oBAAgB,MAAAP,SAAA,SAAAA,EAAEK,iBAC1B,UACA,UACMlC,KAAKoB,aAAa,GAExB,CAAEiB,QAAS,M,CAGL,qBAAAN,G,MACP,MAAMC,EAAOC,IAAcD,KAC3BA,EAAKM,oBAAoB,QAAStC,KAAKC,qBACvC+B,EAAKM,oBAAoB,QAAStC,KAAKK,4BACvCwB,EAAAM,SAASC,oBAAgB,MAAAP,SAAA,SAAAA,EAAES,oBAAoB,UAAU,UACnDtC,KAAKoB,aAAa,G,CAkBlB,MAAAmB,GACN,OACCC,EAACC,EAAI,CAACC,IAAK1C,KAAKS,4BACf+B,EAAA,OAAKG,MAAO,CAAEC,QAAS,KAAMC,QAAS7C,KAAK0B,MAAMR,MAAO4B,KAAM9C,KAAK0B,MAAMP,UAAYuB,IAAK1C,KAAKa,qBAC9F2B,EAAA,OAAKG,MAAO,SAAS3C,KAAK0B,MAAMT,SAAUyB,IAAK1C,KAAKe,oBACpDyB,EAAA,c,CAwBG,aAAAO,CAAcC,GACpBD,EAAc/C,KAAMgD,E,CAId,YAAAC,CAAaD,GACnBC,EAAajD,KAAMgD,GACnB,GAAIA,OAAYhD,KAAKoB,a,CAGf,iBAAA8B,GACNlD,KAAK+C,cAAc/C,KAAKiB,QACxBjB,KAAKiD,aAAajD,KAAKkB,M"}
+{"version":3,"names":["styleCss","KolPopoverWcStyle0","KolPopover","this","hidePopoverByEscape","event","key","hidePopover","hidePopoverByClickOutside","host","contains","target","catchHostAndTriggerElement","element","triggerElement","previousElementSibling","catchPopoverElement","popoverElement","catchArrowElement","arrowElement","_align","_show","_visible","showPopover","addListenersToBody","alignFloatingElements","align","referenceElement","floatingElement","state","Object","assign","_a","focus","removeListenersToBody","body","getDocument","addEventListener","document","scrollingElement","passive","removeEventListener","render","h","Host","ref","class","popover","hidden","show","validateAlign","value","validateShow","componentWillLoad"],"sources":["src/components/popover/style.css?tag=kol-popover-wc","src/components/popover/component.tsx"],"sourcesContent":["@import url(../style.css);\n@layer kol-component {\n\tkol-popover {\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .popover {\n\t\tbackground-color: #fff;\n\t\tmin-height: max-content;\n\t\tmin-width: max-content;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .hidden {\n\t\tdisplay: none;\n\t}\n\n\tkol-popover .show {\n\t\tanimation: 0.3s ease-in forwards fadeInOpacity;\n\t}\n\n\tkol-popover .disappear {\n\t\tanimation: 0.3s ease-in backwards fadeInOpacity;\n\t}\n\n\tkol-popover .arrow {\n\t\tbackground-color: inherit;\n\t\theight: var(--font-size);\n\t\tposition: absolute;\n\t\trotate: 0.125turn;\n\t\twidth: var(--font-size);\n\t\tz-index: -1;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n","import type { AlignPropType, PopoverAPI, PopoverStates, ShowPropType } from '@public-ui/schema';\nimport { getDocument, validateAlign, validateShow } from '@public-ui/schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { alignFloatingElements } from '../../utils/align-floating-elements';\n\nimport type { JSX } from '@stencil/core';\n/**\n * @slot - Der Inhalt des Popover.\n */\n@Component({\n\ttag: 'kol-popover-wc',\n\tstyleUrl: './style.css',\n\tshadow: false,\n})\nexport class KolPopover implements PopoverAPI {\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement | null;\n\tprivate host?: HTMLElement;\n\n\tprivate async showPopover(): Promise<void> {\n\t\tthis.addListenersToBody();\n\n\t\tif (this.triggerElement && this.popoverElement) {\n\t\t\tawait alignFloatingElements({\n\t\t\t\talign: this._align,\n\t\t\t\treferenceElement: this.triggerElement,\n\t\t\t\tarrowElement: this.arrowElement,\n\t\t\t\tfloatingElement: this.popoverElement,\n\t\t\t});\n\t\t\tthis.state = { ...this.state, _visible: true };\n\t\t}\n\t}\n\tprivate hidePopover(): void {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_visible: false,\n\t\t};\n\t\tthis._show = false;\n\t\tthis.triggerElement?.focus();\n\t\tthis.removeListenersToBody();\n\t}\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover();\n\t};\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover();\n\t\t}\n\t};\n\n\t/* EventListener functions */\n\tprivate addListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.addEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.addEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.addEventListener(\n\t\t\t'scroll',\n\t\t\t() => {\n\t\t\t\tvoid this.showPopover();\n\t\t\t},\n\t\t\t{ passive: true }\n\t\t);\n\t}\n\tprivate removeListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.removeEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.removeEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.removeEventListener('scroll', () => {\n\t\t\tvoid this.showPopover();\n\t\t});\n\t}\n\n\t/* catchElement functions */\n\tprivate catchHostAndTriggerElement = (element: HTMLElement | null): void => {\n\t\tif (element) {\n\t\t\tthis.host = element;\n\t\t\tthis.triggerElement = element.previousElementSibling as HTMLElement | null;\n\t\t}\n\t};\n\tprivate catchPopoverElement = (element?: HTMLDivElement): void => {\n\t\tthis.popoverElement = element;\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostAndTriggerElement}>\n\t\t\t\t<div class={{ popover: true, hidden: !this.state._show, show: this.state._visible }} ref={this.catchPopoverElement}>\n\t\t\t\t\t<div class={`arrow ${this.state._align}`} ref={this.catchArrowElement} />\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the alignment of the tooltip, popover or tabs in relation to the element.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: PopoverStates = {\n\t\t_align: 'top',\n\t\t_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) void this.showPopover();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"mappings":";;;oKAAA,MAAMA,EAAW,w2IACjB,MAAAC,EAAeD,E,MCcFE,EAAU,M,yBA4BdC,KAAAC,oBAAuBC,IAC9B,GAAIA,EAAMC,MAAQ,SAAUH,KAAKI,aAAa,EAEvCJ,KAAAK,0BAA6BH,IACpC,GAAIF,KAAKM,OAASN,KAAKM,KAAKC,SAASL,EAAMM,QAAwB,CAClER,KAAKI,a,GA2BCJ,KAAAS,2BAA8BC,IACrC,GAAIA,EAAS,CACZV,KAAKM,KAAOI,EACZV,KAAKW,eAAiBD,EAAQE,sB,GAGxBZ,KAAAa,oBAAuBH,IAC9BV,KAAKc,eAAiBJ,CAAO,EAEtBV,KAAAe,kBAAqBL,IAC5BV,KAAKgB,aAAeN,CAAO,E,YAiBY,M,WAMyB,M,WAE1B,CACtCO,OAAQ,MACRC,MAAO,MACPC,SAAU,M,CA5FH,iBAAMC,GACbpB,KAAKqB,qBAEL,GAAIrB,KAAKW,gBAAkBX,KAAKc,eAAgB,OACzCQ,EAAsB,CAC3BC,MAAOvB,KAAKiB,OACZO,iBAAkBxB,KAAKW,eACvBK,aAAchB,KAAKgB,aACnBS,gBAAiBzB,KAAKc,iBAEvBd,KAAK0B,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GAAQ5B,KAAK0B,OAAK,CAAEP,SAAU,M,EAGlC,WAAAf,G,MACPJ,KAAK0B,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACN5B,KAAK0B,OAAK,CACbP,SAAU,QAEXnB,KAAKkB,MAAQ,OACbW,EAAA7B,KAAKW,kBAAc,MAAAkB,SAAA,SAAAA,EAAEC,QACrB9B,KAAK+B,uB,CAYE,kBAAAV,G,MACP,MAAMW,EAAOC,IAAcD,KAC3BA,EAAKE,iBAAiB,QAASlC,KAAKC,qBACpC+B,EAAKE,iBAAiB,QAASlC,KAAKK,4BACpCwB,EAAAM,SAASC,oBAAgB,MAAAP,SAAA,SAAAA,EAAEK,iBAC1B,UACA,UACMlC,KAAKoB,aAAa,GAExB,CAAEiB,QAAS,M,CAGL,qBAAAN,G,MACP,MAAMC,EAAOC,IAAcD,KAC3BA,EAAKM,oBAAoB,QAAStC,KAAKC,qBACvC+B,EAAKM,oBAAoB,QAAStC,KAAKK,4BACvCwB,EAAAM,SAASC,oBAAgB,MAAAP,SAAA,SAAAA,EAAES,oBAAoB,UAAU,UACnDtC,KAAKoB,aAAa,G,CAkBlB,MAAAmB,GACN,OACCC,EAACC,EAAI,CAACC,IAAK1C,KAAKS,4BACf+B,EAAA,OAAKG,MAAO,CAAEC,QAAS,KAAMC,QAAS7C,KAAK0B,MAAMR,MAAO4B,KAAM9C,KAAK0B,MAAMP,UAAYuB,IAAK1C,KAAKa,qBAC9F2B,EAAA,OAAKG,MAAO,SAAS3C,KAAK0B,MAAMT,SAAUyB,IAAK1C,KAAKe,oBACpDyB,EAAA,c,CAwBG,aAAAO,CAAcC,GACpBD,EAAc/C,KAAMgD,E,CAId,YAAAC,CAAaD,GACnBC,EAAajD,KAAMgD,GACnB,GAAIA,OAAYhD,KAAKoB,a,CAGf,iBAAA8B,GACNlD,KAAK+C,cAAc/C,KAAKiB,QACxBjB,KAAKiD,aAAajD,KAAKkB,M"}

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

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

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

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

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e}from"./index-5dfe6d77.js";import{v as i}from"./label-8258848f.js";import{d as o,w as a}from"./prop.validators-c12923a5.js";import{s}from"./reuse-d79ab469.js";import"./a11y.tipps-f14bff66.js";import"./dev.utils-889226ab.js";const l=["block","inline"],r="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tcite,\n\tfigure,\n\tq + figcaption {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tblockquote:before {\n\t\tcontent: open-quote;\n\t}\n\n\tblockquote::after {\n\t\tcontent: close-quote;\n\t}\n\n\tcite:before {\n\t\tcontent: '—';\n\t}\n\n\t.block cite:before {\n\t\tpadding-right: 0.5em;\n\t}\n\n\t.inline cite:before {\n\t\tpadding: 0.5em;\n\t}\n}\n",d=class{constructor(n){t(this,n),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateLabel(t){i(this,t)}validateHref(t){o(this,"_href",t,{required:!0})}validateQuote(t){o(this,"_quote",t,{required:!0})}validateVariant(t){a(this,"_variant",(t=>"string"==typeof t&&l.includes(t)),new Set(l),t)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const t=s(this.state._quote);return n(e,null,n("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?n("blockquote",{cite:this.state._href},this.state._quote,n("span",{"aria-hidden":t?void 0:"true",hidden:!t},n("slot",{name:"expert"}))):n("q",{cite:this.state._href},this.state._quote,n("span",{"aria-hidden":t?void 0:"true",hidden:!t},n("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&n("figcaption",null,n("cite",null,n("kol-link",{_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};d.style={default:r};export{d as kol_quote};
+import{r as t,h as n,H as e}from"./index-0b7aa54b.js";import{v as i,q as o,w as a,aa as s,C as l}from"./index-807d8631.js";const r="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tcite,\n\tfigure,\n\tq + figcaption {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tblockquote:before {\n\t\tcontent: open-quote;\n\t}\n\n\tblockquote::after {\n\t\tcontent: close-quote;\n\t}\n\n\tcite:before {\n\t\tcontent: '—';\n\t}\n\n\t.block cite:before {\n\t\tpadding-right: 0.5em;\n\t}\n\n\t.inline cite:before {\n\t\tpadding: 0.5em;\n\t}\n}\n",h=r,d=class{constructor(n){t(this,n),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(t){i(this,t)}validateHref(t){o(this,"_href",t,{required:!0})}validateQuote(t){o(this,"_quote",t,{required:!0})}validateVariant(t){a(this,"_variant",(t=>"string"==typeof t&&s.includes(t)),new Set(s),t)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const t=l(this.state._quote);return n(e,null,n("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?n("blockquote",{cite:this.state._href},this.state._quote,n("span",{"aria-hidden":t?void 0:"true",hidden:!t},n("slot",{name:"expert"}))):n("q",{cite:this.state._href},this.state._quote,n("span",{"aria-hidden":t?void 0:"true",hidden:!t},n("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&n("figcaption",null,n("cite",null,n("kol-link",{_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};d.style={default:h};export{d as kol_quote};