npm - @public-ui/components - Versions diffs - 1.5.0-rc.20 → 1.5.0-rc.22 - Mend

@public-ui/components 1.5.0-rc.20 → 1.5.0-rc.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (758) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"names":["defaultStyleCss","leftDoubleArrowIcon","left","leftSingleArrow","rightSingleArrowIcon","right","rightDoubleArrowIcon","KolPagination","this","nonce","calcCount","total","pageSize","Math","ceil","getCount","state","_total","_pageSize","onClick","event","page","_on","onChangePage","timeout","setTimeout","clearTimeout","onChangePageSize","value","parseInt","onGoToFirst","onGoToEnd","onGoBackward","_page","onGoForward","beforePageSize","_nextValue","nextState","has","get","pageSizeOptions","_pageSizeOptions","Array","isArray","length","find","option","undefined","set","syncPage","count","STATE_CHANGE_EVENT","beforePageSizeOptions","nextValue","options","push","label","translate","placeholders","entries","_boundaryCount","_hasButtons","first","last","next","previous","_siblingCount","_variant","render","ellipsis","pageButtons","from","keys","map","index","getSelectedPageButton","getUnselectedPageButton","h","key","Host","exportparts","_customClass","_disabled","_icon","_iconOnly","_label","_tooltipAlign","_a","_hideLabel","_id","_list","onChange","_value","_ariaLabel","toFixed","class","_ariaCurrent","validateBoundaryCount","watchNumber","max","validateCustomClass","watchString","defaultValue","validateHasButtons","watchValidator","Set","hooks","beforePatch","parseJson","e","delete","Object","assign","validateOn","validatePage","validatePageSize","validatePageSizeOptions","watchJsonArrayString","validateSiblingCount","validateTotal","validateTooltipAlign","watchTooltipAlignment","validateVariant","watchButtonVariant","componentWillLoad"],"sources":["./src/components/pagination/style.css?tag=kol-pagination&mode=default&encapsulation=shadow","./src/components/pagination/component.tsx"],"sourcesContent":["@import url(../style.css);\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { KoliBriButtonVariant, KoliBriButtonVariantPropState, KoliBriButtonCustomClassPropState, watchTooltipAlignment } from '../../types/button-link';\nimport { nonce } from '../../utils/dev.utils';\nimport { parseJson, watchJsonArrayString, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchButtonVariant } from '../button/controller';\nimport { Alignment } from '../../types/props';\nimport { KoliBriPaginationButtonCallbacks } from './types';\nimport { Stringified } from '../../types/common';\nimport { Option } from '../../types/input/types';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { translate } from '../../i18n';\n\n/*\n Der HasButton-Typ definiert die Einstellungsmöglichkeiten der speziellen\n * Sprung-Schalter der Pagination.\n /\nexport type PaginationHasButton = {\n\t/\n\t Der First-Button ist der Schalter, um direkt auf die erste Seite zu gelangen.\n\t /\n\tfirst: boolean;\n\t/\n\t Der Last-Button ist der Schalter, um direkt auf die letzte Seite zu gelangen.\n\t /\n\tlast: boolean;\n\t/\n\t Der Next-Button ist der Schalter, um direkt auf die nächste Seite zu gelangen.\n\t /\n\tnext: boolean;\n\t/\n\t Der Previous-Button ist der Schalter, um direkt auf die vorherige Seite zu gelangen.\n\t /\n\tprevious: boolean;\n};\n\nexport type RequiredProps = {\n\ton: KoliBriPaginationButtonCallbacks;\n\tpage: number;\n\ttotal: number;\n};\nexport type OptionalProps = KoliBriButtonCustomClassPropState &\n\tKoliBriButtonVariantPropState & {\n\t\tboundaryCount: number;\n\t\thasButtons: boolean \| Stringified<PaginationHasButton>;\n\t\tpageSize: number;\n\t\tpageSizeOptions: Stringified<number[]>;\n\t\tsiblingCount: number;\n\t\ttooltipAlign: Alignment;\n\t};\n// export type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = KoliBriButtonVariantPropState & {\n\tboundaryCount: number;\n\thasButtons: PaginationHasButton;\n\tpage: number;\n\tpageSize: number;\n\tpageSizeOptions: Option<number>[];\n\ton: KoliBriPaginationButtonCallbacks;\n\tsiblingCount: number;\n\ttotal: number;\n};\ntype OptionalStates = KoliBriButtonCustomClassPropState & {\n\ttooltipAlign: Alignment;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst leftDoubleArrowIcon = {\n\tleft: 'codicon codicon-debug-reverse-continue',\n};\nconst leftSingleArrow = {\n\tleft: 'codicon codicon-chevron-left',\n};\nconst rightSingleArrowIcon = {\n\tright: 'codicon codicon-chevron-right',\n};\nconst rightDoubleArrowIcon = {\n\tright: 'codicon codicon-debug-continue',\n};\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\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._total, 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 <span key={`${this.nonce}-el-${page}`}>•••</span>;\n\t\t\t\t} else {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t});\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t{this.state._hasButtons.first && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t_icon={leftDoubleArrowIcon}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label={translate('kol-page-first')}\n\t\t\t\t\t\t\t_on={this.onGoToFirst}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._hasButtons.previous && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t_icon={leftSingleArrow}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label={translate('kol-page-back')}\n\t\t\t\t\t\t\t_on={this.onGoBackward}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t\t{pageButtons}\n\t\t\t\t\t{this.state._hasButtons.next && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t_icon={rightSingleArrowIcon}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label={translate('kol-page-next')}\n\t\t\t\t\t\t\t_on={this.onGoForward}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._hasButtons.last && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t_icon={rightDoubleArrowIcon}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label={translate('kol-page-last')}\n\t\t\t\t\t\t\t_on={this.onGoToEnd}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{this.state._pageSizeOptions?.length > 0 && (\n\t\t\t\t\t<kol-select\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_id=\"pagination-size\"\n\t\t\t\t\t\t_list={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>\n\t\t\t\t\t\t{translate('kol-entries-per-site')}\n\t\t\t\t\t</kol-select>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt an, wie viele Seiten neben den am Rand liegenden Pfeil-Schaltern angezeigt werden sollen.\n\t /\n\t@Prop() public _boundaryCount?: number = 1;\n\n\t/\n\t Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t /\n\t@Prop() public _customClass?: string;\n\n\t/\n\t Setzt die Sichtbarkeit der Anfang/zurück/weiter/Ende-Schaltflächen.\n\t /\n\t@Prop() public _hasButtons?: boolean \| Stringified<PaginationHasButton> = true;\n\n\t/\n\t Gibt an, welche Seite aktuell ausgewählt ist.\n\t /\n\t@Prop() public _page!: number;\n\n\t/\n\t Gibt an, wie viele Einträge pro Seite angezeigt werden.\n\t /\n\t@Prop({ mutable: true, reflect: false }) public _pageSize = 1;\n\n\t/\n\t Setzt die Optionen für das Seitenlängenselect.\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 Gibt an, wie viele Seiten neben der aktuell Ausgewählten angezeigt werden.\n\t /\n\t@Prop() public _siblingCount?: number = 1;\n\n\t/\n\t Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden.\n\t /\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/\n\t Setzt die Gesamtanzahl der Seiten.\n\t /\n\t@Prop() public _total!: number;\n\n\t/\n\t Gibt an, welche Button-Variante verwendet werden soll.\n\t /\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n\n\t@State() public state: States = {\n\t\t_boundaryCount: 1,\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_total: 0,\n\t\t_variant: 'normal',\n\t};\n\n\tprivate onClick = (event: Event, page: number) => {\n\t\tif (typeof this.state._on.onClick === 'function') {\n\t\t\tthis.state._on.onClick(event, page);\n\t\t}\n\t\tthis.onChangePage(event, page);\n\t};\n\n\tprivate onChangePage = (event: Event, page: number) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tif (typeof this.state._on.onChangePage === 'function') {\n\t\t\t\tthis.state._on.onChangePage(event, page);\n\t\t\t}\n\t\t});\n\t};\n\n\tprivate onChangePageSize = (event: Event, value: unknown) => {\n\t\tvalue = parseInt((value as string[])[0]);\n\t\tif (typeof value === 'number' && value > 0 && this._pageSize !== value) {\n\t\t\tthis._pageSize = value;\n\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t\tif (typeof this.state._on.onChangePageSize === 'function') {\n\t\t\t\t\tthis.state._on.onChangePageSize(event, this._pageSize);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate readonly onGoToFirst = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, 1);\n\t\t},\n\t};\n\tprivate readonly onGoToEnd = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.getCount());\n\t\t},\n\t};\n\tprivate readonly onGoBackward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page - 1);\n\t\t},\n\t};\n\tprivate readonly onGoForward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page + 1);\n\t\t},\n\t};\n\n\tprivate getUnselectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<kol-button\n\t\t\t\texportparts=\"icon\"\n\t\t\t\tkey={`${this.nonce}-${page}`}\n\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t_ariaLabel={translate('kol-page-current', { placeholders: { page: page.toFixed(0) } })}\n\t\t\t\t_label={`${page}`}\n\t\t\t\t_on={{\n\t\t\t\t\tonClick: (event: Event) => {\n\t\t\t\t\t\tthis.onClick(event, page);\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t\t_variant={this.state._variant}\n\t\t\t></kol-button>\n\t\t);\n\t}\n\n\tprivate getSelectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<kol-button-wc\n\t\t\t\tclass=\"selected\"\n\t\t\t\tkey={`${this.nonce}-selected`}\n\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t_disabled={true}\n\t\t\t\t_ariaCurrent={true}\n\t\t\t\t_ariaLabel={translate('kol-page-selected', { placeholders: { page: page.toFixed(0) } })}\n\t\t\t\t_label={`${page}`}\n\t\t\t\t_variant={this.state._variant}\n\t\t\t/>\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?: string): void {\n\t\twatchString(this, '_customClass', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\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('_total') ? (nextState.get('_total') as number) : this.state._total;\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('_total') ? (nextState.get('_total') as number) : this.state._total;\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('_total')\n\tpublic validateTotal(value?: number): void {\n\t\twatchNumber(this, '_total', 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?: Alignment): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriButtonVariant): void {\n\t\twatchButtonVariant(this, '_variant', 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.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.validateTotal(this._total);\n\t\tthis.validateVariant(this._variant);\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"],"mappings":"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"}
1	+ {"version":3,"names":["defaultStyleCss","leftDoubleArrowIcon","left","leftSingleArrow","rightSingleArrowIcon","right","rightDoubleArrowIcon","KolPagination","this","nonce","calcCount","total","pageSize","Math","ceil","getCount","state","_total","_pageSize","onClick","event","page","_on","onChangePage","timeout","setTimeout","clearTimeout","onChangePageSize","value","parseInt","onGoToFirst","onGoToEnd","onGoBackward","_page","onGoForward","beforePageSize","_nextValue","nextState","has","get","pageSizeOptions","_pageSizeOptions","Array","isArray","length","find","option","undefined","set","syncPage","count","STATE_CHANGE_EVENT","beforePageSizeOptions","nextValue","options","push","label","translate","placeholders","entries","_boundaryCount","_hasButtons","first","last","next","previous","_siblingCount","_variant","render","ellipsis","pageButtons","from","keys","map","index","getSelectedPageButton","getUnselectedPageButton","h","class","key","Host","exportparts","_customClass","_disabled","_icon","_iconOnly","_label","_tooltipAlign","_a","_hideLabel","_id","_list","onChange","_value","_ariaLabel","toFixed","_ariaCurrent","validateBoundaryCount","watchNumber","max","validateCustomClass","watchString","defaultValue","validateHasButtons","watchValidator","Set","hooks","beforePatch","parseJson","e","delete","Object","assign","validateOn","validatePage","validatePageSize","validatePageSizeOptions","watchJsonArrayString","validateSiblingCount","validateTotal","validateTooltipAlign","watchTooltipAlignment","validateVariant","watchButtonVariant","componentWillLoad"],"sources":["./src/components/pagination/style.css?tag=kol-pagination&mode=default&encapsulation=shadow","./src/components/pagination/component.tsx"],"sourcesContent":["@import url(../style.css);\n.separator:before {\n\tcontent: '•••';\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { KoliBriButtonVariant, KoliBriButtonVariantPropState, KoliBriButtonCustomClassPropState, watchTooltipAlignment } from '../../types/button-link';\nimport { nonce } from '../../utils/dev.utils';\nimport { parseJson, watchJsonArrayString, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchButtonVariant } from '../button/controller';\nimport { Alignment } from '../../types/props';\nimport { KoliBriPaginationButtonCallbacks } from './types';\nimport { Stringified } from '../../types/common';\nimport { Option } from '../../types/input/types';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { translate } from '../../i18n';\n\n/*\n Der HasButton-Typ definiert die Einstellungsmöglichkeiten der speziellen\n * Sprung-Schalter der Pagination.\n /\nexport type PaginationHasButton = {\n\t/\n\t Der First-Button ist der Schalter, um direkt auf die erste Seite zu gelangen.\n\t /\n\tfirst: boolean;\n\t/\n\t Der Last-Button ist der Schalter, um direkt auf die letzte Seite zu gelangen.\n\t /\n\tlast: boolean;\n\t/\n\t Der Next-Button ist der Schalter, um direkt auf die nächste Seite zu gelangen.\n\t /\n\tnext: boolean;\n\t/\n\t Der Previous-Button ist der Schalter, um direkt auf die vorherige Seite zu gelangen.\n\t /\n\tprevious: boolean;\n};\n\nexport type RequiredProps = {\n\ton: KoliBriPaginationButtonCallbacks;\n\tpage: number;\n\ttotal: number;\n};\nexport type OptionalProps = KoliBriButtonCustomClassPropState &\n\tKoliBriButtonVariantPropState & {\n\t\tboundaryCount: number;\n\t\thasButtons: boolean \| Stringified<PaginationHasButton>;\n\t\tpageSize: number;\n\t\tpageSizeOptions: Stringified<number[]>;\n\t\tsiblingCount: number;\n\t\ttooltipAlign: Alignment;\n\t};\n// export type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = KoliBriButtonVariantPropState & {\n\tboundaryCount: number;\n\thasButtons: PaginationHasButton;\n\tpage: number;\n\tpageSize: number;\n\tpageSizeOptions: Option<number>[];\n\ton: KoliBriPaginationButtonCallbacks;\n\tsiblingCount: number;\n\ttotal: number;\n};\ntype OptionalStates = KoliBriButtonCustomClassPropState & {\n\ttooltipAlign: Alignment;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst leftDoubleArrowIcon = {\n\tleft: 'codicon codicon-debug-reverse-continue',\n};\nconst leftSingleArrow = {\n\tleft: 'codicon codicon-chevron-left',\n};\nconst rightSingleArrowIcon = {\n\tright: 'codicon codicon-chevron-right',\n};\nconst rightDoubleArrowIcon = {\n\tright: 'codicon codicon-debug-continue',\n};\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\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._total, 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 <span class=\"separator\" key={`${this.nonce}-el-${page}`}></span>;\n\t\t\t\t} else {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t});\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t{this.state._hasButtons.first && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\tclass=\"first\"\n\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t_icon={leftDoubleArrowIcon}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label={translate('kol-page-first')}\n\t\t\t\t\t\t\t_on={this.onGoToFirst}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._hasButtons.previous && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\tclass=\"previous\"\n\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t_icon={leftSingleArrow}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label={translate('kol-page-back')}\n\t\t\t\t\t\t\t_on={this.onGoBackward}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t\t{pageButtons}\n\t\t\t\t\t{this.state._hasButtons.next && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\tclass=\"next\"\n\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t_icon={rightSingleArrowIcon}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label={translate('kol-page-next')}\n\t\t\t\t\t\t\t_on={this.onGoForward}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._hasButtons.last && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\tclass=\"last\"\n\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t_icon={rightDoubleArrowIcon}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label={translate('kol-page-last')}\n\t\t\t\t\t\t\t_on={this.onGoToEnd}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{this.state._pageSizeOptions?.length > 0 && (\n\t\t\t\t\t<kol-select\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_id=\"pagination-size\"\n\t\t\t\t\t\t_list={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>\n\t\t\t\t\t\t{translate('kol-entries-per-site')}\n\t\t\t\t\t</kol-select>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt an, wie viele Seiten neben den am Rand liegenden Pfeil-Schaltern angezeigt werden sollen.\n\t /\n\t@Prop() public _boundaryCount?: number = 1;\n\n\t/\n\t Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t /\n\t@Prop() public _customClass?: string;\n\n\t/\n\t Setzt die Sichtbarkeit der Anfang/zurück/weiter/Ende-Schaltflächen.\n\t /\n\t@Prop() public _hasButtons?: boolean \| Stringified<PaginationHasButton> = true;\n\n\t/\n\t Gibt an, welche Seite aktuell ausgewählt ist.\n\t /\n\t@Prop() public _page!: number;\n\n\t/\n\t Gibt an, wie viele Einträge pro Seite angezeigt werden.\n\t /\n\t@Prop({ mutable: true, reflect: false }) public _pageSize = 1;\n\n\t/\n\t Setzt die Optionen für das Seitenlängenselect.\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 Gibt an, wie viele Seiten neben der aktuell Ausgewählten angezeigt werden.\n\t /\n\t@Prop() public _siblingCount?: number = 1;\n\n\t/\n\t Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden.\n\t /\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/\n\t Setzt die Gesamtanzahl der Seiten.\n\t /\n\t@Prop() public _total!: number;\n\n\t/\n\t Gibt an, welche Button-Variante verwendet werden soll.\n\t /\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n\n\t@State() public state: States = {\n\t\t_boundaryCount: 1,\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_total: 0,\n\t\t_variant: 'normal',\n\t};\n\n\tprivate onClick = (event: Event, page: number) => {\n\t\tif (typeof this.state._on.onClick === 'function') {\n\t\t\tthis.state._on.onClick(event, page);\n\t\t}\n\t\tthis.onChangePage(event, page);\n\t};\n\n\tprivate onChangePage = (event: Event, page: number) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tif (typeof this.state._on.onChangePage === 'function') {\n\t\t\t\tthis.state._on.onChangePage(event, page);\n\t\t\t}\n\t\t});\n\t};\n\n\tprivate onChangePageSize = (event: Event, value: unknown) => {\n\t\tvalue = parseInt((value as string[])[0]);\n\t\tif (typeof value === 'number' && value > 0 && this._pageSize !== value) {\n\t\t\tthis._pageSize = value;\n\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t\tif (typeof this.state._on.onChangePageSize === 'function') {\n\t\t\t\t\tthis.state._on.onChangePageSize(event, this._pageSize);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate readonly onGoToFirst = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, 1);\n\t\t},\n\t};\n\tprivate readonly onGoToEnd = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.getCount());\n\t\t},\n\t};\n\tprivate readonly onGoBackward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page - 1);\n\t\t},\n\t};\n\tprivate readonly onGoForward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page + 1);\n\t\t},\n\t};\n\n\tprivate getUnselectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<kol-button\n\t\t\t\texportparts=\"icon\"\n\t\t\t\tkey={`${this.nonce}-${page}`}\n\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t_ariaLabel={translate('kol-page-current', { placeholders: { page: page.toFixed(0) } })}\n\t\t\t\t_label={`${page}`}\n\t\t\t\t_on={{\n\t\t\t\t\tonClick: (event: Event) => {\n\t\t\t\t\t\tthis.onClick(event, page);\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t\t_variant={this.state._variant}\n\t\t\t></kol-button>\n\t\t);\n\t}\n\n\tprivate getSelectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<kol-button-wc\n\t\t\t\tclass=\"selected\"\n\t\t\t\tkey={`${this.nonce}-selected`}\n\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t_disabled={true}\n\t\t\t\t_ariaCurrent={true}\n\t\t\t\t_ariaLabel={translate('kol-page-selected', { placeholders: { page: page.toFixed(0) } })}\n\t\t\t\t_label={`${page}`}\n\t\t\t\t_variant={this.state._variant}\n\t\t\t/>\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?: string): void {\n\t\twatchString(this, '_customClass', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\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('_total') ? (nextState.get('_total') as number) : this.state._total;\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('_total') ? (nextState.get('_total') as number) : this.state._total;\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('_total')\n\tpublic validateTotal(value?: number): void {\n\t\twatchNumber(this, '_total', 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?: Alignment): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriButtonVariant): void {\n\t\twatchButtonVariant(this, '_variant', 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.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.validateTotal(this._total);\n\t\tthis.validateVariant(this._variant);\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"],"mappings":"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"}

