@public-ui/components 3.0.0-rc.2 → 3.0.0-rc.4

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","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","@import '../@shared/mixins';\n@import '../style';\n@import '../tooltip/style.scss';\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":[]}
+{"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","@import '../@shared/mixins';\n@import '../../styles/global';\n@import '../tooltip/style.scss';\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-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as s,H as t}from"./index-8a5f476c.js";import{a as e}from"./align-floating-elements-a8debc3a.js";import{c as o}from"./clsx-09a06a12.js";import{d as a,K as l}from"./events-5adf6b62.js";import{w as h}from"./prop.validators-9feb1d92.js";import{g as r}from"./dev.utils-fab45cbc.js";import{v as c}from"./align-4719d626.js";import{v as n}from"./show-484b637e.js";import"./reuse-32931294.js";import"./index-da3e0c00.js";const d=(e,t)=>{h(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)},v=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,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 s(t,{key:"739d2b554941a7170c3c3c4bf1ececc7bf800e38",ref:this.catchHostAndTriggerElement,class:"kol-popover"},s("div",{key:"2d3abe3f399a2de9e1f9db563c333b2b970100ba",class:o("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,hidden:!this.state._show},s("div",{key:"9c9309220c41cb4909e626f0d71aeeaede078464",class:o("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),s("slot",{key:"72ccc70cee01440a8b6f7c201073fa51a98ca0f7"})))}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{v as kol_popover_wc};
+import{r as i,h as s,H as t}from"./index-91489a9f.js";import{a as e}from"./align-floating-elements-db77d917.js";import{c as o}from"./clsx-09a06a12.js";import{d as a,K as l}from"./events-5adf6b62.js";import{w as h}from"./prop.validators-9feb1d92.js";import{g as r}from"./dev.utils-fab45cbc.js";import{v as n}from"./align-4719d626.js";import{v as d}from"./show-484b637e.js";import"./reuse-32931294.js";import"./index-da3e0c00.js";const c=(e,t)=>{h(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)},f=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,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 s(t,{key:"6e414db89865e4faced8091f9f4484077f903033",ref:this.catchHostAndTriggerElement,class:"kol-popover"},s("div",{key:"64a38574bf8ca2878f871846f9985eef4f0b3394",class:o("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,hidden:!this.state._show},s("div",{key:"e2fe3722133cc1bc20be4a7ccfc45e0622442892",class:o("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),s("slot",{key:"9fba7bbfd2879e01da7c15f026227671bfb4c171"})))}validateAlign(e){n(this,e)}validateOn(e){c(this,e)}validateShow(e){d(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-progress.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as n}from"./index-8a5f476c.js";import{v as t}from"./label-d0315384.js";import{k as r,i as o,w as i}from"./prop.validators-9feb1d92.js";import"./index-da3e0c00.js";import"./dev.utils-fab45cbc.js";var s;!function(e){e.bar="bar",e.cycle="cycle"}(s||(s={}));const a="/*\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  .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  .kol-progress {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-progress__bar {\n    width: calc(150rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: #0075ff;\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",l=a,c=Object.keys(s),d=({state:e})=>{const t=e._label?"57%":"50%";return n("svg",{class:"kol-progress__cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},n("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),n("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),n("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),e._label&&n("text",{"aria-hidden":"true",x:"50%",y:"43%","text-anchor":"middle",fill:"currentColor"},e._label),n("text",{"aria-hidden":"true",x:"50%",y:t,"text-anchor":"middle",fill:"currentColor"},e._value,e._unit))},h=({state:e})=>{const t="var(--kolibri-text-label-padding, 45px)",r=e._value/e._max*100;return n("div",{class:"kol-progress__bar"},e._label&&n("div",null,e._label),n("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},n("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(100% - 2px - ${t})`}}),n("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",style:{width:`calc(100% - 2px - ${t})`}}),n("rect",{class:"kol-progress__bar-progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${r}% - 5px - (${t} / 100 * ${r}))`}}),n("text",{"aria-hidden":"true","text-anchor":"end","dominant-baseline":"middle",fill:"currentColor",x:"100%",y:"50%"},e._value,e._unit)))},u=e=>{switch(e._variant){case"cycle":return n(d,{state:e});case"bar":return n(h,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}},p=class{constructor(n){e(this,n),this._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return n("div",{key:"0ce35e3dd3f6763a9cbd111670346a93571ba5f9",class:"kol-progress"},u(this.state),n("progress",{key:"a9931806b63e1f4050341cbc9995dee09a64204a",class:"visually-hidden","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),n("span",{key:"d55bca16697a72732f61a49638a9f36ec792fcd8","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(e){t(this,e)}validateMax(e){"number"!=typeof e&&(e=100),r(this,"_max",e,{required:!0})}validateUnit(e){o(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),r(this,"_value",e,{required:!0})}validateVariant(e){i(this,"_variant",(e=>"string"==typeof e&&c.includes(e)),new Set(c),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};p.style={default:l};export{p as kol_progress};
+import{r as e,h as n}from"./index-91489a9f.js";import{v as t}from"./label-d0315384.js";import{k as r,i as o,w as i}from"./prop.validators-9feb1d92.js";import"./index-da3e0c00.js";import"./dev.utils-fab45cbc.js";var s;!function(e){e.bar="bar",e.cycle="cycle"}(s||(s={}));const a="/*\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%; /* 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  .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  .kol-progress {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-progress__bar {\n    width: calc(150rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: #0075ff;\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",l=a,c=Object.keys(s),d=({state:e})=>{const t=e._label?"57%":"50%";return n("svg",{class:"kol-progress__cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},n("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),n("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),n("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),e._label&&n("text",{"aria-hidden":"true",x:"50%",y:"43%","text-anchor":"middle",fill:"currentColor"},e._label),n("text",{"aria-hidden":"true",x:"50%",y:t,"text-anchor":"middle",fill:"currentColor"},e._value,e._unit))},h=({state:e})=>{const t="var(--kolibri-text-label-padding, 45px)",r=e._value/e._max*100;return n("div",{class:"kol-progress__bar"},e._label&&n("div",null,e._label),n("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},n("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(100% - 2px - ${t})`}}),n("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",style:{width:`calc(100% - 2px - ${t})`}}),n("rect",{class:"kol-progress__bar-progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${r}% - 5px - (${t} / 100 * ${r}))`}}),n("text",{"aria-hidden":"true","text-anchor":"end","dominant-baseline":"middle",fill:"currentColor",x:"100%",y:"50%"},e._value,e._unit)))},u=e=>{switch(e._variant){case"cycle":return n(d,{state:e});case"bar":return n(h,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}},p=class{constructor(n){e(this,n),this._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return n("div",{key:"cc2c7a43ba0100f71f04669b0df3a8721e22b8a9",class:"kol-progress"},u(this.state),n("progress",{key:"acd76a45d181c4e6899ef316ef04d2c159197e0b",class:"visually-hidden","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),n("span",{key:"b73035f03d88014db6fcaa032a0671df7d52a848","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(e){t(this,e)}validateMax(e){"number"!=typeof e&&(e=100),r(this,"_max",e,{required:!0})}validateUnit(e){o(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),r(this,"_value",e,{required:!0})}validateVariant(e){i(this,"_variant",(e=>"string"==typeof e&&c.includes(e)),new Set(c),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};p.style={default:l};export{p as kol_progress};

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

@@ -1 +1 @@
-{"version":3,"names":["KoliBriProgressVariantEnum","defaultStyleCss","KolProgressDefaultStyle0","VALID_VARIANTS","Object","keys","CycleSvg","state","fullCircle","textPositionTop","textPositionBottom","valueY","_label","h","class","width","viewBox","xmlns","cx","cy","r","fill","stroke","Math","round","_value","_max","x","y","_unit","BarSvg","textLabelPadding","percentage","height","overflow","rx","style","createProgressSVG","_variant","Error","KolProcess","_liveValue","render","key","this","max","value","validateLabel","validateMax","watchNumber","required","validateUnit","watchString","validateValue","validateVariant","watchValidator","includes","Set","componentWillLoad","interval","setInterval","assign","disconnectedCallback","clearInterval"],"sources":["src/schema/types/progress.ts","src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/shadow.tsx"],"sourcesContent":["export enum KoliBriProgressVariantEnum {\n\t'bar' = 'bar',\n\t'cycle' = 'cycle',\n}\n\nexport type KoliBriProgressVariantType = `${KoliBriProgressVariantEnum}`;\n","@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t.kol-progress {\n\t\tfont-size: rem(16);\n\n\t\t&__bar {\n\t\t\twidth: rem(150);\n\t\t}\n\n\t\t&__bar-border {\n\t\t\tfill: transparent;\n\t\t\tstroke: black;\n\t\t}\n\n\t\t&__bar-background {\n\t\t\tfill: lightgray;\n\t\t\tstroke: white;\n\t\t}\n\n\t\t&__bar-progress {\n\t\t\tfill: #0075ff;\n\t\t\tstroke: transparent;\n\n\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t}\n\t\t}\n\n\t\t&__cycle-background {\n\t\t\tfill: transparent;\n\t\t\tstroke: lightgray;\n\t\t}\n\n\t\t&__cycle-border {\n\t\t\tfill: transparent;\n\t\t\tstroke: black;\n\t\t}\n\n\t\t&__cycle-whitespace {\n\t\t\tfill: transparent;\n\t\t\tstroke: white;\n\t\t}\n\n\t\t&__cycle-progress {\n\t\t\tfill: transparent;\n\t\t\tstroke: #0075ff;\n\t\t\ttransform-origin: 50% 50%;\n\t\t\ttransform: rotate(-90deg);\n\n\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { KoliBriProgressVariantType, LabelPropType, ProgressAPI, ProgressStates } from '../../schema';\nimport { KoliBriProgressVariantEnum, validateLabel, watchNumber, watchString, watchValidator } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\nconst CycleSvg = ({ state }: { state: ProgressStates }) => {\n\tconst fullCircle = 342;\n\tconst textPositionTop = '43%';\n\tconst textPositionBottom = '57%';\n\tconst valueY = state._label ? textPositionBottom : '50%';\n\n\treturn (\n\t\t<svg class=\"kol-progress__cycle\" width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<circle class=\"kol-progress__cycle-background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle\n\t\t\t\tclass=\"kol-progress__cycle-progress\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`}\n\t\t\t\tstroke-width=\"6\"\n\t\t\t\tcx=\"60\"\n\t\t\t\tcy=\"60\"\n\t\t\t\tr=\"54.5\"\n\t\t\t></circle>\n\t\t\t{state._label && (\n\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={textPositionTop} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t{state._label}\n\t\t\t\t</text>\n\t\t\t)}\n\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={valueY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t{state._value}\n\t\t\t\t{state._unit}\n\t\t\t</text>\n\t\t</svg>\n\t);\n};\n\nconst BarSvg = ({ state }: { state: ProgressStates }) => {\n\tconst textLabelPadding = 'var(--kolibri-text-label-padding, 45px)';\n\tconst percentage = 100 * (state._value / state._max);\n\n\treturn (\n\t\t<div class=\"kol-progress__bar\">\n\t\t\t{state._label && <div>{state._label}</div>}\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\">\n\t\t\t\t<rect\n\t\t\t\t\tclass=\"kol-progress__bar-background\"\n\t\t\t\t\tx=\"1\"\n\t\t\t\t\ty=\"1\"\n\t\t\t\t\theight=\"10\"\n\t\t\t\t\trx=\"5\"\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\tstyle={{ width: `calc(100% - 2px - ${textLabelPadding})` }}\n\t\t\t\t></rect>\n\t\t\t\t<rect\n\t\t\t\t\tclass=\"kol-progress__bar-border\"\n\t\t\t\t\tx=\"1\"\n\t\t\t\t\ty=\"1\"\n\t\t\t\t\theight=\"10\"\n\t\t\t\t\trx=\"5\"\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"1\"\n\t\t\t\t\tstyle={{ width: `calc(100% - 2px - ${textLabelPadding})` }}\n\t\t\t\t></rect>\n\t\t\t\t<rect\n\t\t\t\t\tclass=\"kol-progress__bar-progress\"\n\t\t\t\t\tx=\"2.5\"\n\t\t\t\t\ty=\"2.5\"\n\t\t\t\t\theight=\"7\"\n\t\t\t\t\trx=\"3.5\"\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\tstyle={{ width: `calc(${percentage}% - 5px - (${textLabelPadding} / 100 * ${percentage}))` }}\n\t\t\t\t></rect>\n\t\t\t\t<text aria-hidden=\"true\" text-anchor=\"end\" dominant-baseline=\"middle\" fill=\"currentColor\" x=\"100%\" y=\"50%\">\n\t\t\t\t\t{state._value}\n\t\t\t\t\t{state._unit}\n\t\t\t\t</text>\n\t\t\t</svg>\n\t\t</div>\n\t);\n};\n\nconst createProgressSVG = (state: ProgressStates): JSX.Element => {\n\tswitch (state._variant) {\n\t\tcase 'cycle':\n\t\t\treturn <CycleSvg state={state} />;\n\t\tcase 'bar':\n\t\t\treturn <BarSvg state={state} />;\n\t\tdefault:\n\t\t\tthrow new Error(`Progress variant ${state._variant} not implemented.`);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements ProgressAPI {\n\tprivate interval?: number;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div class=\"kol-progress\">\n\t\t\t\t{createProgressSVG(this.state)}\n\n\t\t\t\t{/* https://css-tricks.com/html5-progress-element/ */}\n\t\t\t\t<progress\n\t\t\t\t\tclass=\"visually-hidden\"\n\t\t\t\t\taria-busy={this.state._value < this.state._max ? 'true' : 'false'}\n\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden\">\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines at which value the progress display is completed.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Defines the unit of the step values (not shown).\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Defines the progress.\n\t */\n\t@Prop() public _value!: number;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriProgressVariantType;\n\n\t@State() public state: ProgressStates = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressVariantType): void {\n\t\twatchValidator(this, '_variant', (value) => typeof value === 'string' && VALID_VARIANTS.includes(value), new Set(VALID_VARIANTS), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000) as unknown as number;\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["KoliBriProgressVariantEnum","defaultStyleCss","KolProgressDefaultStyle0","VALID_VARIANTS","Object","keys","CycleSvg","state","fullCircle","textPositionTop","textPositionBottom","valueY","_label","h","class","width","viewBox","xmlns","cx","cy","r","fill","stroke","Math","round","_value","_max","x","y","_unit","BarSvg","textLabelPadding","percentage","height","overflow","rx","style","createProgressSVG","_variant","Error","KolProcess","_liveValue","render","key","this","max","value","validateLabel","validateMax","watchNumber","required","validateUnit","watchString","validateValue","validateVariant","watchValidator","includes","Set","componentWillLoad","interval","setInterval","assign","disconnectedCallback","clearInterval"],"sources":["src/schema/types/progress.ts","src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/shadow.tsx"],"sourcesContent":["export enum KoliBriProgressVariantEnum {\n\t'bar' = 'bar',\n\t'cycle' = 'cycle',\n}\n\nexport type KoliBriProgressVariantType = `${KoliBriProgressVariantEnum}`;\n","@import '../@shared/mixins';\n@import '../../styles/global';\n\n@layer kol-component {\n\t.kol-progress {\n\t\tfont-size: rem(16);\n\n\t\t&__bar {\n\t\t\twidth: rem(150);\n\t\t}\n\n\t\t&__bar-border {\n\t\t\tfill: transparent;\n\t\t\tstroke: black;\n\t\t}\n\n\t\t&__bar-background {\n\t\t\tfill: lightgray;\n\t\t\tstroke: white;\n\t\t}\n\n\t\t&__bar-progress {\n\t\t\tfill: #0075ff;\n\t\t\tstroke: transparent;\n\n\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t}\n\t\t}\n\n\t\t&__cycle-background {\n\t\t\tfill: transparent;\n\t\t\tstroke: lightgray;\n\t\t}\n\n\t\t&__cycle-border {\n\t\t\tfill: transparent;\n\t\t\tstroke: black;\n\t\t}\n\n\t\t&__cycle-whitespace {\n\t\t\tfill: transparent;\n\t\t\tstroke: white;\n\t\t}\n\n\t\t&__cycle-progress {\n\t\t\tfill: transparent;\n\t\t\tstroke: #0075ff;\n\t\t\ttransform-origin: 50% 50%;\n\t\t\ttransform: rotate(-90deg);\n\n\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { KoliBriProgressVariantType, LabelPropType, ProgressAPI, ProgressStates } from '../../schema';\nimport { KoliBriProgressVariantEnum, validateLabel, watchNumber, watchString, watchValidator } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\nconst CycleSvg = ({ state }: { state: ProgressStates }) => {\n\tconst fullCircle = 342;\n\tconst textPositionTop = '43%';\n\tconst textPositionBottom = '57%';\n\tconst valueY = state._label ? textPositionBottom : '50%';\n\n\treturn (\n\t\t<svg class=\"kol-progress__cycle\" width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<circle class=\"kol-progress__cycle-background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle\n\t\t\t\tclass=\"kol-progress__cycle-progress\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`}\n\t\t\t\tstroke-width=\"6\"\n\t\t\t\tcx=\"60\"\n\t\t\t\tcy=\"60\"\n\t\t\t\tr=\"54.5\"\n\t\t\t></circle>\n\t\t\t{state._label && (\n\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={textPositionTop} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t{state._label}\n\t\t\t\t</text>\n\t\t\t)}\n\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={valueY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t{state._value}\n\t\t\t\t{state._unit}\n\t\t\t</text>\n\t\t</svg>\n\t);\n};\n\nconst BarSvg = ({ state }: { state: ProgressStates }) => {\n\tconst textLabelPadding = 'var(--kolibri-text-label-padding, 45px)';\n\tconst percentage = 100 * (state._value / state._max);\n\n\treturn (\n\t\t<div class=\"kol-progress__bar\">\n\t\t\t{state._label && <div>{state._label}</div>}\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\">\n\t\t\t\t<rect\n\t\t\t\t\tclass=\"kol-progress__bar-background\"\n\t\t\t\t\tx=\"1\"\n\t\t\t\t\ty=\"1\"\n\t\t\t\t\theight=\"10\"\n\t\t\t\t\trx=\"5\"\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\tstyle={{ width: `calc(100% - 2px - ${textLabelPadding})` }}\n\t\t\t\t></rect>\n\t\t\t\t<rect\n\t\t\t\t\tclass=\"kol-progress__bar-border\"\n\t\t\t\t\tx=\"1\"\n\t\t\t\t\ty=\"1\"\n\t\t\t\t\theight=\"10\"\n\t\t\t\t\trx=\"5\"\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"1\"\n\t\t\t\t\tstyle={{ width: `calc(100% - 2px - ${textLabelPadding})` }}\n\t\t\t\t></rect>\n\t\t\t\t<rect\n\t\t\t\t\tclass=\"kol-progress__bar-progress\"\n\t\t\t\t\tx=\"2.5\"\n\t\t\t\t\ty=\"2.5\"\n\t\t\t\t\theight=\"7\"\n\t\t\t\t\trx=\"3.5\"\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\tstyle={{ width: `calc(${percentage}% - 5px - (${textLabelPadding} / 100 * ${percentage}))` }}\n\t\t\t\t></rect>\n\t\t\t\t<text aria-hidden=\"true\" text-anchor=\"end\" dominant-baseline=\"middle\" fill=\"currentColor\" x=\"100%\" y=\"50%\">\n\t\t\t\t\t{state._value}\n\t\t\t\t\t{state._unit}\n\t\t\t\t</text>\n\t\t\t</svg>\n\t\t</div>\n\t);\n};\n\nconst createProgressSVG = (state: ProgressStates): JSX.Element => {\n\tswitch (state._variant) {\n\t\tcase 'cycle':\n\t\t\treturn <CycleSvg state={state} />;\n\t\tcase 'bar':\n\t\t\treturn <BarSvg state={state} />;\n\t\tdefault:\n\t\t\tthrow new Error(`Progress variant ${state._variant} not implemented.`);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements ProgressAPI {\n\tprivate interval?: number;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div class=\"kol-progress\">\n\t\t\t\t{createProgressSVG(this.state)}\n\n\t\t\t\t{/* https://css-tricks.com/html5-progress-element/ */}\n\t\t\t\t<progress\n\t\t\t\t\tclass=\"visually-hidden\"\n\t\t\t\t\taria-busy={this.state._value < this.state._max ? 'true' : 'false'}\n\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden\">\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines at which value the progress display is completed.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Defines the unit of the step values (not shown).\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Defines the progress.\n\t */\n\t@Prop() public _value!: number;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriProgressVariantType;\n\n\t@State() public state: ProgressStates = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressVariantType): void {\n\t\twatchValidator(this, '_variant', (value) => typeof value === 'string' && VALID_VARIANTS.includes(value), new Set(VALID_VARIANTS), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000) as unknown as number;\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-8a5f476c.js";import{e as t}from"./component-names-50e16b86.js";import{c as i}from"./clsx-09a06a12.js";import{v as o}from"./label-d0315384.js";import{i as a,w as l}from"./prop.validators-9feb1d92.js";import{s}from"./reuse-32931294.js";import"./index-da3e0c00.js";import"./dev.utils-fab45cbc.js";const r=["block","inline"],d="@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  .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  .kol-quote {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__cite::before {\n    padding-right: 0.5em;\n  }\n  .kol-quote--inline .kol-quote__cite::before {\n    padding: 0.5em;\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}",h=d,c=class{constructor(e){n(this,e),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){o(this,e)}validateHref(e){a(this,"_href",e,{required:!0})}validateQuote(e){a(this,"_quote",e,{required:!0})}validateVariant(e){l(this,"_variant",(e=>"string"==typeof e&&r.includes(e)),new Set(r),e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const n=s(this.state._quote);return e("figure",{key:"48709ad26e47dba761f8ba16b0b05573fe47d3a2",class:i("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?e("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,e("span",{"aria-hidden":n?void 0:"true",hidden:!n},e("slot",{name:"expert"}))):e("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,e("span",{"aria-hidden":n?void 0:"true",hidden:!n},e("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&e("figcaption",{key:"7bb7d1b9b1ea41c60e5d747e694954cf82042cd3",class:"kol-quote__figcaption"},e("cite",{key:"0bf3d26428fb8142b445a37be332ef4923c1cbfa",class:"kol-quote__cite"},e(t,{key:"c675259f5e14f0ad9f5236c81855ac44e2f39816",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};c.style={default:h};export{c as kol_quote};
+import{r as n,h as e}from"./index-91489a9f.js";import{e as t}from"./component-names-a18a51c8.js";import{c as i}from"./clsx-09a06a12.js";import{v as o}from"./label-d0315384.js";import{i as a,w as l}from"./prop.validators-9feb1d92.js";import{s}from"./reuse-32931294.js";import"./index-da3e0c00.js";import"./dev.utils-fab45cbc.js";const r=["block","inline"],d="@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%; /* 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  .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  .kol-quote {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__cite::before {\n    padding-right: 0.5em;\n  }\n  .kol-quote--inline .kol-quote__cite::before {\n    padding: 0.5em;\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}",h=d,c=class{constructor(e){n(this,e),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){o(this,e)}validateHref(e){a(this,"_href",e,{required:!0})}validateQuote(e){a(this,"_quote",e,{required:!0})}validateVariant(e){l(this,"_variant",(e=>"string"==typeof e&&r.includes(e)),new Set(r),e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const n=s(this.state._quote);return e("figure",{key:"78d631f0d5dd0dad6b89eae8b0dc4dbaf4ead851",class:i("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?e("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,e("span",{"aria-hidden":n?void 0:"true",hidden:!n},e("slot",{name:"expert"}))):e("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,e("span",{"aria-hidden":n?void 0:"true",hidden:!n},e("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&e("figcaption",{key:"c4d64d8ac6593ac6dcd153c2f4fbb18b7c327278",class:"kol-quote__figcaption"},e("cite",{key:"a7d71571245e7110e97cf9e37bd0560ed5f67a88",class:"kol-quote__cite"},e(t,{key:"295878eecc876a4e9864dd87e779318f30a0dd63",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};c.style={default:h};export{c as kol_quote};

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

@@ -1 +1 @@
-{"version":3,"names":["koliBriQuoteVariantOptions","defaultStyleCss","KolQuoteDefaultStyle0","KolQuote","_href","_quote","_variant","validateLabel","value","this","validateHref","watchString","required","validateQuote","validateVariant","watchValidator","includes","Set","componentWillLoad","_label","render","hasExpertSlot","showExpertSlot","state","h","key","class","clsx","cite","undefined","hidden","name","length","KolLinkTag","_target"],"sources":["src/schema/components/quote.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { PropHref, PropLabel } from '../props';\n\nexport const koliBriQuoteVariantOptions = ['block', 'inline'] as const;\nexport type KoliBriQuoteVariant = (typeof koliBriQuoteVariantOptions)[number];\n\ntype RequiredProps = {\n\tquote: string;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalProps = {\n\tvariant: KoliBriQuoteVariant;\n} & PropLabel;\n\ntype RequiredStates = {\n\tquote: string;\n\tvariant: KoliBriQuoteVariant;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalStates = PropLabel;\n\nexport type QuoteProps = Generic.Element.Members<RequiredProps, OptionalProps>;\nexport type QuoteStates = Generic.Element.Members<RequiredStates, OptionalStates>;\nexport type QuoteAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n","@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t.kol-quote {\n\t\t$root: &;\n\t\tfont-size: rem(16);\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&__cite {\n\t\t\t&::before {\n\t\t\t\tcontent: '—';\n\n\t\t\t\t@at-root #{$root}--block & {\n\t\t\t\t\tpadding-right: 0.5em;\n\t\t\t\t}\n\n\t\t\t\t@at-root #{$root}--inline & {\n\t\t\t\t\tpadding: 0.5em;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__figcaption {\n\t\t\t@at-root #{$root}--block & {\n\t\t\t\tdisplay: inline;\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t}\n\n\t\t&__blockquote {\n\t\t\t&::before {\n\t\t\t\tcontent: open-quote;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: close-quote;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { HrefPropType, KoliBriQuoteVariant, LabelPropType, QuoteAPI, QuoteStates } from '../../schema';\nimport { koliBriQuoteVariantOptions, showExpertSlot, validateLabel, watchString, watchValidator } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkTag } from '../../core/component-names';\nimport clsx from 'clsx';\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements QuoteAPI {\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: QuoteStates = {\n\t\t_href: '', // ⚠ required\n\t\t_quote: '', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value),\n\t\t\tnew Set(koliBriQuoteVariantOptions),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\n\t\treturn (\n\t\t\t<figure class={clsx('kol-quote', `kol-quote--${this.state._variant}`)}>\n\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t<blockquote class=\"kol-quote__blockquote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</blockquote>\n\t\t\t\t) : (\n\t\t\t\t\t<q class=\"kol-quote__quote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</q>\n\t\t\t\t)}\n\t\t\t\t{typeof this.state._label === 'string' && this.state._label.length > 0 && (\n\t\t\t\t\t<figcaption class=\"kol-quote__figcaption\">\n\t\t\t\t\t\t<cite class=\"kol-quote__cite\">\n\t\t\t\t\t\t\t<KolLinkTag _href={this.state._href} _label={this.state._label} _target=\"_blank\" />\n\t\t\t\t\t\t</cite>\n\t\t\t\t\t</figcaption>\n\t\t\t\t)}\n\t\t\t</figure>\n\t\t);\n\t}\n}\n"],"mappings":";;;wUAIO,MAAMA,EAA6B,CAAC,QAAS,UCJpD,MAAMC,EAAkB,8sJACxB,MAAAC,EAAeD,E,MCaFE,EAAQ,M,wGAmB4B,S,WAEX,CACpCC,MAAO,GACPC,OAAQ,GACRC,SAAU,S,CAIJ,aAAAC,CAAcC,GACpBD,EAAcE,KAAMD,E,CAId,YAAAE,CAAaF,GACnBG,EAAYF,KAAM,QAASD,EAAO,CACjCI,SAAU,M,CAKL,aAAAC,CAAcL,GACpBG,EAAYF,KAAM,SAAUD,EAAO,CAClCI,SAAU,M,CAKL,eAAAE,CAAgBN,GACtBO,EACCN,KACA,YACCD,UAAiBA,IAAU,UAAYR,EAA2BgB,SAASR,IAC5E,IAAIS,IAAIjB,GACRQ,E,CAIK,iBAAAU,GACNT,KAAKC,aAAaD,KAAKL,OACvBK,KAAKF,cAAcE,KAAKU,QACxBV,KAAKI,cAAcJ,KAAKJ,QACxBI,KAAKK,gBAAgBL,KAAKH,S,CAGpB,MAAAc,GACN,MAAMC,EAAgBC,EAAeb,KAAKc,MAAMlB,QAChD,OACCmB,EAAA,UAAAC,IAAA,2CAAQC,MAAOC,EAAK,YAAa,cAAclB,KAAKc,MAAMjB,aACxDG,KAAKc,MAAMjB,WAAa,QACxBkB,EAAA,cAAYE,MAAM,wBAAwBE,KAAMnB,KAAKc,MAAMnB,OACzDK,KAAKc,MAAMlB,OACZmB,EAAA,uBAAoBH,EAAgB,OAASQ,UAAWC,QAAST,GAChEG,EAAA,QAAMO,KAAK,aAIbP,EAAA,KAAGE,MAAM,mBAAmBE,KAAMnB,KAAKc,MAAMnB,OAC3CK,KAAKc,MAAMlB,OACZmB,EAAA,uBAAoBH,EAAgB,OAASQ,UAAWC,QAAST,GAChEG,EAAA,QAAMO,KAAK,oBAINtB,KAAKc,MAAMJ,SAAW,UAAYV,KAAKc,MAAMJ,OAAOa,OAAS,GACpER,EAAA,cAAAC,IAAA,2CAAYC,MAAM,yBACjBF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,mBACXF,EAACS,EAAU,CAAAR,IAAA,2CAACrB,MAAOK,KAAKc,MAAMnB,MAAOe,OAAQV,KAAKc,MAAMJ,OAAQe,QAAQ,a","ignoreList":[]}
+{"version":3,"names":["koliBriQuoteVariantOptions","defaultStyleCss","KolQuoteDefaultStyle0","KolQuote","_href","_quote","_variant","validateLabel","value","this","validateHref","watchString","required","validateQuote","validateVariant","watchValidator","includes","Set","componentWillLoad","_label","render","hasExpertSlot","showExpertSlot","state","h","key","class","clsx","cite","undefined","hidden","name","length","KolLinkTag","_target"],"sources":["src/schema/components/quote.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { PropHref, PropLabel } from '../props';\n\nexport const koliBriQuoteVariantOptions = ['block', 'inline'] as const;\nexport type KoliBriQuoteVariant = (typeof koliBriQuoteVariantOptions)[number];\n\ntype RequiredProps = {\n\tquote: string;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalProps = {\n\tvariant: KoliBriQuoteVariant;\n} & PropLabel;\n\ntype RequiredStates = {\n\tquote: string;\n\tvariant: KoliBriQuoteVariant;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalStates = PropLabel;\n\nexport type QuoteProps = Generic.Element.Members<RequiredProps, OptionalProps>;\nexport type QuoteStates = Generic.Element.Members<RequiredStates, OptionalStates>;\nexport type QuoteAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n","@import '../@shared/mixins';\n@import '../../styles/global';\n\n@layer kol-component {\n\t.kol-quote {\n\t\t$root: &;\n\t\tfont-size: rem(16);\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&__cite {\n\t\t\t&::before {\n\t\t\t\tcontent: '—';\n\n\t\t\t\t@at-root #{$root}--block & {\n\t\t\t\t\tpadding-right: 0.5em;\n\t\t\t\t}\n\n\t\t\t\t@at-root #{$root}--inline & {\n\t\t\t\t\tpadding: 0.5em;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__figcaption {\n\t\t\t@at-root #{$root}--block & {\n\t\t\t\tdisplay: inline;\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t}\n\n\t\t&__blockquote {\n\t\t\t&::before {\n\t\t\t\tcontent: open-quote;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: close-quote;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { HrefPropType, KoliBriQuoteVariant, LabelPropType, QuoteAPI, QuoteStates } from '../../schema';\nimport { koliBriQuoteVariantOptions, showExpertSlot, validateLabel, watchString, watchValidator } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkTag } from '../../core/component-names';\nimport clsx from 'clsx';\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements QuoteAPI {\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: QuoteStates = {\n\t\t_href: '', // ⚠ required\n\t\t_quote: '', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value),\n\t\t\tnew Set(koliBriQuoteVariantOptions),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\n\t\treturn (\n\t\t\t<figure class={clsx('kol-quote', `kol-quote--${this.state._variant}`)}>\n\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t<blockquote class=\"kol-quote__blockquote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</blockquote>\n\t\t\t\t) : (\n\t\t\t\t\t<q class=\"kol-quote__quote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</q>\n\t\t\t\t)}\n\t\t\t\t{typeof this.state._label === 'string' && this.state._label.length > 0 && (\n\t\t\t\t\t<figcaption class=\"kol-quote__figcaption\">\n\t\t\t\t\t\t<cite class=\"kol-quote__cite\">\n\t\t\t\t\t\t\t<KolLinkTag _href={this.state._href} _label={this.state._label} _target=\"_blank\" />\n\t\t\t\t\t\t</cite>\n\t\t\t\t\t</figcaption>\n\t\t\t\t)}\n\t\t\t</figure>\n\t\t);\n\t}\n}\n"],"mappings":";;;wUAIO,MAAMA,EAA6B,CAAC,QAAS,UCJpD,MAAMC,EAAkB,wrJACxB,MAAAC,EAAeD,E,MCaFE,EAAQ,M,wGAmB4B,S,WAEX,CACpCC,MAAO,GACPC,OAAQ,GACRC,SAAU,S,CAIJ,aAAAC,CAAcC,GACpBD,EAAcE,KAAMD,E,CAId,YAAAE,CAAaF,GACnBG,EAAYF,KAAM,QAASD,EAAO,CACjCI,SAAU,M,CAKL,aAAAC,CAAcL,GACpBG,EAAYF,KAAM,SAAUD,EAAO,CAClCI,SAAU,M,CAKL,eAAAE,CAAgBN,GACtBO,EACCN,KACA,YACCD,UAAiBA,IAAU,UAAYR,EAA2BgB,SAASR,IAC5E,IAAIS,IAAIjB,GACRQ,E,CAIK,iBAAAU,GACNT,KAAKC,aAAaD,KAAKL,OACvBK,KAAKF,cAAcE,KAAKU,QACxBV,KAAKI,cAAcJ,KAAKJ,QACxBI,KAAKK,gBAAgBL,KAAKH,S,CAGpB,MAAAc,GACN,MAAMC,EAAgBC,EAAeb,KAAKc,MAAMlB,QAChD,OACCmB,EAAA,UAAAC,IAAA,2CAAQC,MAAOC,EAAK,YAAa,cAAclB,KAAKc,MAAMjB,aACxDG,KAAKc,MAAMjB,WAAa,QACxBkB,EAAA,cAAYE,MAAM,wBAAwBE,KAAMnB,KAAKc,MAAMnB,OACzDK,KAAKc,MAAMlB,OACZmB,EAAA,uBAAoBH,EAAgB,OAASQ,UAAWC,QAAST,GAChEG,EAAA,QAAMO,KAAK,aAIbP,EAAA,KAAGE,MAAM,mBAAmBE,KAAMnB,KAAKc,MAAMnB,OAC3CK,KAAKc,MAAMlB,OACZmB,EAAA,uBAAoBH,EAAgB,OAASQ,UAAWC,QAAST,GAChEG,EAAA,QAAMO,KAAK,oBAINtB,KAAKc,MAAMJ,SAAW,UAAYV,KAAKc,MAAMJ,OAAOa,OAAS,GACpER,EAAA,cAAAC,IAAA,2CAAYC,MAAM,yBACjBF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,mBACXF,EAACS,EAAU,CAAAR,IAAA,2CAACrB,MAAOK,KAAKc,MAAMnB,MAAOe,OAAQV,KAAKc,MAAMJ,OAAQe,QAAQ,a","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as e,F as t,r as n,g as i}from"./index-8a5f476c.js";import{c as o}from"./clsx-09a06a12.js";import{n as a}from"./dev.utils-47d07d5b.js";import{I as s}from"./controller-icon-ebd41784.js";import{f as l,v as r}from"./controller-4af5f563.js";import{v as d}from"./rows-26af6558.js";import{b as c,g as h}from"./prop.validators-9feb1d92.js";import{p}from"./controller-e3f702f2.js";import{K as u}from"./InputContainerStateWrapper-a321a9b8.js";import{_ as f}from"./tslib.es6-1173d062.js";import{g as b,a as m,K as v}from"./getRenderStates-b24b4a43.js";import"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./controller-cc41fe9f.js";import"./events-5adf6b62.js";import"./associated.controller-52d302aa.js";import"./access-and-short-key-9cca88b8.js";import"./tooltip-align-8e0fa436.js";import"./align-4719d626.js";import"./hide-label-429a15ea.js";import"./msg-93978a32.js";import"./common-54bf85ba.js";import"./label-d0315384.js";import"./icons-199f1746.js";import"./index-da3e0c00.js";import"./component-names-50e16b86.js";import"./isString-5af96894.js";import"./isObject-ffcbbb76.js";import"./Icon-5d99f9b6.js";import"./InternalUnderlinedBadgeText-f618013b.js";import"./i18n-5fe08f1c.js";import"./i18n-7ea9f137.js";import"./FormFieldMsg-6dafd67d.js";import"./Alert-210f80e8.js";import"./Heading-def0af88.js";class y extends s{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find((t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options))),this.filterValuesInOptions=(e,t)=>e.filter((e=>void 0!==this.isValueInOptions(e,t))),this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),l(this.keyOptionMap,n);const e=t.has("_value")?t.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],n);!1===this.component._multiple&&0===i.length?t.set("_value",[n[0].value]):Array.isArray(e)&&i.length<e.length&&t.set("_value",i)}},this.component=e}validateOptions(e){r(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){c(this.component,"_multiple",e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){c(this.component,"_required",e)}validateRows(e){d(this.component,e)}validateValue(e){h(this.component,"_value",(()=>!0),e,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const k=t=>{var{index:n,selectedValue:i,selected:o,value:a,label:l}=t,s=f(t,["index","selectedValue","selected","value","label"]);return i?Array.isArray(i)||(i=[i]):i=[],e("option",Object.assign({selected:o||i.includes(a),value:n||a},s),l)},g=k,w=({preKey:n,options:i,value:o,OptionProps:a={},OptionGroupProps:l={}})=>(null==i?void 0:i.length)?e(t,null,i.map(((t,s)=>{const r=[n,`-${s}`].join("");if("options"in t){if(!i.length)return null;const{label:n}=t,s=f(t,["label"]);return e("optgroup",Object.assign({key:r},l,{label:null==n?void 0:n.toString()}),e(w,Object.assign({OptionGroupProps:l,OptionProps:a,value:o,preKey:r},s)))}return"value"in t?e(g,Object.assign({key:r},a,{index:r,selectedValue:o},t)):null}))):null,_=w,j=t=>{const{options:n,value:i,OptionProps:o,OptionGroupProps:a,ariaDescribedBy:l,hideLabel:s,label:r}=t,d=f(t,["options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),c=Object.assign(Object.assign({},b({ariaDescribedBy:l,hideLabel:s,label:r})),d);return e("select",Object.assign({},c),e(_,{options:n,value:i,OptionGroupProps:a,OptionProps:o}))},x=j;function z(e){const{ariaDescribedBy:t}=m(e);return{id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,options:e._options,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,size:e._rows,multiple:e._multiple,required:e._required}}const O=t=>{var{state:n}=t,i=f(t,["state"]);return e(x,Object.assign({},z(n),i))},S=O,P="@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  .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    display: block;\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.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  .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  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .kol-span__label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host option:checked::before {\n    content: \"✓ \";\n  }\n}",A=P,I=class{async getValue(){return this.state._value}async kolFocus(){var e;null===(e=this.selectRef)||void 0===e||e.focus()}getFormFieldProps(){return{state:this.state,class:o("kol-select","select",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return e(v,Object.assign({key:"d460bb69572d71c5911684f2f458bbcf59304aff"},this.getFormFieldProps()),e(u,{key:"7bdb9d0f96e75d0450c7de2139b3a8fa89610b7b",state:this.state},e("form",{key:"4aadbe940daf955f8637c02e56ea7690475dd421",class:"input-slot",onSubmit:e=>{e.preventDefault(),p({form:this.host,ref:this.selectRef})}},e("input",{key:"ec42426e92e2f0713795ab2f9953e43d2fe6bfc4",type:"submit",hidden:!0}),e(S,Object.assign({key:"a6e486d2e71ee96b89c1e31edab0b3b3151741d3"},this.getSelectProps())))))}constructor(e){n(this,e),this.catchRef=e=>{this.selectRef=e},this._accessKey=void 0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${a()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new y(this,"select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}onInput(e){var t;this._value=Array.from((null===(t=this.selectRef)||void 0===t?void 0:t.options)||[]).filter((e=>!0===e.selected)).map((e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value})),this.controller.onFacade.onInput(e,!0,this._value)}onChange(e){this.controller.onFacade.onChange(e,this._value)}get host(){return i(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};I.style={default:A};export{I as kol_select};
+import{h as e,F as n,r as t,g as i}from"./index-91489a9f.js";import{c as o}from"./clsx-09a06a12.js";import{n as a}from"./dev.utils-b9e6a3e1.js";import{I as s,K as l}from"./controller-icon-4be72f9f.js";import{f as r,v as d}from"./controller-e699ee47.js";import{v as c}from"./rows-26af6558.js";import{b as h,g as u}from"./prop.validators-9feb1d92.js";import{p}from"./controller-002a86ad.js";import{_ as f}from"./tslib.es6-1173d062.js";import{d as m,g as b,K as v}from"./getRenderStates-a7a33541.js";import{c as k,a as y}from"./FormFieldMsg-1ed3f51d.js";import"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./InternalUnderlinedBadgeText-22278de8.js";import"./isObject-ffcbbb76.js";import"./component-names-a18a51c8.js";import"./Icon-936c5cfc.js";import"./icons-199f1746.js";import"./common-54bf85ba.js";import"./label-d0315384.js";import"./index-da3e0c00.js";import"./events-5adf6b62.js";import"./associated.controller-52d302aa.js";import"./access-and-short-key-9cca88b8.js";import"./tooltip-align-8e0fa436.js";import"./align-4719d626.js";import"./hide-label-429a15ea.js";import"./i18n-5fe08f1c.js";import"./i18n-7ea9f137.js";import"./Alert-080adf2e.js";import"./Heading-0459992b.js";class _ extends s{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find((t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options))),this.filterValuesInOptions=(e,t)=>e.filter((e=>void 0!==this.isValueInOptions(e,t))),this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),r(this.keyOptionMap,n);const e=t.has("_value")?t.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],n);!1===this.component._multiple&&0===i.length?t.set("_value",[n[0].value]):Array.isArray(e)&&i.length<e.length&&t.set("_value",i)}},this.component=e}validateOptions(e){d(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){h(this.component,"_multiple",e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){h(this.component,"_required",e)}validateRows(e){c(this.component,e)}validateValue(e){u(this.component,"_value",(()=>!0),e,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const g=t=>{var{baseClassName:n="kol-select",class:i,index:a,selectedValue:l,selected:s,value:r,label:d,disabled:c}=t,h=f(t,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);l?Array.isArray(l)||(l=[l]):l=[];const p=s||l.includes(r);return e("option",Object.assign({class:o(`${n}__option`,{[`${n}__option--selected`]:p,[`${n}__option--disabled`]:c},i),selected:p,disabled:c,value:a||r},h),d)},w=g,j=({baseClassName:t,preKey:i,options:a,disabled:l,value:s,OptionProps:r={},OptionGroupProps:d={}})=>(null==a?void 0:a.length)?e(n,null,a.map(((n,c)=>{const h=[i,`-${c}`].join("");if("options"in n){if(!a.length)return null;const{label:i}=n,c=f(n,["label"]);return e("optgroup",Object.assign({class:o(`${t}__optgroup`,{[`${t}__optgroup--disabled`]:l}),key:h},d,{label:null==i?void 0:i.toString(),disabled:l}),e(j,Object.assign({baseClassName:t,OptionGroupProps:d,OptionProps:r,value:s,preKey:h},c)))}return"value"in n?e(w,Object.assign({key:h,baseClassName:t},r,{index:h,selectedValue:s},n)):null}))):null,x=j,z=t=>{const{class:n,msg:i,touched:a,disabled:l,required:s,options:r,value:d,OptionProps:c,OptionGroupProps:h,ariaDescribedBy:p,hideLabel:u,label:b}=t,v=f(t,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),_=k(i,a),g={"kol-select--disabled":Boolean(l),"kol-select--required":Boolean(s),"kol-select--touched":Boolean(a),[`kol-select--${(null==i?void 0:i.type)||"error"}`]:_},y=Object.assign(Object.assign({class:o("kol-select",g,n),required:s,disabled:l},m({ariaDescribedBy:p,hideLabel:u,label:b})),v);return e("select",Object.assign({},y),e(x,{baseClassName:"kol-select",options:r,value:d,OptionGroupProps:h,OptionProps:c}))},O=z;function P(e){const{ariaDescribedBy:t}=b(e);return{id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,options:e._options,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,size:e._rows,multiple:e._multiple,required:e._required,touched:e._touched,msg:y(e._msg)}}const S=t=>{var{state:n}=t,i=f(t,["state"]);return e(O,Object.assign({},P(n),i))},A=S,B='@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%; /* 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  .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    display: block;\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.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  .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  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-select {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n    width: 100%;\n    /* needed hack for vertical alignment */\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: "✓ ";\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}',q=B,I=class{async getValue(){return this.state._value}async kolFocus(){var e;null===(e=this.selectRef)||void 0===e||e.focus()}getFormFieldProps(){return{state:this.state,class:o("kol-form-field-select",{"kol-form-field--has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return e(v,Object.assign({key:"ee17395a6e4c6739788a55963b94371d694c5170"},this.getFormFieldProps()),e(l,{key:"b39687b04e0e072ca8558a7ae50e010cf90a654c",state:this.state},e("form",{key:"23f28fee6175c9f1cc19236dd7c24aa38e7a1515",onSubmit:e=>{e.preventDefault(),p({form:this.host,ref:this.selectRef})}},e("input",{key:"38cce424bf172f0c235bf68878b6d2ac9c704ba9",type:"submit",hidden:!0}),e(A,Object.assign({key:"958a3dd3848c598ecc38d2f4b3be72b75750d1d6"},this.getSelectProps())))))}constructor(e){t(this,e),this.catchRef=e=>{this.selectRef=e},this._accessKey=void 0,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${a()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new _(this,"select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}onInput(e){var t;this._value=Array.from((null===(t=this.selectRef)||void 0===t?void 0:t.options)||[]).filter((e=>!0===e.selected)).map((e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value})),this.controller.onFacade.onInput(e,!0,this._value)}onChange(e){this.controller.onFacade.onChange(e,this._value)}get host(){return i(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};I.style={default:q};export{I as kol_select};