@public-ui/components 3.0.0-alpha.1 → 3.0.0-dcba8228fa4178aa125eea17082fc647882faa96.0

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

@@ -1 +1 @@
-{"version":3,"names":["validateCollapsible","component","value","watchBoolean","validateHasCompactButton","validateHasIconsWhenExpanded","defaultStyleCss","KolNavDefaultStyle0","entryIsLink","entryProps","_href","entryIsButton","undefined","_a","_on","onClick","KolNav","this","handleToggleExpansionClick","children","state","_expandedChildren","includes","collapseChildren","expandChildren","linkList","props","h","class","deep","orientation","links","map","link","index","li","collapsible","hideLabel","_collapsible","_hasCompactButton","_hasIconsWhenExpanded","_hideLabel","_label","_links","_orientation","Object","assign","filter","searchChildren","entry","hasChildren","expanded","icons","_icons","KolLinkWcTag","KolButtonWcTag","event","_children","expandButton","_ariaExpanded","_disabled","translate","placeholders","label","active","_active","Array","isArray","length","Boolean","key","initializeExpandedChildren","handleBranch","branch","childBranch","forEach","render","hasCompactButton","devWarning","Host","nav","id","KolButtonTag","_ariaControls","_tooltipAlign","_variant","validateHideLabel","validateLabel","_oldValue","initial","removeNavLabel","required","a11yHintLabelingLandmarks","addNavLabel","validateLinks","watchNavLinks","devHint","validateOrientation","watchValidator","Set","defaultValue","componentWillLoad","disconnectedCallback"],"sources":["src/schema/props/collapsible.ts","src/schema/props/has-compact-button.ts","src/schema/props/has-icons-when-expanded.ts","src/components/nav/style.scss?tag=kol-nav&mode=default&encapsulation=shadow","src/components/nav/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type CollapsiblePropType = boolean;\n\n/**\n * Defines if navigation nodes can be collapsed or not.\n */\nexport type PropCollapsible = {\n\tcollapsible: CollapsiblePropType;\n};\n\n/* validator */\nexport const validateCollapsible = (component: Generic.Element.Component, value?: CollapsiblePropType): void => {\n\twatchBoolean(component, '_collapsible', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\ntype HasCompactButtonPropType = boolean;\n\n/**\n * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n */\nexport type PropHasCompactButton = {\n\thasCompactButton: HasCompactButtonPropType;\n};\n\n/* validator */\nexport const validateHasCompactButton = (component: Generic.Element.Component, value?: HasCompactButtonPropType): void => {\n\twatchBoolean(component, '_hasCompactButton', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HasIconsWhenExpandedPropType = boolean;\n\n/**\n * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n */\nexport type PropHasIconsWhenExpanded = {\n\thasIconsWhenExpanded: HasIconsWhenExpandedPropType;\n};\n\n/* validator */\nexport const validateHasIconsWhenExpanded = (component: Generic.Element.Component, value?: HasIconsWhenExpandedPropType): void => {\n\twatchBoolean(component, '_hasIconsWhenExpanded', value);\n};\n","@import '../@shared/mixins';\n@import '../style';\n@import '../tooltip/style.scss';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\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.list.horizontal {\n\t\tflex-wrap: wrap;\n\t}\n\n\t.entry {\n\t\tdisplay: flex;\n\t}\n\n\t.entry-item {\n\t\tflex-grow: 1;\n\t}\n}\n","import type {\n\tButtonOrLinkOrTextWithChildrenProps,\n\tButtonWithChildrenProps,\n\tCollapsiblePropType,\n\tHideLabelPropType,\n\tLabelPropType,\n\tLinkProps,\n\tLinkWithChildrenProps,\n\tNavAPI,\n\tNavStates,\n\tOrientation,\n\tStringified,\n} from '../../schema';\nimport {\n\ta11yHintLabelingLandmarks,\n\tdevHint,\n\tdevWarning,\n\tvalidateCollapsible,\n\tvalidateHasCompactButton,\n\tvalidateHasIconsWhenExpanded,\n\tvalidateHideLabel,\n\tvalidateLabel,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from './validation';\nimport { KolButtonTag, KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport type { StencilUnknown } from '../../schema';\n\nconst linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\tif (typeof link === 'object' && typeof link._label === 'string' /* && typeof newLink._href === 'string' */) {\n\t\tif (Array.isArray(link._children)) {\n\t\t\treturn linksValidator(link._children);\n\t\t}\n\t\treturn false;\n\t}\n\treturn true;\n};\n\nconst linksValidator = (links: ButtonOrLinkOrTextWithChildrenProps[]): boolean => {\n\tif (Array.isArray(links)) {\n\t\treturn links.find(linkValidator) !== undefined;\n\t}\n\treturn true;\n};\n\nconst entryIsLink = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is LinkWithChildrenProps => {\n\treturn typeof (entryProps as LinkProps)._href === 'string';\n};\n\nconst entryIsButton = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is ButtonWithChildrenProps => {\n\treturn (entryProps as LinkProps)._href === undefined && typeof (entryProps as ButtonWithChildrenProps)._on?.onClick === 'function';\n};\n\n@Component({\n\ttag: 'kol-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolNav implements NavAPI {\n\tprivate expandChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [...this.state._expandedChildren, children],\n\t\t};\n\t}\n\tprivate collapseChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren != children),\n\t\t};\n\t}\n\n\tprivate readonly handleToggleExpansionClick = (children?: ButtonOrLinkOrTextWithChildrenProps[]): void => {\n\t\tif (children) {\n\t\t\tif (this.state._expandedChildren.includes(children)) {\n\t\t\t\tthis.collapseChildren(children);\n\t\t\t} else {\n\t\t\t\tthis.expandChildren(children);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate entry(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\thasChildren: boolean,\n\t\tentry: ButtonOrLinkOrTextWithChildrenProps,\n\t\texpanded: boolean,\n\t): JSX.Element {\n\t\tconst icons =\n\t\t\tthis.state._hasIconsWhenExpanded || this.state._hideLabel\n\t\t\t\t? entry._icons || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)\n\t\t\t\t: undefined;\n\n\t\treturn (\n\t\t\t<div class={{ entry: true, 'hide-label': hideLabel }}>\n\t\t\t\t{entryIsLink(entry) ? (\n\t\t\t\t\t<KolLinkWcTag class=\"entry-item\" {...entry} _hideLabel={hideLabel} _icons={icons} />\n\t\t\t\t) : (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"entry-item\"\n\t\t\t\t\t\t_label={entry._label}\n\t\t\t\t\t\t_hideLabel={hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: (event: MouseEvent, value: Stringified<StencilUnknown>) => {\n\t\t\t\t\t\t\t\tif (entryIsButton(entry) && typeof entry._on.onClick === 'function') {\n\t\t\t\t\t\t\t\t\tentry._on.onClick(event, value);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tthis.handleToggleExpansionClick(entry._children);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{hasChildren ? this.expandButton(collapsible, entry as ButtonWithChildrenProps, expanded) : ''}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate expandButton(collapsible: boolean, link: ButtonWithChildrenProps, expanded: boolean): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tclass=\"expand-button\"\n\t\t\t\t_ariaExpanded={expanded}\n\t\t\t\t_disabled={!collapsible}\n\t\t\t\t_icons={'codicon codicon-' + (expanded ? 'remove' : 'add')}\n\t\t\t\t_hideLabel\n\t\t\t\t_label={`${expanded ? translate('kol-nav-label-close', { placeholders: { label: link._label } }) : translate('kol-nav-label-open', { placeholders: { label: link._label } })}`}\n\t\t\t\t_on={{ onClick: () => this.handleToggleExpansionClick(link._children) }}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tprivate li(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\tdeep: number,\n\t\tindex: number,\n\t\tlink: ButtonOrLinkOrTextWithChildrenProps,\n\t\torientation: Orientation,\n\t): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={{\n\t\t\t\t\tactive,\n\t\t\t\t\texpanded,\n\t\t\t\t\t'has-children': hasChildren,\n\t\t\t\t}}\n\t\t\t\tkey={index}\n\t\t\t>\n\t\t\t\t{this.entry(collapsible, hideLabel, hasChildren, link, expanded)}\n\t\t\t\t{expanded && <this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={deep + 1} links={link._children || []} orientation={orientation} />}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: {\n\t\tcollapsible: boolean;\n\t\thideLabel: HideLabelPropType;\n\t\tdeep: number;\n\t\tlinks: ButtonOrLinkOrTextWithChildrenProps[];\n\t\torientation: Orientation;\n\t}): JSX.Element => {\n\t\treturn (\n\t\t\t<ul class={`list ${props.deep === 0 && props.orientation === 'horizontal' ? ' horizontal' : ' vertical'}`} data-deep={props.deep}>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tprivate initializeExpandedChildren() {\n\t\t/**\n\t\t * Recursively process branches and expand branches which are active or have active children somewhere in the tree.\n\t\t * @param {ButtonOrLinkOrTextWithChildrenProps} branch\n\t\t * @return boolean - true indicates that the current branch or a child branch is active\n\t\t */\n\t\tconst handleBranch = (branch: ButtonOrLinkOrTextWithChildrenProps) => {\n\t\t\tif (branch._active) {\n\t\t\t\tif (branch._children) {\n\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t} else if (branch._children) {\n\t\t\t\tfor (const childBranch of branch._children) {\n\t\t\t\t\tif (handleBranch(childBranch)) {\n\t\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false;\n\t\t};\n\t\tthis.state._links.forEach(handleBranch);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tlet hasCompactButton = this.state._hasCompactButton;\n\t\tif (this.state._orientation === 'horizontal' && this.state._hasCompactButton === true) {\n\t\t\thasCompactButton = false;\n\t\t\tdevWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);\n\t\t}\n\t\tconst collapsible = this.state._collapsible === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\t\tconst orientation = this.state._orientation;\n\t\treturn (\n\t\t\t<Host class=\"kol-nav\">\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tnav: true,\n\t\t\t\t\t\t[orientation]: true,\n\t\t\t\t\t\t'is-compact': this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<nav aria-label={this.state._label} id=\"nav\">\n\t\t\t\t\t\t<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={0} links={this.state._links} orientation={orientation}></this.linkList>\n\t\t\t\t\t</nav>\n\t\t\t\t\t{hasCompactButton && (\n\t\t\t\t\t\t<div class=\"compact\">\n\t\t\t\t\t\t\t<KolButtonTag\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></KolButtonTag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines if navigation nodes can be collapsed or not. Enabled by default.\n\t * @TODO: Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _collapsible?: boolean = true;\n\n\t/**\n\t * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n\t */\n\t@Prop() public _hasCompactButton?: boolean = false;\n\n\t/**\n\t * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n\t */\n\t@Prop() public _hasIconsWhenExpanded?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links, buttons or texts to render.\n\t */\n\t@Prop() public _links!: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t@State() public state: NavStates = {\n\t\t_collapsible: true,\n\t\t_hasCompactButton: false,\n\t\t_hasIconsWhenExpanded: false,\n\t\t_hideLabel: false,\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t\t_orientation: 'vertical',\n\t\t_expandedChildren: [],\n\t};\n\n\t@Watch('_collapsible')\n\tpublic validateCollapsible(value?: CollapsiblePropType): void {\n\t\tvalidateCollapsible(this, value);\n\t}\n\n\t@Watch('_hasCompactButton')\n\tpublic validateHasCompactButton(value?: boolean): void {\n\t\tvalidateHasCompactButton(this, value);\n\t}\n\n\t@Watch('_hasIconsWhenExpanded')\n\tpublic validateHasIconsWhenExpanded(value?: boolean): void {\n\t\tvalidateHasIconsWhenExpanded(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType) {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>): void {\n\t\twatchNavLinks('KolNav', this, value);\n\t\tdevHint(`[KolNav] The navigation structure is not yet validated recursively.`);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' || value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t},\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCollapsible(this._collapsible);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateHasCompactButton(this._hasCompactButton);\n\t\tthis.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n\n// console.log(\n//   stringifyJson([\n//     { _label: '1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//     { _label: '2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n//     {\n//       _active: true,\n//       _label: '3 Navigationspunkt',\n//       _href: '#abc',\n//       _icons: 'codicon codicon-folder-closed',\n//       _children: [\n//         { _label: '3.1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n//         { _label: '3.2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//         {\n//           _active: true,\n//           _label: '3.3 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _active: true, _label: '3.3.1 Navigationspunkt (aktiv)', _href: '#abc' },\n//             { _label: '3.3.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         {\n//           _label: '3.4 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _label: '3.4.1 Navigationspunkt', _href: '#abc' },\n//             { _label: '3.4.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         { _label: '3.5 Navigationspunkt', _href: '#abc' },\n//       ],\n//     },\n//     { _label: '4 Navigationspunkt', _href: '#abc' },\n//   ])\n// );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["validateCollapsible","component","value","watchBoolean","validateHasCompactButton","validateHasIconsWhenExpanded","defaultStyleCss","KolNavDefaultStyle0","entryIsLink","entryProps","_href","entryIsButton","undefined","_a","_on","onClick","KolNav","this","handleToggleExpansionClick","children","state","_expandedChildren","includes","collapseChildren","expandChildren","linkList","props","h","class","clsx","deep","orientation","links","map","link","index","li","collapsible","hideLabel","_collapsible","_hasCompactButton","_hasIconsWhenExpanded","_hideLabel","_label","_links","_orientation","Object","assign","filter","searchChildren","entry","hasChildren","expanded","icons","_icons","KolLinkWcTag","KolButtonWcTag","event","_children","expandButton","_ariaExpanded","_disabled","translate","placeholders","label","active","_active","Array","isArray","length","Boolean","key","initializeExpandedChildren","handleBranch","branch","childBranch","forEach","render","hasCompactButton","devWarning","id","_ariaControls","_tooltipAlign","_variant","validateHideLabel","validateLabel","_oldValue","initial","removeNavLabel","required","a11yHintLabelingLandmarks","addNavLabel","validateLinks","watchNavLinks","devHint","validateOrientation","watchValidator","Set","defaultValue","componentWillLoad","disconnectedCallback"],"sources":["src/schema/props/collapsible.ts","src/schema/props/has-compact-button.ts","src/schema/props/has-icons-when-expanded.ts","src/components/nav/style.scss?tag=kol-nav&mode=default&encapsulation=shadow","src/components/nav/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type CollapsiblePropType = boolean;\n\n/**\n * Defines if navigation nodes can be collapsed or not.\n */\nexport type PropCollapsible = {\n\tcollapsible: CollapsiblePropType;\n};\n\n/* validator */\nexport const validateCollapsible = (component: Generic.Element.Component, value?: CollapsiblePropType): void => {\n\twatchBoolean(component, '_collapsible', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\ntype HasCompactButtonPropType = boolean;\n\n/**\n * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n */\nexport type PropHasCompactButton = {\n\thasCompactButton: HasCompactButtonPropType;\n};\n\n/* validator */\nexport const validateHasCompactButton = (component: Generic.Element.Component, value?: HasCompactButtonPropType): void => {\n\twatchBoolean(component, '_hasCompactButton', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HasIconsWhenExpandedPropType = boolean;\n\n/**\n * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n */\nexport type PropHasIconsWhenExpanded = {\n\thasIconsWhenExpanded: HasIconsWhenExpandedPropType;\n};\n\n/* validator */\nexport const validateHasIconsWhenExpanded = (component: Generic.Element.Component, value?: HasIconsWhenExpandedPropType): void => {\n\twatchBoolean(component, '_hasIconsWhenExpanded', value);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-nav {\n\t\t$root: &;\n\n\t\tfont-size: rem(16);\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\n\t\t&--horizontal {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t&__navigation {\n\t\t\t#{$root}:not(#{$root}--is-compact) & {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\n\t\t&__list {\n\t\t\tdisplay: flex;\n\t\t\tlist-style: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\n\t\t\t&--vertical {\n\t\t\t\tflex-direction: column;\n\t\t\t}\n\n\t\t\t&--horizontal {\n\t\t\t\tflex-wrap: wrap;\n\t\t\t}\n\t\t}\n\n\t\t&__entry-wrapper {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t&__entry {\n\t\t\tflex-grow: 1;\n\t\t}\n\t}\n}\n","import type {\n\tButtonOrLinkOrTextWithChildrenProps,\n\tButtonWithChildrenProps,\n\tCollapsiblePropType,\n\tHideLabelPropType,\n\tLabelPropType,\n\tLinkProps,\n\tLinkWithChildrenProps,\n\tNavAPI,\n\tNavStates,\n\tOrientation,\n\tStringified,\n} from '../../schema';\nimport {\n\ta11yHintLabelingLandmarks,\n\tdevHint,\n\tdevWarning,\n\tvalidateCollapsible,\n\tvalidateHasCompactButton,\n\tvalidateHasIconsWhenExpanded,\n\tvalidateHideLabel,\n\tvalidateLabel,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from './validation';\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport type { StencilUnknown } from '../../schema';\nimport clsx from 'clsx';\n\nconst linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\tif (typeof link === 'object' && typeof link._label === 'string' /* && typeof newLink._href === 'string' */) {\n\t\tif (Array.isArray(link._children)) {\n\t\t\treturn linksValidator(link._children);\n\t\t}\n\t\treturn false;\n\t}\n\treturn true;\n};\n\nconst linksValidator = (links: ButtonOrLinkOrTextWithChildrenProps[]): boolean => {\n\tif (Array.isArray(links)) {\n\t\treturn links.find(linkValidator) !== undefined;\n\t}\n\treturn true;\n};\n\nconst entryIsLink = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is LinkWithChildrenProps => {\n\treturn typeof (entryProps as LinkProps)._href === 'string';\n};\n\nconst entryIsButton = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is ButtonWithChildrenProps => {\n\treturn (entryProps as LinkProps)._href === undefined && typeof (entryProps as ButtonWithChildrenProps)._on?.onClick === 'function';\n};\n\n@Component({\n\ttag: 'kol-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolNav implements NavAPI {\n\tprivate expandChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [...this.state._expandedChildren, children],\n\t\t};\n\t}\n\tprivate collapseChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren != children),\n\t\t};\n\t}\n\n\tprivate readonly handleToggleExpansionClick = (children?: ButtonOrLinkOrTextWithChildrenProps[]): void => {\n\t\tif (children) {\n\t\t\tif (this.state._expandedChildren.includes(children)) {\n\t\t\t\tthis.collapseChildren(children);\n\t\t\t} else {\n\t\t\t\tthis.expandChildren(children);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate entry(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\thasChildren: boolean,\n\t\tentry: ButtonOrLinkOrTextWithChildrenProps,\n\t\texpanded: boolean,\n\t): JSX.Element {\n\t\tconst icons =\n\t\t\tthis.state._hasIconsWhenExpanded || this.state._hideLabel\n\t\t\t\t? entry._icons || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)\n\t\t\t\t: undefined;\n\n\t\treturn (\n\t\t\t<div class=\"kol-nav__entry-wrapper\">\n\t\t\t\t{entryIsLink(entry) ? (\n\t\t\t\t\t<KolLinkWcTag class=\"kol-nav__entry kol-nav__entry--link\" {...entry} _hideLabel={hideLabel} _icons={icons} />\n\t\t\t\t) : (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-nav__entry kol-nav__entry--button\"\n\t\t\t\t\t\t_label={entry._label}\n\t\t\t\t\t\t_hideLabel={hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: (event: MouseEvent, value: Stringified<StencilUnknown>) => {\n\t\t\t\t\t\t\t\tif (entryIsButton(entry) && typeof entry._on.onClick === 'function') {\n\t\t\t\t\t\t\t\t\tentry._on.onClick(event, value);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tthis.handleToggleExpansionClick(entry._children);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{hasChildren ? this.expandButton(collapsible, entry as ButtonWithChildrenProps, expanded) : ''}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate expandButton(collapsible: boolean, link: ButtonWithChildrenProps, expanded: boolean): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tclass={clsx('kol-nav__expand-button', {\n\t\t\t\t\t'kol-nav__expand-button--expanded': expanded,\n\t\t\t\t})}\n\t\t\t\t_ariaExpanded={expanded}\n\t\t\t\t_disabled={!collapsible}\n\t\t\t\t_icons={'codicon codicon-' + (expanded ? 'remove' : 'add')}\n\t\t\t\t_hideLabel\n\t\t\t\t_label={`${expanded ? translate('kol-nav-label-close', { placeholders: { label: link._label } }) : translate('kol-nav-label-open', { placeholders: { label: link._label } })}`}\n\t\t\t\t_on={{ onClick: () => this.handleToggleExpansionClick(link._children) }}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tprivate li(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\tdeep: number,\n\t\tindex: number,\n\t\tlink: ButtonOrLinkOrTextWithChildrenProps,\n\t\torientation: Orientation,\n\t): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={clsx('kol-nav__list-item', {\n\t\t\t\t\t'kol-nav__list-item--active': active,\n\t\t\t\t\t'kol-nav__list-item--expanded': expanded,\n\t\t\t\t\t'kol-nav__list-item--has-children': hasChildren,\n\t\t\t\t})}\n\t\t\t\tkey={index}\n\t\t\t>\n\t\t\t\t{this.entry(collapsible, 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\n\t\t\t\tclass={clsx('kol-nav__list', {\n\t\t\t\t\t'kol-nav__list--nested': props.deep > 0,\n\t\t\t\t\t'kol-nav__list--horizontal': props.deep === 0 && props.orientation === 'horizontal',\n\t\t\t\t\t'kol-nav__list--vertical': props.deep !== 0 || props.orientation === 'vertical',\n\t\t\t\t})}\n\t\t\t\tdata-deep={props.deep}\n\t\t\t>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.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<div\n\t\t\t\tclass={clsx('kol-nav', `kol-nav--${orientation}`, {\n\t\t\t\t\t'kol-nav--is-compact': this.state._hideLabel,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<nav class=\"kol-nav__navigation\" aria-label={this.state._label} id=\"nav\">\n\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</nav>\n\t\t\t\t{hasCompactButton && (\n\t\t\t\t\t<div class=\"kol-nav__compact\">\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"kol-nav__toggle-button\"\n\t\t\t\t\t\t\t_ariaControls=\"nav\"\n\t\t\t\t\t\t\t_ariaExpanded={!hideLabel}\n\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_hideLabel\n\t\t\t\t\t\t\t_label={translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t_hideLabel: this.state._hideLabel === false,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines if navigation nodes can be collapsed or not. Enabled by default.\n\t * @TODO: Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _collapsible?: boolean = true;\n\n\t/**\n\t * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n\t */\n\t@Prop() public _hasCompactButton?: boolean = false;\n\n\t/**\n\t * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n\t */\n\t@Prop() public _hasIconsWhenExpanded?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links, buttons or texts to render.\n\t */\n\t@Prop() public _links!: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t@State() public state: NavStates = {\n\t\t_collapsible: true,\n\t\t_hasCompactButton: false,\n\t\t_hasIconsWhenExpanded: false,\n\t\t_hideLabel: false,\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t\t_orientation: 'vertical',\n\t\t_expandedChildren: [],\n\t};\n\n\t@Watch('_collapsible')\n\tpublic validateCollapsible(value?: CollapsiblePropType): void {\n\t\tvalidateCollapsible(this, value);\n\t}\n\n\t@Watch('_hasCompactButton')\n\tpublic validateHasCompactButton(value?: boolean): void {\n\t\tvalidateHasCompactButton(this, value);\n\t}\n\n\t@Watch('_hasIconsWhenExpanded')\n\tpublic validateHasIconsWhenExpanded(value?: boolean): void {\n\t\tvalidateHasIconsWhenExpanded(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType) {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>): void {\n\t\twatchNavLinks('KolNav', this, value);\n\t\tdevHint(`[KolNav] The navigation structure is not yet validated recursively.`);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' || value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t},\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCollapsible(this._collapsible);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateHasCompactButton(this._hasCompactButton);\n\t\tthis.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n\n// console.log(\n//   stringifyJson([\n//     { _label: '1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//     { _label: '2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n//     {\n//       _active: true,\n//       _label: '3 Navigationspunkt',\n//       _href: '#abc',\n//       _icons: 'codicon codicon-folder-closed',\n//       _children: [\n//         { _label: '3.1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n//         { _label: '3.2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//         {\n//           _active: true,\n//           _label: '3.3 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _active: true, _label: '3.3.1 Navigationspunkt (aktiv)', _href: '#abc' },\n//             { _label: '3.3.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         {\n//           _label: '3.4 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _label: '3.4.1 Navigationspunkt', _href: '#abc' },\n//             { _label: '3.4.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         { _label: '3.5 Navigationspunkt', _href: '#abc' },\n//       ],\n//     },\n//     { _label: '4 Navigationspunkt', _href: '#abc' },\n//   ])\n// );\n"],"mappings":"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","ignoreList":[]}

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 i}from"./index-a49af574.js";import{t as e}from"./i18n-5fe08f1c.js";import{n as o}from"./dev.utils-8fad8415.js";import{r as s,a}from"./unique-nav-labels-768d04e9.js";import{l,a as r}from"./component-names-aa3cbc3c.js";import{S as h}from"./common-54bf85ba.js";import{v as c}from"./custom-class-9311655e.js";import{k as d,w as p,g as u,p as f}from"./prop.validators-c5e6ad2d.js";import{v as m}from"./label-d70e7c34.js";import{v as b}from"./tooltip-align-c001aae2.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./index-541b643a.js";import"./align-3f029493.js";const g=(t,e,n)=>{d(t,"_max",e,n)},_="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    align-items: center;\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n  }\n  .navigation-list {\n    align-items: center;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 0.5em;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .separator:before {\n    content: \"•••\";\n  }\n}",v=_,y={left:"codicon codicon-debug-reverse-continue"},k={left:"codicon codicon-chevron-left"},w={right:"codicon codicon-chevron-right"},x={right:"codicon codicon-debug-continue"};function z(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}const S=z(),C=new Intl.NumberFormat(S,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),j=class{constructor(n){t(this,n),this.nonce=o(),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 a=e.has("_page")?e.get("_page"):this.state._page,s=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,a,e.get("_pageSize"),s)},this.syncPage=(t,e,n,i)=>{if(i>0){const a=this.calcCount(i,n);a>0&&(e>a?(t.set("_page",a),this.onChangePage(h,a)):e<1&&(t.set("_page",1),this.onChangePage(h,1)))}},this.beforePageSizeOptions=(t,n)=>{const i=[];if(Array.isArray(t))for(const n of t)"number"==typeof n&&i.push({label:e("kol-page-per-site",{placeholders:{entries:`${n}`}}),value:n});n.set("_pageSizeOptions",i),this.beforePageSize(i,n)},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:e("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 a=!1;const s=this.getCount(),h=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?(a=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===a?(a=!1,n("li",{key:o()},n("span",{class:"separator","aria-hidden":"true"}))):null));return n(i,{class:"kol-pagination"},n("nav",{"aria-label":this.state._label},n("ul",{class:"navigation-list"},this.state._hasButtons.first&&n("li",null,n(r,{class:"first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:y,_hideLabel:!0,_label:e("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&n("li",null,n(r,{class:"previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:k,_hideLabel:!0,_label:e("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),h,this.state._hasButtons.next&&n("li",null,n(r,{class:"next",exportparts:"icon",_customClass:this.state._customClass,_disabled:s<=this.state._page,_icons:w,_hideLabel:!0,_label:e("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&n("li",null,n(r,{class:"last",exportparts:"icon",_customClass:this.state._customClass,_disabled:s<=this.state._page,_icons:x,_hideLabel:!0,_label:e("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&n(l,{_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:e("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return n("li",{key:o()},n(r,{exportparts:"icon",_customClass:this.state._customClass,_label:"",_on:{onClick:e=>{this.onClick(e,t)}}},n("span",{slot:"expert"},n("span",{class:"visually-hidden"},e("kol-page"))," ",C.format(t))))}getSelectedPageButton(t){return n("li",{key:o()},n(r,{class:"selected",_customClass:this.state._customClass,_disabled:!0,_label:""},n("span",{slot:"expert"},n("span",{class:"visually-hidden"},e("kol-page"))," ",C.format(t))))}validateBoundaryCount(t){d(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){c(this,t)}validateLabel(t,e,n=!1){n||s(this.state._label),m(this,t),a(this.state._label)}validateHasButtons(t){p(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=f(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){d(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){d(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){u(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){d(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){g(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){b(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(){s(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"]}}};j.style={default:v};export{j as kol_pagination};
+import{r as t,h as n,H as i,g as e}from"./index-4492e98a.js";import{t as o}from"./i18n-efbafc80.js";import{n as s}from"./dev.utils-4b942b95.js";import{r as a,a as l}from"./unique-nav-labels-768d04e9.js";import{i as r,a as h}from"./component-names-60d77143.js";import{d as c,K as d}from"./events-5886c68b.js";import{S as p}from"./common-54bf85ba.js";import{v as u}from"./custom-class-0b713d1d.js";import{k as f,w as b,g as m,p as g}from"./prop.validators-d189554c.js";import{v as _}from"./label-792bf136.js";import{v as k}from"./tooltip-align-075e677e.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";import"./dev.utils-fab45cbc.js";import"./align-de93d774.js";const v=(t,n,e)=>{f(t,"_max",n,e)},y="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  /* TODO. Once #7126 is completed, move :host block into .kol-pagination  */\n  :host {\n    align-items: center;\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n  }\n  .kol-pagination__navigation-list {\n    align-items: center;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 0.5em;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n}",x=y,w={left:"codicon codicon-debug-reverse-continue"},z={left:"codicon codicon-chevron-left"},S={right:"codicon codicon-chevron-right"},C={right:"codicon codicon-debug-continue"};function j(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}const O=j(),A=new Intl.NumberFormat(O,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),B=class{constructor(n){t(this,n),this.nonce=s(),this.calcCount=(t,n=1)=>Math.ceil(t/n),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this.onClick=(t,n)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,n),this.host&&c(this.host,d.click,n),this.onChangePage(t,n)},this.onChangePage=(t,n)=>{const e=setTimeout((()=>{clearTimeout(e),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,n),this.host&&c(this.host,d.changePage,n)}))},this.onChangePageSize=(t,n)=>{if("number"==typeof(n=parseInt(n[0]))&&n>0&&this._pageSize!==n){this._pageSize=n;const e=setTimeout((()=>{clearTimeout(e),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize),this.host&&c(this.host,d.changePageSize,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,n)=>{let e=n.has("_pageSize")?n.get("_pageSize"):this.state._pageSize;const i=n.has("_pageSizeOptions")?n.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(i)&&i.length>0){const t=i.find((t=>t.value===e));e=void 0===t?i[0].value:t.value,n.set("_pageSize",e)}const a=n.has("_page")?n.get("_page"):this.state._page,o=n.has("_max")?n.get("_max"):this.state._max;this.syncPage(n,a,n.get("_pageSize"),o)},this.syncPage=(t,n,e,i)=>{if(i>0){const a=this.calcCount(i,e);a>0&&(n>a?(t.set("_page",a),this.onChangePage(p,a)):n<1&&(t.set("_page",1),this.onChangePage(p,1)))}},this.beforePageSizeOptions=(t,n)=>{const e=[];if(Array.isArray(t))for(const n of t)"number"==typeof n&&e.push({label:o("kol-page-per-site",{placeholders:{entries:`${n}`}}),value:n});n.set("_pageSizeOptions",e),this.beforePageSize(e,n)},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:o("kol-pagination"),_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0}}render(){var t;let e=!1;const a=this.getCount(),l=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?(e=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===e?(e=!1,n("li",{key:s()},n("span",{class:"kol-pagination__separator","aria-hidden":"true"}))):null));return n(i,{class:"kol-pagination"},n("nav",{"aria-label":this.state._label},n("ul",{class:"kol-pagination__navigation-list"},this.state._hasButtons.first&&n("li",null,n(h,{class:"kol-pagination__button kol-pagination__button--first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:w,_hideLabel:!0,_label:o("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&n("li",null,n(h,{class:"kol-pagination__button kol-pagination__button--previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:z,_hideLabel:!0,_label:o("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),l,this.state._hasButtons.next&&n("li",null,n(h,{class:"kol-pagination__button kol-pagination__button--next",exportparts:"icon",_customClass:this.state._customClass,_disabled:a<=this.state._page,_icons:S,_hideLabel:!0,_label:o("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&n("li",null,n(h,{class:"kol-pagination__button kol-pagination__button--last",exportparts:"icon",_customClass:this.state._customClass,_disabled:a<=this.state._page,_icons:C,_hideLabel:!0,_label:o("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&n(r,{_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:o("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return n("li",{key:s()},n(h,{exportparts:"icon",_customClass:this.state._customClass,_label:"",_on:{onClick:n=>{this.onClick(n,t)}}},n("span",{slot:"expert"},n("span",{class:"visually-hidden"},o("kol-page"))," ",A.format(t))))}getSelectedPageButton(t){return n("li",{key:s()},n(h,{class:"kol-pagination__button kol-pagination__button--selected",_customClass:this.state._customClass,_disabled:!0,_label:""},n("span",{slot:"expert"},n("span",{class:"visually-hidden"},o("kol-page"))," ",A.format(t))))}validateBoundaryCount(t){f(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){u(this,t)}validateLabel(t,n,e=!1){e||a(this.state._label),_(this,t),l(this.state._label)}validateHasButtons(t){b(this,"_hasButtons",(t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,n)=>{if("boolean"==typeof t)n.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=g(t)}catch(t){n.delete("_hasButtons")}"object"==typeof t&&null!==t&&n.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){f(this,"_page",t,{hooks:{beforePatch:(t,n)=>{const e=n.has("_pageSize")?n.get("_pageSize"):this.state._pageSize,i=n.has("_max")?n.get("_max"):this.state._max;this.syncPage(n,t,e,i)}}})}validatePageSize(t){f(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){m(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){f(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){v(this,t,{hooks:{beforePatch:(t,n)=>{const e=n.has("_page")?n.get("_page"):this.state._page,i=n.has("_pageSize")?n.get("_pageSize"):this.state._pageSize;this.syncPage(n,e,i,t)}}})}validateTooltipAlign(t){k(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(){a(this.state._label)}get host(){return e(this)}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"]}}};B.style={default:x};export{B as kol_pagination};

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

@@ -1 +1 @@
-{"version":3,"names":["validateMax","component","value","options","watchNumber","defaultStyleCss","KolPaginationDefaultStyle0","leftDoubleArrowIcon","left","leftSingleArrow","rightSingleArrowIcon","right","rightDoubleArrowIcon","getUserLanguage","userLanguage","navigator","language","normalizedLanguage","includes","toUpperCase","NUMBER_FORMATTER","Intl","NumberFormat","style","minimumFractionDigits","maximumFractionDigits","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","key","class","Host","KolButtonWcTag","exportparts","_customClass","_disabled","_icons","_hideLabel","_tooltipAlign","_a","KolSelectTag","_id","_options","onChange","_value","slot","format","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/schema/props/max.ts","src/components/pagination/style.scss?tag=kol-pagination&mode=default&encapsulation=shadow","src/components/pagination/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchNumberOptions } from '../utils';\nimport { watchNumber } from '../utils';\n\nimport type { 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 '../@shared/mixins';\n@import '../style';\n@import '../tooltip/style.scss';\n\n@layer kol-component {\n\t:host {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tfont-size: rem(16);\n\t\tgap: rem(16);\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\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 '../../schema';\nimport {\n\tparseJson,\n\tSTATE_CHANGE_EVENT,\n\tvalidateCustomClass,\n\tvalidateLabel,\n\tvalidateMax,\n\tvalidateTooltipAlign,\n\twatchJsonArrayString,\n\twatchNumber,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { nonce } from '../../utils/dev.utils';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { KolButtonWcTag, KolSelectTag } from '../../core/component-names';\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\nfunction getUserLanguage(): string {\n\tconst userLanguage = navigator.language || 'de-DE';\n\tconst normalizedLanguage = userLanguage.includes('-') ? userLanguage : `${userLanguage}-${userLanguage.toUpperCase()}`;\n\treturn normalizedLanguage;\n}\nconst userLanguage = getUserLanguage();\nconst NUMBER_FORMATTER = new Intl.NumberFormat(userLanguage, {\n\tstyle: 'decimal',\n\tminimumFractionDigits: 0,\n\tmaximumFractionDigits: 0,\n});\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\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 key={nonce()}>\n\t\t\t\t\t\t\t<span class=\"separator\" 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 class=\"kol-pagination\">\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<KolButtonWcTag\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></KolButtonWcTag>\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<KolButtonWcTag\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></KolButtonWcTag>\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<KolButtonWcTag\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></KolButtonWcTag>\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<KolButtonWcTag\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></KolButtonWcTag>\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<KolSelectTag\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></KolSelectTag>\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 key={nonce()}>\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t_label=\"\"\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>\n\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\t<span class=\"visually-hidden\">{translate('kol-page')}</span> {NUMBER_FORMATTER.format(page)}\n\t\t\t\t\t</span>\n\t\t\t\t</KolButtonWcTag>\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 key={nonce()}>\n\t\t\t\t<KolButtonWcTag class=\"selected\" _customClass={this.state._customClass} _disabled={true} _label=\"\">\n\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\t<span class=\"visually-hidden\">{translate('kol-page')}</span> {NUMBER_FORMATTER.format(page)}\n\t\t\t\t\t</span>\n\t\t\t\t</KolButtonWcTag>\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":";;;ynBAkBO,MAAMA,EAAc,CAACC,EAAsCC,EAAsBC,KACvFC,EAAYH,EAAW,OAAQC,EAAOC,EAAQ,ECnB/C,MAAME,EAAkB,m2LACxB,MAAAC,EAAeD,EC8Bf,MAAME,EAAsB,CAC3BC,KAAM,0CAEP,MAAMC,EAAkB,CACvBD,KAAM,gCAEP,MAAME,EAAuB,CAC5BC,MAAO,iCAER,MAAMC,EAAuB,CAC5BD,MAAO,kCAGR,SAASE,IACR,MAAMC,EAAeC,UAAUC,UAAY,QAC3C,MAAMC,EAAqBH,EAAaI,SAAS,KAAOJ,EAAe,GAAGA,KAAgBA,EAAaK,gBACvG,OAAOF,CACR,CACA,MAAMH,EAAeD,IACrB,MAAMO,EAAmB,IAAIC,KAAKC,aAAaR,EAAc,CAC5DS,MAAO,UACPC,sBAAuB,EACvBC,sBAAuB,I,MAUXC,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,EAAcrC,KACzCA,EAAQ6C,SAAU7C,EAAmB,IACrC,UAAWA,IAAU,UAAYA,EAAQ,GAAKyB,KAAKU,YAAcnC,EAAO,CACvEyB,KAAKU,UAAYnC,EACjB,MAAMyC,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,GAsInCxB,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,EAAO9D,QAAU6B,IAC/D,GAAIgC,IAASE,UAAW,CACvBlC,EAAW2B,EAAgB,GAAGxD,K,KACxB,CACN6B,EAAWgC,EAAK7D,K,CAEjBqD,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,MAAMpD,EAA4B,GAClC,GAAIyD,MAAMC,QAAQU,GAAY,CAC7B,IAAK,MAAMrE,KAASqE,EAAW,CAC9B,UAAWrE,IAAU,SAAU,CAC9BC,EAAQqE,KAAK,CACZC,MAAOC,EAAU,oBAAqB,CAAEC,aAAc,CAAEC,QAAS,GAAG1E,OACpEA,MAAOA,G,GAKXqD,EAAUW,IAAI,mBAAoB/D,GAClCwB,KAAK0B,eAAelD,EAASoD,EAAU,E,oBAzSC,E,mEAeiC,K,oCAUd,E,sBAKH,G,sCAUjB,E,mBAKc,M,+BAOZ,CACzCsB,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,MAAIC,IAAKnE,KACRkE,EAAA,QAAME,MAAM,YAAW,cAAa,S,KAGhC,CACN,OAAO,I,KAIV,OACCF,EAACG,EAAI,CAACD,MAAM,kBACXF,EAAA,oBAAiBnE,KAAKQ,MAAM2C,QAC3BgB,EAAA,MAAIE,MAAM,mBACRrE,KAAKQ,MAAM4C,YAAYC,OACvBc,EAAA,UACCA,EAACI,EAAc,CACdF,MAAM,QACNG,YAAY,OACZC,aAAczE,KAAKQ,MAAMiE,aACzBC,UAAW1E,KAAKQ,MAAMgB,OAAS,EAC/BmD,OAAQ/F,EACRgG,WAAU,KACVzB,OAAQJ,EAAU,kBAClBjC,IAAKd,KAAKqB,YACVwD,cAAe7E,KAAKQ,MAAMqE,iBAI5B7E,KAAKQ,MAAM4C,YAAYI,UACvBW,EAAA,UACCA,EAACI,EAAc,CACdF,MAAM,WACNG,YAAY,OACZC,aAAczE,KAAKQ,MAAMiE,aACzBC,UAAW1E,KAAKQ,MAAMgB,OAAS,EAC/BmD,OAAQ7F,EACR8F,WAAU,KACVzB,OAAQJ,EAAU,iBAClBjC,IAAKd,KAAKuB,aACVsD,cAAe7E,KAAKQ,MAAMqE,iBAI5BjB,EACA5D,KAAKQ,MAAM4C,YAAYG,MACvBY,EAAA,UACCA,EAACI,EAAc,CACdF,MAAM,OACNG,YAAY,OACZC,aAAczE,KAAKQ,MAAMiE,aACzBC,UAAWjC,GAASzC,KAAKQ,MAAMgB,MAC/BmD,OAAQ5F,EACR6F,WAAU,KACVzB,OAAQJ,EAAU,iBAClBjC,IAAKd,KAAKyB,YACVoD,cAAe7E,KAAKQ,MAAMqE,iBAI5B7E,KAAKQ,MAAM4C,YAAYE,MACvBa,EAAA,UACCA,EAACI,EAAc,CACdF,MAAM,OACNG,YAAY,OACZC,aAAczE,KAAKQ,MAAMiE,aACzBC,UAAWjC,GAASzC,KAAKQ,MAAMgB,MAC/BmD,OAAQ1F,EACR2F,WAAU,KACVzB,OAAQJ,EAAU,iBAClBjC,IAAKd,KAAKsB,UACVuD,cAAe7E,KAAKQ,MAAMqE,qBAM9BC,EAAA9E,KAAKQ,MAAMwB,oBAAgB,MAAA8C,SAAA,SAAAA,EAAE3C,QAAS,GACtCgC,EAACY,EAAY,CACZH,WAAU,KACVI,IAAK,mBAAmBhF,KAAKC,QAC7BkD,OAAQJ,EAAU,wBAClBkC,SAAUjF,KAAKQ,MAAMwB,iBACrBlB,IAAK,CACJoE,SAAUlF,KAAKmB,kBAEhBgE,OAAQ,CAACnF,KAAKQ,MAAME,a,CAmIjB,uBAAAwD,CAAwBrD,GAC/B,OACCsD,EAAA,MAAIC,IAAKnE,KACRkE,EAACI,EAAc,CACdC,YAAY,OACZC,aAAczE,KAAKQ,MAAMiE,aACzBtB,OAAO,GACPrC,IAAK,CACJH,QAAUC,IACTZ,KAAKW,QAAQC,EAAOC,EAAK,IAI3BsD,EAAA,QAAMiB,KAAK,UACVjB,EAAA,QAAME,MAAM,mBAAmBtB,EAAU,aAAmB,IAAEtD,EAAiB4F,OAAOxE,K,CAOnF,qBAAAoD,CAAsBpD,GAC7B,OACCsD,EAAA,MAAIC,IAAKnE,KACRkE,EAACI,EAAc,CAACF,MAAM,WAAWI,aAAczE,KAAKQ,MAAMiE,aAAcC,UAAW,KAAMvB,OAAO,IAC/FgB,EAAA,QAAMiB,KAAK,UACVjB,EAAA,QAAME,MAAM,mBAAmBtB,EAAU,aAAmB,IAAEtD,EAAiB4F,OAAOxE,K,CAQpF,qBAAAyE,CAAsB/G,GAC5BE,EAAYuB,KAAM,iBAAkBK,KAAKkF,IAAI,EAAGhH,IAAK,MAALA,SAAK,EAALA,EAAS,G,CAInD,mBAAAiH,CAAoBjH,GAC1BiH,EAAoBxF,KAAMzB,E,CAIpB,aAAAkH,CAAc3C,EAAuB4C,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAe5F,KAAKQ,MAAM2C,O,CAE3BsC,EAAczF,KAAM8C,GACpB+C,EAAY7F,KAAKQ,MAAM2C,O,CAIjB,kBAAA2C,CAAmBvH,GACzBwH,EACC/F,KACA,eACCzB,UAAiBA,IAAU,kBAAoBA,IAAU,iBAAoBA,IAAU,UAAYA,IAAU,MAC9G,IAAIyH,IAAI,CAAC,UAAW,wBACpBzH,EACA,CACC0H,MAAO,CACNC,YAAa,CAACtD,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,EAAYuD,EAA+BvD,E,CAC1C,MAAOwD,GACRxE,EAAUyE,OAAO,c,EAInB,UAAWzD,IAAc,UAAYA,IAAc,KAAM,CACxDhB,EAAUW,IAAI,cAAa+D,OAAAC,OAAAD,OAAAC,OAAA,GACvBvG,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,UAAAgD,CAAWjI,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChDyB,KAAKQ,MAAK8F,OAAAC,OAAAD,OAAAC,OAAA,GACNvG,KAAKQ,OAAK,CACbM,IAAKvC,G,EAMD,YAAAkI,CAAalI,GACnBE,EAAYuB,KAAM,QAASzB,EAAO,CACjC0H,MAAO,CACNC,YAAa,CAACvE,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,gBAAAuG,CAAiBnI,GACvBE,EAAYuB,KAAM,YAAazB,EAAO,CACrC0H,MAAO,CACNC,YAAalG,KAAK0B,iB,CAMd,uBAAAiF,CAAwBpI,GAC9BqI,EAAqB5G,KAAM,oBAAqBzB,UAAiBA,IAAU,UAAUA,EAAO+D,UAAW,CACtG2D,MAAO,CACNC,YAAalG,KAAK2C,wB,CAMd,oBAAAkE,CAAqBtI,GAC3BE,EAAYuB,KAAM,gBAAiBK,KAAKkF,IAAI,EAAGhH,IAAK,MAALA,SAAK,EAALA,EAAS,G,CAIlD,WAAAF,CAAYE,GAClBF,EAAY2B,KAAMzB,EAAO,CACxB0H,MAAO,CACNC,YAAa,CAACvE,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,oBAAAmF,CAAqBvI,GAC3BuI,EAAqB9G,KAAMzB,E,CAGrB,iBAAAwI,GACN/G,KAAKsF,sBAAsBtF,KAAKkD,gBAChClD,KAAKwF,oBAAoBxF,KAAKyE,cAC9BzE,KAAK8F,mBAAmB9F,KAAKoD,aAC7BpD,KAAKyF,cAAczF,KAAKmD,OAAQb,UAAW,MAC3CtC,KAAKwG,WAAWxG,KAAKc,KACrBd,KAAKyG,aAAazG,KAAKwB,OACvBxB,KAAK0G,iBAAiB1G,KAAKU,WAC3BV,KAAK2G,wBAAwB3G,KAAKgC,kBAClChC,KAAK6G,qBAAqB7G,KAAKyD,eAC/BzD,KAAK8G,qBAAqB9G,KAAK6E,eAC/B7E,KAAK3B,YAAY2B,KAAKS,MAMtBT,KAAKyG,aAAazG,KAAKwB,M,CAGjB,oBAAAwF,GACNpB,EAAe5F,KAAKQ,MAAM2C,O","ignoreList":[]}
+{"version":3,"names":["validateMax","component","value","options","watchNumber","defaultStyleCss","KolPaginationDefaultStyle0","leftDoubleArrowIcon","left","leftSingleArrow","rightSingleArrowIcon","right","rightDoubleArrowIcon","getUserLanguage","userLanguage","navigator","language","normalizedLanguage","includes","toUpperCase","NUMBER_FORMATTER","Intl","NumberFormat","style","minimumFractionDigits","maximumFractionDigits","KolPagination","this","nonce","calcCount","total","pageSize","Math","ceil","getCount","state","_max","_pageSize","onClick","event","page","_on","host","dispatchDomEvent","KolEvent","click","onChangePage","timeout","setTimeout","clearTimeout","changePage","onChangePageSize","parseInt","changePageSize","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","key","class","Host","KolButtonWcTag","exportparts","_customClass","_disabled","_icons","_hideLabel","_tooltipAlign","_a","KolSelectTag","_id","_options","onChange","_value","slot","format","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/schema/props/max.ts","src/components/pagination/style.scss?tag=kol-pagination&mode=default&encapsulation=shadow","src/components/pagination/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchNumberOptions } from '../utils';\nimport { watchNumber } from '../utils';\n\nimport type { 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","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t/* TODO. Once #7126 is completed, move :host block into .kol-pagination  */\n\t:host {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tfont-size: rem(16);\n\t\tgap: rem(16);\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\n\t.kol-pagination {\n\t\t&__navigation-list {\n\t\t\talign-items: center;\n\t\t\tdisplay: inline-flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tgap: 0.5em;\n\t\t\tlist-style: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\n\t\t&__separator:before {\n\t\t\tcontent: '•••';\n\t\t}\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 '../../schema';\nimport {\n\tparseJson,\n\tSTATE_CHANGE_EVENT,\n\tvalidateCustomClass,\n\tvalidateLabel,\n\tvalidateMax,\n\tvalidateTooltipAlign,\n\twatchJsonArrayString,\n\twatchNumber,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, 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';\nimport { KolButtonWcTag, KolSelectTag } from '../../core/component-names';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\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\nfunction getUserLanguage(): string {\n\tconst userLanguage = navigator.language || 'de-DE';\n\tconst normalizedLanguage = userLanguage.includes('-') ? userLanguage : `${userLanguage}-${userLanguage.toUpperCase()}`;\n\treturn normalizedLanguage;\n}\nconst userLanguage = getUserLanguage();\nconst NUMBER_FORMATTER = new Intl.NumberFormat(userLanguage, {\n\tstyle: 'decimal',\n\tminimumFractionDigits: 0,\n\tmaximumFractionDigits: 0,\n});\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements PaginationAPI {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\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 key={nonce()}>\n\t\t\t\t\t\t\t<span class=\"kol-pagination__separator\" 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 class=\"kol-pagination\">\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"kol-pagination__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<KolButtonWcTag\n\t\t\t\t\t\t\t\t\tclass=\"kol-pagination__button kol-pagination__button--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></KolButtonWcTag>\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<KolButtonWcTag\n\t\t\t\t\t\t\t\t\tclass=\"kol-pagination__button kol-pagination__button--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></KolButtonWcTag>\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<KolButtonWcTag\n\t\t\t\t\t\t\t\t\tclass=\"kol-pagination__button kol-pagination__button--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></KolButtonWcTag>\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<KolButtonWcTag\n\t\t\t\t\t\t\t\t\tclass=\"kol-pagination__button kol-pagination__button--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></KolButtonWcTag>\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<KolSelectTag\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></KolSelectTag>\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\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.click, 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\tif (this.host) {\n\t\t\t\tdispatchDomEvent(this.host, KolEvent.changePage, 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\tif (this.host) {\n\t\t\t\t\tdispatchDomEvent(this.host, KolEvent.changePageSize, 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 key={nonce()}>\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t_label=\"\"\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>\n\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\t<span class=\"visually-hidden\">{translate('kol-page')}</span> {NUMBER_FORMATTER.format(page)}\n\t\t\t\t\t</span>\n\t\t\t\t</KolButtonWcTag>\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 key={nonce()}>\n\t\t\t\t<KolButtonWcTag class=\"kol-pagination__button kol-pagination__button--selected\" _customClass={this.state._customClass} _disabled={true} _label=\"\">\n\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\t<span class=\"visually-hidden\">{translate('kol-page')}</span> {NUMBER_FORMATTER.format(page)}\n\t\t\t\t\t</span>\n\t\t\t\t</KolButtonWcTag>\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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","ignoreList":[]}

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

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{r as t,h as i}from"./index-4492e98a.js";import{a as e}from"./component-names-60d77143.js";import{a as s}from"./align-floating-elements-7cdb6dc6.js";import{a as o}from"./align-de93d774.js";import"./reuse-f46e7e35.js";import"./prop.validators-d189554c.js";import"./dev.utils-fab45cbc.js";const n=(e,t)=>{o(e,"_popoverAlign",t)},d=class{constructor(e){t(this,e),this.state={_label:"",_popoverAlign:"bottom"},this.justClosed=!1,this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._popoverAlign="bottom",this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}async hidePopover(){var e;null===(e=this.refPopover)||void 0===e||e.hidePopover()}handleBeforeToggle(e){"closed"===e.newState?(this.justClosed=!0,setTimeout((()=>{this.justClosed=!1}),10)):this.refPopover&&(this.refPopover.style.visibility="hidden")}handleToggle(e){"open"===e.newState&&this.refPopover&&this.refButton&&s({align:this.state._popoverAlign,floatingElement:this.refPopover,referenceElement:this.refButton})}handleButtonClick(){var e;this.justClosed||null===(e=this.refPopover)||void 0===e||e.togglePopover()}componentDidRender(){var e,t;null===(e=this.refPopover)||void 0===e||e.addEventListener("toggle",this.handleToggle.bind(this)),null===(t=this.refPopover)||void 0===t||t.addEventListener("beforetoggle",this.handleBeforeToggle.bind(this))}disconnectedCallback(){var e,t;null===(e=this.refPopover)||void 0===e||e.removeEventListener("toggle",this.handleToggle.bind(this)),null===(t=this.refPopover)||void 0===t||t.removeEventListener("beforetoggle",this.handleBeforeToggle.bind(this))}render(){return i("div",{key:"df5e5225efc4736c51054096981b7bc1805a18a8",class:"kol-popover-button"},i(e,{key:"464fcf09964542fc483a1e3da7ca3387058623a1",_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:this._role,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant,"data-testid":"popover-button",class:"kol-popover-button__button",ref:e=>this.refButton=e,onClick:this.handleButtonClick.bind(this)},i("slot",{key:"69a5acce344c60d04ef4da227c94eec02b3f00e4",name:"expert",slot:"expert"})),i("div",{key:"10288bd26cd136f234905e5c9dcfff3fcf1a7558",ref:e=>this.refPopover=e,"data-testid":"popover-content",popover:"auto",id:"popover",class:"kol-popover-button__popover"},i("slot",{key:"95454aa3db0d05838b5c829462544f87ffc2b483"})))}validatePopoverAlign(e){n(this,e)}componentWillLoad(){this.validatePopoverAlign(this._popoverAlign)}static get watchers(){return{_popoverAlign:["validatePopoverAlign"]}}};export{d as kol_popover_button_wc};

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

@@ -0,0 +1 @@
+{"version":3,"names":["validatePopoverAlign","component","value","validateAlignment","KolPopoverButton","_label","_popoverAlign","hidePopover","_a","this","refPopover","handleBeforeToggle","event","newState","justClosed","setTimeout","style","visibility","handleToggle","refButton","alignFloatingElements","align","state","floatingElement","referenceElement","handleButtonClick","togglePopover","componentDidRender","addEventListener","bind","_b","disconnectedCallback","removeEventListener","render","h","key","class","KolButtonWcTag","_accessKey","_ariaControls","_ariaDescription","_ariaExpanded","_ariaSelected","_customClass","_disabled","_hideLabel","_icons","_id","_name","_on","_role","_shortKey","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","_value","_variant","ref","element","onClick","name","slot","popover","id","componentWillLoad"],"sources":["src/schema/props/popover-align.ts","src/components/popover-button/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { validateAlignment } from '../validators';\n\nimport type { AlignPropType } from './align';\n\n/* types */\nexport type PopoverAlignPropType = AlignPropType;\n\n/**\n * Defines where to show the popover preferably: top, right, bottom or left.\n */\nexport type PropPopoverAlign = {\n\tpopoverAlign: PopoverAlignPropType;\n};\n\n/* validator */\nexport const validatePopoverAlign = (component: Generic.Element.Component, value?: PopoverAlignPropType): void => {\n\tvalidateAlignment(component, '_popoverAlign', value);\n};\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { alignFloatingElements } from '../../utils/align-floating-elements';\nimport type { PopoverButtonProps, PopoverButtonStates } from '../../schema/components/popover-button';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { validatePopoverAlign } from '../../schema';\n\n/**\n * @slot - The popover content.\n */\n@Component({\n\ttag: 'kol-popover-button-wc',\n\tshadow: false,\n})\n// class implementing PopoverButtonProps and not API because we don't want to repeat the entire state and validation for button props\nexport class KolPopoverButton implements PopoverButtonProps {\n\tprivate refButton?: HTMLKolButtonWcElement;\n\tprivate refPopover?: HTMLDivElement;\n\n\t@State() public state: PopoverButtonStates = {\n\t\t_label: '',\n\t\t_popoverAlign: 'bottom',\n\t};\n\t@State() private justClosed = false;\n\n\t/**\n\t * Hides the popover programmatically by calling the native hidePopover method.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.refPopover?.hidePopover();\n\t}\n\n\t/* Regarding type issue see https://github.com/microsoft/TypeScript/issues/54864 */\n\tprivate handleBeforeToggle(event: Event) {\n\t\tif ((event as ToggleEvent).newState === 'closed') {\n\t\t\tthis.justClosed = true;\n\n\t\t\tsetTimeout(() => {\n\t\t\t\t// Reset the flag after the event loop tick.\n\t\t\t\tthis.justClosed = false;\n\t\t\t}, 10); // timeout of 0 should be sufficient but doesn't work in Safari Mobile (needs further investigation).\n\t\t} else if (this.refPopover) {\n\t\t\t/**\n\t\t\t * Avoid \"flicker\" by hiding the element until the position is set in the `toggle` event handler. `alignFloatingElements` is responsible for setting the visibility back to 'visible'.\n\t\t\t */\n\t\t\tthis.refPopover.style.visibility = 'hidden';\n\t\t}\n\t}\n\n\tprivate handleToggle(event: Event) {\n\t\tif ((event as ToggleEvent).newState === 'open' && this.refPopover && this.refButton) {\n\t\t\tvoid alignFloatingElements({\n\t\t\t\talign: this.state._popoverAlign,\n\t\t\t\tfloatingElement: this.refPopover,\n\t\t\t\treferenceElement: this.refButton,\n\t\t\t});\n\t\t}\n\t}\n\n\tprivate handleButtonClick() {\n\t\t// If the popover was just closed by native behavior, do nothing (and let it stay closed).\n\t\tif (!this.justClosed) {\n\t\t\tthis.refPopover?.togglePopover();\n\t\t}\n\t}\n\n\tpublic componentDidRender() {\n\t\tthis.refPopover?.addEventListener('toggle', this.handleToggle.bind(this));\n\t\tthis.refPopover?.addEventListener('beforetoggle', this.handleBeforeToggle.bind(this));\n\t}\n\n\tpublic disconnectedCallback() {\n\t\tthis.refPopover?.removeEventListener('toggle', this.handleToggle.bind(this));\n\t\tthis.refPopover?.removeEventListener('beforetoggle', this.handleBeforeToggle.bind(this));\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div class=\"kol-popover-button\">\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t\tdata-testid=\"popover-button\"\n\t\t\t\t\tclass=\"kol-popover-button__button\"\n\t\t\t\t\tref={(element) => (this.refButton = element)}\n\t\t\t\t\tonClick={this.handleButtonClick.bind(this)}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolButtonWcTag>\n\n\t\t\t\t<div ref={(element) => (this.refPopover = element)} data-testid=\"popover-content\" popover=\"auto\" id=\"popover\" class=\"kol-popover-button__popover\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\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 * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: 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 icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\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 either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@Watch('_popoverAlign')\n\tpublic validatePopoverAlign(value?: PopoverAlignPropType): void {\n\t\tvalidatePopoverAlign(this, value);\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.validatePopoverAlign(this._popoverAlign);\n\t}\n}\n"],"mappings":";;;qSAiBO,MAAMA,EAAuB,CAACC,EAAsCC,KAC1EC,EAAkBF,EAAW,gBAAiBC,EAAM,E,MCcxCE,EAAgB,M,oCAIiB,CAC5CC,OAAQ,GACRC,cAAe,U,gBAEc,M,4LAgIO,M,gBAOC,M,0HA8BgB,S,8HA0BA,M,WAKV,S,oCAUM,Q,CAvM3C,iBAAMC,G,YACPC,EAAAC,KAAKC,cAAU,MAAAF,SAAA,SAAAA,EAAED,c,CAIf,kBAAAI,CAAmBC,GAC1B,GAAKA,EAAsBC,WAAa,SAAU,CACjDJ,KAAKK,WAAa,KAElBC,YAAW,KAEVN,KAAKK,WAAa,KAAK,GACrB,G,MACG,GAAIL,KAAKC,WAAY,CAI3BD,KAAKC,WAAWM,MAAMC,WAAa,Q,EAI7B,YAAAC,CAAaN,GACpB,GAAKA,EAAsBC,WAAa,QAAUJ,KAAKC,YAAcD,KAAKU,UAAW,MAC/EC,EAAsB,CAC1BC,MAAOZ,KAAKa,MAAMhB,cAClBiB,gBAAiBd,KAAKC,WACtBc,iBAAkBf,KAAKU,W,EAKlB,iBAAAM,G,MAEP,IAAKhB,KAAKK,WAAY,EACrBN,EAAAC,KAAKC,cAAU,MAAAF,SAAA,SAAAA,EAAEkB,e,EAIZ,kBAAAC,G,SACNnB,EAAAC,KAAKC,cAAU,MAAAF,SAAA,SAAAA,EAAEoB,iBAAiB,SAAUnB,KAAKS,aAAaW,KAAKpB,QACnEqB,EAAArB,KAAKC,cAAU,MAAAoB,SAAA,SAAAA,EAAEF,iBAAiB,eAAgBnB,KAAKE,mBAAmBkB,KAAKpB,M,CAGzE,oBAAAsB,G,SACNvB,EAAAC,KAAKC,cAAU,MAAAF,SAAA,SAAAA,EAAEwB,oBAAoB,SAAUvB,KAAKS,aAAaW,KAAKpB,QACtEqB,EAAArB,KAAKC,cAAU,MAAAoB,SAAA,SAAAA,EAAEE,oBAAoB,eAAgBvB,KAAKE,mBAAmBkB,KAAKpB,M,CAG5E,MAAAwB,GACN,OACCC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,sBACVF,EAACG,EAAc,CAAAF,IAAA,2CACdG,WAAY7B,KAAK6B,WACjBC,cAAe9B,KAAK8B,cACpBC,iBAAkB/B,KAAK+B,iBACvBC,cAAehC,KAAKgC,cACpBC,cAAejC,KAAKiC,cACpBC,aAAclC,KAAKkC,aACnBC,UAAWnC,KAAKmC,UAChBC,WAAYpC,KAAKoC,WACjBC,OAAQrC,KAAKqC,OACbC,IAAKtC,KAAKsC,IACV1C,OAAQI,KAAKJ,OACb2C,MAAOvC,KAAKuC,MACZC,IAAKxC,KAAKwC,IACVC,MAAOzC,KAAKyC,MACZC,UAAW1C,KAAK0C,UAChBC,qBAAsB3C,KAAK2C,qBAC3BC,UAAW5C,KAAK4C,UAChBC,cAAe7C,KAAK6C,cACpBC,MAAO9C,KAAK8C,MACZC,OAAQ/C,KAAK+C,OACbC,SAAUhD,KAAKgD,SAAQ,cACX,iBACZrB,MAAM,6BACNsB,IAAMC,GAAalD,KAAKU,UAAYwC,EACpCC,QAASnD,KAAKgB,kBAAkBI,KAAKpB,OAErCyB,EAAA,QAAAC,IAAA,2CAAM0B,KAAK,SAASC,KAAK,YAG1B5B,EAAA,OAAAC,IAAA,2CAAKuB,IAAMC,GAAalD,KAAKC,WAAaiD,EAAQ,cAAc,kBAAkBI,QAAQ,OAAOC,GAAG,UAAU5B,MAAM,+BACnHF,EAAA,QAAAC,IAAA,8C,CAwHG,oBAAAnC,CAAqBE,GAC3BF,EAAqBS,KAAMP,E,CAGrB,iBAAA+D,GACNxD,KAAKT,qBAAqBS,KAAKH,c","ignoreList":[]}

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

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{r as n,h as e}from"./index-4492e98a.js";import{j as t}from"./component-names-60d77143.js";const i="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 1px solid #000;\n    margin: 0;\n    padding: 0;\n  }\n}",o=i,a=class{constructor(e){n(this,e),this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._popoverAlign="bottom",this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}async hidePopover(){var n;null===(n=this.ref)||void 0===n||n.hidePopover()}render(){return e(t,{key:"91232672e2a7afde6b9e2ddaccf6bc551d51d803",ref:n=>this.ref=n,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_popoverAlign:this._popoverAlign,_role:this._role,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},e("slot",{key:"a45cbf8faa7f7f3c42c433d07a0b6734b480f51d",name:"expert",slot:"expert"}),e("slot",{key:"8a25b26b9e518dafe033b4f690ebbc94cde75aeb"}))}};a.style={default:o};export{a as kol_popover_button};

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

@@ -0,0 +1 @@
+{"version":3,"names":["defaultStyleCss","KolPopoverButtonDefaultStyle0","KolPopoverButton","hidePopover","_a","this","ref","render","h","KolPopoverButtonWcTag","key","element","_accessKey","_ariaControls","_ariaDescription","_ariaExpanded","_ariaSelected","_customClass","_disabled","_hideLabel","_icons","_id","_label","_name","_on","_popoverAlign","_role","_shortKey","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","_value","_variant","name","slot"],"sources":["src/components/popover-button/style.scss?tag=kol-popover-button&mode=default&encapsulation=shadow","src/components/popover-button/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../@shared/kol-button-mixin' as *;\n@use '../@shared/kol-popover-button-mixin' as *;\n@use '../tooltip/style' as *;\n\n@include kol-button-styles('kol-button');\n@include kol-popover-button-styles;\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\n/**\n * @slot - The popover content.\n */\n@Component({\n\ttag: 'kol-popover-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPopoverButton implements PopoverButtonProps {\n\tprivate ref?: HTMLKolPopoverButtonWcElement;\n\n\t/**\n\t * Hides the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.ref?.hidePopover();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={(element) => (this.ref = element)}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_id={this._id}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_popoverAlign={this._popoverAlign}\n\t\t\t\t_role={this._role}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t<slot />\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\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 * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: 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 icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\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 either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"],"mappings":";;;iGAAA,MAAMA,EAAkB,ogMACxB,MAAAC,EAAeD,E,MC+BFE,EAAgB,M,qNA8ES,M,gBAOC,M,0HA8BgB,S,8HA0BA,M,WAKV,S,oCAUM,Q,CApJ3C,iBAAMC,G,YACPC,EAAAC,KAAKC,OAAG,MAAAF,SAAA,SAAAA,EAAED,c,CAGT,MAAAI,GACN,OACCC,EAACC,EAAqB,CAAAC,IAAA,2CACrBJ,IAAMK,GAAaN,KAAKC,IAAMK,EAC9BC,WAAYP,KAAKO,WACjBC,cAAeR,KAAKQ,cACpBC,iBAAkBT,KAAKS,iBACvBC,cAAeV,KAAKU,cACpBC,cAAeX,KAAKW,cACpBC,aAAcZ,KAAKY,aACnBC,UAAWb,KAAKa,UAChBC,WAAYd,KAAKc,WACjBC,OAAQf,KAAKe,OACbC,IAAKhB,KAAKgB,IACVC,OAAQjB,KAAKiB,OACbC,MAAOlB,KAAKkB,MACZC,IAAKnB,KAAKmB,IACVC,cAAepB,KAAKoB,cACpBC,MAAOrB,KAAKqB,MACZC,UAAWtB,KAAKsB,UAChBC,qBAAsBvB,KAAKuB,qBAC3BC,UAAWxB,KAAKwB,UAChBC,cAAezB,KAAKyB,cACpBC,MAAO1B,KAAK0B,MACZC,OAAQ3B,KAAK2B,OACbC,SAAU5B,KAAK4B,UAEfzB,EAAA,QAAAE,IAAA,2CAAMwB,KAAK,SAASC,KAAK,WACzB3B,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as s,H as t}from"./index-a49af574.js";import{a as e}from"./align-floating-elements-a8debc3a.js";import{w as o}from"./prop.validators-c5e6ad2d.js";import{g as a}from"./dev.utils-fab45cbc.js";import{v as h}from"./align-3f029493.js";import{v as l}from"./show-5d826542.js";import"./reuse-32931294.js";import"./index-541b643a.js";const r=(e,t)=>{o(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)},c=class{constructor(e){i(this,e),this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover(e)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this._on=void 0,this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}async showPopover(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(await e({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))}hidePopover(e){var t,s,i;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody(),null===(i=null===(s=this.state._on)||void 0===s?void 0:s.onClose)||void 0===i||i.call(s,e)}addListenersToBody(){var e;const t=a().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const t=a().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return s(t,{key:"5badcc8b4335e176aee76f8afa6dc6fe083576af",ref:this.catchHostAndTriggerElement,class:"kol-popover"},s("div",{key:"c99512f0c51a59e5610d17ba5e2aca422ba19235",class:{popover:!0,show:this.state._visible},ref:this.catchPopoverElement,hidden:!this.state._show},s("div",{key:"f0bbe17c357ece2313b611c30c2ba01fca90465f",class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),s("slot",{key:"665066282b1a91caab5eb2ff875c0f49aeb56d7b"})))}validateAlign(e){h(this,e)}validateOn(e){r(this,e)}validateShow(e){l(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}};export{c as kol_popover_wc};
+import{r as s,h as i,H as t}from"./index-4492e98a.js";import{a as e}from"./align-floating-elements-7cdb6dc6.js";import{c as o}from"./clsx-09a06a12.js";import{d as a,K as l}from"./events-5886c68b.js";import{w as h}from"./prop.validators-d189554c.js";import{g as r}from"./dev.utils-fab45cbc.js";import{v as c}from"./align-de93d774.js";import{v as n}from"./show-84afcfc3.js";import"./reuse-f46e7e35.js";const d=(e,t)=>{h(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)},f=class{constructor(e){s(this,e),this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover(e)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this._on=void 0,this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}async showPopover(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(await e({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))}hidePopover(e){var t,s,o;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody(),null===(o=null===(s=this.state._on)||void 0===s?void 0:s.onClose)||void 0===o||o.call(s,e),this.host&&a(this.host,l.close)}addListenersToBody(){var e;const t=r().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const t=r().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return i(t,{key:"23e4ea8f366f0263df0099ee1f804412ccd05892",ref:this.catchHostAndTriggerElement,class:"kol-popover"},i("div",{key:"f0b966725406619aecf64015f1cdebe11c24b047",class:o("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,hidden:!this.state._show},i("div",{key:"629b53f52ff434ef87738dfccb8c346a15f39c40",class:o("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),i("slot",{key:"afa7350520898288c61b7f65b07978c9a81c7289"})))}validateAlign(e){c(this,e)}validateOn(e){d(this,e)}validateShow(e){n(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}};export{f as kol_popover_wc};

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

@@ -1 +1 @@
-{"version":3,"names":["validatePopoverCallbacks","component","value","watchValidator","Set","KolPopover","this","hidePopoverByEscape","event","key","hidePopover","hidePopoverByClickOutside","host","contains","target","catchHostAndTriggerElement","element","triggerElement","previousElementSibling","catchPopoverElement","popoverElement","catchArrowElement","arrowElement","_align","_on","_show","_visible","showPopover","addListenersToBody","alignFloatingElements","align","referenceElement","floatingElement","state","Object","assign","_a","focus","removeListenersToBody","_c","_b","onClose","call","body","getDocument","addEventListener","document","scrollingElement","passive","removeEventListener","render","h","Host","ref","class","popover","show","hidden","validateAlign","validateOn","validateShow","componentWillLoad"],"sources":["src/schema/props/popover-callbacks.ts","src/components/popover/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Events } from '../enums';\nimport type { EventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type PopoverCallbacksPropType = {\n\t[Events.onClose]?: EventCallback<MouseEvent | KeyboardEvent>;\n};\n\n/**\n * Defines the callback functions for popover events.\n */\nexport type PropPopoverCallbacks = {\n\ton: PopoverCallbacksPropType;\n};\n\n/* validator */\nexport const validatePopoverCallbacks = (component: Generic.Element.Component, value?: PopoverCallbacksPropType): void => {\n\twatchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['PopoverCallbacksPropType {Events.onClose}']), value);\n};\n","import type { AlignPropType, PopoverAPI, PopoverCallbacksPropType, PopoverStates, ShowPropType } from '../../schema';\nimport { getDocument, validateAlign, validatePopoverCallbacks, validateShow } from '../../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/**\n * @internal\n * @slot - Der Inhalt des Popover.\n */\n@Component({\n\ttag: 'kol-popover-wc',\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(event: MouseEvent | KeyboardEvent): 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\n\t\tthis.state._on?.onClose?.(event);\n\t}\n\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover(event);\n\t};\n\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover(event);\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} class=\"kol-popover\">\n\t\t\t\t<div class={{ popover: true, show: this.state._visible }} ref={this.catchPopoverElement} hidden={!this.state._show}>\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 * Defines the callback functions for popover events.\n\t */\n\t@Prop() public _on?: PopoverCallbacksPropType;\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_on: {},\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('_on')\n\tpublic validateOn(value?: PopoverCallbacksPropType): void {\n\t\tvalidatePopoverCallbacks(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":"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","ignoreList":[]}
+{"version":3,"names":["validatePopoverCallbacks","component","value","watchValidator","Set","KolPopover","this","hidePopoverByEscape","event","key","hidePopover","hidePopoverByClickOutside","host","contains","target","catchHostAndTriggerElement","element","triggerElement","previousElementSibling","catchPopoverElement","popoverElement","catchArrowElement","arrowElement","_align","_on","_show","_visible","showPopover","addListenersToBody","alignFloatingElements","align","referenceElement","floatingElement","state","Object","assign","_a","focus","removeListenersToBody","_c","_b","onClose","call","dispatchDomEvent","KolEvent","close","body","getDocument","addEventListener","document","scrollingElement","passive","removeEventListener","render","h","Host","ref","class","clsx","hidden","validateAlign","validateOn","validateShow","componentWillLoad"],"sources":["src/schema/props/popover-callbacks.ts","src/components/popover/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Callback } from '../enums';\nimport type { EventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type PopoverCallbacksPropType = {\n\t[Callback.onClose]?: EventCallback<MouseEvent | KeyboardEvent>;\n};\n\n/**\n * Defines the callback functions for popover events.\n */\nexport type PropPopoverCallbacks = {\n\ton: PopoverCallbacksPropType;\n};\n\n/* validator */\nexport const validatePopoverCallbacks = (component: Generic.Element.Component, value?: PopoverCallbacksPropType): void => {\n\twatchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['PopoverCallbacksPropType {Events.onClose}']), value);\n};\n","import type { AlignPropType, PopoverAPI, PopoverCallbacksPropType, PopoverStates, ShowPropType } from '../../schema';\nimport { getDocument, validateAlign, validatePopoverCallbacks, validateShow } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { alignFloatingElements } from '../../utils/align-floating-elements';\nimport clsx from 'clsx';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * @internal\n * @slot - The popover content.\n */\n@Component({\n\ttag: 'kol-popover-wc',\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(event: MouseEvent | KeyboardEvent): 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\n\t\tthis.state._on?.onClose?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover(event);\n\t};\n\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover(event);\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} class=\"kol-popover\">\n\t\t\t\t<div\n\t\t\t\t\tclass={clsx('kol-popover__content', { 'kol-popover__content--visible': this.state._visible })}\n\t\t\t\t\tref={this.catchPopoverElement}\n\t\t\t\t\thidden={!this.state._show}\n\t\t\t\t>\n\t\t\t\t\t<div class={clsx('kol-popover__arrow', `kol-popover__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 * Defines the callback functions for popover events.\n\t */\n\t@Prop() public _on?: PopoverCallbacksPropType;\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_on: {},\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('_on')\n\tpublic validateOn(value?: PopoverCallbacksPropType): void {\n\t\tvalidatePopoverCallbacks(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":"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","ignoreList":[]}