package/dist/kolibri/kol-popover.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as s}from"./index-50adf9a0.js";import{c as o,o as e,f as a,s as n,a as h}from"./floating-ui.dom.esm-735f9fad.js";import{g as r}from"./dev.utils-157f0499.js";import{p as l}from"./reuse-3a02afb9.js";import{w as p}from"./prop.validators-e402ad49.js";import{v as d}from"./show-c455f9fd.js";import"./a11y.tipps-1cea9822.js";import"./index-81bd9b41.js";const c=(t,e)=>{p(t,"_alignment",e)},f=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{height:0;position:absolute}.popover{background-color:#fff;box-sizing:border-box;opacity:0;position:absolute}.hidden{display:none}.show{animation:0.3s ease-in forwards fadeInOpacity}.disappear{animation:0.3s ease-in backwards fadeInOpacity}.arrow{background-color:inherit;height:var(--font-size);position:absolute;rotate:0.125turn;width:var(--font-size);z-index:-1}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",u=class{constructor(i){t(this,i),this.alignPopover=t=>{setTimeout((()=>{var i;if("test"!==l&&this.triggerElement&&this.popoverElement){const s=this.triggerElement,r=this.popoverElement,l=this.arrowElement,p=[e(null!==(i=null==l?void 0:l.offsetHeight)&&void 0!==i?i:10),a(),n()];l&&p.push(h({element:l})),o(s,r,{placement:this.state._alignment,middleware:p}).then((({x:e,y:i,middlewareData:s,placement:o})=>{this.setPosition(e,i,s,o,t)}))}}))},this.showPopover=()=>{this.addListenersToBody(),this.alignPopover((()=>{this.state=Object.assign(Object.assign({},this.state),{_visible:!0})}))},this.hidePopoverByEscape=t=>{"Escape"===t.key&&this.hidePopover()},this.hidePopoverByClickOutside=t=>{this.host&&!this.host.contains(t.target)&&this.hidePopover()},this.catchHostAndTriggerElement=t=>{t&&(this.host=t,this.triggerElement=t.previousElementSibling)},this.catchPopoverElement=t=>{this.popoverElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._alignment="top",this._show=!1,this.state={_alignment:"top",_show:!1,_visible:!1}}setPosition(t,e,i,s,o){if(this.popoverElement){const a={left:this.popoverElement.style.left,top:this.popoverElement.style.top};if(Object.assign(this.popoverElement.style,{left:`${t}px`,top:`${e}px`}),this.arrowElement&&i.arrow)switch(s){case"top":this.arrowElement.style.inset=`100% auto auto ${i.arrow.x||0}px`,this.arrowElement.style.translate="0 -50%";break;case"right":this.arrowElement.style.inset=`${i.arrow.y||0}px 100% auto auto`,this.arrowElement.style.translate="50% 0";break;case"bottom":this.arrowElement.style.inset=`auto auto 100% ${i.arrow.x||0}px`,this.arrowElement.style.translate="0 50%";break;case"left":this.arrowElement.style.inset=`${i.arrow.y||0}px auto auto 100%`,this.arrowElement.style.translate="-50% 0"}a.left!==this.popoverElement.style.left||a.top!==this.popoverElement.style.top?this.alignPopover(o):"function"==typeof o&&o()}}hidePopover(){var t;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody()}addListenersToBody(){var t;const e=r().body;e.addEventListener("keyup",this.hidePopoverByEscape),e.addEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.addEventListener("scroll",this.showPopover,{passive:!0})}removeListenersToBody(){var t;const e=r().body;e.removeEventListener("keyup",this.hidePopoverByEscape),e.removeEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.removeEventListener("scroll",this.showPopover)}render(){return i(s,{ref:this.catchHostAndTriggerElement},i("div",{class:{popover:!0,hidden:!this.state._show,show:this.state._visible},ref:this.catchPopoverElement},i("div",{class:`arrow ${this.state._alignment}`,ref:this.catchArrowElement}),i("slot",null)))}validateAlignment(t){c(this,t)}validateShow(t){d(this,t),t&&this.showPopover()}componentWillLoad(){this.validateAlignment(this._alignment),this.validateShow(this._show)}static get watchers(){return{_alignment:["validateAlignment"],_show:["validateShow"]}}};u.style={default:f};export{u as kol_popover};
+import{r as t,h as i,H as s}from"./index-0e29e47a.js";import{c as o,o as e,f as a,s as n,a as h}from"./floating-ui.dom.esm-735f9fad.js";import{g as r}from"./dev.utils-157f0499.js";import{p as l}from"./reuse-3a02afb9.js";import{w as p}from"./prop.validators-e15a584f.js";import{v as c}from"./show-f85eb6d8.js";import"./a11y.tipps-1cea9822.js";import"./index-f4596895.js";const d=(t,e)=>{p(t,"_alignment",e)},f=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{height:0;position:absolute}.popover{background-color:#fff;box-sizing:border-box;opacity:0;position:absolute}.hidden{display:none}.show{animation:0.3s ease-in forwards fadeInOpacity}.disappear{animation:0.3s ease-in backwards fadeInOpacity}.arrow{background-color:inherit;height:var(--font-size);position:absolute;rotate:0.125turn;width:var(--font-size);z-index:-1}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",u=class{constructor(i){t(this,i),this.alignPopover=t=>{setTimeout((()=>{var i;if("test"!==l&&this.triggerElement&&this.popoverElement){const s=this.triggerElement,r=this.popoverElement,l=this.arrowElement,p=[e(null!==(i=null==l?void 0:l.offsetHeight)&&void 0!==i?i:10),a(),n()];l&&p.push(h({element:l})),o(s,r,{placement:this.state._alignment,middleware:p}).then((({x:e,y:i,middlewareData:s,placement:o})=>{this.setPosition(e,i,s,o,t)}))}}))},this.showPopover=()=>{this.addListenersToBody(),this.alignPopover((()=>{this.state=Object.assign(Object.assign({},this.state),{_visible:!0})}))},this.hidePopoverByEscape=t=>{"Escape"===t.key&&this.hidePopover()},this.hidePopoverByClickOutside=t=>{this.host&&!this.host.contains(t.target)&&this.hidePopover()},this.catchHostAndTriggerElement=t=>{t&&(this.host=t,this.triggerElement=t.previousElementSibling)},this.catchPopoverElement=t=>{this.popoverElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._alignment="top",this._show=!1,this.state={_alignment:"top",_show:!1,_visible:!1}}setPosition(t,e,i,s,o){if(this.popoverElement){const a={left:this.popoverElement.style.left,top:this.popoverElement.style.top};if(Object.assign(this.popoverElement.style,{left:`${t}px`,top:`${e}px`}),this.arrowElement&&i.arrow)switch(s){case"top":this.arrowElement.style.inset=`100% auto auto ${i.arrow.x||0}px`,this.arrowElement.style.translate="0 -50%";break;case"right":this.arrowElement.style.inset=`${i.arrow.y||0}px 100% auto auto`,this.arrowElement.style.translate="50% 0";break;case"bottom":this.arrowElement.style.inset=`auto auto 100% ${i.arrow.x||0}px`,this.arrowElement.style.translate="0 50%";break;case"left":this.arrowElement.style.inset=`${i.arrow.y||0}px auto auto 100%`,this.arrowElement.style.translate="-50% 0"}a.left!==this.popoverElement.style.left||a.top!==this.popoverElement.style.top?this.alignPopover(o):"function"==typeof o&&o()}}hidePopover(){var t;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody()}addListenersToBody(){var t;const e=r().body;e.addEventListener("keyup",this.hidePopoverByEscape),e.addEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.addEventListener("scroll",this.showPopover,{passive:!0})}removeListenersToBody(){var t;const e=r().body;e.removeEventListener("keyup",this.hidePopoverByEscape),e.removeEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.removeEventListener("scroll",this.showPopover)}render(){return i(s,{ref:this.catchHostAndTriggerElement},i("div",{class:{popover:!0,hidden:!this.state._show,show:this.state._visible},ref:this.catchPopoverElement},i("div",{class:`arrow ${this.state._alignment}`,ref:this.catchArrowElement}),i("slot",null)))}validateAlignment(t){d(this,t)}validateShow(t){c(this,t),t&&this.showPopover()}componentWillLoad(){this.validateAlignment(this._alignment),this.validateShow(this._show)}static get watchers(){return{_alignment:["validateAlignment"],_show:["validateShow"]}}};u.style={default:f};export{u as kol_popover};

package/dist/kolibri/kol-popover.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["validateAlignment","component","value","watchString","defaultStyleCss","KolPopover","this","alignPopover","callBack","setTimeout","processEnv","triggerElement","popoverElement","trigger","popoverEl","arrowEl","arrowElement","middleware","offset","_a","offsetHeight","flip","shift","push","arrow","element","computePosition","placement","state","_alignment","then","x","y","middlewareData","setPosition","showPopover","addListenersToBody","Object","assign","_visible","hidePopoverByEscape","event","key","hidePopover","hidePopoverByClickOutside","host","contains","target","catchHostAndTriggerElement","previousElementSibling","catchPopoverElement","catchArrowElement","_show","oldPos","left","style","top","inset","translate","focus","removeListenersToBody","body","getDocument","addEventListener","document","scrollingElement","passive","removeEventListener","render","h","Host","ref","class","popover","hidden","show","validateShow","componentWillLoad"],"sources":["./src/types/props/alignment.ts","./src/components/popover/style.css?tag=kol-popover&mode=default&encapsulation=shadow","./src/components/popover/shadow.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchString } from '../../utils/prop.validators';\n\n/* types /\n/* de\n * Markiert das Element als ausgewähltes/aktiviertes. Kann folgende Werte annehmen: `date` \| `location` \| `page` \| `step` \| `time` \| `true`.\n * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n /\n\n/* en\n * Marks the element as the selected in a group of related elements. Can be one of the following: `date` \| `location` \| `page` \| `step` \| `time` \| `true`.\n * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n /\ntype HorizontalAlignment = 'left' \| 'right';\ntype VerticalAlignment = 'top' \| 'bottom';\nexport type Alignment = HorizontalAlignment \| VerticalAlignment;\nexport type PropAlignment = {\n\talignment: Alignment;\n};\n\n/ validator /\nexport const validateAlignment = (component: Generic.Element.Component, value?: Alignment): void => {\n\twatchString(component, '_alignment', value);\n};\n","@import url(../style.css);\n:host {\n\theight: 0;\n\tposition: absolute;\n}\n.popover {\n\tbackground-color: #fff;\n\tbox-sizing: border-box;\n\topacity: 0;\n\tposition: absolute;\n}\n.hidden {\n\tdisplay: none;\n}\n.show {\n\tanimation: 0.3s ease-in forwards fadeInOpacity;\n}\n.disappear {\n\tanimation: 0.3s ease-in backwards fadeInOpacity;\n}\n.arrow {\n\tbackground-color: inherit;\n\theight: var(--font-size);\n\tposition: absolute;\n\trotate: 0.125turn;\n\twidth: var(--font-size);\n\tz-index: -1;\n}\n@keyframes fadeInOpacity {\n\t0% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n","import { MiddlewareData, Placement, arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { getDocument } from '../../utils/dev.utils';\nimport { processEnv } from '../../utils/reuse';\nimport { Alignment, PropAlignment, PropShow, validateAlignment, validateShow } from '../../types/props';\n\ntype RequiredProps = unknown;\ntype OptionalProps = PropAlignment & PropShow;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = PropAlignment & PropShow & { visible: boolean };\ntype OptionalStates = unknown;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\ntype API = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-popover',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolPopover implements API {\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement \| null;\n\tprivate host?: HTMLElement;\n\n\t/ Popover functions /\n\tprivate alignPopover = (callBack?: () => unknown): void => {\n\t\tsetTimeout(() => {\n\t\t\tif (processEnv !== 'test' && this.triggerElement && this.popoverElement) {\n\t\t\t\tconst trigger = this.triggerElement;\n\t\t\t\tconst popoverEl = this.popoverElement;\n\t\t\t\tconst arrowEl = this.arrowElement;\n\n\t\t\t\tconst middleware = [offset(arrowEl?.offsetHeight ?? 10), flip(), shift()];\n\t\t\t\tif (arrowEl) {\n\t\t\t\t\tmiddleware.push(arrow({ element: arrowEl }));\n\t\t\t\t}\n\n\t\t\t\tvoid computePosition(trigger, popoverEl, {\n\t\t\t\t\tplacement: this.state._alignment,\n\t\t\t\t\tmiddleware: middleware,\n\t\t\t\t}).then(({ x, y, middlewareData, placement }) => {\n\t\t\t\t\tthis.setPosition(x, y, middlewareData, placement, callBack);\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\t};\n\tprivate setPosition(x: number, y: number, middlewareData: MiddlewareData, placement: Placement, callBack?: () => unknown) {\n\t\tif (this.popoverElement) {\n\t\t\tconst oldPos = {\n\t\t\t\tleft: this.popoverElement.style.left,\n\t\t\t\ttop: this.popoverElement.style.top,\n\t\t\t};\n\t\t\tObject.assign(this.popoverElement.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t});\n\n\t\t\tif (this.arrowElement && middlewareData.arrow) {\n\t\t\t\tswitch (placement) {\n\t\t\t\t\tcase 'top':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `100% auto auto ${middlewareData.arrow.x \|\| 0}px`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '0 -50%';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'right':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `${middlewareData.arrow.y \|\| 0}px 100% auto auto`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '50% 0';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'bottom':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `auto auto 100% ${middlewareData.arrow.x \|\| 0}px`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '0 50%';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'left':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `${middlewareData.arrow.y \|\| 0}px auto auto 100%`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '-50% 0';\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (oldPos.left !== this.popoverElement.style.left \|\| oldPos.top !== this.popoverElement.style.top) {\n\t\t\t\tthis.alignPopover(callBack);\n\t\t\t} else if (typeof callBack === 'function') {\n\t\t\t\tcallBack();\n\t\t\t}\n\t\t}\n\t}\n\tprivate showPopover = (): void => {\n\t\tthis.addListenersToBody();\n\n\t\tthis.alignPopover(() => {\n\t\t\tthis.state = { ...this.state, _visible: true };\n\t\t});\n\t};\n\tprivate hidePopover(): void {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_visible: false,\n\t\t};\n\t\tthis._show = false;\n\t\tthis.triggerElement?.focus();\n\t\tthis.removeListenersToBody();\n\t}\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover();\n\t};\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover();\n\t\t}\n\t};\n\n\t/ EventListener functions /\n\tprivate addListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.addEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.addEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.addEventListener('scroll', this.showPopover, { passive: true });\n\t}\n\tprivate removeListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.removeEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.removeEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.removeEventListener('scroll', this.showPopover);\n\t}\n\n\t/ catchElement functions /\n\tprivate catchHostAndTriggerElement = (element: HTMLElement \| null): void => {\n\t\tif (element) {\n\t\t\tthis.host = element;\n\t\t\tthis.triggerElement = element.previousElementSibling as HTMLElement \| null;\n\t\t}\n\t};\n\tprivate catchPopoverElement = (element?: HTMLDivElement): void => {\n\t\tthis.popoverElement = element;\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostAndTriggerElement}>\n\t\t\t\t<div class={{ popover: true, hidden: !this.state._show, show: this.state._visible }} ref={this.catchPopoverElement}>\n\t\t\t\t\t<div class={`arrow ${this.state._alignment}`} ref={this.catchArrowElement} />\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Setzt die Ausrichtung des Popovers in Relation zum Triggerelement.\n\t /\n\t@Prop() public _alignment?: Alignment = 'top';\n\n\t/\n\t Öffnet/schließt das Popover.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_alignment: 'top',\n\t\t_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_alignment')\n\tpublic validateAlignment(value?: Alignment): void {\n\t\tvalidateAlignment(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) this.showPopover();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlignment(this._alignment);\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["validateAlignment","component","value","watchString","defaultStyleCss","KolPopover","this","alignPopover","callBack","setTimeout","processEnv","triggerElement","popoverElement","trigger","popoverEl","arrowEl","arrowElement","middleware","offset","_a","offsetHeight","flip","shift","push","arrow","element","computePosition","placement","state","_alignment","then","x","y","middlewareData","setPosition","showPopover","addListenersToBody","Object","assign","_visible","hidePopoverByEscape","event","key","hidePopover","hidePopoverByClickOutside","host","contains","target","catchHostAndTriggerElement","previousElementSibling","catchPopoverElement","catchArrowElement","_show","oldPos","left","style","top","inset","translate","focus","removeListenersToBody","body","getDocument","addEventListener","document","scrollingElement","passive","removeEventListener","render","h","Host","ref","class","popover","hidden","show","validateShow","componentWillLoad"],"sources":["./src/types/props/alignment.ts","./src/components/popover/style.css?tag=kol-popover&mode=default&encapsulation=shadow","./src/components/popover/shadow.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchString } from '../../utils/prop.validators';\n\n/* types /\n/* de\n * Markiert das Element als ausgewähltes/aktiviertes. Kann folgende Werte annehmen: `date` \| `location` \| `page` \| `step` \| `time` \| `true`.\n * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n /\n\n/* en\n * Marks the element as the selected in a group of related elements. Can be one of the following: `date` \| `location` \| `page` \| `step` \| `time` \| `true`.\n * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n /\ntype HorizontalAlignment = 'left' \| 'right';\ntype VerticalAlignment = 'top' \| 'bottom';\nexport type Alignment = HorizontalAlignment \| VerticalAlignment;\nexport type PropAlignment = {\n\talignment: Alignment;\n};\n\n/ validator /\nexport const validateAlignment = (component: Generic.Element.Component, value?: Alignment): void => {\n\twatchString(component, '_alignment', value);\n};\n","@import url(../style.css);\n:host {\n\theight: 0;\n\tposition: absolute;\n}\n.popover {\n\tbackground-color: #fff;\n\tbox-sizing: border-box;\n\topacity: 0;\n\tposition: absolute;\n}\n.hidden {\n\tdisplay: none;\n}\n.show {\n\tanimation: 0.3s ease-in forwards fadeInOpacity;\n}\n.disappear {\n\tanimation: 0.3s ease-in backwards fadeInOpacity;\n}\n.arrow {\n\tbackground-color: inherit;\n\theight: var(--font-size);\n\tposition: absolute;\n\trotate: 0.125turn;\n\twidth: var(--font-size);\n\tz-index: -1;\n}\n@keyframes fadeInOpacity {\n\t0% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n","import { MiddlewareData, Placement, arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { getDocument } from '../../utils/dev.utils';\nimport { processEnv } from '../../utils/reuse';\nimport { Alignment, PropAlignment, PropShow, validateAlignment, validateShow } from '../../types/props';\n\ntype RequiredProps = unknown;\ntype OptionalProps = PropAlignment & PropShow;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = PropAlignment & PropShow & { visible: boolean };\ntype OptionalStates = unknown;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\ntype API = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-popover',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolPopover implements API {\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement \| null;\n\tprivate host?: HTMLElement;\n\n\t/ Popover functions /\n\tprivate alignPopover = (callBack?: () => unknown): void => {\n\t\tsetTimeout(() => {\n\t\t\tif (processEnv !== 'test' && this.triggerElement && this.popoverElement) {\n\t\t\t\tconst trigger = this.triggerElement;\n\t\t\t\tconst popoverEl = this.popoverElement;\n\t\t\t\tconst arrowEl = this.arrowElement;\n\n\t\t\t\tconst middleware = [offset(arrowEl?.offsetHeight ?? 10), flip(), shift()];\n\t\t\t\tif (arrowEl) {\n\t\t\t\t\tmiddleware.push(arrow({ element: arrowEl }));\n\t\t\t\t}\n\n\t\t\t\tvoid computePosition(trigger, popoverEl, {\n\t\t\t\t\tplacement: this.state._alignment,\n\t\t\t\t\tmiddleware: middleware,\n\t\t\t\t}).then(({ x, y, middlewareData, placement }) => {\n\t\t\t\t\tthis.setPosition(x, y, middlewareData, placement, callBack);\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\t};\n\tprivate setPosition(x: number, y: number, middlewareData: MiddlewareData, placement: Placement, callBack?: () => unknown) {\n\t\tif (this.popoverElement) {\n\t\t\tconst oldPos = {\n\t\t\t\tleft: this.popoverElement.style.left,\n\t\t\t\ttop: this.popoverElement.style.top,\n\t\t\t};\n\t\t\tObject.assign(this.popoverElement.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t});\n\n\t\t\tif (this.arrowElement && middlewareData.arrow) {\n\t\t\t\tswitch (placement) {\n\t\t\t\t\tcase 'top':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `100% auto auto ${middlewareData.arrow.x \|\| 0}px`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '0 -50%';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'right':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `${middlewareData.arrow.y \|\| 0}px 100% auto auto`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '50% 0';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'bottom':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `auto auto 100% ${middlewareData.arrow.x \|\| 0}px`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '0 50%';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'left':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `${middlewareData.arrow.y \|\| 0}px auto auto 100%`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '-50% 0';\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (oldPos.left !== this.popoverElement.style.left \|\| oldPos.top !== this.popoverElement.style.top) {\n\t\t\t\tthis.alignPopover(callBack);\n\t\t\t} else if (typeof callBack === 'function') {\n\t\t\t\tcallBack();\n\t\t\t}\n\t\t}\n\t}\n\tprivate showPopover = (): void => {\n\t\tthis.addListenersToBody();\n\n\t\tthis.alignPopover(() => {\n\t\t\tthis.state = { ...this.state, _visible: true };\n\t\t});\n\t};\n\tprivate hidePopover(): void {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_visible: false,\n\t\t};\n\t\tthis._show = false;\n\t\tthis.triggerElement?.focus();\n\t\tthis.removeListenersToBody();\n\t}\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover();\n\t};\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover();\n\t\t}\n\t};\n\n\t/ EventListener functions /\n\tprivate addListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.addEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.addEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.addEventListener('scroll', this.showPopover, { passive: true });\n\t}\n\tprivate removeListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.removeEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.removeEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.removeEventListener('scroll', this.showPopover);\n\t}\n\n\t/ catchElement functions /\n\tprivate catchHostAndTriggerElement = (element: HTMLElement \| null): void => {\n\t\tif (element) {\n\t\t\tthis.host = element;\n\t\t\tthis.triggerElement = element.previousElementSibling as HTMLElement \| null;\n\t\t}\n\t};\n\tprivate catchPopoverElement = (element?: HTMLDivElement): void => {\n\t\tthis.popoverElement = element;\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostAndTriggerElement}>\n\t\t\t\t<div class={{ popover: true, hidden: !this.state._show, show: this.state._visible }} ref={this.catchPopoverElement}>\n\t\t\t\t\t<div class={`arrow ${this.state._alignment}`} ref={this.catchArrowElement} />\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Setzt die Ausrichtung des Popovers in Relation zum Triggerelement.\n\t /\n\t@Prop() public _alignment?: Alignment = 'top';\n\n\t/\n\t Öffnet/schließt das Popover.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_alignment: 'top',\n\t\t_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_alignment')\n\tpublic validateAlignment(value?: Alignment): void {\n\t\tvalidateAlignment(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) this.showPopover();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlignment(this._alignment);\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"mappings":";;;kXAqBO,MAAMA,EAAoB,CAACC,EAAsCC,KACvEC,EAAYF,EAAW,aAAcC,EAAM,ECtB5C,MAAME,EAAkB,6kC,MCyBXC,EAAU,M,yBAOdC,KAAAC,aAAgBC,IACvBC,YAAW,K,MACV,GAAIC,IAAe,QAAUJ,KAAKK,gBAAkBL,KAAKM,eAAgB,CACxE,MAAMC,EAAUP,KAAKK,eACrB,MAAMG,EAAYR,KAAKM,eACvB,MAAMG,EAAUT,KAAKU,aAErB,MAAMC,EAAa,CAACC,GAAOC,EAAAJ,IAAO,MAAPA,SAAO,SAAPA,EAASK,gBAAY,MAAAD,SAAA,EAAAA,EAAI,IAAKE,IAAQC,KACjE,GAAIP,EAAS,CACZE,EAAWM,KAAKC,EAAM,CAAEC,QAASV,I,MAG7BW,EAAgBb,EAASC,EAAW,CACxCa,UAAWrB,KAAKsB,MAAMC,WACtBZ,WAAYA,IACVa,MAAK,EAAGC,IAAGC,IAAGC,iBAAgBN,gBAChCrB,KAAK4B,YAAYH,EAAGC,EAAGC,EAAgBN,EAAWnB,EAAS,G,IAG5D,EAwCKF,KAAA6B,YAAc,KACrB7B,KAAK8B,qBAEL9B,KAAKC,cAAa,KACjBD,KAAKsB,MAAKS,OAAAC,OAAAD,OAAAC,OAAA,GAAQhC,KAAKsB,OAAK,CAAEW,SAAU,MAAM,GAC7C,EAWKjC,KAAAkC,oBAAuBC,IAC9B,GAAIA,EAAMC,MAAQ,SAAUpC,KAAKqC,aAAa,EAEvCrC,KAAAsC,0BAA6BH,IACpC,GAAInC,KAAKuC,OAASvC,KAAKuC,KAAKC,SAASL,EAAMM,QAAwB,CAClEzC,KAAKqC,a,GAmBCrC,KAAA0C,2BAA8BvB,IACrC,GAAIA,EAAS,CACZnB,KAAKuC,KAAOpB,EACZnB,KAAKK,eAAiBc,EAAQwB,sB,GAGxB3C,KAAA4C,oBAAuBzB,IAC9BnB,KAAKM,eAAiBa,CAAO,EAEtBnB,KAAA6C,kBAAqB1B,IAC5BnB,KAAKU,aAAeS,CAAO,E,gBAiBY,M,WAKyB,M,WAEjC,CAC/BI,WAAY,MACZuB,MAAO,MACPb,SAAU,M,CAnHHL,YAAYH,EAAWC,EAAWC,EAAgCN,EAAsBnB,GAC/F,GAAIF,KAAKM,eAAgB,CACxB,MAAMyC,EAAS,CACdC,KAAMhD,KAAKM,eAAe2C,MAAMD,KAChCE,IAAKlD,KAAKM,eAAe2C,MAAMC,KAEhCnB,OAAOC,OAAOhC,KAAKM,eAAe2C,MAAO,CACxCD,KAAM,GAAGvB,MACTyB,IAAK,GAAGxB,QAGT,GAAI1B,KAAKU,cAAgBiB,EAAeT,MAAO,CAC9C,OAAQG,GACP,IAAK,MACJrB,KAAKU,aAAauC,MAAME,MAAQ,kBAAkBxB,EAAeT,MAAMO,GAAK,MAC5EzB,KAAKU,aAAauC,MAAMG,UAAY,SACpC,MACD,IAAK,QACJpD,KAAKU,aAAauC,MAAME,MAAQ,GAAGxB,EAAeT,MAAMQ,GAAK,qBAC7D1B,KAAKU,aAAauC,MAAMG,UAAY,QACpC,MACD,IAAK,SACJpD,KAAKU,aAAauC,MAAME,MAAQ,kBAAkBxB,EAAeT,MAAMO,GAAK,MAC5EzB,KAAKU,aAAauC,MAAMG,UAAY,QACpC,MACD,IAAK,OACJpD,KAAKU,aAAauC,MAAME,MAAQ,GAAGxB,EAAeT,MAAMQ,GAAK,qBAC7D1B,KAAKU,aAAauC,MAAMG,UAAY,SACpC,M,CAGH,GAAIL,EAAOC,OAAShD,KAAKM,eAAe2C,MAAMD,MAAQD,EAAOG,MAAQlD,KAAKM,eAAe2C,MAAMC,IAAK,CACnGlD,KAAKC,aAAaC,E,MACZ,UAAWA,IAAa,WAAY,CAC1CA,G,GAWKmC,c,MACPrC,KAAKsB,MAAKS,OAAAC,OAAAD,OAAAC,OAAA,GACNhC,KAAKsB,OAAK,CACbW,SAAU,QAEXjC,KAAK8C,MAAQ,OACbjC,EAAAb,KAAKK,kBAAc,MAAAQ,SAAA,SAAAA,EAAEwC,QACrBrD,KAAKsD,uB,CAYExB,qB,MACP,MAAMyB,EAAOC,IAAcD,KAC3BA,EAAKE,iBAAiB,QAASzD,KAAKkC,qBACpCqB,EAAKE,iBAAiB,QAASzD,KAAKsC,4BACpCzB,EAAA6C,SAASC,oBAAgB,MAAA9C,SAAA,SAAAA,EAAE4C,iBAAiB,SAAUzD,KAAK6B,YAAa,CAAE+B,QAAS,M,CAE5EN,wB,MACP,MAAMC,EAAOC,IAAcD,KAC3BA,EAAKM,oBAAoB,QAAS7D,KAAKkC,qBACvCqB,EAAKM,oBAAoB,QAAS7D,KAAKsC,4BACvCzB,EAAA6C,SAASC,oBAAgB,MAAA9C,SAAA,SAAAA,EAAEgD,oBAAoB,SAAU7D,KAAK6B,Y,CAiBxDiC,SACN,OACCC,EAACC,EAAI,CAACC,IAAKjE,KAAK0C,4BACfqB,EAAA,OAAKG,MAAO,CAAEC,QAAS,KAAMC,QAASpE,KAAKsB,MAAMwB,MAAOuB,KAAMrE,KAAKsB,MAAMW,UAAYgC,IAAKjE,KAAK4C,qBAC9FmB,EAAA,OAAKG,MAAO,SAASlE,KAAKsB,MAAMC,aAAc0C,IAAKjE,KAAK6C,oBACxDkB,EAAA,c,CAuBGrE,kBAAkBE,GACxBF,EAAkBM,KAAMJ,E,CAIlB0E,aAAa1E,GACnB0E,EAAatE,KAAMJ,GACnB,GAAIA,EAAOI,KAAK6B,a,CAGV0C,oBACNvE,KAAKN,kBAAkBM,KAAKuB,YAC5BvB,KAAKsE,aAAatE,KAAK8C,M"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as t,H as i}from"./index-50adf9a0.js";import{w as a,e as s}from"./prop.validators-e402ad49.js";import"./a11y.tipps-1cea9822.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-81bd9b41.js";const r=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}[hidden],progress{display:block;height:0;overflow:hidden;width:0}.bar,.cycle{transition:0.5s ease-in-out 0.25s}.cycle{transform-origin:50% 50%;transform:rotate(-90deg)}",n=e=>"cycle"===e._type?t("svg",{width:"100",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},t("circle",{fill:"none",stroke:"#efefef",cx:"6px",cy:"6px",r:"5px"}),t("text",{"aria-hidden":"true","font-size":"0.1em",x:"50%",y:"50%","text-anchor":"middle",fill:"currentColor"},e._label&&t("tspan",{"text-anchor":"middle",x:"50%",dy:"-0.5em"},e._label),t("tspan",{"text-anchor":"middle",x:"50%",dy:e._label?"1em":"0em"},e._value,e._unit)),t("circle",{class:"cycle","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*32)}px 32px`,fill:"none",stroke:"#0075ff",cx:"6px",cy:"6px",r:"5px"})):t("div",null,e._label&&t("div",null,e._label),t("div",{style:{display:"flex",gap:"0.3em"}},t("svg",{width:"100",viewBox:"0 0 24 2",xmlns:"http://www.w3.org/2000/svg"},t("line",{"stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:"23",y2:"1",fill:"#efefef",stroke:"#efefef"}),t("line",{class:"bar","stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:`${1+Math.round(e._value/e._max*22)}`,y2:"1",fill:"#0075ff",stroke:"#0075ff"})),t("text",{"aria-hidden":"true","font-size":"0.1em","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},e._value,e._unit))),l=class{constructor(t){e(this,t),this._label=void 0,this._max=void 0,this._type=void 0,this._unit="%",this._value=void 0,this.state={_max:100,_type:"bar",_unit:"%",_value:0,_liveValue:0}}render(){return t(i,null,n(this.state),t("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),t("span",{"aria-live":"polite","aria-relevant":"removals text",hidden:!0},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(t){a(this,"_label",t)}validateMax(t){"number"!=typeof t&&(t=100),s(this,"_max",t,{required:!0})}validateType(t){if("cycle"===t);else t="bar";this.state=Object.assign(Object.assign({},this.state),{_type:t})}validateUnit(t){a(this,"_unit",t)}validateValue(t){"number"!=typeof t&&(t=0),s(this,"_value",t,{required:!0})}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateType(this._type),this.validateUnit(this._unit),this.validateValue(this._value),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"],_type:["validateType"],_unit:["validateUnit"],_value:["validateValue"]}}};l.style={default:r};export{l as kol_progress};
+import{r as e,h as t,H as i}from"./index-0e29e47a.js";import{w as a,e as s}from"./prop.validators-e15a584f.js";import"./a11y.tipps-1cea9822.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-f4596895.js";const r=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}[hidden],progress{display:block;height:0;overflow:hidden;width:0}.bar,.cycle{transition:0.5s ease-in-out 0.25s}.cycle{transform-origin:50% 50%;transform:rotate(-90deg)}",n=e=>"cycle"===e._type?t("svg",{width:"100",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},t("circle",{fill:"none",stroke:"#efefef",cx:"6px",cy:"6px",r:"5px"}),t("text",{"aria-hidden":"true","font-size":"0.1em",x:"50%",y:"50%","text-anchor":"middle",fill:"currentColor"},e._label&&t("tspan",{"text-anchor":"middle",x:"50%",dy:"-0.5em"},e._label),t("tspan",{"text-anchor":"middle",x:"50%",dy:e._label?"1em":"0em"},e._value,e._unit)),t("circle",{class:"cycle","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*32)}px 32px`,fill:"none",stroke:"#0075ff",cx:"6px",cy:"6px",r:"5px"})):t("div",null,e._label&&t("div",null,e._label),t("div",{style:{display:"flex",gap:"0.3em"}},t("svg",{width:"100",viewBox:"0 0 24 2",xmlns:"http://www.w3.org/2000/svg"},t("line",{"stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:"23",y2:"1",fill:"#efefef",stroke:"#efefef"}),t("line",{class:"bar","stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:`${1+Math.round(e._value/e._max*22)}`,y2:"1",fill:"#0075ff",stroke:"#0075ff"})),t("text",{"aria-hidden":"true","font-size":"0.1em","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},e._value,e._unit))),l=class{constructor(t){e(this,t),this._label=void 0,this._max=void 0,this._type=void 0,this._unit="%",this._value=void 0,this.state={_max:100,_type:"bar",_unit:"%",_value:0,_liveValue:0}}render(){return t(i,null,n(this.state),t("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),t("span",{"aria-live":"polite","aria-relevant":"removals text",hidden:!0},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(t){a(this,"_label",t)}validateMax(t){"number"!=typeof t&&(t=100),s(this,"_max",t,{required:!0})}validateType(t){if("cycle"===t);else t="bar";this.state=Object.assign(Object.assign({},this.state),{_type:t})}validateUnit(t){a(this,"_unit",t)}validateValue(t){"number"!=typeof t&&(t=0),s(this,"_value",t,{required:!0})}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateType(this._type),this.validateUnit(this._unit),this.validateValue(this._value),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"],_type:["validateType"],_unit:["validateUnit"],_value:["validateValue"]}}};l.style={default:r};export{l as kol_progress};

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

	@@ -1 +1 @@
1	- {"version":3,"names":["defaultStyleCss","createProgressSVG","state","_type","h","width","viewBox","xmlns","fill","stroke","cx","cy","r","x","y","_label","dy","_value","_unit","class","Math","round","_max","style","display","gap","x1","y1","x2","y2","KolProcess","_liveValue","render","Host","this","max","value","hidden","validateLabel","watchString","validateMax","watchNumber","required","validateType","Object","assign","validateUnit","validateValue","componentWillLoad","interval","setInterval","disconnectedCallback","clearInterval"],"sources":["./src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","./src/components/progress/component.tsx"],"sourcesContent":["@import url(../style.css);\n[hidden],\nprogress {\n\tdisplay: block;\n\theight: 0;\n\toverflow: hidden;\n\twidth: 0;\n}\n.bar,\n.cycle {\n\ttransition: 0.5s ease-in-out 0.25s;\n}\n.cycle {\n\ttransform-origin: 50% 50%;\n\ttransform: rotate(-90deg);\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { KoliBriProgressType } from '../../types/progress';\nimport { PropLabel } from '../../types/props';\nimport { watchNumber, watchString } from '../../utils/prop.validators';\n\ntype RequiredProps = {\n\tmax: number;\n\tvalue: number;\n};\ntype OptionalProps = PropLabel & {\n\ttype: KoliBriProgressType;\n\tunit: string;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & {\n\tliveValue: number;\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: States): JSX.Element => {\n\tswitch (state._type) {\n\t\tcase 'cycle':\n\t\t\treturn (\n\t\t\t\t<svg width=\"100\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle fill=\"none\" stroke=\"#efefef\" cx=\"6px\" cy=\"6px\" r=\"5px\"></circle>\n\t\t\t\t\t<text aria-hidden=\"true\" font-size=\"0.1em\" x=\"50%\" y=\"50%\" text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t{state._label && (\n\t\t\t\t\t\t\t<tspan text-anchor=\"middle\" x=\"50%\" dy=\"-0.5em\">\n\t\t\t\t\t\t\t\t{state._label}\n\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<tspan text-anchor=\"middle\" x=\"50%\" dy={state._label ? '1em' : '0em'}>\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</tspan>\n\t\t\t\t\t</text>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"cycle\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * 32)}px 32px`}\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t\tcx=\"6px\"\n\t\t\t\t\t\tcy=\"6px\"\n\t\t\t\t\t\tr=\"5px\"\n\t\t\t\t\t></circle>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div>\n\t\t\t\t\t{state._label && <div>{state._label}</div>}\n\t\t\t\t\t<div style={{ display: 'flex', gap: '0.3em' }}>\n\t\t\t\t\t\t<svg width=\"100\" viewBox=\"0 0 24 2\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<line stroke-width=\"2\" x1=\"1\" stroke-linecap=\"round\" y1=\"1\" x2=\"23\" y2=\"1\" fill=\"#efefef\" stroke=\"#efefef\"></line>\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tclass=\"bar\"\n\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\tx1=\"1\"\n\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\ty1=\"1\"\n\t\t\t\t\t\t\t\tx2={`${1 + Math.round((state._value / state._max) * 22)}`}\n\t\t\t\t\t\t\t\ty2=\"1\"\n\t\t\t\t\t\t\t\tfill=\"#0075ff\"\n\t\t\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t\t\t></line>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<text aria-hidden=\"true\" font-size=\"0.1em\" text-anchor=\"middle\" dominant-baseline=\"central\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate interval?: NodeJS.Timer;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t<progress aria-busy={this.state._value < this.state._max ? 'true' : 'false'} max={this.state._max} value={this.state._value}></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" hidden>\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/*\n\t Setzt die Bezeichnung der Fortschrittsanzeige.\n\t /\n\t@Prop() public _label?: string;\n\n\t/\n\t Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.\n\t /\n\t@Prop() public _max!: number;\n\n\t/\n\t Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.\n\t /\n\t@Prop() public _type?: KoliBriProgressType;\n\n\t/\n\t Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)\n\t /\n\t@Prop() public _unit?: string = '%';\n\n\t/\n\t Gibt an, wie weit die Anzeige fortgeschritten ist.\n\t */\n\t@Prop() public _value!: number;\n\n\t@State() public state: States = {\n\t\t_max: 100,\n\t\t_type: 'bar',\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\twatchString(this, '_label', 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('_type')\n\tpublic validateType(value?: KoliBriProgressType): void {\n\t\tswitch (value) {\n\t\t\tcase 'cycle':\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tvalue = 'bar';\n\t\t}\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_type: value,\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\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateType(this._type);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\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);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"mappings":";;;wOAAA,MAAMA,EAAkB~~,+0BCwBxB~~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"}
1	+ {"version":3,"names":["defaultStyleCss","createProgressSVG","state","_type","h","width","viewBox","xmlns","fill","stroke","cx","cy","r","x","y","_label","dy","_value","_unit","class","Math","round","_max","style","display","gap","x1","y1","x2","y2","KolProcess","_liveValue","render","Host","this","max","value","hidden","validateLabel","watchString","validateMax","watchNumber","required","validateType","Object","assign","validateUnit","validateValue","componentWillLoad","interval","setInterval","disconnectedCallback","clearInterval"],"sources":["./src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","./src/components/progress/component.tsx"],"sourcesContent":["@import url(../style.css);\n[hidden],\nprogress {\n\tdisplay: block;\n\theight: 0;\n\toverflow: hidden;\n\twidth: 0;\n}\n.bar,\n.cycle {\n\ttransition: 0.5s ease-in-out 0.25s;\n}\n.cycle {\n\ttransform-origin: 50% 50%;\n\ttransform: rotate(-90deg);\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { KoliBriProgressType } from '../../types/progress';\nimport { PropLabel } from '../../types/props';\nimport { watchNumber, watchString } from '../../utils/prop.validators';\n\ntype RequiredProps = {\n\tmax: number;\n\tvalue: number;\n};\ntype OptionalProps = PropLabel & {\n\ttype: KoliBriProgressType;\n\tunit: string;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & {\n\tliveValue: number;\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: States): JSX.Element => {\n\tswitch (state._type) {\n\t\tcase 'cycle':\n\t\t\treturn (\n\t\t\t\t<svg width=\"100\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle fill=\"none\" stroke=\"#efefef\" cx=\"6px\" cy=\"6px\" r=\"5px\"></circle>\n\t\t\t\t\t<text aria-hidden=\"true\" font-size=\"0.1em\" x=\"50%\" y=\"50%\" text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t{state._label && (\n\t\t\t\t\t\t\t<tspan text-anchor=\"middle\" x=\"50%\" dy=\"-0.5em\">\n\t\t\t\t\t\t\t\t{state._label}\n\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<tspan text-anchor=\"middle\" x=\"50%\" dy={state._label ? '1em' : '0em'}>\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</tspan>\n\t\t\t\t\t</text>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"cycle\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * 32)}px 32px`}\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t\tcx=\"6px\"\n\t\t\t\t\t\tcy=\"6px\"\n\t\t\t\t\t\tr=\"5px\"\n\t\t\t\t\t></circle>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div>\n\t\t\t\t\t{state._label && <div>{state._label}</div>}\n\t\t\t\t\t<div style={{ display: 'flex', gap: '0.3em' }}>\n\t\t\t\t\t\t<svg width=\"100\" viewBox=\"0 0 24 2\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<line stroke-width=\"2\" x1=\"1\" stroke-linecap=\"round\" y1=\"1\" x2=\"23\" y2=\"1\" fill=\"#efefef\" stroke=\"#efefef\"></line>\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tclass=\"bar\"\n\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\tx1=\"1\"\n\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\ty1=\"1\"\n\t\t\t\t\t\t\t\tx2={`${1 + Math.round((state._value / state._max) * 22)}`}\n\t\t\t\t\t\t\t\ty2=\"1\"\n\t\t\t\t\t\t\t\tfill=\"#0075ff\"\n\t\t\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t\t\t></line>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<text aria-hidden=\"true\" font-size=\"0.1em\" text-anchor=\"middle\" dominant-baseline=\"central\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate interval?: NodeJS.Timer;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t<progress aria-busy={this.state._value < this.state._max ? 'true' : 'false'} max={this.state._max} value={this.state._value}></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" hidden>\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/*\n\t Setzt die Bezeichnung der Fortschrittsanzeige.\n\t /\n\t@Prop() public _label?: string;\n\n\t/\n\t Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.\n\t /\n\t@Prop() public _max!: number;\n\n\t/\n\t Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.\n\t /\n\t@Prop() public _type?: KoliBriProgressType;\n\n\t/\n\t Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)\n\t /\n\t@Prop() public _unit?: string = '%';\n\n\t/\n\t Gibt an, wie weit die Anzeige fortgeschritten ist.\n\t */\n\t@Prop() public _value!: number;\n\n\t@State() public state: States = {\n\t\t_max: 100,\n\t\t_type: 'bar',\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\twatchString(this, '_label', 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('_type')\n\tpublic validateType(value?: KoliBriProgressType): void {\n\t\tswitch (value) {\n\t\t\tcase 'cycle':\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tvalue = 'bar';\n\t\t}\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_type: value,\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\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateType(this._type);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\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);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as e}from"./index-50adf9a0.js";import{w as n,a}from"./prop.validators-e402ad49.js";import"./a11y.tipps-1cea9822.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-81bd9b41.js";const o=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}cite,figure,q+figcaption{display:inline;margin:0;padding:0}blockquote:before{content:open-quote}blockquote::after{content:close-quote}cite:before{content:'—'}.block cite:before{padding-right:0.5em}.inline cite:before{padding:0.5em}",r=class{constructor(i){t(this,i),this._caption=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateCaption(t){n(this,"_caption",t)}validateHref(t){n(this,"_href",t,{required:!0})}validateQuote(t){n(this,"_quote",t,{required:!0})}validateVariant(t){a(this,"_variant",(t=>"block"===t||"inline"===t),new Set(["block","inline"]),t)}componentWillLoad(){this.validateCaption(this._caption),this.validateHref(this._href),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const t=""!==this.state._quote;return i(e,null,i("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?i("blockquote",{cite:this.state._href},this.state._quote,i("span",{"aria-hidden":t?"true":void 0,hidden:t},i("slot",{name:"expert"}))):i("q",{cite:this.state._href},this.state._quote,i("span",{"aria-hidden":t?"true":void 0,hidden:t},i("slot",{name:"expert"}))),"string"==typeof this.state._caption&&this.state._caption.length>0&&i("figcaption",null,i("cite",null,i("kol-link",{_href:this.state._href,_label:this.state._caption,_target:"_blank"})))))}static get watchers(){return{_caption:["validateCaption"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};r.style={default:o};export{r as kol_quote};
+import{r as t,h as i,H as e}from"./index-0e29e47a.js";import{w as n,a}from"./prop.validators-e15a584f.js";import"./a11y.tipps-1cea9822.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-f4596895.js";const o=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}cite,figure,q+figcaption{display:inline;margin:0;padding:0}blockquote:before{content:open-quote}blockquote::after{content:close-quote}cite:before{content:'—'}.block cite:before{padding-right:0.5em}.inline cite:before{padding:0.5em}",r=class{constructor(i){t(this,i),this._caption=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateCaption(t){n(this,"_caption",t)}validateHref(t){n(this,"_href",t,{required:!0})}validateQuote(t){n(this,"_quote",t,{required:!0})}validateVariant(t){a(this,"_variant",(t=>"block"===t||"inline"===t),new Set(["block","inline"]),t)}componentWillLoad(){this.validateCaption(this._caption),this.validateHref(this._href),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const t=""!==this.state._quote;return i(e,null,i("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?i("blockquote",{cite:this.state._href},this.state._quote,i("span",{"aria-hidden":t?"true":void 0,hidden:t},i("slot",{name:"expert"}))):i("q",{cite:this.state._href},this.state._quote,i("span",{"aria-hidden":t?"true":void 0,hidden:t},i("slot",{name:"expert"}))),"string"==typeof this.state._caption&&this.state._caption.length>0&&i("figcaption",null,i("cite",null,i("kol-link",{_href:this.state._href,_label:this.state._caption,_target:"_blank"})))))}static get watchers(){return{_caption:["validateCaption"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};r.style={default:o};export{r as kol_quote};

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

	@@ -1 +1 @@
1	- {"version":3,"names":["defaultStyleCss","KolQuote","_href","_quote","_variant","validateCaption","value","watchString","this","validateHref","required","validateQuote","validateVariant","watchValidator","Set","componentWillLoad","_caption","render","hideExpertSlot","state","h","Host","class","cite","undefined","hidden","name","length","_label","_target"],"sources":["./src/components/quote/style.css?tag=kol-quote&mode=default&encapsulation=shadow","./src/components/quote/shadow.tsx"],"sourcesContent":["@import url(../style.css);\ncite,\nfigure,\nq + figcaption {\n\tdisplay: inline;\n\tmargin: 0;\n\tpadding: 0;\n}\nblockquote:before {\n\tcontent: open-quote;\n}\nblockquote::after {\n\tcontent: close-quote;\n}\ncite:before {\n\tcontent: '—';\n}\n.block cite:before {\n\tpadding-right: 0.5em;\n}\n.inline cite:before {\n\tpadding: 0.5em;\n}\n","import { h, Component, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { ComponentApi, KoliBriQuoteVariant, States } from './types';\n\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements ComponentApi {\n\t/*\n\t Setzt die Überschrift.\n\t /\n\t@Prop() public _caption?: string;\n\n\t/\n\t Link auf die Quelle des Zitates.\n\t /\n\t@Prop() public _href!: string;\n\n\t/\n\t Setzt den Text, also das Zitat selbst.\n\t /\n\t@Prop() public _quote!: string;\n\n\t/\n\t Setzt die Variante des Zitats.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: States = {\n\t\t_href: '…', // ⚠ required\n\t\t_quote: '…', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\twatchString(this, '_caption', value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: string): 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(this, '_variant', (value) => value === 'block' \|\| value === 'inline', new Set(['block', 'inline']), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCaption(this._caption);\n\t\tthis.validateHref(this._href);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot = this.state._quote !== '';\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<figure\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t\t<blockquote cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</blockquote>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<q cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</q>\n\t\t\t\t\t)}\n\t\t\t\t\t{typeof this.state._caption === 'string' && this.state._caption.length > 0 && (\n\t\t\t\t\t\t<figcaption>\n\t\t\t\t\t\t\t<cite>\n\t\t\t\t\t\t\t\t<kol-link _href={this.state._href} _label={this.state._caption} _target=\"_blank\" />\n\t\t\t\t\t\t\t</cite>\n\t\t\t\t\t\t</figcaption>\n\t\t\t\t\t)}\n\t\t\t\t</figure>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;mOAAA,MAAMA,EAAkB,~~84B~~,MCWXC,EAAQ,M,0GAmB4B,S,WAEhB,CAC/BC,MAAO,IACPC,OAAQ,IACRC,SAAU,S,CAIJC,gBAAgBC,GACtBC,EAAYC,KAAM,WAAYF,E,CAIxBG,aAAaH,GACnBC,EAAYC,KAAM,QAASF,EAAO,CACjCI,SAAU,M,CAKLC,cAAcL,GACpBC,EAAYC,KAAM,SAAUF,EAAO,CAClCI,SAAU,M,CAKLE,gBAAgBN,GACtBO,EAAeL,KAAM,YAAaF,GAAUA,IAAU,SAAWA,IAAU,UAAU,IAAIQ,IAAI,CAAC,QAAS,WAAYR,E,CAG7GS,oBACNP,KAAKH,gBAAgBG,KAAKQ,UAC1BR,KAAKC,aAAaD,KAAKN,OACvBM,KAAKG,cAAcH,KAAKL,QACxBK,KAAKI,gBAAgBJ,KAAKJ,S,CAGpBa,SACN,MAAMC,EAAiBV,KAAKW,MAAMhB,SAAW,GAC7C,OACCiB,EAACC,EAAI,KACJD,EAAA,UACCE,MAAO,CACN,CAACd,KAAKW,MAAMf,UAAW,OAGvBI,KAAKW,MAAMf,WAAa,QACxBgB,EAAA,cAAYG,KAAMf,KAAKW,MAAMjB,OAC3BM,KAAKW,MAAMhB,OACZiB,EAAA,sBAAmBF,EAAiB,OAASM,UAAWC,OAAQP,GAC/DE,EAAA,QAAMM,KAAK,aAIbN,EAAA,KAAGG,KAAMf,KAAKW,MAAMjB,OAClBM,KAAKW,MAAMhB,OACZiB,EAAA,sBAAmBF,EAAiB,OAASM,UAAWC,OAAQP,GAC/DE,EAAA,QAAMM,KAAK,oBAINlB,KAAKW,MAAMH,WAAa,UAAYR,KAAKW,MAAMH,SAASW,OAAS,GACxEP,EAAA,kBACCA,EAAA,YACCA,EAAA,YAAUlB,MAAOM,KAAKW,MAAMjB,MAAO0B,OAAQpB,KAAKW,MAAMH,SAAUa,QAAQ,c"}
1	+ {"version":3,"names":["defaultStyleCss","KolQuote","_href","_quote","_variant","validateCaption","value","watchString","this","validateHref","required","validateQuote","validateVariant","watchValidator","Set","componentWillLoad","_caption","render","hideExpertSlot","state","h","Host","class","cite","undefined","hidden","name","length","_label","_target"],"sources":["./src/components/quote/style.css?tag=kol-quote&mode=default&encapsulation=shadow","./src/components/quote/shadow.tsx"],"sourcesContent":["@import url(../style.css);\ncite,\nfigure,\nq + figcaption {\n\tdisplay: inline;\n\tmargin: 0;\n\tpadding: 0;\n}\nblockquote:before {\n\tcontent: open-quote;\n}\nblockquote::after {\n\tcontent: close-quote;\n}\ncite:before {\n\tcontent: '—';\n}\n.block cite:before {\n\tpadding-right: 0.5em;\n}\n.inline cite:before {\n\tpadding: 0.5em;\n}\n","import { h, Component, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { ComponentApi, KoliBriQuoteVariant, States } from './types';\n\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements ComponentApi {\n\t/*\n\t Setzt die Überschrift.\n\t /\n\t@Prop() public _caption?: string;\n\n\t/\n\t Link auf die Quelle des Zitates.\n\t /\n\t@Prop() public _href!: string;\n\n\t/\n\t Setzt den Text, also das Zitat selbst.\n\t /\n\t@Prop() public _quote!: string;\n\n\t/\n\t Setzt die Variante des Zitats.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: States = {\n\t\t_href: '…', // ⚠ required\n\t\t_quote: '…', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\twatchString(this, '_caption', value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: string): 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(this, '_variant', (value) => value === 'block' \|\| value === 'inline', new Set(['block', 'inline']), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCaption(this._caption);\n\t\tthis.validateHref(this._href);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot = this.state._quote !== '';\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<figure\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t\t<blockquote cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</blockquote>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<q cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</q>\n\t\t\t\t\t)}\n\t\t\t\t\t{typeof this.state._caption === 'string' && this.state._caption.length > 0 && (\n\t\t\t\t\t\t<figcaption>\n\t\t\t\t\t\t\t<cite>\n\t\t\t\t\t\t\t\t<kol-link _href={this.state._href} _label={this.state._caption} _target=\"_blank\" />\n\t\t\t\t\t\t\t</cite>\n\t\t\t\t\t\t</figcaption>\n\t\t\t\t\t)}\n\t\t\t\t</figure>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;mOAAA,MAAMA,EAAkB,44B,MCWXC,EAAQ,M,0GAmB4B,S,WAEhB,CAC/BC,MAAO,IACPC,OAAQ,IACRC,SAAU,S,CAIJC,gBAAgBC,GACtBC,EAAYC,KAAM,WAAYF,E,CAIxBG,aAAaH,GACnBC,EAAYC,KAAM,QAASF,EAAO,CACjCI,SAAU,M,CAKLC,cAAcL,GACpBC,EAAYC,KAAM,SAAUF,EAAO,CAClCI,SAAU,M,CAKLE,gBAAgBN,GACtBO,EAAeL,KAAM,YAAaF,GAAUA,IAAU,SAAWA,IAAU,UAAU,IAAIQ,IAAI,CAAC,QAAS,WAAYR,E,CAG7GS,oBACNP,KAAKH,gBAAgBG,KAAKQ,UAC1BR,KAAKC,aAAaD,KAAKN,OACvBM,KAAKG,cAAcH,KAAKL,QACxBK,KAAKI,gBAAgBJ,KAAKJ,S,CAGpBa,SACN,MAAMC,EAAiBV,KAAKW,MAAMhB,SAAW,GAC7C,OACCiB,EAACC,EAAI,KACJD,EAAA,UACCE,MAAO,CACN,CAACd,KAAKW,MAAMf,UAAW,OAGvBI,KAAKW,MAAMf,WAAa,QACxBgB,EAAA,cAAYG,KAAMf,KAAKW,MAAMjB,OAC3BM,KAAKW,MAAMhB,OACZiB,EAAA,sBAAmBF,EAAiB,OAASM,UAAWC,OAAQP,GAC/DE,EAAA,QAAMM,KAAK,aAIbN,EAAA,KAAGG,KAAMf,KAAKW,MAAMjB,OAClBM,KAAKW,MAAMhB,OACZiB,EAAA,sBAAmBF,EAAiB,OAASM,UAAWC,OAAQP,GAC/DE,EAAA,QAAMM,KAAK,oBAINlB,KAAKW,MAAMH,WAAa,UAAYR,KAAKW,MAAMH,SAASW,OAAS,GACxEP,EAAA,kBACCA,EAAA,YACCA,EAAA,YAAUlB,MAAOM,KAAKW,MAAMjB,MAAO0B,OAAQpB,KAAKW,MAAMH,SAAUa,QAAQ,c"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as s}from"./index-50adf9a0.js";import{S as a,a as n}from"./reuse-3a02afb9.js";import{g as l}from"./controller-37d0d40b.js";import{w as r,d as o,b as h,e as d}from"./prop.validators-e402ad49.js";import{I as u}from"./controller-icon-6249a817.js";import{f as p}from"./controller-38789301.js";import{a as c}from"./a11y.tipps-1cea9822.js";import{h as f,c as v}from"./label-d51b1a57.js";import{n as m}from"./dev.utils-157f0499.js";import"./tab-index-63d1379d.js";import"./index-81bd9b41.js";import"./icon-00018c54.js";const b=t=>{if("object"==typeof t&&null!==t){if("string"==typeof t.label&&t.label.length>0)return t.disabled=!0===t.disabled,t.label=`${t.label}`.trim(),!1===f(t.label,3)&&!1===v(t.label)&&c(`Ein abweichendes Aria-Label (${t.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`),!Array.isArray(t.options)||void 0===t.options.find((t=>!1===b(t)));if("number"==typeof t.label)return!0}return!1};class y extends u{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchListValue=(t,e)=>{const i=e.has("_list")?e.get("_list"):this.component.state._list;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),p(this.keyOptionMap,i);const t=e.has("_value")?e.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],i);!1===this.component._multiple&&0===a.length?(e.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(t)&&a.length<t.length&&(e.set("_value",a),this.onStateChange())}},this.component=t}validateHeight(t){r(this.component,"_height",t)}validateList(t){o(this.component,"_list",b,t,void 0,{hooks:{beforePatch:this.beforePatchListValue}})}validateMultiple(t){h(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchListValue}})}validateRequired(t){h(this.component,"_required",t)}validateSize(t){d(this.component,"_size",t,{min:1})}validateValue(t){o(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchListValue}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(a)}))}},this.validateHeight(this.component._height),this.validateList(this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateSize(this.component._size),this.validateValue(this.component._value)}}const _=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",g=(t,e)=>Array.isArray(t)&&t.includes(e),k=class{renderOptgroup(e,i){var a;return t("optgroup",{disabled:!0===e.disabled,label:e.label},null===(a=e.options)||void 0===a?void 0:a.map(((e,a)=>{const s=`${i}-${a}`;return Array.isArray(e.options)?this.renderOptgroup(e,s):t("option",{disabled:!0===e.disabled,key:s,selected:g(this.state._value,e.value),value:s},e.label)})))}render(){const{ariaDescribedBy:i}=l(this.state);return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{select:!0},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("select",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",style:{height:this.state._height}},{onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus},{onChange:this.onChange}),this.state._list.map(((e,i)=>{const a=`-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:!0===e.disabled,key:a,selected:g(this.state._value,e.value),value:a},e.label)})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,n(this.host,this.ref)},this.onChange=t=>{var e,i;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._height=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=void 0,this._size=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_height:"",_id:m(),_list:[],_multiple:!1,_value:[]},this.controller=new y(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHeight(t){this.controller.validateHeight(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_size:["validateSize"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};k.style={default:_};export{k as kol_select};
+import{h as t,H as e,r as i,g as s}from"./index-0e29e47a.js";import{S as a,a as n}from"./reuse-3a02afb9.js";import{g as l}from"./controller-53ddde7c.js";import{w as r,d as o,b as h,e as d}from"./prop.validators-e15a584f.js";import{I as u}from"./controller-icon-26c0e34a.js";import{f as p}from"./controller-1ec68c46.js";import{a as c}from"./a11y.tipps-1cea9822.js";import{h as f,c as v}from"./label-4bfc9d30.js";import{n as m}from"./dev.utils-157f0499.js";import"./tab-index-eff012a1.js";import"./index-f4596895.js";import"./icon-dfcf642a.js";const y=t=>{if("object"==typeof t&&null!==t){if("string"==typeof t.label&&t.label.length>0)return t.disabled=!0===t.disabled,t.label=`${t.label}`.trim(),!1===f(t.label,3)&&!1===v(t.label)&&c(`Ein abweichendes Aria-Label (${t.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`),!Array.isArray(t.options)||void 0===t.options.find((t=>!1===y(t)));if("number"==typeof t.label)return!0}return!1};class b extends u{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchListValue=(t,e)=>{const i=e.has("_list")?e.get("_list"):this.component.state._list;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),p(this.keyOptionMap,i);const t=e.has("_value")?e.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],i);!1===this.component._multiple&&0===a.length?(e.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(t)&&a.length<t.length&&(e.set("_value",a),this.onStateChange())}},this.component=t}validateHeight(t){r(this.component,"_height",t)}validateList(t){o(this.component,"_list",y,t,void 0,{hooks:{beforePatch:this.beforePatchListValue}})}validateMultiple(t){h(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchListValue}})}validateRequired(t){h(this.component,"_required",t)}validateSize(t){d(this.component,"_size",t,{min:1})}validateValue(t){o(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchListValue}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(a)}))}},this.validateHeight(this.component._height),this.validateList(this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateSize(this.component._size),this.validateValue(this.component._value)}}const _=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",g=(t,e)=>Array.isArray(t)&&t.includes(e),k=class{renderOptgroup(e,i){var a;return t("optgroup",{disabled:!0===e.disabled,label:e.label},null===(a=e.options)||void 0===a?void 0:a.map(((e,a)=>{const s=`${i}-${a}`;return Array.isArray(e.options)?this.renderOptgroup(e,s):t("option",{disabled:!0===e.disabled,key:s,selected:g(this.state._value,e.value),value:s},e.label)})))}render(){const{ariaDescribedBy:i}=l(this.state);return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{select:!0},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("select",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",style:{height:this.state._height}},{onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus},{onChange:this.onChange}),this.state._list.map(((e,i)=>{const a=`-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:!0===e.disabled,key:a,selected:g(this.state._value,e.value),value:a},e.label)})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,n(this.host,this.ref)},this.onChange=t=>{var e,i;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._height=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=void 0,this._size=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_height:"",_id:m(),_list:[],_multiple:!1,_value:[]},this.controller=new b(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHeight(t){this.controller.validateHeight(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_size:["validateSize"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};k.style={default:_};export{k as kol_select};

package/dist/kolibri/kol-select.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["validateInputSelectList","option","label","length","disabled","trim","hasEnoughReadableChars","containsOnlyNumbers","a11yHint","Array","isArray","options","find","item","undefined","SelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","getOptionByKey","key","get","isValueInOptions","value","filterValuesInOptions","values","filter","beforePatchListValue","_value","nextState","list","has","state","_list","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHeight","watchString","validateList","watchJsonArrayString","hooks","beforePatch","validateMultiple","watchBoolean","validateRequired","validateSize","watchNumber","min","validateValue","setFormAssociatedValue","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_height","_required","_size","defaultStyleCss","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","_a","map","index","render","ariaDescribedBy","getRenderStates","Host","class","_hasValue","select","_disabled","_error","_hideLabel","_hint","_icon","_id","_touched","onClick","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","spellcheck","style","height","controller","onFacade","onBlur","onFocus","hostRef","propagateFocus","event","from","_b","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateName","validateOn","validateTabIndex","validateTouched","_alert","addValueChangeListener","v"],"sources":["./src/utils/validators/list.ts","./src/components/select/controller.ts","./src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","./src/components/select/component.tsx"],"sourcesContent":["import { Optgroup, SelectOption } from '../../types/input/types';\nimport { a11yHint } from '../a11y.tipps';\nimport { containsOnlyNumbers, hasEnoughReadableChars } from '../../types/props/label';\n\nexport const validateInputSelectList = <T>(option: SelectOption<T>): boolean => {\n\tif (typeof option === 'object' && option !== null) {\n\t\tif (typeof option.label === 'string' && option.label.length > 0) {\n\t\t\toption.disabled = option.disabled === true;\n\t\t\toption.label = `${option.label}`.trim();\n\t\t\tif (hasEnoughReadableChars(option.label, 3) === false && containsOnlyNumbers(option.label) === false) {\n\t\t\t\ta11yHint(\n\t\t\t\t\t`Ein abweichendes Aria-Label (${option.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (Array.isArray((option as Optgroup<T>).options)) {\n\t\t\t\treturn (\n\t\t\t\t\t(option as Optgroup<T>).options.find((item) => {\n\t\t\t\t\t\treturn validateInputSelectList(item) === false;\n\t\t\t\t\t}) === undefined\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn true;\n\t\t} else if (typeof option.label === 'number') {\n\t\t\treturn true;\n\t\t}\n\t}\n\treturn false;\n};\n","import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\nimport { Props, Watches } from './types';\nimport { validateInputSelectList } from '../../utils/validators/list';\n\nexport class SelectController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly getOptionByKey = (key: string): Option<W3CInputValue> \| undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<W3CInputValue>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<W3CInputValue>).value === 'string'\n\t\t\t\t\t? (option as Option<W3CInputValue>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t: false\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<W3CInputValue>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprivate readonly beforePatchListValue = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst list = nextState.has('_list') ? nextState.get('_list') : this.component.state._list;\n\t\tif (Array.isArray(list) && list.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, list as SelectOption<W3CInputValue>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(Array.isArray(value) && value.length > 0 ? (value as string[]) : [], list as SelectOption<W3CInputValue>[]);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\tlist[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t\tthis.onStateChange();\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t\tthis.onStateChange();\n\t\t\t}\n\t\t}\n\t};\n\n\t/*\n\t @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated Use _size instead.\n\t /\n\tpublic validateHeight(value?: string): void {\n\t\twatchString(this.component, '_height', value);\n\t}\n\n\tpublic validateList<T>(value?: SelectOption<T>[] \| string): void {\n\t\twatchJsonArrayString(this.component, '_list', validateInputSelectList, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Aktuell wird die Mehrfachauswahl noch nicht unterstützt. Wir sind dran die Mehrfachauswahl funktionsfähig zu implementieren, da der Browser-Standard hier ein paar Lücken hat.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] Bei der Mehrfachauswahl sollte zusätzlich auch die Listenlänge (size) gesetzt werden.');\n\t\t// }\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateSize(value?: number): void {\n\t\twatchNumber(this.component, '_size', value, {\n\t\t\tmin: 1,\n\t\t});\n\t}\n\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(onChange?: (event: Event) => void): void {\n\t\tsuper.componentWillLoad();\n\n\t\tthis.onStateChange = () => {\n\t\t\tif (typeof onChange === 'function') {\n\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\tonChange(STATE_CHANGE_EVENT);\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tthis.validateHeight(this.component._height);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateSize(this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { propagateFocus } from '../../utils/reuse';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\nconst isSelected = (valueList: unknown[] \| null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate ref?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled === true} label={optgroup.label}>\n\t\t\t\t{optgroup.options?.map((option: SelectOption<W3CInputValue>, index: number) => {\n\t\t\t\t\tconst key = `${preKey}-${index}`;\n\t\t\t\t\tif (Array.isArray((option as Optgroup<string>).options)) {\n\t\t\t\t\t\treturn this.renderOptgroup(option as Optgroup<string>, key);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</optgroup>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tselect: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<select\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t /\n\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\t\t\t\t\t\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t</option>\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</select>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/\n\t Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/\n\t Gibt den Text für eine Fehlermeldung an.\n\t /\n\t@Prop() public _error?: string;\n\n\t/\n\t Gibt an, ob eine individuelle Höhe übergeben werden soll.\n\t \n\t @deprecated Use _size instead.\n\t /\n\t@Prop() public _height?: string;\n\n\t/\n\t Versteckt das sichtbare Label des Elements.\n\t /\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/\n\t Gibt den Hinweistext an.\n\t /\n\t@Prop() public _hint?: string = '';\n\n\t/\n\t Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/\n\t Gibt die technische ID des Eingabefeldes an.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Gibt den technischen Namen des Eingabefeldes an.\n\t /\n\t@Prop() public _list!: Stringified<SelectOption<W3CInputValue>[]>;\n\n\t/\n\t Gibt an, ob mehrere Werte eingegeben werden können.\n\t /\n\t@Prop({ reflect: true }) public _multiple?: boolean = false;\n\n\t/\n\t Gibt den technischen Namen des Eingabefeldes an.\n\t /\n\t@Prop() public _name?: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für das Input-Event an.\n\t /\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/\n\t Macht das Eingabeelement zu einem Pflichtfeld.\n\t /\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/\n\t Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.\n\t /\n\t@Prop() public _size?: number;\n\n\t/\n\t Gibt an, welchen Tab-Index dieses Input hat.\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/\n\t Gibt den Wert des Eingabefeldes an.\n\t /\n\t@Prop({ mutable: true, reflect: false }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: States = {\n\t\t_hasValue: false,\n\t\t_height: '',\n\t\t_id: nonce(), // ⚠ required\n\t\t_list: [],\n\t\t_multiple: false,\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'textarea', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<SelectOption<W3CInputValue>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\t/\n\t\t TODO: Find values via value keys.\n\t\t */\n\t\tthis._value = Array.from(this.ref?.options \|\| [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t};\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["validateInputSelectList","option","label","length","disabled","trim","hasEnoughReadableChars","containsOnlyNumbers","a11yHint","Array","isArray","options","find","item","undefined","SelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","getOptionByKey","key","get","isValueInOptions","value","filterValuesInOptions","values","filter","beforePatchListValue","_value","nextState","list","has","state","_list","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHeight","watchString","validateList","watchJsonArrayString","hooks","beforePatch","validateMultiple","watchBoolean","validateRequired","validateSize","watchNumber","min","validateValue","setFormAssociatedValue","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_height","_required","_size","defaultStyleCss","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","_a","map","index","render","ariaDescribedBy","getRenderStates","Host","class","_hasValue","select","_disabled","_error","_hideLabel","_hint","_icon","_id","_touched","onClick","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","spellcheck","style","height","controller","onFacade","onBlur","onFocus","hostRef","propagateFocus","event","from","_b","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateName","validateOn","validateTabIndex","validateTouched","_alert","addValueChangeListener","v"],"sources":["./src/utils/validators/list.ts","./src/components/select/controller.ts","./src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","./src/components/select/component.tsx"],"sourcesContent":["import { Optgroup, SelectOption } from '../../types/input/types';\nimport { a11yHint } from '../a11y.tipps';\nimport { containsOnlyNumbers, hasEnoughReadableChars } from '../../types/props/label';\n\nexport const validateInputSelectList = <T>(option: SelectOption<T>): boolean => {\n\tif (typeof option === 'object' && option !== null) {\n\t\tif (typeof option.label === 'string' && option.label.length > 0) {\n\t\t\toption.disabled = option.disabled === true;\n\t\t\toption.label = `${option.label}`.trim();\n\t\t\tif (hasEnoughReadableChars(option.label, 3) === false && containsOnlyNumbers(option.label) === false) {\n\t\t\t\ta11yHint(\n\t\t\t\t\t`Ein abweichendes Aria-Label (${option.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (Array.isArray((option as Optgroup<T>).options)) {\n\t\t\t\treturn (\n\t\t\t\t\t(option as Optgroup<T>).options.find((item) => {\n\t\t\t\t\t\treturn validateInputSelectList(item) === false;\n\t\t\t\t\t}) === undefined\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn true;\n\t\t} else if (typeof option.label === 'number') {\n\t\t\treturn true;\n\t\t}\n\t}\n\treturn false;\n};\n","import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\nimport { Props, Watches } from './types';\nimport { validateInputSelectList } from '../../utils/validators/list';\n\nexport class SelectController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly getOptionByKey = (key: string): Option<W3CInputValue> \| undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<W3CInputValue>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<W3CInputValue>).value === 'string'\n\t\t\t\t\t? (option as Option<W3CInputValue>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t: false\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<W3CInputValue>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprivate readonly beforePatchListValue = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst list = nextState.has('_list') ? nextState.get('_list') : this.component.state._list;\n\t\tif (Array.isArray(list) && list.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, list as SelectOption<W3CInputValue>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(Array.isArray(value) && value.length > 0 ? (value as string[]) : [], list as SelectOption<W3CInputValue>[]);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\tlist[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t\tthis.onStateChange();\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t\tthis.onStateChange();\n\t\t\t}\n\t\t}\n\t};\n\n\t/*\n\t @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated Use _size instead.\n\t /\n\tpublic validateHeight(value?: string): void {\n\t\twatchString(this.component, '_height', value);\n\t}\n\n\tpublic validateList<T>(value?: SelectOption<T>[] \| string): void {\n\t\twatchJsonArrayString(this.component, '_list', validateInputSelectList, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Aktuell wird die Mehrfachauswahl noch nicht unterstützt. Wir sind dran die Mehrfachauswahl funktionsfähig zu implementieren, da der Browser-Standard hier ein paar Lücken hat.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] Bei der Mehrfachauswahl sollte zusätzlich auch die Listenlänge (size) gesetzt werden.');\n\t\t// }\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateSize(value?: number): void {\n\t\twatchNumber(this.component, '_size', value, {\n\t\t\tmin: 1,\n\t\t});\n\t}\n\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(onChange?: (event: Event) => void): void {\n\t\tsuper.componentWillLoad();\n\n\t\tthis.onStateChange = () => {\n\t\t\tif (typeof onChange === 'function') {\n\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\tonChange(STATE_CHANGE_EVENT);\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tthis.validateHeight(this.component._height);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateSize(this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { propagateFocus } from '../../utils/reuse';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\nconst isSelected = (valueList: unknown[] \| null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate ref?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled === true} label={optgroup.label}>\n\t\t\t\t{optgroup.options?.map((option: SelectOption<W3CInputValue>, index: number) => {\n\t\t\t\t\tconst key = `${preKey}-${index}`;\n\t\t\t\t\tif (Array.isArray((option as Optgroup<string>).options)) {\n\t\t\t\t\t\treturn this.renderOptgroup(option as Optgroup<string>, key);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</optgroup>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tselect: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<select\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t /\n\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\t\t\t\t\t\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t</option>\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</select>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/\n\t Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/\n\t Gibt den Text für eine Fehlermeldung an.\n\t /\n\t@Prop() public _error?: string;\n\n\t/\n\t Gibt an, ob eine individuelle Höhe übergeben werden soll.\n\t \n\t @deprecated Use _size instead.\n\t /\n\t@Prop() public _height?: string;\n\n\t/\n\t Versteckt das sichtbare Label des Elements.\n\t /\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/\n\t Gibt den Hinweistext an.\n\t /\n\t@Prop() public _hint?: string = '';\n\n\t/\n\t Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/\n\t Gibt die technische ID des Eingabefeldes an.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Gibt den technischen Namen des Eingabefeldes an.\n\t /\n\t@Prop() public _list!: Stringified<SelectOption<W3CInputValue>[]>;\n\n\t/\n\t Gibt an, ob mehrere Werte eingegeben werden können.\n\t /\n\t@Prop({ reflect: true }) public _multiple?: boolean = false;\n\n\t/\n\t Gibt den technischen Namen des Eingabefeldes an.\n\t /\n\t@Prop() public _name?: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für das Input-Event an.\n\t /\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/\n\t Macht das Eingabeelement zu einem Pflichtfeld.\n\t /\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/\n\t Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.\n\t /\n\t@Prop() public _size?: number;\n\n\t/\n\t Gibt an, welchen Tab-Index dieses Input hat.\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/\n\t Gibt den Wert des Eingabefeldes an.\n\t /\n\t@Prop({ mutable: true, reflect: false }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: States = {\n\t\t_hasValue: false,\n\t\t_height: '',\n\t\t_id: nonce(), // ⚠ required\n\t\t_list: [],\n\t\t_multiple: false,\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'textarea', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<SelectOption<W3CInputValue>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\t/\n\t\t TODO: Find values via value keys.\n\t\t */\n\t\tthis._value = Array.from(this.ref?.options \|\| [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t};\n}\n"],"mappings":"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"}

package/dist/kolibri/kol-skip-nav.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t}from"./index-50adf9a0.js";import{b as a}from"./a11y.tipps-1cea9822.js";import{w as e}from"./prop.validators-e402ad49.js";import{w as n}from"./validation-ab9a6c0d.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-81bd9b41.js";const s=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}",r=class{constructor(a){i(this,a),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return t("nav",{"aria-label":this.state._ariaLabel},t("ul",null,this.state._links.map(((i,a)=>t("li",{key:a},t("kol-link",Object.assign({},i,{_stealth:!0})))))))}validateAriaLabel(i){e(this,"_ariaLabel",i,{required:!0}),a(i)}validateLinks(i){n("KolSkipNav",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};r.style={default:s};export{r as kol_skip_nav};
+import{r as i,h as t}from"./index-0e29e47a.js";import{b as e}from"./a11y.tipps-1cea9822.js";import{w as a}from"./prop.validators-e15a584f.js";import{w as n}from"./validation-ec53a8be.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-f4596895.js";const s=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}",r=class{constructor(a){i(this,a),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return t("nav",{"aria-label":this.state._ariaLabel},t("ul",null,this.state._links.map(((i,a)=>t("li",{key:a},t("kol-link",Object.assign({},i,{_stealth:!0})))))))}validateAriaLabel(i){a(this,"_ariaLabel",i,{required:!0}),e(i)}validateLinks(i){n("KolSkipNav",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};r.style={default:s};export{r as kol_skip_nav};