@public-ui/components 1.6.0-rc.25 → 1.6.0-rc.27

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

@@ -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","class","key","Host","exportparts","_customClass","_disabled","_icon","_hideLabel","_label","_tooltipAlign","_a","_id","_list","onChange","_value","_ariaCurrent","validateBoundaryCount","watchNumber","max","validateCustomClass","validateHasButtons","watchValidator","Set","hooks","beforePatch","parseJson","e","delete","Object","assign","validateOn","validatePage","validatePageSize","validatePageSizeOptions","watchJsonArrayString","validateSiblingCount","validateTotal","validateTooltipAlign","validateVariant","validateButtonVariant","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 { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { Option } from '../../types/input/types';\nimport { nonce } from '../../utils/dev.utils';\nimport { parseJson, watchJsonArrayString, watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { API, KoliBriPaginationButtonCallbacks, States, PaginationHasButton } from './types';\nimport { TooltipAlignPropType, validateTooltipAlign } from '../../types/props/tooltip-align';\nimport { ButtonVariantPropType, validateButtonVariant } from '../../types/props/button-variant';\nimport { CustomClassPropType, validateCustomClass } from '../../types/props/custom-class';\n\nconst leftDoubleArrowIcon = {\n\tleft: 'codicon codicon-debug-reverse-continue',\n};\nconst leftSingleArrow = {\n\tleft: 'codicon codicon-chevron-left',\n};\nconst rightSingleArrowIcon = {\n\tright: 'codicon codicon-chevron-right',\n};\nconst rightDoubleArrowIcon = {\n\tright: 'codicon codicon-debug-continue',\n};\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements API {\n\tprivate readonly nonce = nonce();\n\n\tprivate readonly calcCount = (total: number, pageSize = 1): number => Math.ceil(total / pageSize);\n\n\tprivate readonly getCount = (): number => this.calcCount(this.state._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_hideLabel\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_hideLabel\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_hideLabel\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_hideLabel\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-${this.nonce}`}\n\t\t\t\t\t\t_label={translate('kol-entries-per-site')}\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></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 * Defines the custom class attribute.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\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 * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Setzt die Gesamtanzahl der Seiten.\n\t */\n\t@Prop() public _total!: number;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@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_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_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?: CustomClassPropType): void {\n\t\tvalidateCustomClass(this, value);\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?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: ButtonVariantPropType): void {\n\t\tvalidateButtonVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateBoundaryCount(this._boundaryCount);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateHasButtons(this._hasButtons);\n\t\tthis.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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"}
+{"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","_hideLabel","_label","_tooltipAlign","_a","_id","_list","onChange","_value","_ariaCurrent","validateBoundaryCount","watchNumber","max","validateCustomClass","validateHasButtons","watchValidator","Set","hooks","beforePatch","parseJson","e","delete","Object","assign","validateOn","validatePage","validatePageSize","validatePageSizeOptions","watchJsonArrayString","validateSiblingCount","validateTotal","validateTooltipAlign","validateVariant","validateButtonVariant","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 { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { Option } from '../../types/input/types';\nimport { nonce } from '../../utils/dev.utils';\nimport { parseJson, watchJsonArrayString, watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { API, KoliBriPaginationButtonCallbacks, States, PaginationHasButton } from './types';\nimport { TooltipAlignPropType, validateTooltipAlign } from '../../types/props/tooltip-align';\nimport { ButtonVariantPropType, validateButtonVariant } from '../../types/props/button-variant';\nimport { CustomClassPropType, validateCustomClass } from '../../types/props/custom-class';\n\nconst leftDoubleArrowIcon = {\n\tleft: 'codicon codicon-debug-reverse-continue',\n};\nconst leftSingleArrow = {\n\tleft: 'codicon codicon-chevron-left',\n};\nconst rightSingleArrowIcon = {\n\tright: 'codicon codicon-chevron-right',\n};\nconst rightDoubleArrowIcon = {\n\tright: 'codicon codicon-debug-continue',\n};\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements API {\n\tprivate readonly nonce = nonce();\n\n\tprivate readonly calcCount = (total: number, pageSize = 1): number => Math.ceil(total / pageSize);\n\n\tprivate readonly getCount = (): number => this.calcCount(this.state._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_hideLabel\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_hideLabel\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_hideLabel\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_hideLabel\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-${this.nonce}`}\n\t\t\t\t\t\t_label={translate('kol-entries-per-site')}\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></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 * Defines the custom class attribute.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\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 * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Setzt die Gesamtanzahl der Seiten.\n\t */\n\t@Prop() public _total!: number;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@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_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_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?: CustomClassPropType): void {\n\t\tvalidateCustomClass(this, value);\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?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: ButtonVariantPropType): void {\n\t\tvalidateButtonVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateBoundaryCount(this._boundaryCount);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateHasButtons(this._hasButtons);\n\t\tthis.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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as s}from"./index-5ab2ea42.js";import{c as o,o as e,f as a,s as n,a as h}from"./floating-ui.dom.esm-0bd7d943.js";import{v as r}from"./align-770e1701.js";import{v as p}from"./show-a8f7aa56.js";import{g as l}from"./dev.utils-1ee29ed1.js";import{p as c}from"./reuse-c2156413.js";import"./alignment-18ef41f0.js";import"./prop.validators-6cf6ed2d.js";import"./a11y.tipps-3dbf06fc.js";import"./index-37b5cbcf.js";const d=":host{--a11y-min-size:44px;font-size:inherit}*{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}kol-popover{height:0;position:absolute}kol-popover .popover{background-color:#fff;min-height:max-content;min-width:max-content;opacity:0;position:absolute}kol-popover .hidden{display:none}kol-popover .show{animation:0.3s ease-in forwards fadeInOpacity}kol-popover .disappear{animation:0.3s ease-in backwards fadeInOpacity}kol-popover .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}}",f=class{constructor(i){t(this,i),this.alignPopover=t=>{setTimeout((()=>{var i;if("test"!==c&&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._align,middleware:p}).then((({x:e,y:o,middlewareData:i,placement:s})=>{this.setPosition(e,o,i,s,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._align="top",this._show=!1,this.state={_align:"top",_show:!1,_visible:!1}}setPosition(t,e,o,i,s){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&&o.arrow)switch(i){case"top":this.arrowElement.style.inset=`100% auto auto ${o.arrow.x||0}px`,this.arrowElement.style.translate="0 -50%";break;case"right":this.arrowElement.style.inset=`${o.arrow.y||0}px 100% auto auto`,this.arrowElement.style.translate="50% 0";break;case"bottom":this.arrowElement.style.inset=`auto auto 100% ${o.arrow.x||0}px`,this.arrowElement.style.translate="0 50%";break;case"left":this.arrowElement.style.inset=`${o.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(s):"function"==typeof s&&s()}}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=l().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=l().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._align}`,ref:this.catchArrowElement}),i("slot",null)))}validateAlign(t){r(this,t)}validateShow(t){p(this,t),t&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_show:["validateShow"]}}};f.style=d;export{f as kol_popover};
+import{r as t,h as i,H as s}from"./index-5ab2ea42.js";import{c as o,o as e,f as a,s as n,a as h}from"./floating-ui.dom.esm-0bd7d943.js";import{v as r}from"./align-dfd6742a.js";import{v as p}from"./show-3328c6df.js";import{g as l}from"./dev.utils-38b5f4df.js";import{p as c}from"./reuse-c2156413.js";import"./alignment-5d25e1ca.js";import"./prop.validators-f76b82ff.js";import"./a11y.tipps-d11c3322.js";import"./index-37b5cbcf.js";const d=":host{--a11y-min-size:44px;font-size:inherit}*{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}kol-popover{height:0;position:absolute}kol-popover .popover{background-color:#fff;min-height:max-content;min-width:max-content;opacity:0;position:absolute}kol-popover .hidden{display:none}kol-popover .show{animation:0.3s ease-in forwards fadeInOpacity}kol-popover .disappear{animation:0.3s ease-in backwards fadeInOpacity}kol-popover .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}}",f=class{constructor(i){t(this,i),this.alignPopover=t=>{setTimeout((()=>{var i;if("test"!==c&&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._align,middleware:p}).then((({x:e,y:o,middlewareData:i,placement:s})=>{this.setPosition(e,o,i,s,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._align="top",this._show=!1,this.state={_align:"top",_show:!1,_visible:!1}}setPosition(t,e,o,i,s){if(this.popoverElement){const r={left:this.popoverElement.style.left,top:this.popoverElement.style.top};if(Object.assign(this.popoverElement.style,{left:`${t}px`,top:`${e}px`}),this.arrowElement&&o.arrow)switch(i){case"top":this.arrowElement.style.inset=`100% auto auto ${o.arrow.x||0}px`,this.arrowElement.style.translate="0 -50%";break;case"right":this.arrowElement.style.inset=`${o.arrow.y||0}px 100% auto auto`,this.arrowElement.style.translate="50% 0";break;case"bottom":this.arrowElement.style.inset=`auto auto 100% ${o.arrow.x||0}px`,this.arrowElement.style.translate="0 50%";break;case"left":this.arrowElement.style.inset=`${o.arrow.y||0}px auto auto 100%`,this.arrowElement.style.translate="-50% 0"}r.left!==this.popoverElement.style.left||r.top!==this.popoverElement.style.top?this.alignPopover(s):"function"==typeof s&&s()}}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=l().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=l().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._align}`,ref:this.catchArrowElement}),i("slot",null)))}validateAlign(t){r(this,t)}validateShow(t){p(this,t),t&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_show:["validateShow"]}}};f.style=d;export{f as kol_popover};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,H as r}from"./index-5ab2ea42.js";import{v as i}from"./label-162d9b49.js";import{e as s,d as a,w as l}from"./prop.validators-6cf6ed2d.js";import"./a11y.tipps-3dbf06fc.js";import"./dev.utils-1ee29ed1.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";var o;!function(e){e.bar="bar",e.cycle="cycle",e["cycle-value-label"]="cycle-value-label",e["cycle-label-value"]="cycle-label-value"}(o||(o={}));const n=":host{--a11y-min-size:44px;font-size:inherit}*{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}progress{display:block;height:0;overflow:hidden;width:0}.bar .border{fill:transparent;stroke:black}.bar .background{fill:lightgray;stroke:white}.bar .progress{fill:#0075ff;stroke:transparent;transition:250ms ease-in-out 50ms}.cycle .background{fill:transparent;stroke:lightgray}.cycle .border{fill:transparent;stroke:black}.cycle .whitespace{fill:transparent;stroke:white}.cycle .progress{fill:transparent;stroke:#0075ff;transform-origin:50% 50%;transform:rotate(-90deg);transition:250ms ease-in-out 50ms}@media (prefers-reduced-motion){.progress{transition-duration:0s;transition-delay:0s}}",c=Object.keys(o),d=t=>{let a="43%",r=t._label?"57%":"50%";switch(t._variant){case"cycle-value-label":t._label&&(a="57%",r="43%");case"cycle":case"cycle-label-value":return e("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},e("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),e("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),e("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(t._value/t._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),t._label&&e("text",{"aria-hidden":"true",x:"50%",y:a,"text-anchor":"middle",fill:"currentColor"},t._label),e("text",{"aria-hidden":"true",x:"50%",y:r,"text-anchor":"middle",fill:"currentColor"},t._value,t._unit));default:return e("div",{class:"bar"},t._label&&e("div",null,t._label),e("div",{style:{display:"flex",gap:"0.3em"}},e("svg",{width:"100",viewBox:"0 0 102 8",xmlns:"http://www.w3.org/2000/svg"},e("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100"}),e("rect",{class:"progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:t._value/t._max*95}),e("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100"})),e("text",{"aria-hidden":"true","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},t._value,t._unit)))}},h=class{constructor(e){t(this,e),this._label=void 0,this._max=void 0,this._type=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return e(r,null,d(this.state),e("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),e("span",{"aria-live":"polite","aria-relevant":"removals text",hidden:!0},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(e){i(this,e)}validateMax(e){"number"!=typeof e&&(e=100),s(this,"_max",e,{required:!0})}validateType(e){this.validateVariant(e)}validateUnit(e){a(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),s(this,"_value",e,{required:!0})}validateVariant(e){l(this,"_variant",(e=>"string"==typeof e&&c.includes(e)),new Set(c),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant||this._type),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"],_variant:["validateVariant"]}}};h.style={default:n};export{h as kol_progress};
+import{r as t,h as e,H as r}from"./index-5ab2ea42.js";import{v as i}from"./label-07fc28f5.js";import{e as s,d as a,w as l}from"./prop.validators-f76b82ff.js";import"./a11y.tipps-d11c3322.js";import"./dev.utils-38b5f4df.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";var o;!function(e){e.bar="bar",e.cycle="cycle",e["cycle-value-label"]="cycle-value-label",e["cycle-label-value"]="cycle-label-value"}(o||(o={}));const n=":host{--a11y-min-size:44px;font-size:inherit}*{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}progress{display:block;height:0;overflow:hidden;width:0}.bar .border{fill:transparent;stroke:black}.bar .background{fill:lightgray;stroke:white}.bar .progress{fill:#0075ff;stroke:transparent;transition:250ms ease-in-out 50ms}.cycle .background{fill:transparent;stroke:lightgray}.cycle .border{fill:transparent;stroke:black}.cycle .whitespace{fill:transparent;stroke:white}.cycle .progress{fill:transparent;stroke:#0075ff;transform-origin:50% 50%;transform:rotate(-90deg);transition:250ms ease-in-out 50ms}@media (prefers-reduced-motion){.progress{transition-duration:0s;transition-delay:0s}}",c=Object.keys(o),d=t=>{let a="43%",r=t._label?"57%":"50%";switch(t._variant){case"cycle-value-label":t._label&&(a="57%",r="43%");case"cycle":case"cycle-label-value":return e("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},e("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),e("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),e("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(t._value/t._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),t._label&&e("text",{"aria-hidden":"true",x:"50%",y:a,"text-anchor":"middle",fill:"currentColor"},t._label),e("text",{"aria-hidden":"true",x:"50%",y:r,"text-anchor":"middle",fill:"currentColor"},t._value,t._unit));default:return e("div",{class:"bar"},t._label&&e("div",null,t._label),e("div",{style:{display:"flex",gap:"0.3em"}},e("svg",{width:"100",viewBox:"0 0 102 8",xmlns:"http://www.w3.org/2000/svg"},e("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100"}),e("rect",{class:"progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:t._value/t._max*95}),e("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100"})),e("text",{"aria-hidden":"true","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},t._value,t._unit)))}},h=class{constructor(e){t(this,e),this._label=void 0,this._max=void 0,this._type=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return e(r,null,d(this.state),e("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),e("span",{"aria-live":"polite","aria-relevant":"removals text",hidden:!0},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(e){i(this,e)}validateMax(e){"number"!=typeof e&&(e=100),s(this,"_max",e,{required:!0})}validateType(e){this.validateVariant(e)}validateUnit(e){a(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),s(this,"_value",e,{required:!0})}validateVariant(e){l(this,"_variant",(e=>"string"==typeof e&&c.includes(e)),new Set(c),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant||this._type),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"],_variant:["validateVariant"]}}};h.style={default:n};export{h as kol_progress};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as e}from"./index-5ab2ea42.js";import{v as n}from"./label-162d9b49.js";import{d as a,w as o}from"./prop.validators-6cf6ed2d.js";import"./a11y.tipps-3dbf06fc.js";import"./dev.utils-1ee29ed1.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";const s=":host{--a11y-min-size:44px;font-size:inherit}*{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._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateCaption(t){this.validateLabel(t)}validateLabel(t){n(this,t)}validateHref(t){a(this,"_href",t,{required:!0})}validateQuote(t){a(this,"_quote",t,{required:!0})}validateVariant(t){o(this,"_variant",(t=>"block"===t||"inline"===t),new Set(["block","inline"]),t)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label||this._caption),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._label&&this.state._label.length>0&&i("figcaption",null,i("cite",null,i("kol-link",{_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_caption:["validateCaption"],_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};r.style={default:s};export{r as kol_quote};
+import{r as t,h as i,H as e}from"./index-5ab2ea42.js";import{v as n}from"./label-07fc28f5.js";import{d as a,w as o}from"./prop.validators-f76b82ff.js";import"./a11y.tipps-d11c3322.js";import"./dev.utils-38b5f4df.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";const s=":host{--a11y-min-size:44px;font-size:inherit}*{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._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateCaption(t){this.validateLabel(t)}validateLabel(t){n(this,t)}validateHref(t){a(this,"_href",t,{required:!0})}validateQuote(t){a(this,"_quote",t,{required:!0})}validateVariant(t){o(this,"_variant",(t=>"block"===t||"inline"===t),new Set(["block","inline"]),t)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label||this._caption),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._label&&this.state._label.length>0&&i("figcaption",null,i("cite",null,i("kol-link",{_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_caption:["validateCaption"],_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};r.style={default:s};export{r as kol_quote};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as i,r as e,g as s}from"./index-5ab2ea42.js";import{n as a}from"./dev.utils-1ee29ed1.js";import{s as l,t as n}from"./associated.controller-6c7440df.js";import{S as o,a as h}from"./reuse-c2156413.js";import{g as r}from"./controller-ab167bf7.js";import{f as d,v as u}from"./controller-3788b559.js";import{v as p}from"./rows-c5b1e0bc.js";import{d as c,a as f,c as v}from"./prop.validators-6cf6ed2d.js";import{I as b}from"./controller-icon-cfbc5bbf.js";import"./a11y.tipps-3dbf06fc.js";import"./label-162d9b49.js";import"./tab-index-cda3bf60.js";import"./index-37b5cbcf.js";import"./icon-a7195182.js";class y extends b{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.beforePatchOptions=(t,e)=>{const i=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),d(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){c(this.component,"_height",t)}validateOptions(t){u(this.component,t,{hooks:{beforePatch:this.beforePatchOptions}})}validateMultiple(t){f(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchOptions}})}validateRequired(t){f(this.component,"_required",t)}validateRows(t){p(this.component,t)}validateValue(t){v(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchOptions}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(o)}))}},this.validateHeight(this.component._height),this.validateOptions(this.component._options||this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows||this.component._size),this.validateValue(this.component._value)}}const m=":host{--a11y-min-size:44px;font-size:inherit}*{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;width:100%}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],[size]){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}",_=(t,e)=>Array.isArray(t)&&t.includes(e),g=class{renderOptgroup(e,i){var a;return t("optgroup",{disabled: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:e.disabled,key:s,selected:_(this.state._value,e.value),value:s},e.label)})))}render(){const{ariaDescribedBy:e}=r(this.state),a=!1===this.state._label;return t(i,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{"hide-label":!!this.state._hideLabel,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"},a?t("slot",null):this.state._label),t("div",{slot:"input"},t("select",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,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._rows,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._options.map(((e,i)=>{const a=`-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:e.disabled,key:a,selected:_(this.state._value,e.value),value:a},e.label)}))),t("kol-tooltip",{"aria-hidden":"true",hidden:a||!this.state._hideLabel,_align:this._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(t){e(this,t),this.catchRef=t=>{this.ref=t,h(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})),l(t),n("change",this.host,this._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._label=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=void 0,this._rows=void 0,this._size=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_height:"",_id:`id-${a()}`,_label:!1,_options:[],_multiple:!1,_value:[]},this.controller=new y(this,"select",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)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateOptions(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSize(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(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"],_label:["validateLabel"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_size:["validateSize"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};g.style={default:m};export{g as kol_select};
+import{h as t,H as i,r as e,g as s}from"./index-5ab2ea42.js";import{n as a}from"./dev.utils-38b5f4df.js";import{s as l,t as n}from"./associated.controller-d175340e.js";import{S as o,a as h}from"./reuse-c2156413.js";import{g as r}from"./controller-db9c89e4.js";import{f as d,v as u}from"./controller-607473a1.js";import{v as p}from"./rows-9a6940f4.js";import{d as c,a as f,c as v}from"./prop.validators-f76b82ff.js";import{I as y}from"./controller-icon-9b323870.js";import"./a11y.tipps-d11c3322.js";import"./label-07fc28f5.js";import"./tab-index-96981cc3.js";import"./index-37b5cbcf.js";import"./icon-8fc8202c.js";class m extends y{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.beforePatchOptions=(t,e)=>{const i=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),d(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){c(this.component,"_height",t)}validateOptions(t){u(this.component,t,{hooks:{beforePatch:this.beforePatchOptions}})}validateMultiple(t){f(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchOptions}})}validateRequired(t){f(this.component,"_required",t)}validateRows(t){p(this.component,t)}validateValue(t){v(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchOptions}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(o)}))}},this.validateHeight(this.component._height),this.validateOptions(this.component._options||this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows||this.component._size),this.validateValue(this.component._value)}}const b=":host{--a11y-min-size:44px;font-size:inherit}*{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;width:100%}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],[size]){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}",_=(t,e)=>Array.isArray(t)&&t.includes(e),g=class{renderOptgroup(e,i){var a;return t("optgroup",{disabled: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:e.disabled,key:s,selected:_(this.state._value,e.value),value:s},e.label)})))}render(){const{ariaDescribedBy:e}=r(this.state),a=!1===this.state._label;return t(i,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{"hide-label":!!this.state._hideLabel,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"},a?t("slot",null):this.state._label),t("div",{slot:"input"},t("select",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,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._rows,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._options.map(((e,i)=>{const a=`-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:e.disabled,key:a,selected:_(this.state._value,e.value),value:a},e.label)}))),t("kol-tooltip",{"aria-hidden":"true",hidden:a||!this.state._hideLabel,_align:this._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(t){e(this,t),this.catchRef=t=>{this.ref=t,h(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})),l(t),n("change",this.host,this._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._label=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=void 0,this._rows=void 0,this._size=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_height:"",_id:`id-${a()}`,_label:!1,_options:[],_multiple:!1,_value:[]},this.controller=new m(this,"select",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)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateOptions(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSize(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(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"],_label:["validateLabel"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_size:["validateSize"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};g.style={default:b};export{g as kol_select};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t}from"./index-5ab2ea42.js";import{v as e}from"./label-162d9b49.js";import{w as n}from"./validation-ad3aded3.js";import"./a11y.tipps-3dbf06fc.js";import"./dev.utils-1ee29ed1.js";import"./reuse-c2156413.js";import"./prop.validators-6cf6ed2d.js";import"./index-37b5cbcf.js";const a=":host{--a11y-min-size:44px;font-size:inherit}*{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}kol-link-wc a{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}kol-link-wc a:focus{background-color:#fff;left:unset;position:unset}",s=class{constructor(t){i(this,t),this._ariaLabel=void 0,this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return t("nav",{"aria-label":this.state._label},t("ul",null,this.state._links.map(((i,a)=>t("li",{key:a},t("kol-link-wc",Object.assign({},i)))))))}validateAriaLabel(i){this.validateLabel(i)}validateLabel(i){e(this,i)}validateLinks(i){n("KolSkipNav",this,i)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}}};s.style={default:a};export{s as kol_skip_nav};
+import{r as i,h as t}from"./index-5ab2ea42.js";import{v as e}from"./label-07fc28f5.js";import{w as n}from"./validation-647a55ea.js";import"./a11y.tipps-d11c3322.js";import"./dev.utils-38b5f4df.js";import"./reuse-c2156413.js";import"./prop.validators-f76b82ff.js";import"./index-37b5cbcf.js";const a=":host{--a11y-min-size:44px;font-size:inherit}*{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}kol-link-wc a{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}kol-link-wc a:focus{background-color:#fff;left:unset;position:unset}",s=class{constructor(t){i(this,t),this._ariaLabel=void 0,this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return t("nav",{"aria-label":this.state._label},t("ul",null,this.state._links.map(((i,a)=>t("li",{key:a},t("kol-link-wc",Object.assign({},i)))))))}validateAriaLabel(i){this.validateLabel(i)}validateLabel(i){e(this,i)}validateLinks(i){n("KolSkipNav",this,i)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}}};s.style={default:a};export{s as kol_skip_nav};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSkipNav","_label","_links","render","h","this","state","map","link","index","key","Object","assign","validateAriaLabel","value","validateLabel","validateLinks","watchNavLinks","componentWillLoad","_ariaLabel"],"sources":["src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\nkol-link-wc a {\n\tleft: -99999px;\n\toverflow: hidden;\n\tposition: absolute;\n\tz-index: 9999999;\n\tline-height: 1em;\n}\nkol-link-wc a:focus {\n\tbackground-color: #fff;\n\tleft: unset;\n\tposition: unset;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Props as LinkProps } from '../link/types';\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, States } from './types';\n\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link-wc {...link}></kol-link-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Gibt die Liste der darzustellenden Button, Links oder Texte an.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;mSAAA,MAAMA,EAAkB,25B,MCeXC,EAAU,M,0GAkCU,CAC/BC,OAAQ,IACRC,OAAQ,G,CAnCF,MAAAC,GACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,QAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAiBC,IAEvCL,EAAA,MAAIM,IAAKD,GACRL,EAAA,cAAAO,OAAAC,OAAA,GAAiBJ,Q,CAmCjB,iBAAAK,CAAkBC,GACxBT,KAAKU,cAAcD,E,CAIb,aAAAC,CAAcD,GACpBC,EAAcV,KAAMS,E,CAId,aAAAE,CAAcF,GACpBG,EAAc,aAAcZ,KAAMS,E,CAG5B,iBAAAI,GACNb,KAAKU,cAAcV,KAAKJ,QAAUI,KAAKc,YACvCd,KAAKW,cAAcX,KAAKH,O"}
+{"version":3,"names":["defaultStyleCss","KolSkipNav","_label","_links","render","h","this","state","map","link","index","key","Object","assign","validateAriaLabel","value","validateLabel","validateLinks","watchNavLinks","componentWillLoad","_ariaLabel"],"sources":["src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\nkol-link-wc a {\n\tleft: -99999px;\n\toverflow: hidden;\n\tposition: absolute;\n\tz-index: 9999999;\n\tline-height: 1em;\n}\nkol-link-wc a:focus {\n\tbackground-color: #fff;\n\tleft: unset;\n\tposition: unset;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LinkProps } from '../link/types';\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, States } from './types';\n\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link-wc {...link}></kol-link-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Gibt die Liste der darzustellenden Button, Links oder Texte an.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;mSAAA,MAAMA,EAAkB,25B,MCeXC,EAAU,M,0GAkCU,CAC/BC,OAAQ,IACRC,OAAQ,G,CAnCF,MAAAC,GACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,QAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAiBC,IAEvCL,EAAA,MAAIM,IAAKD,GACRL,EAAA,cAAAO,OAAAC,OAAA,GAAiBJ,Q,CAmCjB,iBAAAK,CAAkBC,GACxBT,KAAKU,cAAcD,E,CAIb,aAAAC,CAAcD,GACpBC,EAAcV,KAAMS,E,CAId,aAAAE,CAAcF,GACpBG,EAAc,aAAcZ,KAAMS,E,CAG5B,iBAAAI,GACNb,KAAKU,cAAcV,KAAKJ,QAAUI,KAAKc,YACvCd,KAAKW,cAAcX,KAAKH,O"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as s,H as t}from"./index-5ab2ea42.js";import{v as e}from"./hide-label-16112af9.js";import{v as a}from"./icon-a7195182.js";import{a as l}from"./label-162d9b49.js";import"./prop.validators-6cf6ed2d.js";import"./a11y.tipps-3dbf06fc.js";import"./dev.utils-1ee29ed1.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";const o=class{constructor(t){i(this,t),this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this.state={_hideLabel:!1,_icon:{},_label:!1}}render(){const i="string"==typeof this.state._label;return s(t,{class:{"icon-only":!!this.state._hideLabel,"hide-label":!!this.state._hideLabel}},this.state._icon.top&&s("kol-icon",{class:"icon top",style:this.state._icon.top.style,_label:"",_icon:this.state._icon.top.icon}),s("span",null,this.state._icon.left&&s("kol-icon",{class:"icon left",style:this.state._icon.left.style,_label:"",_icon:this.state._icon.left.icon}),!this.state._hideLabel&&i?s("span",null,this.state._label):"",s("span",{"aria-hidden":i?"true":void 0,hidden:i},s("slot",{name:"expert"})),this.state._icon.right&&s("kol-icon",{class:"icon right",style:this.state._icon.right.style,_label:"",_icon:this.state._icon.right.icon})),this.state._icon.bottom&&s("kol-icon",{class:"icon bottom",style:this.state._icon.bottom.style,_label:"",_icon:this.state._icon.bottom.icon}))}validateHideLabel(t){e(this,t)}validateIcon(t){a(this,t)}validateIconOnly(t){this.validateHideLabel(t)}validateLabel(t){l(this,t)}componentWillLoad(){this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcon(this._icon),this.validateLabel(this._label)}static get watchers(){return{_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"]}}};export{o as kol_span_wc};
+import{r as i,h as s,H as t}from"./index-5ab2ea42.js";import{v as e}from"./hide-label-2fd3b093.js";import{v as l}from"./icon-8fc8202c.js";import{a}from"./label-07fc28f5.js";import"./prop.validators-f76b82ff.js";import"./a11y.tipps-d11c3322.js";import"./dev.utils-38b5f4df.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";const o=class{constructor(t){i(this,t),this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this.state={_hideLabel:!1,_icon:{},_label:!1}}render(){const i="string"==typeof this.state._label;return s(t,{class:{"icon-only":!!this.state._hideLabel,"hide-label":!!this.state._hideLabel}},this.state._icon.top&&s("kol-icon",{class:"icon top",style:this.state._icon.top.style,_label:"",_icon:this.state._icon.top.icon}),s("span",null,this.state._icon.left&&s("kol-icon",{class:"icon left",style:this.state._icon.left.style,_label:"",_icon:this.state._icon.left.icon}),!this.state._hideLabel&&i?s("span",null,this.state._label):"",s("span",{"aria-hidden":i?"true":void 0,hidden:i},s("slot",{name:"expert"})),this.state._icon.right&&s("kol-icon",{class:"icon right",style:this.state._icon.right.style,_label:"",_icon:this.state._icon.right.icon})),this.state._icon.bottom&&s("kol-icon",{class:"icon bottom",style:this.state._icon.bottom.style,_label:"",_icon:this.state._icon.bottom.icon}))}validateHideLabel(t){e(this,t)}validateIcon(t){l(this,t)}validateIconOnly(t){this.validateHideLabel(t)}validateLabel(t){a(this,t)}componentWillLoad(){this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcon(this._icon),this.validateLabel(this._label)}static get watchers(){return{_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"]}}};export{o as kol_span_wc};

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

@@ -1 +1 @@
-{"version":3,"names":["KolSpanWc","_hideLabel","_icon","_label","render","hideExpertSlot","this","state","h","Host","class","top","style","icon","left","undefined","hidden","name","right","bottom","validateHideLabel","value","validateIcon","validateIconOnly","validateLabel","validateLabelWithExpertSlot","componentWillLoad","_iconOnly"],"sources":["src/components/span/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { HideLabelPropType, validateHideLabel } from '../../types/props/hide-label';\nimport { validateIcon } from '../../types/props/icon';\nimport { LabelWithExpertSlotPropType, validateLabelWithExpertSlot } from '../../types/props/label';\nimport { API, States } from './types';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-span-wc',\n\tshadow: false,\n})\nexport class KolSpanWc implements API {\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot: boolean = typeof this.state._label === 'string';\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'icon-only': !!this.state._hideLabel, // @deprecated in v2\n\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._icon.top && <kol-icon class=\"icon top\" style={this.state._icon.top.style} _label=\"\" _icon={this.state._icon.top.icon} />}\n\t\t\t\t<span>\n\t\t\t\t\t{this.state._icon.left && <kol-icon class=\"icon left\" style={this.state._icon.left.style} _label=\"\" _icon={this.state._icon.left.icon} />}\n\t\t\t\t\t{!this.state._hideLabel && hideExpertSlot ? <span>{this.state._label}</span> : ''}\n\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.state._icon.right && <kol-icon class=\"icon right\" style={this.state._icon.right.style} _label=\"\" _icon={this.state._icon.right.icon} />}\n\t\t\t\t</span>\n\t\t\t\t{this.state._icon.bottom && <kol-icon class=\"icon bottom\" style={this.state._icon.bottom.style} _label=\"\" _icon={this.state._icon.bottom.icon} />}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Hides the label and shows the description in a Tooltip instead.\n\t * TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t@State() public state: States = {\n\t\t_hideLabel: false,\n\t\t_icon: {},\n\t\t_label: false, // ⚠ required\n\t};\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: KoliBriIconProp): void {\n\t\tvalidateIcon(this, value);\n\t}\n\n\t/**\n\t * @deprecated use _hide-label\n\t */\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\tthis.validateHideLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHideLabel(this._hideLabel || this._iconOnly);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;uVAgBaA,EAAS,M,yCA4BiB,M,+EAkBN,CAC/BC,WAAY,MACZC,MAAO,GACPC,OAAQ,M,CAhDF,MAAAC,GACN,MAAMC,SAAiCC,KAAKC,MAAMJ,SAAW,SAC7D,OACCK,EAACC,EAAI,CACJC,MAAO,CACN,cAAeJ,KAAKC,MAAMN,WAC1B,eAAgBK,KAAKC,MAAMN,aAG3BK,KAAKC,MAAML,MAAMS,KAAOH,EAAA,YAAUE,MAAM,WAAWE,MAAON,KAAKC,MAAML,MAAMS,IAAIC,MAAOT,OAAO,GAAGD,MAAOI,KAAKC,MAAML,MAAMS,IAAIE,OAC7HL,EAAA,YACEF,KAAKC,MAAML,MAAMY,MAAQN,EAAA,YAAUE,MAAM,YAAYE,MAAON,KAAKC,MAAML,MAAMY,KAAKF,MAAOT,OAAO,GAAGD,MAAOI,KAAKC,MAAML,MAAMY,KAAKD,QAC/HP,KAAKC,MAAMN,YAAcI,EAAiBG,EAAA,YAAOF,KAAKC,MAAMJ,QAAiB,GAC/EK,EAAA,sBAAmBH,EAAiB,OAASU,UAAWC,OAAQX,GAC/DG,EAAA,QAAMS,KAAK,YAEXX,KAAKC,MAAML,MAAMgB,OAASV,EAAA,YAAUE,MAAM,aAAaE,MAAON,KAAKC,MAAML,MAAMgB,MAAMN,MAAOT,OAAO,GAAGD,MAAOI,KAAKC,MAAML,MAAMgB,MAAML,QAErIP,KAAKC,MAAML,MAAMiB,QAAUX,EAAA,YAAUE,MAAM,cAAcE,MAAON,KAAKC,MAAML,MAAMiB,OAAOP,MAAOT,OAAO,GAAGD,MAAOI,KAAKC,MAAML,MAAMiB,OAAON,O,CAkCrI,iBAAAO,CAAkBC,GACxBD,EAAkBd,KAAMe,E,CAIlB,YAAAC,CAAaD,GACnBC,EAAahB,KAAMe,E,CAOb,gBAAAE,CAAiBF,GACvBf,KAAKc,kBAAkBC,E,CAIjB,aAAAG,CAAcH,GACpBI,EAA4BnB,KAAMe,E,CAG5B,iBAAAK,GACNpB,KAAKc,kBAAkBd,KAAKL,YAAcK,KAAKqB,WAC/CrB,KAAKgB,aAAahB,KAAKJ,OACvBI,KAAKkB,cAAclB,KAAKH,O"}
+{"version":3,"names":["KolSpanWc","_hideLabel","_icon","_label","render","hideExpertSlot","this","state","h","Host","class","top","style","icon","left","undefined","hidden","name","right","bottom","validateHideLabel","value","validateIcon","validateIconOnly","validateLabel","validateLabelWithExpertSlot","componentWillLoad","_iconOnly"],"sources":["src/components/span/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { HideLabelPropType, validateHideLabel } from '../../types/props/hide-label';\nimport { validateIcon } from '../../types/props/icon';\nimport { LabelWithExpertSlotPropType, validateLabelWithExpertSlot } from '../../types/props/label';\nimport { API, States } from './types';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-span-wc',\n\tshadow: false,\n})\nexport class KolSpanWc implements API {\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot: boolean = typeof this.state._label === 'string';\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'icon-only': !!this.state._hideLabel, // @deprecated in v2\n\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._icon.top && <kol-icon class=\"icon top\" style={this.state._icon.top.style} _label=\"\" _icon={this.state._icon.top.icon} />}\n\t\t\t\t<span>\n\t\t\t\t\t{this.state._icon.left && <kol-icon class=\"icon left\" style={this.state._icon.left.style} _label=\"\" _icon={this.state._icon.left.icon} />}\n\t\t\t\t\t{!this.state._hideLabel && hideExpertSlot ? <span>{this.state._label}</span> : ''}\n\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.state._icon.right && <kol-icon class=\"icon right\" style={this.state._icon.right.style} _label=\"\" _icon={this.state._icon.right.icon} />}\n\t\t\t\t</span>\n\t\t\t\t{this.state._icon.bottom && <kol-icon class=\"icon bottom\" style={this.state._icon.bottom.style} _label=\"\" _icon={this.state._icon.bottom.icon} />}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Hides the label and shows the description in a Tooltip instead.\n\t * TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t@State() public state: States = {\n\t\t_hideLabel: false,\n\t\t_icon: {},\n\t\t_label: false, // ⚠ required\n\t};\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: KoliBriIconProp): void {\n\t\tvalidateIcon(this, value);\n\t}\n\n\t/**\n\t * @deprecated use _hide-label\n\t */\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\tthis.validateHideLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHideLabel(this._hideLabel || this._iconOnly);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;kVAgBaA,EAAS,M,yCA4BiB,M,+EAkBN,CAC/BC,WAAY,MACZC,MAAO,GACPC,OAAQ,M,CAhDF,MAAAC,GACN,MAAMC,SAAiCC,KAAKC,MAAMJ,SAAW,SAC7D,OACCK,EAACC,EAAI,CACJC,MAAO,CACN,cAAeJ,KAAKC,MAAMN,WAC1B,eAAgBK,KAAKC,MAAMN,aAG3BK,KAAKC,MAAML,MAAMS,KAAOH,EAAA,YAAUE,MAAM,WAAWE,MAAON,KAAKC,MAAML,MAAMS,IAAIC,MAAOT,OAAO,GAAGD,MAAOI,KAAKC,MAAML,MAAMS,IAAIE,OAC7HL,EAAA,YACEF,KAAKC,MAAML,MAAMY,MAAQN,EAAA,YAAUE,MAAM,YAAYE,MAAON,KAAKC,MAAML,MAAMY,KAAKF,MAAOT,OAAO,GAAGD,MAAOI,KAAKC,MAAML,MAAMY,KAAKD,QAC/HP,KAAKC,MAAMN,YAAcI,EAAiBG,EAAA,YAAOF,KAAKC,MAAMJ,QAAiB,GAC/EK,EAAA,sBAAmBH,EAAiB,OAASU,UAAWC,OAAQX,GAC/DG,EAAA,QAAMS,KAAK,YAEXX,KAAKC,MAAML,MAAMgB,OAASV,EAAA,YAAUE,MAAM,aAAaE,MAAON,KAAKC,MAAML,MAAMgB,MAAMN,MAAOT,OAAO,GAAGD,MAAOI,KAAKC,MAAML,MAAMgB,MAAML,QAErIP,KAAKC,MAAML,MAAMiB,QAAUX,EAAA,YAAUE,MAAM,cAAcE,MAAON,KAAKC,MAAML,MAAMiB,OAAOP,MAAOT,OAAO,GAAGD,MAAOI,KAAKC,MAAML,MAAMiB,OAAON,O,CAkCrI,iBAAAO,CAAkBC,GACxBD,EAAkBd,KAAMe,E,CAIlB,YAAAC,CAAaD,GACnBC,EAAahB,KAAMe,E,CAOb,gBAAAE,CAAiBF,GACvBf,KAAKc,kBAAkBC,E,CAIjB,aAAAG,CAAcH,GACpBI,EAA4BnB,KAAMe,E,CAG5B,iBAAAK,GACNpB,KAAKc,kBAAkBd,KAAKL,YAAcK,KAAKqB,WAC/CrB,KAAKgB,aAAahB,KAAKJ,OACvBI,KAAKkB,cAAclB,KAAKH,O"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as n,H as t,F as e}from"./index-5ab2ea42.js";import{a}from"./i18n-53e49b2a.js";import{w as o}from"./prop.validators-6cf6ed2d.js";import{v as r}from"./show-a8f7aa56.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./a11y.tipps-3dbf06fc.js";import"./dev.utils-1ee29ed1.js";import"./reuse-c2156413.js";const s=(i,n)=>{o(i,"_variant",(i=>"cycle"===i||"dot"===i||"none"===i),new Set(["cycle","dot","none"]),n)},l=":host{--a11y-min-size:44px;font-size:inherit}*{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}.spin.cycle{width:3rem;height:3rem}.spin.cycle>.loader{display:block;width:100%;height:100%;border-radius:50%;position:relative;animation:2s linear infinite rotate}.spin.cycle>.loader::before{content:'';box-sizing:border-box;position:absolute;inset:0px;border-radius:50%;border:5px solid #333;animation:3s linear infinite prixClipFix}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes prixClipFix{0%{border-color:#fff;clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}25%{border-color:#666;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}50%{border-color:#fc0;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}75%{border-color:red;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}100%{border-color:#000;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}}@media (prefers-reduced-motion){.spin.cycle>.loader{animation-duration:4s}.spin.cycle>.loader::before{animation-duration:6s}}.spin.dot{height:1rem;width:3rem}.spin.dot>span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-radius:50%;border:0.1rem solid #fff;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}.spin.dot>span:first-child{background-color:#fc0;z-index:0;animation:1s infinite spin1;left:0.1rem}.spin.dot>span:nth-child(2){background-color:red;z-index:1;animation:1s infinite spin2;left:0.1rem}.spin.dot>span:nth-child(3){background-color:#000;z-index:1;animation:1s infinite spin2;left:1.1rem}.spin.dot>span:nth-child(4){background-color:#666;z-index:0;animation:1s infinite spin3;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}@media (prefers-reduced-motion){.spin.dot>span:first-child,.spin.dot>span:nth-child(2),.spin.dot>span:nth-child(3),.spin.dot>span:nth-child(4){animation-duration:2s}}.spin{display:block;padding:0.125rem;position:relative}";function p(i){switch(i){case"cycle":return n("span",{class:"loader"});case"none":return n("slot",{name:"expert"});default:return n(e,null,n("span",{class:"bg-spin-1"}),n("span",{class:"bg-spin-2"}),n("span",{class:"bg-spin-3"}),n("span",{class:"bg-neutral"}))}}const d=class{constructor(n){i(this,n),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return n(t,null,this.state._show?n("span",{"aria-busy":"true","aria-label":a("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},p(this.state._variant)):this.showToggled&&n("span",{"aria-label":a("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,r(this,i)}validateVariant(i){s(this,i)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};d.style={default:l};export{d as kol_spin};
+import{r as i,h as n,H as t,F as e}from"./index-5ab2ea42.js";import{a}from"./i18n-f8b0e840.js";import{w as o}from"./prop.validators-f76b82ff.js";import{v as r}from"./show-3328c6df.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./a11y.tipps-d11c3322.js";import"./dev.utils-38b5f4df.js";import"./reuse-c2156413.js";const s=(i,n)=>{o(i,"_variant",(i=>"cycle"===i||"dot"===i||"none"===i),new Set(["cycle","dot","none"]),n)},l=":host{--a11y-min-size:44px;font-size:inherit}*{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}.spin.cycle{width:3rem;height:3rem}.spin.cycle>.loader{display:block;width:100%;height:100%;border-radius:50%;position:relative;animation:2s linear infinite rotate}.spin.cycle>.loader::before{content:'';box-sizing:border-box;position:absolute;inset:0px;border-radius:50%;border:5px solid #333;animation:3s linear infinite prixClipFix}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes prixClipFix{0%{border-color:#fff;clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}25%{border-color:#666;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}50%{border-color:#fc0;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}75%{border-color:red;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}100%{border-color:#000;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}}@media (prefers-reduced-motion){.spin.cycle>.loader{animation-duration:4s}.spin.cycle>.loader::before{animation-duration:6s}}.spin.dot{height:1rem;width:3rem}.spin.dot>span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-radius:50%;border:0.1rem solid #fff;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}.spin.dot>span:first-child{background-color:#fc0;z-index:0;animation:1s infinite spin1;left:0.1rem}.spin.dot>span:nth-child(2){background-color:red;z-index:1;animation:1s infinite spin2;left:0.1rem}.spin.dot>span:nth-child(3){background-color:#000;z-index:1;animation:1s infinite spin2;left:1.1rem}.spin.dot>span:nth-child(4){background-color:#666;z-index:0;animation:1s infinite spin3;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}@media (prefers-reduced-motion){.spin.dot>span:first-child,.spin.dot>span:nth-child(2),.spin.dot>span:nth-child(3),.spin.dot>span:nth-child(4){animation-duration:2s}}.spin{display:block;padding:0.125rem;position:relative}";function p(i){switch(i){case"cycle":return n("span",{class:"loader"});case"none":return n("slot",{name:"expert"});default:return n(e,null,n("span",{class:"bg-spin-1"}),n("span",{class:"bg-spin-2"}),n("span",{class:"bg-spin-3"}),n("span",{class:"bg-neutral"}))}}const d=class{constructor(n){i(this,n),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return n(t,null,this.state._show?n("span",{"aria-busy":"true","aria-label":a("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},p(this.state._variant)):this.showToggled&&n("span",{"aria-label":a("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,r(this,i)}validateVariant(i){s(this,i)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};d.style={default:l};export{d as kol_spin};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as s}from"./index-5ab2ea42.js";import{v as e,a,b as o}from"./alternative-button-link-role-dfbba37c.js";import{v as n,a as h,b as l}from"./button-type-a25d8975.js";import{v as d}from"./aria-selected-c5542038.js";import{v as r}from"./hide-label-16112af9.js";import{v as c}from"./label-162d9b49.js";import{h as p}from"./a11y.tipps-3dbf06fc.js";import{d as u,a as b,s as f}from"./prop.validators-6cf6ed2d.js";import{v}from"./tab-index-cda3bf60.js";import{v as _}from"./tooltip-align-c2603081.js";import{v as m}from"./button-variant-fbb48c03.js";import"./dev.utils-1ee29ed1.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";import"./alignment-18ef41f0.js";const w=":host{--a11y-min-size:44px;font-size:inherit}*{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{display:flex;position:relative}.main-button{flex-grow:1;text-align:left}.main-button kol-span-wc{place-items:start}.secondary-button button{height:100%}.horizontal-line{background-color:rgba(0, 0, 0, 0.2);border-radius:2px;height:70%;margin-block:auto;width:1px}.popover{height:0;left:0;min-width:100%;overflow:hidden;position:absolute;top:100%;transition:height 0.3s ease-in-out}.popover-content{inset:0 0 auto 0;min-width:100%;position:absolute}",y=class{constructor(i){t(this,i),this.clickHandler=t=>{"function"==typeof this.state._on.onClick?this.state._on.onClick(t):this.toggleDropdown()},this.openDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height=`${this.dropdownContent.clientHeight}px`,this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!0}))},this.closeDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height="",this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!1}))},this.toggleDropdown=t=>{("boolean"==typeof t?t:!this.state._showDropdown)?this.openDropdown():this.closeDropdown()},this.forceCounter=100,this.forceOpenDropdown=()=>{var t;this.forceCounter>0&&((null===(t=this.dropdownContent)||void 0===t?void 0:t.clientHeight)?this.openDropdown():setTimeout(this.forceOpenDropdown,10),this.forceCounter--)},this.catchDropdownElements=t=>{t&&(this.dropdown=t,setTimeout((()=>{this.dropdownContent=t.firstChild,this._showDropdown&&this.forceOpenDropdown()})))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._showDropdown=!1,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icon:"",_label:"",_on:{},_showDropdown:!1}}render(){return i(s,null,i("kol-button-wc",{class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icon:this._icon,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:{onClick:this.clickHandler},_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),i("div",{class:"horizontal-line"}),i("kol-button-wc",{class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icon:"codicon codicon-triangle-down",_label:"dropdown "+(this.state._showDropdown?"schließen":"öffnen"),_on:{onClick:()=>this.toggleDropdown()}}),i("div",{class:"popover",ref:this.catchDropdownElements},i("div",{class:"popover-content"},i("slot",null))))}validateAccessKey(t){u(this,"_accessKey",t)}validateAriaControls(t){e(this,t)}validateAriaCurrent(t){a(this,t)}validateAriaExpanded(t){n(this,t)}validateAriaLabel(t){this.validateLabel(t)}validateAriaSelected(t){d(this,t)}validateCustomClass(t){u(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){h(this,t),t&&p()}validateHideLabel(t){r(this,t)}validateIcon(t){u(this,"_icon",t)}validateIconOnly(t){this.validateHideLabel(t)}validateLabel(t){c(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){o(this,t)}validateShowDropdown(t){b(this,"_showDropdown",t),this.toggleDropdown(t)}validateTabIndex(t){v(this,t)}validateTooltipAlign(t){_(this,t)}validateType(t){l(this,t)}validateValue(t){f(this,"_value",t)}validateVariant(t){m(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcon(this._icon),this.validateLabel(this._label||this._ariaLabel),this.validateOn(this._on),this.validateRole(this._role),this.validateShowDropdown(this._showDropdown),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_showDropdown:["validateShowDropdown"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};y.style={default:w};export{y as kol_split_button};
+import{r as t,h as i,H as s}from"./index-5ab2ea42.js";import{a as e}from"./prop.validators-f76b82ff.js";import"./a11y.tipps-d11c3322.js";import"./dev.utils-38b5f4df.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";const o=":host{--a11y-min-size:44px;font-size:inherit}*{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{display:flex;position:relative}.main-button{flex-grow:1;text-align:left}.main-button kol-span-wc{place-items:start}.secondary-button button{height:100%}.horizontal-line{background-color:rgba(0, 0, 0, 0.2);border-radius:2px;height:70%;margin-block:auto;width:1px}.popover{height:0;left:0;min-width:100%;overflow:hidden;position:absolute;top:100%;transition:height 0.3s ease-in-out}.popover-content{inset:0 0 auto 0;min-width:100%;position:absolute}",n=class{constructor(o){t(this,o),this.clickButtonHandler={onClick:t=>{var o,i;"function"==typeof(null===(o=this._on)||void 0===o?void 0:o.onClick)?null===(i=this._on)||void 0===i||i.onClick(t,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:()=>this.toggleDropdown()},this.openDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height=`${this.dropdownContent.clientHeight}px`,this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!0}))},this.closeDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height="",this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!1}))},this.toggleDropdown=t=>{("boolean"==typeof t?t:!this.state._showDropdown)?this.openDropdown():this.closeDropdown()},this.forceCounter=100,this.forceOpenDropdown=()=>{var t;this.forceCounter>0&&((null===(t=this.dropdownContent)||void 0===t?void 0:t.clientHeight)?this.openDropdown():setTimeout(this.forceOpenDropdown,10),this.forceCounter--)},this.catchDropdownElements=t=>{t&&(this.dropdown=t,setTimeout((()=>{this.dropdownContent=t.firstChild,this._showDropdown&&this.forceOpenDropdown()})))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._showDropdown=!1,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_showDropdown:!1}}render(){return i(s,null,i("kol-button-wc",{class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icon:this._icon,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),i("div",{class:"horizontal-line"}),i("kol-button-wc",{class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icon:"codicon codicon-triangle-down",_label:"dropdown "+(this.state._showDropdown?"schließen":"öffnen"),_on:this.clickToggleHandler}),i("div",{class:"popover",ref:this.catchDropdownElements},i("div",{class:"popover-content"},i("slot",null))))}validateShowDropdown(t){e(this,"_showDropdown",t),this.toggleDropdown(t)}componentWillLoad(){this.validateShowDropdown(this._showDropdown)}static get watchers(){return{_showDropdown:["validateShowDropdown"]}}};n.style={default:o};export{n as kol_split_button};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSplitButton","this","clickHandler","e","state","_on","onClick","toggleDropdown","openDropdown","dropdown","dropdownContent","style","height","clientHeight","Object","assign","_showDropdown","closeDropdown","value","openIt","forceCounter","forceOpenDropdown","_a","setTimeout","catchDropdownElements","firstChild","_icon","_label","render","h","Host","class","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaSelected","_disabled","_hideLabel","_name","_role","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","_value","ref","validateAccessKey","watchString","validateAriaControls","validateAriaCurrent","validateAriaExpanded","validateAriaLabel","validateLabel","validateAriaSelected","validateCustomClass","defaultValue","undefined","validateDisabled","a11yHintDisabled","validateHideLabel","validateIcon","validateIconOnly","validateOn","validateRole","validateAlternativeButtonLinkRole","validateShowDropdown","watchBoolean","validateTabIndex","validateTooltipAlign","validateType","validateButtonType","validateValue","setState","validateVariant","validateButtonVariant","componentWillLoad","_iconOnly","_ariaLabel"],"sources":["src/components/split-button/style.css?tag=kol-split-button&mode=default&encapsulation=shadow","src/components/split-button/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host {\n\tdisplay: flex;\n\tposition: relative;\n}\n.main-button {\n\tflex-grow: 1;\n\ttext-align: left;\n}\n.main-button kol-span-wc {\n\tplace-items: start;\n}\n.secondary-button button {\n\theight: 100%;\n}\n.horizontal-line {\n\tbackground-color: rgba(0, 0, 0, 0.2);\n\tborder-radius: 2px;\n\theight: 70%;\n\tmargin-block: auto;\n\twidth: 1px;\n}\n/* popover */\n.popover {\n\theight: 0;\n\tleft: 0;\n\tmin-width: 100%;\n\toverflow: hidden;\n\tposition: absolute;\n\ttop: 100%;\n\ttransition: height 0.3s ease-in-out;\n}\n.popover-content {\n\tinset: 0 0 auto 0;\n\tmin-width: 100%;\n\tposition: absolute;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { validateAriaControls } from '../../types/props/aria-controls';\nimport { AriaCurrentPropType, validateAriaCurrent } from '../../types/props/aria-current';\nimport { validateAriaExpanded } from '../../types/props/aria-expanded';\nimport { validateAriaSelected } from '../../types/props/aria-selected';\nimport { DisabledPropType, validateDisabled } from '../../types/props/disabled';\nimport { validateHideLabel } from '../../types/props/hide-label';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { StencilUnknown } from '../../types/unknown';\nimport { a11yHintDisabled } from '../../utils/a11y.tipps';\nimport { setState, watchBoolean, watchString } from '../../utils/prop.validators';\nimport { validateTabIndex } from '../../utils/validators/tab-index';\nimport { API, KoliBriSplitButtonCallback, States } from './types';\nimport { AlternativeButtonLinkRolePropType, validateAlternativeButtonLinkRole } from '../../types/props/alternative-button-link-role';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType, validateTooltipAlign } from '../../types/props/tooltip-align';\nimport { ButtonTypePropType, validateButtonType } from '../../types/props/button-type';\nimport { ButtonVariantPropType, validateButtonVariant } from '../../types/props/button-variant';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in das dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSplitButton implements API {\n\tprivate dropdown: HTMLDivElement | undefined;\n\tprivate dropdownContent: HTMLDivElement | undefined;\n\n\tprivate readonly clickHandler = (e: Event) => {\n\t\tif (typeof this.state._on.onClick === 'function') {\n\t\t\tthis.state._on.onClick(e);\n\t\t} else {\n\t\t\tthis.toggleDropdown();\n\t\t}\n\t};\n\n\tprivate readonly openDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = `${this.dropdownContent.clientHeight}px`;\n\t\t\tthis.state = { ...this.state, _showDropdown: true };\n\t\t}\n\t};\n\tprivate readonly closeDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = ``;\n\t\t\tthis.state = { ...this.state, _showDropdown: false };\n\t\t}\n\t};\n\tprivate readonly toggleDropdown = (value?: boolean) => {\n\t\tconst openIt = typeof value === 'boolean' ? value : !this.state._showDropdown;\n\t\tif (openIt) this.openDropdown();\n\t\telse this.closeDropdown();\n\t};\n\tprivate forceCounter = 100; // because the dropdown could be empty\n\tprivate readonly forceOpenDropdown = () => {\n\t\tif (this.forceCounter > 0) {\n\t\t\tif (this.dropdownContent?.clientHeight) this.openDropdown();\n\t\t\telse setTimeout(this.forceOpenDropdown, 10);\n\t\t\tthis.forceCounter--;\n\t\t}\n\t};\n\n\tprivate readonly catchDropdownElements = (e?: HTMLDivElement | null) => {\n\t\tif (e) {\n\t\t\tthis.dropdown = e;\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.dropdownContent = e.firstChild as HTMLDivElement;\n\t\t\t\tif (this._showDropdown) this.forceOpenDropdown();\n\t\t\t});\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'main-button': true,\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={{ onClick: this.clickHandler }}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"horizontal-line\"></div>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass=\"secondary-button\"\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_icon=\"codicon codicon-triangle-down\"\n\t\t\t\t\t_label={`dropdown ${this.state._showDropdown ? 'schließen' : 'öffnen'}`}\n\t\t\t\t\t_on={{ onClick: () => this.toggleDropdown() }}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"popover\" ref={this.catchDropdownElements}>\n\t\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Gibt an, welchen aktuellen Auswahlstatus das interaktive Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t *\n\t * @deprecated aria-current is not necessary for buttons. will be removed in version 2.\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrentPropType;\n\n\t/**\n\t * Gibt an, ob durch das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * 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 * Makes the element not focusable and ignore all events.\n\t * TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: string;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelPropType;\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 die Button-Events an.\n\t */\n\t@Prop() public _on?: { onClick: KoliBriSplitButtonCallback };\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Gibt die Rolle des primären Elements in der Komponente an.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _showDropdown?: boolean = false;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: States = {\n\t\t_icon: '',\n\t\t_label: '',\n\t\t_on: {},\n\t\t_showDropdown: false,\n\t};\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\twatchString(this, '_accessKey', value);\n\t}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\tvalidateAriaControls(this, value);\n\t}\n\n\t@Watch('_ariaCurrent')\n\tpublic validateAriaCurrent(value?: AriaCurrentPropType): void {\n\t\tvalidateAriaCurrent(this, value);\n\t}\n\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: boolean): void {\n\t\tvalidateAriaExpanded(this, value);\n\t}\n\n\t/**\n\t * @deprecated use _label\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: boolean): void {\n\t\tvalidateAriaSelected(this, value);\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: string): void {\n\t\twatchString(this, '_customClass', value, { defaultValue: undefined });\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t\tif (value) a11yHintDisabled();\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: string): void {\n\t\twatchString(this, '_icon', value);\n\t}\n\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\tthis.validateHideLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: { onClick: KoliBriSplitButtonCallback }): 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('_role')\n\tpublic validateRole(value?: AlternativeButtonLinkRolePropType): void {\n\t\tvalidateAlternativeButtonLinkRole(this, value);\n\t}\n\n\t@Watch('_showDropdown')\n\tpublic validateShowDropdown(value?: boolean): void {\n\t\twatchBoolean(this, '_showDropdown', value);\n\t\tthis.toggleDropdown(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this, value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: ButtonTypePropType): void {\n\t\tvalidateButtonType(this, value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tsetState(this, '_value', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: ButtonVariantPropType): void {\n\t\tvalidateButtonVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\n\t\tthis.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaCurrent(this._ariaCurrent);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHideLabel(this._hideLabel || this._iconOnly);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateShowDropdown(this._showDropdown);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["defaultStyleCss","KolSplitButton","this","clickButtonHandler","onClick","e","_a","_on","_b","_value","toggleDropdown","clickToggleHandler","openDropdown","dropdown","dropdownContent","style","height","clientHeight","state","Object","assign","_showDropdown","closeDropdown","value","openIt","forceCounter","forceOpenDropdown","setTimeout","catchDropdownElements","firstChild","render","h","Host","class","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaExpanded","_ariaSelected","_disabled","_icon","_hideLabel","_label","_name","_role","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","ref","validateShowDropdown","watchBoolean","componentWillLoad"],"sources":["src/components/split-button/style.css?tag=kol-split-button&mode=default&encapsulation=shadow","src/components/split-button/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host {\n\tdisplay: flex;\n\tposition: relative;\n}\n.main-button {\n\tflex-grow: 1;\n\ttext-align: left;\n}\n.main-button kol-span-wc {\n\tplace-items: start;\n}\n.secondary-button button {\n\theight: 100%;\n}\n.horizontal-line {\n\tbackground-color: rgba(0, 0, 0, 0.2);\n\tborder-radius: 2px;\n\theight: 70%;\n\tmargin-block: auto;\n\twidth: 1px;\n}\n/* popover */\n.popover {\n\theight: 0;\n\tleft: 0;\n\tmin-width: 100%;\n\toverflow: hidden;\n\tposition: absolute;\n\ttop: 100%;\n\ttransition: height 0.3s ease-in-out;\n}\n.popover-content {\n\tinset: 0 0 auto 0;\n\tmin-width: 100%;\n\tposition: absolute;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';\nimport { ButtonCallbacksPropType } from '../../types/props/button-callbacks';\nimport { ButtonTypePropType } from '../../types/props/button-type';\nimport { ButtonVariantPropType } from '../../types/props/button-variant';\nimport { CustomClassPropType } from '../../types/props/custom-class';\nimport { IconPropType } from '../../types/props/icon';\nimport { LabelPropType } from '../../types/props/label';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { StencilUnknown } from '../../types/unknown';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { API, States } from './types';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in das dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSplitButton implements API {\n\tprivate dropdown: HTMLDivElement | undefined;\n\tprivate dropdownContent: HTMLDivElement | undefined;\n\n\tprivate readonly clickButtonHandler = {\n\t\tonClick: (e: MouseEvent) => {\n\t\t\tif (typeof this._on?.onClick === 'function') {\n\t\t\t\t// TODO: this._on is not validated\n\t\t\t\tthis._on?.onClick(e, this._value);\n\t\t\t} else {\n\t\t\t\tthis.toggleDropdown();\n\t\t\t}\n\t\t},\n\t};\n\tprivate readonly clickToggleHandler = { onClick: () => this.toggleDropdown() };\n\n\tprivate readonly openDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = `${this.dropdownContent.clientHeight}px`;\n\t\t\tthis.state = { ...this.state, _showDropdown: true };\n\t\t}\n\t};\n\tprivate readonly closeDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = ``;\n\t\t\tthis.state = { ...this.state, _showDropdown: false };\n\t\t}\n\t};\n\tprivate readonly toggleDropdown = (value?: boolean) => {\n\t\tconst openIt = typeof value === 'boolean' ? value : !this.state._showDropdown;\n\t\tif (openIt) this.openDropdown();\n\t\telse this.closeDropdown();\n\t};\n\tprivate forceCounter = 100; // because the dropdown could be empty\n\tprivate readonly forceOpenDropdown = () => {\n\t\tif (this.forceCounter > 0) {\n\t\t\tif (this.dropdownContent?.clientHeight) this.openDropdown();\n\t\t\telse setTimeout(this.forceOpenDropdown, 10);\n\t\t\tthis.forceCounter--;\n\t\t}\n\t};\n\n\tprivate readonly catchDropdownElements = (e?: HTMLDivElement | null) => {\n\t\tif (e) {\n\t\t\tthis.dropdown = e;\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.dropdownContent = e.firstChild as HTMLDivElement;\n\t\t\t\tif (this._showDropdown) this.forceOpenDropdown();\n\t\t\t});\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'main-button': true,\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this.clickButtonHandler}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"horizontal-line\"></div>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass=\"secondary-button\"\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_icon=\"codicon codicon-triangle-down\"\n\t\t\t\t\t_label={`dropdown ${this.state._showDropdown ? 'schließen' : 'öffnen'}`}\n\t\t\t\t\t_on={this.clickToggleHandler}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"popover\" ref={this.catchDropdownElements}>\n\t\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Gibt an, ob durch das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames.\n\t */\n\t@Prop() public _icon?: IconPropType;\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelPropType;\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 * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Gibt die Rolle des primären Elements in der Komponente an.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _showDropdown?: boolean = false;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: States = {\n\t\t_showDropdown: false,\n\t};\n\n\t@Watch('_showDropdown')\n\tpublic validateShowDropdown(value?: boolean): void {\n\t\twatchBoolean(this, '_showDropdown', value);\n\t\tthis.toggleDropdown(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShowDropdown(this._showDropdown);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as a,H as e}from"./index-5ab2ea42.js";import{a as t}from"./i18n-53e49b2a.js";import{v as s}from"./label-162d9b49.js";import{d as r}from"./prop.validators-6cf6ed2d.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./a11y.tipps-3dbf06fc.js";import"./dev.utils-1ee29ed1.js";import"./reuse-c2156413.js";const l=class{constructor(a){i(this,a),this._ariaLabel=void 0,this._label=void 0,this._symbol=void 0,this.state={_label:t("kol-warning"),_symbol:"…"}}render(){return a(e,null,a("span",{"aria-label":this.state._label,role:"term"},this.state._symbol))}validateAriaLabel(a){this.validateLabel(a)}validateLabel(a){s(this,a)}validateSymbol(a){r(this,"_symbol",a,{required:!0})}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel),this.validateSymbol(this._symbol)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_symbol:["validateSymbol"]}}};export{l as kol_symbol};
+import{r as i,h as a,H as t}from"./index-5ab2ea42.js";import{a as s}from"./i18n-f8b0e840.js";import{v as e}from"./label-07fc28f5.js";import{d as r}from"./prop.validators-f76b82ff.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./a11y.tipps-d11c3322.js";import"./dev.utils-38b5f4df.js";import"./reuse-c2156413.js";const l=class{constructor(a){i(this,a),this._ariaLabel=void 0,this._label=void 0,this._symbol=void 0,this.state={_label:s("kol-warning"),_symbol:"…"}}render(){return a(t,null,a("span",{"aria-label":this.state._label,role:"term"},this.state._symbol))}validateAriaLabel(a){this.validateLabel(a)}validateLabel(a){e(this,a)}validateSymbol(a){r(this,"_symbol",a,{required:!0})}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel),this.validateSymbol(this._symbol)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_symbol:["validateSymbol"]}}};export{l as kol_symbol};