@public-ui/components 1.1.15 → 1.1.16-rc.0

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

@@ -0,0 +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","_boundaryCount","_hasButtons","first","last","next","previous","_siblingCount","_variant","render","ellipsis","pageButtons","from","keys","map","index","getSelectedPageButton","getUnselectedPageButton","h","key","Host","_customClass","_disabled","_icon","_iconOnly","_label","_tooltipAlign","_a","_hideLabel","_id","_list","onChange","_value","_ariaLabel","class","_ariaCurrent","validateBoundaryCount","watchNumber","max","validateCustomClass","watchString","defaultValue","validateHasButtons","watchValidator","Set","hooks","beforePatch","parseJson","e","delete","Object","assign","validateOn","validatePage","validatePageSize","validatePageSizeOptions","watchJsonArrayString","validateSiblingCount","validateTotal","validateTooltipAlign","watchTooltipAlignment","validateVariant","watchButtonVariant","componentWillLoad"],"sources":["./src/components/style.sass?tag=kol-pagination&mode=default&encapsulation=shadow","./src/components/pagination/component.tsx"],"sourcesContent":["/* windicss-touch: 1649810622229 */\n@windicss\n\n:host\n\n  *\n    -ms-hyphens: var(--kolibri-hyphens)\n    -webkit-hyphens: var(--kolibri-hyphens)\n    hyphens: var(--kolibri-hyphens)\n    font-family: var(--kolibri-font-family)\n    line-height: var(--kolibri-line-height)\n    word-break: break-word\n\n//     &:focus\n//       // outline-color: var(--kolibri-color-primary) !important\n//       outline-color: var(--kolibri-color-outline) !important\n//       outline-offset: 3px !important\n//       outline-style: solid !important // macht eckige Ecken\n//       outline-width: 2px !important\n//       // position: relative !important // führt zu Fehler beim Modal\n//       // z-index: 9999 !important // führt zu Fehler im Storybook\n\n//     &::selection\n//       background-color: var(--kolibri-color-primary)\n//       font-weight: 600\n//       color: white\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@public-ui/core';\nimport { KoliBriButtonVariant, KoliBriButtonVariantCustomClass, watchTooltipAlignment } from '../../types/button-link';\nimport { nonce } from '../../utils/dev.utils';\nimport { parseJson, watchJsonArrayString, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchButtonVariant } from '../button/controller';\nimport { TooltipAlignment } from '../tooltip/component';\nimport { KoliBriPaginationButtonCallbacks } from './types';\nimport { Stringified } from '../../types/common';\nimport { Option } from '../../types/input/types';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\n\n/**\n * Der HasButton-Typ definiert die Einstellungsmöglichkeiten der speziellen\n * Sprung-Schalter der Pagination.\n */\nexport type PaginationHasButton = {\n\t/**\n\t * Der First-Button ist der Schalter, um direkt auf die erste Seite zu gelangen.\n\t */\n\tfirst: boolean;\n\t/**\n\t * Der Last-Button ist der Schalter, um direkt auf die letzte Seite zu gelangen.\n\t */\n\tlast: boolean;\n\t/**\n\t * Der Next-Button ist der Schalter, um direkt auf die nächste Seite zu gelangen.\n\t */\n\tnext: boolean;\n\t/**\n\t * Der Next-Button ist der Schalter, um direkt auf die vorherige Seite zu gelangen.\n\t */\n\tprevious: boolean;\n};\n\n/**\n * API\n */\nexport type RequiredProps = {\n\ton: KoliBriPaginationButtonCallbacks;\n\tpage: number;\n\ttotal: number;\n};\nexport type OptionalProps = KoliBriButtonVariantCustomClass & {\n\tboundaryCount: number;\n\thasButtons: boolean | Stringified<PaginationHasButton>;\n\tpageSize: number;\n\tpageSizeOptions: Stringified<number[]>;\n\tsiblingCount: number;\n\ttooltipAlign: TooltipAlignment;\n};\n// export type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tboundaryCount: number;\n\thasButtons: PaginationHasButton;\n\tpage: number;\n\tpageSize: number;\n\tpageSizeOptions: Option<number>[];\n\ton: KoliBriPaginationButtonCallbacks;\n\tsiblingCount: number;\n\ttotal: number;\n};\ntype OptionalStates = KoliBriButtonVariantCustomClass & {\n\ttooltipAlign: TooltipAlignment;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst leftDoubleArrowIcon = {\n\tleft: 'fa-solid fa-angles-left',\n};\nconst leftSingleArrow = {\n\tleft: 'fa-solid fa-angle-left',\n};\nconst rightSingleArrowIcon = {\n\tright: 'fa-solid fa-angle-right',\n};\nconst rightDoubleArrowIcon = {\n\tright: 'fa-solid fa-angles-right',\n};\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: '../style.sass',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly nonce = nonce();\n\n\tprivate readonly calcCount = (total: number, pageSize = 1): number => Math.ceil(total / pageSize);\n\n\tprivate readonly getCount = (): number => this.calcCount(this.state._total, this.state._pageSize);\n\n\tpublic render(): JSX.Element {\n\t\tlet ellipsis = false;\n\t\tconst count = this.getCount();\n\t\tconst pageButtons = Array.from(Array(count).keys())\n\t\t\t.map((index: number) => index + 1)\n\t\t\t.map((page: number) => {\n\t\t\t\tif (\n\t\t\t\t\tpage <= this.state._boundaryCount ||\n\t\t\t\t\tpage > count - this.state._boundaryCount ||\n\t\t\t\t\t(page >= this.state._page - this.state._siblingCount && page <= this.state._page + this.state._siblingCount)\n\t\t\t\t) {\n\t\t\t\t\tellipsis = true;\n\t\t\t\t\tif (this.state._page === page) {\n\t\t\t\t\t\treturn this.getSelectedPageButton(page);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn this.getUnselectedPageButton(page);\n\t\t\t\t\t}\n\t\t\t\t} else if (ellipsis === true) {\n\t\t\t\t\tellipsis = false;\n\t\t\t\t\treturn <span key={`${this.nonce}-el-${page}`}>•••</span>;\n\t\t\t\t} else {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t});\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t{this.state._hasButtons.first && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t_icon={leftDoubleArrowIcon}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label=\"Direkt zur ersten Seite\"\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\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t_icon={leftSingleArrow}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label=\"Eine Seite zurück\"\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\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t_icon={rightSingleArrowIcon}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label=\"Eine Seite weiter\"\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\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t_icon={rightDoubleArrowIcon}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label=\"Direkt zur letzten Seite\"\n\t\t\t\t\t\t\t_on={this.onGoToEnd}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{this.state._pageSizeOptions?.length > 0 && (\n\t\t\t\t\t<kol-select\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_id=\"pagination-size\"\n\t\t\t\t\t\t_list={this.state._pageSizeOptions}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonChange: this.onChangePageSize,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_value={[this.state._pageSize]}\n\t\t\t\t\t>\n\t\t\t\t\t\tEinträge pro Seite\n\t\t\t\t\t</kol-select>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, wie viele Seiten neben den am Rand liegenden Pfeil-Schaltern angezeigt werden sollen.\n\t */\n\t@Prop() public _boundaryCount?: number = 1;\n\n\t/**\n\t * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t */\n\t@Prop() public _customClass?: string;\n\n\t/**\n\t * Gibt an, welche Sprung-Schalter sichtbar sein sollen.\n\t */\n\t@Prop() public _hasButtons?: boolean | Stringified<PaginationHasButton>;\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 * Gibt an, welche Optionen für die Seitenlänge angeboten werden.\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 dem aktuell ausgewählten Seite angezeigt werden.\n\t */\n\t@Prop() public _siblingCount?: number = 1;\n\n\t/**\n\t * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignment = 'top';\n\n\t/**\n\t * Gibt an, wie viele Einträge mit der Pagination gehandelt werden.\n\t */\n\t@Prop() public _total!: number;\n\n\t/**\n\t * Gibt an, welche Button-Variante verwendet werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\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\tkey={`${this.nonce}-${page}`}\n\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t_ariaLabel={`Seite ${page}`}\n\t\t\t\t_label={`${page}`}\n\t\t\t\t_on={{\n\t\t\t\t\tonClick: (event: Event) => {\n\t\t\t\t\t\tthis.onClick(event, page);\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t\t_variant={this.state._variant}\n\t\t\t></kol-button>\n\t\t);\n\t}\n\n\tprivate getSelectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<kol-button-wc\n\t\t\t\tclass=\"selected\"\n\t\t\t\tkey={`${this.nonce}-selected`}\n\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t_disabled={true}\n\t\t\t\t_ariaCurrent={true}\n\t\t\t\t_ariaLabel={`Seite ${page} ist ausgewählt`}\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: string): void {\n\t\twatchString(this, '_customClass', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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: `${value} Einträge pro Seite`,\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignment): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriButtonVariant): void {\n\t\twatchButtonVariant(this, '_variant', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\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-progress.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,H as i}from"./index-a9774259.js";import{f as s,w as a}from"./prop.validators-82b345aa.js";import"./index.m-86dc8c44.js";import"./a11y.tipps-d591ee77.js";import"./dev.utils-daaf2f39.js";import"./index-d870d3e1.js";const r=class{constructor(e){t(this,e),this._max=void 0,this._type=void 0,this._unit="%",this._value=void 0,this.state={_max:100,_type:"bar",_unit:"%",_value:0,_liveValue:0}}render(){return e(i,null,(t=>"cycle"===t._type?e("svg",{width:"100",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},e("circle",{fill:"none",stroke:"#efefef",cx:"6px",cy:"6px",r:"5px"}),e("circle",{class:"cycle","stroke-linecap":"round","stroke-dasharray":`${Math.round(t._value/t._max*32)}px 32px`,fill:"none",stroke:"#0075ff",cx:"6px",cy:"6px",r:"5px"})):e("svg",{width:"100",viewBox:"0 0 24 2",xmlns:"http://www.w3.org/2000/svg"},e("line",{"stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:"23",y2:"1",fill:"#efefef",stroke:"#efefef"}),e("line",{class:"bar","stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:`${1+Math.round(t._value/t._max*22)}`,y2:"1",fill:"#0075ff",stroke:"#0075ff"})))(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"},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateMax(t){"number"!=typeof t&&(t=100),s(this,"_max",t,{required:!0})}validateType(t){if("cycle"===t);else t="bar";this.state=Object.assign(Object.assign({},this.state),{_type:t})}validateUnit(t){a(this,"_unit",t)}validateValue(t){"number"!=typeof t&&(t=0),s(this,"_value",t,{required:!0})}componentWillLoad(){this.validateMax(this._max),this.validateType(this._type),this.validateUnit(this._unit),this.validateValue(this._value),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_max:["validateMax"],_type:["validateType"],_unit:["validateUnit"],_value:["validateValue"]}}};r.style={default:":host progress,:host span{display:block;height:0px;overflow:hidden;width:0px}:host .bar,:host .cycle{transition:all 0.5s ease-in-out 0s;transition-property:all;transition-duration:0.5s;transition-timing-function:ease-in-out;transition-delay:0.25s}:host .cycle{transform-origin:50% 50%;transform:rotate(-90deg)}"};export{r as kol_progress};
+import{r as t,h as e,H as i}from"./index-90999368.js";import{f as s,w as a}from"./prop.validators-82b345aa.js";import"./index.m-86dc8c44.js";import"./a11y.tipps-d591ee77.js";import"./dev.utils-daaf2f39.js";import"./index-d870d3e1.js";const r=":host progress,:host span{display:block;height:0px;overflow:hidden;width:0px}:host .bar,:host .cycle{transition:all 0.5s ease-in-out 0s;transition-property:all;transition-duration:0.5s;transition-timing-function:ease-in-out;transition-delay:0.25s}:host .cycle{transform-origin:50% 50%;transform:rotate(-90deg)}",l=t=>"cycle"===t._type?e("svg",{width:"100",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},e("circle",{fill:"none",stroke:"#efefef",cx:"6px",cy:"6px",r:"5px"}),e("circle",{class:"cycle","stroke-linecap":"round","stroke-dasharray":`${Math.round(t._value/t._max*32)}px 32px`,fill:"none",stroke:"#0075ff",cx:"6px",cy:"6px",r:"5px"})):e("svg",{width:"100",viewBox:"0 0 24 2",xmlns:"http://www.w3.org/2000/svg"},e("line",{"stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:"23",y2:"1",fill:"#efefef",stroke:"#efefef"}),e("line",{class:"bar","stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:`${1+Math.round(t._value/t._max*22)}`,y2:"1",fill:"#0075ff",stroke:"#0075ff"})),n=class{constructor(e){t(this,e),this._max=void 0,this._type=void 0,this._unit="%",this._value=void 0,this.state={_max:100,_type:"bar",_unit:"%",_value:0,_liveValue:0}}render(){return e(i,null,l(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"},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateMax(t){"number"!=typeof t&&(t=100),s(this,"_max",t,{required:!0})}validateType(t){if("cycle"===t);else t="bar";this.state=Object.assign(Object.assign({},this.state),{_type:t})}validateUnit(t){a(this,"_unit",t)}validateValue(t){"number"!=typeof t&&(t=0),s(this,"_value",t,{required:!0})}componentWillLoad(){this.validateMax(this._max),this.validateType(this._type),this.validateUnit(this._unit),this.validateValue(this._value),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_max:["validateMax"],_type:["validateType"],_unit:["validateUnit"],_value:["validateValue"]}}};n.style={default:r};export{n as kol_progress};

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

@@ -0,0 +1 @@
+{"version":3,"names":["defaultStyleCss","createProgressSVG","state","_type","h","width","viewBox","xmlns","fill","stroke","cx","cy","r","class","Math","round","_value","_max","x1","y1","x2","y2","KolProcess","_unit","_liveValue","render","Host","this","max","value","validateMax","watchNumber","required","validateType","Object","assign","validateUnit","watchString","validateValue","componentWillLoad","interval","setInterval","disconnectedCallback","clearInterval"],"sources":["./src/components/progress/style.sass?tag=kol-progress&mode=default&encapsulation=shadow","./src/components/progress/component.tsx"],"sourcesContent":[":host\n\n  progress,\n  span\n    display: block\n    height: 0px\n    overflow: hidden\n    width: 0px\n\n  .bar,\n  .cycle\n    transition: all .5s ease-in-out 0s\n    transition-property: all\n    transition-duration: .5s\n    transition-timing-function: ease-in-out\n    transition-delay: .25s\n\n  .cycle\n    transform-origin: 50% 50%\n    transform: rotate(-90deg)\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@public-ui/core';\nimport { KoliBriProgressType } from '../../types/progress';\nimport { watchNumber, watchString } from '../../utils/prop.validators';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tmax: number;\n\tvalue: number;\n};\ntype OptionalProps = {\n\ttype: KoliBriProgressType;\n\tunit: string;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & {\n\tliveValue: number;\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: States): JSX.Element => {\n\tswitch (state._type) {\n\t\tcase 'cycle':\n\t\t\treturn (\n\t\t\t\t<svg width=\"100\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle fill=\"none\" stroke=\"#efefef\" cx=\"6px\" cy=\"6px\" r=\"5px\"></circle>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"cycle\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * 32)}px 32px`}\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t\tcx=\"6px\"\n\t\t\t\t\t\tcy=\"6px\"\n\t\t\t\t\t\tr=\"5px\"\n\t\t\t\t\t></circle>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<svg width=\"100\" viewBox=\"0 0 24 2\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<line stroke-width=\"2\" x1=\"1\" stroke-linecap=\"round\" y1=\"1\" x2=\"23\" y2=\"1\" fill=\"#efefef\" stroke=\"#efefef\"></line>\n\t\t\t\t\t<line\n\t\t\t\t\t\tclass=\"bar\"\n\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\tx1=\"1\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\ty1=\"1\"\n\t\t\t\t\t\tx2={`${1 + Math.round((state._value / state._max) * 22)}`}\n\t\t\t\t\t\ty2=\"1\"\n\t\t\t\t\t\tfill=\"#0075ff\"\n\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t></line>\n\t\t\t\t</svg>\n\t\t\t);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.sass',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate interval?: NodeJS.Timer;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t<progress aria-busy={this.state._value < this.state._max ? 'true' : 'false'} max={this.state._max} value={this.state._value}></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\">\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.\n\t */\n\t@Prop() public _type?: KoliBriProgressType;\n\n\t/**\n\t * Gibt die Einheit der Fortschrittswerte an.\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Gibt an, wie weit die Anzeige fortgeschritten ist.\n\t */\n\t@Prop() public _value!: number;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_max: 100,\n\t\t_type: 'bar',\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_liveValue: 0,\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriProgressType): void {\n\t\tswitch (value) {\n\t\t\tcase 'cycle':\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tvalue = 'bar';\n\t\t}\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_type: value,\n\t\t};\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateMax(this._max);\n\t\tthis.validateType(this._type);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval as unknown as number);\n\t}\n}\n"],"mappings":";;;0OAAA,MAAMA,EAAkB,yTC0BxB,MAAMC,EAAqBC,IAC1B,OAAQA,EAAMC,OACb,IAAK,QACJ,OACCC,EAAA,OAAKC,MAAM,MAAMC,QAAQ,YAAYC,MAAM,8BAC1CH,EAAA,UAAQI,KAAK,OAAOC,OAAO,UAAUC,GAAG,MAAMC,GAAG,MAAMC,EAAE,QACzDR,EAAA,UACCS,MAAM,QAAO,iBACE,QAAO,mBACJ,GAAGC,KAAKC,MAAOb,EAAMc,OAASd,EAAMe,KAAQ,aAC9DT,KAAK,OACLC,OAAO,UACPC,GAAG,MACHC,GAAG,MACHC,EAAE,SAIN,QACC,OACCR,EAAA,OAAKC,MAAM,MAAMC,QAAQ,WAAWC,MAAM,8BACzCH,EAAA,uBAAmB,IAAIc,GAAG,IAAG,iBAAgB,QAAQC,GAAG,IAAIC,GAAG,KAAKC,GAAG,IAAIb,KAAK,UAAUC,OAAO,YACjGL,EAAA,QACCS,MAAM,MAAK,eACE,IACbK,GAAG,IAAG,iBACS,QACfC,GAAG,IACHC,GAAI,GAAG,EAAIN,KAAKC,MAAOb,EAAMc,OAASd,EAAMe,KAAQ,MACpDI,GAAG,IACHb,KAAK,UACLC,OAAO,a,QAcAa,EAAU,M,6EA6BU,I,iCAUA,CAC/BL,KAAM,IACNd,MAAO,MACPoB,MAAO,IACPP,OAAQ,EACRQ,WAAY,E,CAxCNC,SACN,OACCrB,EAACsB,EAAI,KACHzB,EAAkB0B,KAAKzB,OACxBE,EAAA,wBAAqBuB,KAAKzB,MAAMc,OAASW,KAAKzB,MAAMe,KAAO,OAAS,QAASW,IAAKD,KAAKzB,MAAMe,KAAMY,MAAOF,KAAKzB,MAAMc,SACrHZ,EAAA,oBAAgB,SAAQ,gBAAe,iBACrCuB,KAAKzB,MAAMsB,WAAU,QAAOG,KAAKzB,MAAMe,KAAI,IAAGU,KAAKzB,MAAMqB,O,CAyCvDO,YAAYD,GAClB,UAAWA,IAAU,SAAU,CAC9BA,EAAQ,G,CAETE,EAAYJ,KAAM,OAAQE,EAAO,CAChCG,SAAU,M,CAQLC,aAAaJ,GACnB,OAAQA,GACP,IAAK,QACJ,MACD,QACCA,EAAQ,MAEVF,KAAKzB,MAAKgC,OAAAC,OAAAD,OAAAC,OAAA,GACNR,KAAKzB,OAAK,CACbC,MAAO0B,G,CAQFO,aAAaP,GACnBQ,EAAYV,KAAM,QAASE,E,CAOrBS,cAAcT,GACpB,UAAWA,IAAU,SAAU,CAC9BA,EAAQ,C,CAETE,EAAYJ,KAAM,SAAUE,EAAO,CAElCG,SAAU,M,CAOLO,oBACNZ,KAAKG,YAAYH,KAAKV,MACtBU,KAAKM,aAAaN,KAAKxB,OACvBwB,KAAKS,aAAaT,KAAKJ,OACvBI,KAAKW,cAAcX,KAAKX,QAExBW,KAAKa,SAAWC,aAAY,KAC3B,GAAId,KAAKzB,MAAMsB,aAAeG,KAAKzB,MAAMc,OAAQ,CAChDW,KAAKzB,MAAKgC,OAAAC,OAAAD,OAAAC,OAAA,GACNR,KAAKzB,OAAK,CACbsB,WAAYG,KAAKzB,MAAMc,Q,IAGvB,I,CAGG0B,uBACNC,cAAchB,KAAKa,S"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,H as i,g as a}from"./index-a9774259.js";import{I as r,g as o}from"./controller-014fc17e.js";import{w as l,c as s,b as n,f as d}from"./prop.validators-82b345aa.js";import{S as c}from"./validator-fe8c60ef.js";import{f as h}from"./controller-ca25e97c.js";import"./a11y.tipps-d591ee77.js";import"./dev.utils-daaf2f39.js";import"./tab-index-7a782a55.js";import"./index.m-86dc8c44.js";import"./index-d870d3e1.js";const p=t=>"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0&&(!Array.isArray(t.options)||void 0===t.options.find((t=>!1===p(t))));class v extends r{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchListValue=(t,e)=>{const i=e.has("_list")?e.get("_list"):this.component.state._list;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),h(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){l(this.component,"_height",t)}validateList(t){s(this.component,"_list",p,t,void 0,{hooks:{beforePatch:this.beforePatchListValue}})}validateMultiple(t){n(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchListValue}})}validateRequired(t){n(this.component,"_required",t)}validateSize(t){d(this.component,"_size",t,{min:1})}validateValue(t){s(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchListValue}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(c)}))}},this.validateHeight(this.component._height),this.validateList(this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateSize(this.component._size),this.validateValue(this.component._value)}}const b=(t,e)=>Array.isArray(t)&&t.includes(e),w=class{constructor(e){t(this,e),this.onChange=t=>{var e,i;this._value=Array.from((null===(e=this.htmlSelect)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._height=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=void 0,this._size=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_height:"",_id:"⚠",_list:[],_multiple:!1,_value:[]},this.controller=new v(this,"textarea",this.host)}renderOptgroup(t,i){var a;return e("optgroup",{disabled:!0===t.disabled,label:t.label},null===(a=t.options)||void 0===a?void 0:a.map(((t,a)=>{const r=`${i}-${a}`;return Array.isArray(t.options)?this.renderOptgroup(t,r):e("option",{disabled:!0===t.disabled,key:r,selected:b(this.state._value,t.value),value:r},t.label)})))}render(){const{ariaDiscribedBy:t}=o(this.state);return e(i,null,e("kol-input",{_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},e("span",{slot:"label"},e("slot",null)),e("select",Object.assign({part:"select",title:"",ref:t=>this.htmlSelect=t,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,slot:"input",spellcheck:"false",style:{height:this.state._height}},{onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus},{onChange:this.onChange}),this.state._list.map(((t,i)=>{const a=`-${i}`;return Array.isArray(t.options)?this.renderOptgroup(t,a):e("option",{disabled:!0===t.disabled,key:a,selected:b(this.state._value,t.value),value:a},t.label)})))))}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHeight(t){this.controller.validateHeight(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_size:["validateSize"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};w.style={default:'*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--kolibri-border-color)}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:var(--kolibri-color);--tw-ring-color:rgba(undefined, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::moz-focus-inner{border-style:none;padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=\'search\']{-webkit-appearance:textfield;outline-offset:-2px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}b{font-weight:bolder}button,select{text-transform:none}button,[type=\'button\'],[type=\'reset\'],[type=\'submit\']{-webkit-appearance:button}button{background-color:transparent;background-image:none}button,[role="button"]{cursor:pointer}code{font-size:1em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}fieldset{margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}h1,p,h2,h3,h4,h5,h6{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}input,button,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;padding:0;line-height:inherit;color:inherit}input::placeholder{opacity:1;color:#9ca3af}input::webkit-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder{opacity:1;color:#9ca3af}input::-ms-input-placeholder{opacity:1;color:#9ca3af}legend{padding:0}progress{vertical-align:baseline}small{font-size:80%}svg{display:block;vertical-align:middle}table{text-indent:0;border-color:inherit;border-collapse:collapse}textarea{resize:vertical}textarea::placeholder{opacity:1;color:#9ca3af}textarea::webkit-input-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}ul,ol{list-style:none;margin:0;padding:0}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.bg-normal{background-color:var(--kolibri-color-normal)}.bg-white{--tw-bg-opacity:1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity))}.bg-spin-1{background-color:var(--kolibri-color-spin-1)}.bg-spin-2{background-color:var(--kolibri-color-spin-2)}.bg-spin-3{background-color:var(--kolibri-color-spin-3)}.rounded{border-radius:var(--kolibri-border-radius)}.border-1{border-width:1px}.cursor-pointer{cursor:pointer}.block{display:block}.inline-block{display:inline-block}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}.table{display:table}.grid{display:-ms-grid;display:grid}.hidden{display:none}.flex-wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.items-center{-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.content-center{-ms-flex-line-pack:center;-webkit-align-content:center;align-content:center}.float-left{float:left}.font-80{font-weight:80}.font-60{font-weight:60}.h-full{height:100%}.h-0{height:0px}.h-0\\.41c-2\\.42\\2c 0-4\\.82-1\\.57-4\\.82-3\\.58c0\\.05-0\\.98\\2c 0\\.43-1\\.91\\2c 1\\.07-2\\.65c0\\.3\\2c 0\\.05\\2c 0\\.61\\2c 0\\.09\\2c 0\\.92\\2c 0\\.09c1\\.1\\2c 0\\2c 1\\.69-0\\.58\\2c 1\\.74-1\\.16{height:0.29rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.leading-normal{line-height:1.5}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:calc(1 * var(--kolibri-spacing))}.mr-2{margin-right:calc(2 * var(--kolibri-spacing))}.ml-2{margin-left:calc(2 * var(--kolibri-spacing))}.mt-2{margin-top:calc(2 * var(--kolibri-spacing))}.mt-4{margin-top:calc(4 * var(--kolibri-spacing))}.outline{outline-style:solid}.overflow-hidden{overflow:hidden}.overflow-y-visible{overflow-y:visible}.p-2{padding:calc(2 * var(--kolibri-spacing))}.p-4{padding:calc(4 * var(--kolibri-spacing))}.px{padding-left:1px;padding-right:1px}.py-2{padding-top:calc(2 * var(--kolibri-spacing));padding-bottom:calc(2 * var(--kolibri-spacing))}.pl-8{padding-left:2rem}.pb-2{padding-bottom:calc(2 * var(--kolibri-spacing))}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.absolute{position:absolute}.text-center{text-align:center}.text-normal{color:var(--kolibri-color-normal)}.hover\\:text-primary:hover{color:var(--kolibri-color-primary)}.italic{font-style:italic}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.indent{text-indent:1.5rem}.visible{visibility:visible}.w-full{width:100%}.w-4\\/5{width:80%}.z-50{z-index:50}.gap-1{grid-gap:calc(1 * var(--kolibri-spacing));gap:calc(1 * var(--kolibri-spacing))}.gap-2{grid-gap:calc(2 * var(--kolibri-spacing));gap:calc(2 * var(--kolibri-spacing))}.grid-flow-col{grid-auto-flow:column}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate:0;--tw-rotate-x:0;--tw-rotate-y:0;--tw-rotate-z:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;-webkit-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));-ms-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z))}.animate{-webkit-animation-iteration-count:1;animation-iteration-count:1}.filter{--tw-blur:var(--tw-empty, );--tw-brightness:var(--tw-empty, );--tw-contrast:var(--tw-empty, );--tw-grayscale:var(--tw-empty, );--tw-hue-rotate:var(--tw-empty, );--tw-invert:var(--tw-empty, );--tw-saturate:var(--tw-empty, );--tw-sepia:var(--tw-empty, );--tw-drop-shadow:var(--tw-empty, );-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:host *{-ms-hyphens:var(--kolibri-hyphens);-webkit-hyphens:var(--kolibri-hyphens);hyphens:var(--kolibri-hyphens);font-family:var(--kolibri-font-family);line-height:var(--kolibri-line-height);word-break:break-word}.kol-required span::after{content:"*"}input,select,textarea{border-color:var(--kolibri-border-color);border-style:solid;border-width:1px}input.error,select.error,textarea.error{border-color:var(--kolibri-border-error)}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover{border-color:#999}input:not([type=checkbox]),option,select,textarea{font-size:inherit;letter-spacing:inherit;word-spacing:inherit}.kol-disabled{opacity:0.5}.kol-cursor-not-allowed,.kol-cursor-not-allowed *{cursor:not-allowed}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,textarea{background-color:white;display:block;line-height:1em;padding:0.5em}input[type=color]{height:2.5em;padding:0.25em 0.5em}textarea{padding:0.5em}'};export{w as kol_select};
+import{h as t,H as e,r as i,g as a}from"./index-90999368.js";import{p as r}from"./reuse-f9be4952.js";import{I as o,g as l}from"./controller-1dd6b29e.js";import{w as s,c as n,b as d,f as c}from"./prop.validators-82b345aa.js";import{S as h}from"./validator-8ee8737c.js";import{f as p}from"./controller-1213105c.js";import"./a11y.tipps-d591ee77.js";import"./dev.utils-daaf2f39.js";import"./tab-index-f5bd7bba.js";import"./index.m-86dc8c44.js";import"./index-d870d3e1.js";const u=t=>"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0&&(!Array.isArray(t.options)||void 0===t.options.find((t=>!1===u(t))));class b extends o{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchListValue=(t,e)=>{const i=e.has("_list")?e.get("_list"):this.component.state._list;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),p(this.keyOptionMap,i);const t=e.has("_value")?e.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],i);!1===this.component._multiple&&0===a.length?(e.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(t)&&a.length<t.length&&(e.set("_value",a),this.onStateChange())}},this.component=t}validateHeight(t){s(this.component,"_height",t)}validateList(t){n(this.component,"_list",u,t,void 0,{hooks:{beforePatch:this.beforePatchListValue}})}validateMultiple(t){d(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchListValue}})}validateRequired(t){d(this.component,"_required",t)}validateSize(t){c(this.component,"_size",t,{min:1})}validateValue(t){n(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchListValue}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(h)}))}},this.validateHeight(this.component._height),this.validateList(this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateSize(this.component._size),this.validateValue(this.component._value)}}const w='*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--kolibri-border-color)}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:var(--kolibri-color);--tw-ring-color:rgba(undefined, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::moz-focus-inner{border-style:none;padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=\'search\']{-webkit-appearance:textfield;outline-offset:-2px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}b,strong{font-weight:bolder}button,select{text-transform:none}button,[type=\'button\'],[type=\'reset\'],[type=\'submit\']{-webkit-appearance:button}button{background-color:transparent;background-image:none}button,[role="button"]{cursor:pointer}code{font-size:1em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}fieldset{margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}h1,p,h2,h3,h4,h5,h6{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}input,button,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;padding:0;line-height:inherit;color:inherit}input::placeholder{opacity:1;color:#9ca3af}input::webkit-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder{opacity:1;color:#9ca3af}input::-ms-input-placeholder{opacity:1;color:#9ca3af}legend{padding:0}progress{vertical-align:baseline}small{font-size:80%}svg{display:block;vertical-align:middle}table{text-indent:0;border-color:inherit;border-collapse:collapse}textarea{resize:vertical}textarea::placeholder{opacity:1;color:#9ca3af}textarea::webkit-input-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}ul,ol{list-style:none;margin:0;padding:0}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.bg-normal{background-color:var(--kolibri-color-normal)}.bg-white{--tw-bg-opacity:1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity))}.bg-spin-1{background-color:var(--kolibri-color-spin-1)}.bg-spin-2{background-color:var(--kolibri-color-spin-2)}.bg-spin-3{background-color:var(--kolibri-color-spin-3)}.rounded{border-radius:var(--kolibri-border-radius)}.border-1{border-width:1px}.cursor-pointer{cursor:pointer}.block{display:block}.inline-block{display:inline-block}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}.table{display:table}.grid{display:-ms-grid;display:grid}.hidden{display:none}.flex-wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.items-center{-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.content-center{-ms-flex-line-pack:center;-webkit-align-content:center;align-content:center}.font-80{font-weight:80}.font-60{font-weight:60}.h-full{height:100%}.h-0{height:0px}.h-0\\.41c-2\\.42\\2c 0-4\\.82-1\\.57-4\\.82-3\\.58c0\\.05-0\\.98\\2c 0\\.43-1\\.91\\2c 1\\.07-2\\.65c0\\.3\\2c 0\\.05\\2c 0\\.61\\2c 0\\.09\\2c 0\\.92\\2c 0\\.09c1\\.1\\2c 0\\2c 1\\.69-0\\.58\\2c 1\\.74-1\\.16{height:0.29rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.leading-normal{line-height:1.5}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:calc(1 * var(--kolibri-spacing))}.mt-2{margin-top:calc(2 * var(--kolibri-spacing))}.mt-4{margin-top:calc(4 * var(--kolibri-spacing))}.mr-2{margin-right:calc(2 * var(--kolibri-spacing))}.ml-2{margin-left:calc(2 * var(--kolibri-spacing))}.outline{outline-style:solid}.overflow-hidden{overflow:hidden}.overflow-y-visible{overflow-y:visible}.p-2{padding:calc(2 * var(--kolibri-spacing))}.p-4{padding:calc(4 * var(--kolibri-spacing))}.px{padding-left:1px;padding-right:1px}.py-2{padding-top:calc(2 * var(--kolibri-spacing));padding-bottom:calc(2 * var(--kolibri-spacing))}.pl-8{padding-left:2rem}.pb-2{padding-bottom:calc(2 * var(--kolibri-spacing))}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.absolute{position:absolute}.text-center{text-align:center}.text-normal{color:var(--kolibri-color-normal)}.hover\\:text-primary:hover{color:var(--kolibri-color-primary)}.italic{font-style:italic}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.indent{text-indent:1.5rem}.visible{visibility:visible}.w-full{width:100%}.w-4\\/5{width:80%}.z-50{z-index:50}.gap-1{grid-gap:calc(1 * var(--kolibri-spacing));gap:calc(1 * var(--kolibri-spacing))}.gap-2{grid-gap:calc(2 * var(--kolibri-spacing));gap:calc(2 * var(--kolibri-spacing))}.grid-flow-col{grid-auto-flow:column}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate:0;--tw-rotate-x:0;--tw-rotate-y:0;--tw-rotate-z:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;-webkit-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));-ms-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z))}.animate{-webkit-animation-iteration-count:1;animation-iteration-count:1}.filter{--tw-blur:var(--tw-empty, );--tw-brightness:var(--tw-empty, );--tw-contrast:var(--tw-empty, );--tw-grayscale:var(--tw-empty, );--tw-hue-rotate:var(--tw-empty, );--tw-invert:var(--tw-empty, );--tw-saturate:var(--tw-empty, );--tw-sepia:var(--tw-empty, );--tw-drop-shadow:var(--tw-empty, );-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:host *{-ms-hyphens:var(--kolibri-hyphens);-webkit-hyphens:var(--kolibri-hyphens);hyphens:var(--kolibri-hyphens);font-family:var(--kolibri-font-family);line-height:var(--kolibri-line-height);word-break:break-word}.kol-required span::after{content:"*"}input,select,textarea{border-color:var(--kolibri-border-color);border-style:solid;border-width:1px}input.error,select.error,textarea.error{border-color:var(--kolibri-border-error)}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover{border-color:#999}input:not([type=checkbox]),option,select,textarea{font-size:inherit;letter-spacing:inherit;word-spacing:inherit}.kol-disabled{opacity:0.5}.kol-cursor-not-allowed,.kol-cursor-not-allowed *{cursor:not-allowed}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,textarea{background-color:white;display:block;line-height:1em;padding:0.5em}input[type=color]{height:2.5em;padding:0.25em 0.5em}textarea{padding:0.5em}',v=(t,e)=>Array.isArray(t)&&t.includes(e),f=class{renderOptgroup(e,i){var a;return t("optgroup",{disabled:!0===e.disabled,label:e.label},null===(a=e.options)||void 0===a?void 0:a.map(((e,a)=>{const r=`${i}-${a}`;return Array.isArray(e.options)?this.renderOptgroup(e,r):t("option",{disabled:!0===e.disabled,key:r,selected:v(this.state._value,e.value),value:r},e.label)})))}render(){const{ariaDiscribedBy:i}=l(this.state);return t(e,null,t("kol-input",{_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},t("span",{slot:"label"},t("slot",null)),t("select",Object.assign({ref:this.catchRef,part:"select",title:"","aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,slot:"input",spellcheck:"false",style:{height:this.state._height}},{onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus},{onChange:this.onChange}),this.state._list.map(((e,i)=>{const a=`-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:!0===e.disabled,key:a,selected:v(this.state._value,e.value),value:a},e.label)})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,r(this.host,this.ref)},this.onChange=t=>{var e,i;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._height=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=void 0,this._size=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_height:"",_id:"⚠",_list:[],_multiple:!1,_value:[]},this.controller=new b(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHeight(t){this.controller.validateHeight(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_size:["validateSize"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};f.style={default:w};export{f as kol_select};

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

@@ -0,0 +1 @@
+{"version":3,"names":["validateInputSelectList","option","label","length","Array","isArray","options","find","item","undefined","SelectController","InputController","constructor","component","name","host","super","this","keyOptionMap","Map","getOptionByKey","key","get","isValueInOptions","value","filterValuesInOptions","values","filter","beforePatchListValue","_value","nextState","list","has","state","_list","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHeight","watchString","validateList","watchJsonArrayString","hooks","beforePatch","validateMultiple","watchBoolean","validateRequired","validateSize","watchNumber","min","validateValue","setFormAssociatedValue","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_height","_required","_size","defaultInputLineCss","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","disabled","_a","map","index","render","ariaDiscribedBy","getRenderStates","Host","_disabled","_error","_hideLabel","_hint","_icon","_id","_touched","slot","Object","assign","ref","catchRef","part","title","join","autoCapitalize","autoCorrect","id","multiple","_name","required","spellcheck","style","height","onClick","controller","onFacade","onBlur","onFocus","hostRef","propergateFocus","event","from","_b","_on","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateName","validateOn","validateTabIndex","validateTouched","_alert"],"sources":["./src/components/select/controller.ts","./src/components/input-line.sass?tag=kol-select&mode=default&encapsulation=shadow","./src/components/select/component.tsx"],"sourcesContent":["import { Generic } from '@public-ui/core';\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { watchBoolean, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { InputController } from '../@deprecated/input/controller';\nimport { fillKeyOptionMap } from '../input-radio/controller';\nimport { Props, Watches } from './types';\n\nconst validateInputSelectList = <T>(option: SelectOption<T>): boolean => {\n\tif (typeof option === 'object' && option !== null && typeof option.label === 'string' && option.label.length > 0) {\n\t\tif (Array.isArray((option as Optgroup<T>).options)) {\n\t\t\treturn (\n\t\t\t\t(option as Optgroup<T>).options.find((item) => {\n\t\t\t\t\treturn validateInputSelectList(item) === false;\n\t\t\t\t}) === undefined\n\t\t\t);\n\t\t}\n\t\treturn true;\n\t}\n\treturn false;\n};\n\nexport class SelectController extends InputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<unknown>>();\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly getOptionByKey = (key: string): Option<unknown> | undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<unknown>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<unknown>).value === 'string'\n\t\t\t\t\t? (option as Option<unknown>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t: false\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<unknown>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprivate readonly beforePatchListValue = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst list = nextState.has('_list') ? nextState.get('_list') : this.component.state._list;\n\t\tif (Array.isArray(list) && list.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, list as SelectOption<unknown>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(Array.isArray(value) && value.length > 0 ? (value as string[]) : [], list as SelectOption<unknown>[]);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\tlist[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t\tthis.onStateChange();\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t\tthis.onStateChange();\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateHeight(value?: string): void {\n\t\twatchString(this.component, '_height', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateList<T>(value?: SelectOption<T>[] | string): void {\n\t\twatchJsonArrayString(this.component, '_list', validateInputSelectList, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Aktuell wird die Mehrfachauswahl noch nicht unterstützt. Wir sind dran die Mehrfachauswahl funktionsfähig zu implementieren, da der Browser-Standard hier ein paar Lücken hat.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] Bei der Mehrfachauswahl sollte zusätzlich auch die Listenlänge (size) gesetzt werden.');\n\t\t// }\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateSize(value?: number): void {\n\t\twatchNumber(this.component, '_size', value, {\n\t\t\tmin: 1,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateValue(value?: Stringified<unknown[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(onChange?: (event: Event) => void): void {\n\t\tsuper.componentWillLoad();\n\n\t\tthis.onStateChange = () => {\n\t\t\tif (typeof onChange === 'function') {\n\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\tonChange(STATE_CHANGE_EVENT);\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tthis.validateHeight(this.component._height);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateSize(this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","/* windicss-touch: 1648259771586 */\n@import ./input\n\n.kol-disabled\n  opacity: 0.5\n\n.kol-cursor-not-allowed,\n.kol-cursor-not-allowed *\n  cursor: not-allowed\n\ninput[type=\"color\"],\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"email\"],\ninput[type=\"file\"],\ninput[type=\"month\"],\ninput[type=\"number\"],\ninput[type=\"password\"],\ninput[type=\"search\"],\ninput[type=\"tel\"],\ninput[type=\"text\"],\ninput[type=\"time\"],\ninput[type=\"url\"],\ninput[type=\"week\"],\nselect,\ntextarea\n  background-color: white\n  display: block\n  line-height: 1em\n  padding: .5em\n\ninput[type=\"color\"]\n  height: 2.5em\n  padding: .25em 0.5em\n\ntextarea\n  padding: .5em\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { propergateFocus } from '../../utils/reuse';\nimport { KoliBriInputIcon } from '../input-text/types';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { ComponentApi, States } from './types';\n\nconst isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n/**\n * @part select - Ermöglicht das Stylen des select-Knotens.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: '../input-line.sass',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate ref?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled === true} label={optgroup.label}>\n\t\t\t\t{optgroup.options?.map((option: SelectOption<unknown>, index: number) => {\n\t\t\t\t\tconst key = `${preKey}-${index}`;\n\t\t\t\t\tif (Array.isArray((option as Optgroup<string>).options)) {\n\t\t\t\t\t\treturn this.renderOptgroup(option as Optgroup<string>, key);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as Option<unknown>).value)}\n\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</optgroup>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDiscribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<select\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\tpart=\"select\"\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\t\t\t\t\t\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as unknown as Option<unknown>).value)}\n\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})}\n\t\t\t\t\t</select>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob eine individuelle Höhe übergeben werden soll.\n\t */\n\t@Prop() public _height?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriInputIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _list!: Stringified<SelectOption<unknown>[]>;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop({ reflect: true }) public _multiple?: boolean = false;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Gibt an, ob die Selectbox ein Pflichtfeld ist.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt an, wie viele Optionen im Drop-Down-Menü sichtbar sein sollen.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _value?: Stringified<unknown[]>;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_height: '',\n\t\t_id: '⚠',\n\t\t_list: [],\n\t\t_multiple: false,\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'textarea', this.host);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriInputIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<SelectOption<unknown>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\t/**\n\t\t * TODO: Find values via value keys.\n\t\t */\n\t\tthis._value = Array.from(this.ref?.options || [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t};\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e}from"./index-a9774259.js";import{a}from"./a11y.tipps-d591ee77.js";import{w as i}from"./prop.validators-82b345aa.js";import{w as r}from"./validation-54731d67.js";import"./dev.utils-daaf2f39.js";import"./index.m-86dc8c44.js";import"./index-d870d3e1.js";const o=class{constructor(a){t(this,a),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return e("nav",{"aria-label":this.state._ariaLabel},e("ul",{class:"w-full z-50"},this.state._links.map(((t,a)=>e("li",{class:"text-center content-center h-0 overflow-y-visible",key:a},e("kol-link",Object.assign({class:"inline-block mt-4 mx-auto w-4/5",exportparts:"link"},t,{_ariaLabel:t._ariaLabel,_useCase:"nav",_stealth:!0}),t._label)," ")))))}validateAriaLabel(t){i(this,"_ariaLabel",t,{required:!0}),a(t)}validateLinks(t){r("KolSkipNav",this,t)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};o.style={default:'*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--kolibri-border-color)}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:var(--kolibri-color);--tw-ring-color:rgba(undefined, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::moz-focus-inner{border-style:none;padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=\'search\']{-webkit-appearance:textfield;outline-offset:-2px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}b{font-weight:bolder}button,select{text-transform:none}button,[type=\'button\'],[type=\'reset\'],[type=\'submit\']{-webkit-appearance:button}button{background-color:transparent;background-image:none}button,[role="button"]{cursor:pointer}code{font-size:1em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}fieldset{margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}h1,p,h2,h3,h4,h5,h6{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}input,button,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;padding:0;line-height:inherit;color:inherit}input::placeholder{opacity:1;color:#9ca3af}input::webkit-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder{opacity:1;color:#9ca3af}input::-ms-input-placeholder{opacity:1;color:#9ca3af}legend{padding:0}progress{vertical-align:baseline}small{font-size:80%}svg{display:block;vertical-align:middle}table{text-indent:0;border-color:inherit;border-collapse:collapse}textarea{resize:vertical}textarea::placeholder{opacity:1;color:#9ca3af}textarea::webkit-input-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}ul,ol{list-style:none;margin:0;padding:0}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.bg-normal{background-color:var(--kolibri-color-normal)}.bg-white{--tw-bg-opacity:1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity))}.bg-spin-1{background-color:var(--kolibri-color-spin-1)}.bg-spin-2{background-color:var(--kolibri-color-spin-2)}.bg-spin-3{background-color:var(--kolibri-color-spin-3)}.rounded{border-radius:var(--kolibri-border-radius)}.border-1{border-width:1px}.cursor-pointer{cursor:pointer}.block{display:block}.inline-block{display:inline-block}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}.table{display:table}.grid{display:-ms-grid;display:grid}.hidden{display:none}.flex-wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.items-center{-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.content-center{-ms-flex-line-pack:center;-webkit-align-content:center;align-content:center}.float-left{float:left}.font-80{font-weight:80}.font-60{font-weight:60}.h-full{height:100%}.h-0{height:0px}.h-0\\.41c-2\\.42\\2c 0-4\\.82-1\\.57-4\\.82-3\\.58c0\\.05-0\\.98\\2c 0\\.43-1\\.91\\2c 1\\.07-2\\.65c0\\.3\\2c 0\\.05\\2c 0\\.61\\2c 0\\.09\\2c 0\\.92\\2c 0\\.09c1\\.1\\2c 0\\2c 1\\.69-0\\.58\\2c 1\\.74-1\\.16{height:0.29rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.leading-normal{line-height:1.5}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:calc(1 * var(--kolibri-spacing))}.mr-2{margin-right:calc(2 * var(--kolibri-spacing))}.ml-2{margin-left:calc(2 * var(--kolibri-spacing))}.mt-2{margin-top:calc(2 * var(--kolibri-spacing))}.mt-4{margin-top:calc(4 * var(--kolibri-spacing))}.outline{outline-style:solid}.overflow-hidden{overflow:hidden}.overflow-y-visible{overflow-y:visible}.p-2{padding:calc(2 * var(--kolibri-spacing))}.p-4{padding:calc(4 * var(--kolibri-spacing))}.px{padding-left:1px;padding-right:1px}.py-2{padding-top:calc(2 * var(--kolibri-spacing));padding-bottom:calc(2 * var(--kolibri-spacing))}.pl-8{padding-left:2rem}.pb-2{padding-bottom:calc(2 * var(--kolibri-spacing))}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.absolute{position:absolute}.text-center{text-align:center}.text-normal{color:var(--kolibri-color-normal)}.hover\\:text-primary:hover{color:var(--kolibri-color-primary)}.italic{font-style:italic}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.indent{text-indent:1.5rem}.visible{visibility:visible}.w-full{width:100%}.w-4\\/5{width:80%}.z-50{z-index:50}.gap-1{grid-gap:calc(1 * var(--kolibri-spacing));gap:calc(1 * var(--kolibri-spacing))}.gap-2{grid-gap:calc(2 * var(--kolibri-spacing));gap:calc(2 * var(--kolibri-spacing))}.grid-flow-col{grid-auto-flow:column}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate:0;--tw-rotate-x:0;--tw-rotate-y:0;--tw-rotate-z:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;-webkit-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));-ms-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z))}.animate{-webkit-animation-iteration-count:1;animation-iteration-count:1}.filter{--tw-blur:var(--tw-empty, );--tw-brightness:var(--tw-empty, );--tw-contrast:var(--tw-empty, );--tw-grayscale:var(--tw-empty, );--tw-hue-rotate:var(--tw-empty, );--tw-invert:var(--tw-empty, );--tw-saturate:var(--tw-empty, );--tw-sepia:var(--tw-empty, );--tw-drop-shadow:var(--tw-empty, );-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:host *{-ms-hyphens:var(--kolibri-hyphens);-webkit-hyphens:var(--kolibri-hyphens);hyphens:var(--kolibri-hyphens);font-family:var(--kolibri-font-family);line-height:var(--kolibri-line-height);word-break:break-word}'};export{o as kol_skip_nav};
+import{r as t,h as e}from"./index-90999368.js";import{a}from"./a11y.tipps-d591ee77.js";import{w as i}from"./prop.validators-82b345aa.js";import{w as r}from"./validation-54731d67.js";import"./dev.utils-daaf2f39.js";import"./index.m-86dc8c44.js";import"./index-d870d3e1.js";const o='*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--kolibri-border-color)}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:var(--kolibri-color);--tw-ring-color:rgba(undefined, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::moz-focus-inner{border-style:none;padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=\'search\']{-webkit-appearance:textfield;outline-offset:-2px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}b,strong{font-weight:bolder}button,select{text-transform:none}button,[type=\'button\'],[type=\'reset\'],[type=\'submit\']{-webkit-appearance:button}button{background-color:transparent;background-image:none}button,[role="button"]{cursor:pointer}code{font-size:1em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}fieldset{margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}h1,p,h2,h3,h4,h5,h6{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}input,button,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;padding:0;line-height:inherit;color:inherit}input::placeholder{opacity:1;color:#9ca3af}input::webkit-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder{opacity:1;color:#9ca3af}input::-ms-input-placeholder{opacity:1;color:#9ca3af}legend{padding:0}progress{vertical-align:baseline}small{font-size:80%}svg{display:block;vertical-align:middle}table{text-indent:0;border-color:inherit;border-collapse:collapse}textarea{resize:vertical}textarea::placeholder{opacity:1;color:#9ca3af}textarea::webkit-input-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}ul,ol{list-style:none;margin:0;padding:0}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.bg-normal{background-color:var(--kolibri-color-normal)}.bg-white{--tw-bg-opacity:1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity))}.bg-spin-1{background-color:var(--kolibri-color-spin-1)}.bg-spin-2{background-color:var(--kolibri-color-spin-2)}.bg-spin-3{background-color:var(--kolibri-color-spin-3)}.rounded{border-radius:var(--kolibri-border-radius)}.border-1{border-width:1px}.cursor-pointer{cursor:pointer}.block{display:block}.inline-block{display:inline-block}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}.table{display:table}.grid{display:-ms-grid;display:grid}.hidden{display:none}.flex-wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.items-center{-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.content-center{-ms-flex-line-pack:center;-webkit-align-content:center;align-content:center}.font-80{font-weight:80}.font-60{font-weight:60}.h-full{height:100%}.h-0{height:0px}.h-0\\.41c-2\\.42\\2c 0-4\\.82-1\\.57-4\\.82-3\\.58c0\\.05-0\\.98\\2c 0\\.43-1\\.91\\2c 1\\.07-2\\.65c0\\.3\\2c 0\\.05\\2c 0\\.61\\2c 0\\.09\\2c 0\\.92\\2c 0\\.09c1\\.1\\2c 0\\2c 1\\.69-0\\.58\\2c 1\\.74-1\\.16{height:0.29rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.leading-normal{line-height:1.5}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:calc(1 * var(--kolibri-spacing))}.mt-2{margin-top:calc(2 * var(--kolibri-spacing))}.mt-4{margin-top:calc(4 * var(--kolibri-spacing))}.mr-2{margin-right:calc(2 * var(--kolibri-spacing))}.ml-2{margin-left:calc(2 * var(--kolibri-spacing))}.outline{outline-style:solid}.overflow-hidden{overflow:hidden}.overflow-y-visible{overflow-y:visible}.p-2{padding:calc(2 * var(--kolibri-spacing))}.p-4{padding:calc(4 * var(--kolibri-spacing))}.px{padding-left:1px;padding-right:1px}.py-2{padding-top:calc(2 * var(--kolibri-spacing));padding-bottom:calc(2 * var(--kolibri-spacing))}.pl-8{padding-left:2rem}.pb-2{padding-bottom:calc(2 * var(--kolibri-spacing))}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.absolute{position:absolute}.text-center{text-align:center}.text-normal{color:var(--kolibri-color-normal)}.hover\\:text-primary:hover{color:var(--kolibri-color-primary)}.italic{font-style:italic}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.indent{text-indent:1.5rem}.visible{visibility:visible}.w-full{width:100%}.w-4\\/5{width:80%}.z-50{z-index:50}.gap-1{grid-gap:calc(1 * var(--kolibri-spacing));gap:calc(1 * var(--kolibri-spacing))}.gap-2{grid-gap:calc(2 * var(--kolibri-spacing));gap:calc(2 * var(--kolibri-spacing))}.grid-flow-col{grid-auto-flow:column}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate:0;--tw-rotate-x:0;--tw-rotate-y:0;--tw-rotate-z:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;-webkit-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));-ms-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z))}.animate{-webkit-animation-iteration-count:1;animation-iteration-count:1}.filter{--tw-blur:var(--tw-empty, );--tw-brightness:var(--tw-empty, );--tw-contrast:var(--tw-empty, );--tw-grayscale:var(--tw-empty, );--tw-hue-rotate:var(--tw-empty, );--tw-invert:var(--tw-empty, );--tw-saturate:var(--tw-empty, );--tw-sepia:var(--tw-empty, );--tw-drop-shadow:var(--tw-empty, );-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:host *{-ms-hyphens:var(--kolibri-hyphens);-webkit-hyphens:var(--kolibri-hyphens);hyphens:var(--kolibri-hyphens);font-family:var(--kolibri-font-family);line-height:var(--kolibri-line-height);word-break:break-word}',n=class{constructor(a){t(this,a),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return e("nav",{"aria-label":this.state._ariaLabel},e("ul",{class:"w-full z-50"},this.state._links.map(((t,a)=>e("li",{class:"text-center content-center h-0 overflow-y-visible",key:a},e("kol-link",Object.assign({class:"inline-block mt-4 mx-auto w-4/5",exportparts:"link"},t,{_ariaLabel:t._ariaLabel,_useCase:"nav",_stealth:!0}),t._label)," ")))))}validateAriaLabel(t){i(this,"_ariaLabel",t,{required:!0}),a(t)}validateLinks(t){r("KolSkipNav",this,t)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};n.style={default:o};export{n as kol_skip_nav};

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

@@ -0,0 +1 @@
+{"version":3,"names":["defaultStyleCss","KolSkipNav","_ariaLabel","_links","render","h","this","state","class","map","link","index","key","Object","assign","exportparts","_useCase","_stealth","_label","validateAriaLabel","value","watchString","required","a11yHintLabelingLandmarks","validateLinks","watchNavLinks","componentWillLoad"],"sources":["./src/components/style.sass?tag=kol-skip-nav&mode=default&encapsulation=shadow","./src/components/skip-nav/component.tsx"],"sourcesContent":["/* windicss-touch: 1649810622229 */\n@windicss\n\n:host\n\n  *\n    -ms-hyphens: var(--kolibri-hyphens)\n    -webkit-hyphens: var(--kolibri-hyphens)\n    hyphens: var(--kolibri-hyphens)\n    font-family: var(--kolibri-font-family)\n    line-height: var(--kolibri-line-height)\n    word-break: break-word\n\n//     &:focus\n//       // outline-color: var(--kolibri-color-primary) !important\n//       outline-color: var(--kolibri-color-outline) !important\n//       outline-offset: 3px !important\n//       outline-style: solid !important // macht eckige Ecken\n//       outline-width: 2px !important\n//       // position: relative !important // führt zu Fehler beim Modal\n//       // z-index: 9999 !important // führt zu Fehler im Storybook\n\n//     &::selection\n//       background-color: var(--kolibri-color-primary)\n//       font-weight: 600\n//       color: white\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@public-ui/core';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { NavLinkProps } from '../link/component';\nimport { watchNavLinks } from '../nav/validation';\nimport { Stringified } from '../../types/common';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<NavLinkProps[]>;\n};\ntype OptionalProps = unknown;\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: NavLinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @part link - Ermöglicht das Stylen der Links.\n */\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: '../style.sass',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t<ul class=\"w-full z-50\">\n\t\t\t\t\t{this.state._links.map((link: NavLinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li class=\"text-center content-center h-0 overflow-y-visible\" key={index}>\n\t\t\t\t\t\t\t\t<kol-link class=\"inline-block mt-4 mx-auto w-4/5\" exportparts=\"link\" {...link} _ariaLabel={link._ariaLabel} _useCase=\"nav\" _stealth={true}>\n\t\t\t\t\t\t\t\t\t{link._label}\n\t\t\t\t\t\t\t\t</kol-link>\n\t\t\t\t\t\t\t\t&#160;\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 * Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Ist die Liste der unsichtbaren Links.\n\t */\n\t@Prop() public _links!: Stringified<NavLinkProps[]>;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<NavLinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;gRAAA,MAAMA,EAAkB,28P,MCoCXC,EAAU,M,oFAiCU,CAC/BC,WAAY,IACZC,OAAQ,G,CAlCFC,SACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,YAC3BG,EAAA,MAAIG,MAAM,eACRF,KAAKC,MAAMJ,OAAOM,KAAI,CAACC,EAAoBC,IAE1CN,EAAA,MAAIG,MAAM,oDAAoDI,IAAKD,GAClEN,EAAA,WAAAQ,OAAAC,OAAA,CAAUN,MAAM,kCAAkCO,YAAY,QAAWL,EAAI,CAAER,WAAYQ,EAAKR,WAAYc,SAAS,MAAMC,SAAU,OACnIP,EAAKQ,QACI,Q,CAgCXC,kBAAkBC,GACxBC,EAAYf,KAAM,aAAcc,EAAO,CACtCE,SAAU,OAEXC,EAA0BH,E,CAOpBI,cAAcJ,GACpBK,EAAc,aAAcnB,KAAMc,E,CAM5BM,oBACNpB,KAAKa,kBAAkBb,KAAKJ,YAC5BI,KAAKkB,cAAclB,KAAKH,O"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e}from"./index-a9774259.js";const a=class{constructor(e){t(this,e),this._icon=void 0,this._iconOnly=!1,this._label=void 0}render(){return e("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label},e("slot",null))}};a.style={default:'*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--kolibri-border-color)}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:var(--kolibri-color);--tw-ring-color:rgba(undefined, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::moz-focus-inner{border-style:none;padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=\'search\']{-webkit-appearance:textfield;outline-offset:-2px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}b{font-weight:bolder}button,select{text-transform:none}button,[type=\'button\'],[type=\'reset\'],[type=\'submit\']{-webkit-appearance:button}button{background-color:transparent;background-image:none}button,[role="button"]{cursor:pointer}code{font-size:1em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}fieldset{margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}h1,p,h2,h3,h4,h5,h6{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}input,button,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;padding:0;line-height:inherit;color:inherit}input::placeholder{opacity:1;color:#9ca3af}input::webkit-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder{opacity:1;color:#9ca3af}input::-ms-input-placeholder{opacity:1;color:#9ca3af}legend{padding:0}progress{vertical-align:baseline}small{font-size:80%}svg{display:block;vertical-align:middle}table{text-indent:0;border-color:inherit;border-collapse:collapse}textarea{resize:vertical}textarea::placeholder{opacity:1;color:#9ca3af}textarea::webkit-input-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}ul,ol{list-style:none;margin:0;padding:0}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.bg-normal{background-color:var(--kolibri-color-normal)}.bg-white{--tw-bg-opacity:1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity))}.bg-spin-1{background-color:var(--kolibri-color-spin-1)}.bg-spin-2{background-color:var(--kolibri-color-spin-2)}.bg-spin-3{background-color:var(--kolibri-color-spin-3)}.rounded{border-radius:var(--kolibri-border-radius)}.border-1{border-width:1px}.cursor-pointer{cursor:pointer}.block{display:block}.inline-block{display:inline-block}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}.table{display:table}.grid{display:-ms-grid;display:grid}.hidden{display:none}.flex-wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.items-center{-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.content-center{-ms-flex-line-pack:center;-webkit-align-content:center;align-content:center}.float-left{float:left}.font-80{font-weight:80}.font-60{font-weight:60}.h-full{height:100%}.h-0{height:0px}.h-0\\.41c-2\\.42\\2c 0-4\\.82-1\\.57-4\\.82-3\\.58c0\\.05-0\\.98\\2c 0\\.43-1\\.91\\2c 1\\.07-2\\.65c0\\.3\\2c 0\\.05\\2c 0\\.61\\2c 0\\.09\\2c 0\\.92\\2c 0\\.09c1\\.1\\2c 0\\2c 1\\.69-0\\.58\\2c 1\\.74-1\\.16{height:0.29rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.leading-normal{line-height:1.5}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:calc(1 * var(--kolibri-spacing))}.mr-2{margin-right:calc(2 * var(--kolibri-spacing))}.ml-2{margin-left:calc(2 * var(--kolibri-spacing))}.mt-2{margin-top:calc(2 * var(--kolibri-spacing))}.mt-4{margin-top:calc(4 * var(--kolibri-spacing))}.outline{outline-style:solid}.overflow-hidden{overflow:hidden}.overflow-y-visible{overflow-y:visible}.p-2{padding:calc(2 * var(--kolibri-spacing))}.p-4{padding:calc(4 * var(--kolibri-spacing))}.px{padding-left:1px;padding-right:1px}.py-2{padding-top:calc(2 * var(--kolibri-spacing));padding-bottom:calc(2 * var(--kolibri-spacing))}.pl-8{padding-left:2rem}.pb-2{padding-bottom:calc(2 * var(--kolibri-spacing))}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.absolute{position:absolute}.text-center{text-align:center}.text-normal{color:var(--kolibri-color-normal)}.hover\\:text-primary:hover{color:var(--kolibri-color-primary)}.italic{font-style:italic}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.indent{text-indent:1.5rem}.visible{visibility:visible}.w-full{width:100%}.w-4\\/5{width:80%}.z-50{z-index:50}.gap-1{grid-gap:calc(1 * var(--kolibri-spacing));gap:calc(1 * var(--kolibri-spacing))}.gap-2{grid-gap:calc(2 * var(--kolibri-spacing));gap:calc(2 * var(--kolibri-spacing))}.grid-flow-col{grid-auto-flow:column}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate:0;--tw-rotate-x:0;--tw-rotate-y:0;--tw-rotate-z:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;-webkit-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));-ms-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z))}.animate{-webkit-animation-iteration-count:1;animation-iteration-count:1}.filter{--tw-blur:var(--tw-empty, );--tw-brightness:var(--tw-empty, );--tw-contrast:var(--tw-empty, );--tw-grayscale:var(--tw-empty, );--tw-hue-rotate:var(--tw-empty, );--tw-invert:var(--tw-empty, );--tw-saturate:var(--tw-empty, );--tw-sepia:var(--tw-empty, );--tw-drop-shadow:var(--tw-empty, );-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:host *{-ms-hyphens:var(--kolibri-hyphens);-webkit-hyphens:var(--kolibri-hyphens);hyphens:var(--kolibri-hyphens);font-family:var(--kolibri-font-family);line-height:var(--kolibri-line-height);word-break:break-word}'};export{a as kol_span};
+import{r as t,h as e}from"./index-90999368.js";const a='*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--kolibri-border-color)}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:var(--kolibri-color);--tw-ring-color:rgba(undefined, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::moz-focus-inner{border-style:none;padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=\'search\']{-webkit-appearance:textfield;outline-offset:-2px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}b,strong{font-weight:bolder}button,select{text-transform:none}button,[type=\'button\'],[type=\'reset\'],[type=\'submit\']{-webkit-appearance:button}button{background-color:transparent;background-image:none}button,[role="button"]{cursor:pointer}code{font-size:1em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}fieldset{margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}h1,p,h2,h3,h4,h5,h6{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}input,button,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;padding:0;line-height:inherit;color:inherit}input::placeholder{opacity:1;color:#9ca3af}input::webkit-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder{opacity:1;color:#9ca3af}input::-ms-input-placeholder{opacity:1;color:#9ca3af}legend{padding:0}progress{vertical-align:baseline}small{font-size:80%}svg{display:block;vertical-align:middle}table{text-indent:0;border-color:inherit;border-collapse:collapse}textarea{resize:vertical}textarea::placeholder{opacity:1;color:#9ca3af}textarea::webkit-input-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}ul,ol{list-style:none;margin:0;padding:0}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.bg-normal{background-color:var(--kolibri-color-normal)}.bg-white{--tw-bg-opacity:1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity))}.bg-spin-1{background-color:var(--kolibri-color-spin-1)}.bg-spin-2{background-color:var(--kolibri-color-spin-2)}.bg-spin-3{background-color:var(--kolibri-color-spin-3)}.rounded{border-radius:var(--kolibri-border-radius)}.border-1{border-width:1px}.cursor-pointer{cursor:pointer}.block{display:block}.inline-block{display:inline-block}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}.table{display:table}.grid{display:-ms-grid;display:grid}.hidden{display:none}.flex-wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.items-center{-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.content-center{-ms-flex-line-pack:center;-webkit-align-content:center;align-content:center}.font-80{font-weight:80}.font-60{font-weight:60}.h-full{height:100%}.h-0{height:0px}.h-0\\.41c-2\\.42\\2c 0-4\\.82-1\\.57-4\\.82-3\\.58c0\\.05-0\\.98\\2c 0\\.43-1\\.91\\2c 1\\.07-2\\.65c0\\.3\\2c 0\\.05\\2c 0\\.61\\2c 0\\.09\\2c 0\\.92\\2c 0\\.09c1\\.1\\2c 0\\2c 1\\.69-0\\.58\\2c 1\\.74-1\\.16{height:0.29rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.leading-normal{line-height:1.5}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:calc(1 * var(--kolibri-spacing))}.mt-2{margin-top:calc(2 * var(--kolibri-spacing))}.mt-4{margin-top:calc(4 * var(--kolibri-spacing))}.mr-2{margin-right:calc(2 * var(--kolibri-spacing))}.ml-2{margin-left:calc(2 * var(--kolibri-spacing))}.outline{outline-style:solid}.overflow-hidden{overflow:hidden}.overflow-y-visible{overflow-y:visible}.p-2{padding:calc(2 * var(--kolibri-spacing))}.p-4{padding:calc(4 * var(--kolibri-spacing))}.px{padding-left:1px;padding-right:1px}.py-2{padding-top:calc(2 * var(--kolibri-spacing));padding-bottom:calc(2 * var(--kolibri-spacing))}.pl-8{padding-left:2rem}.pb-2{padding-bottom:calc(2 * var(--kolibri-spacing))}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.absolute{position:absolute}.text-center{text-align:center}.text-normal{color:var(--kolibri-color-normal)}.hover\\:text-primary:hover{color:var(--kolibri-color-primary)}.italic{font-style:italic}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.indent{text-indent:1.5rem}.visible{visibility:visible}.w-full{width:100%}.w-4\\/5{width:80%}.z-50{z-index:50}.gap-1{grid-gap:calc(1 * var(--kolibri-spacing));gap:calc(1 * var(--kolibri-spacing))}.gap-2{grid-gap:calc(2 * var(--kolibri-spacing));gap:calc(2 * var(--kolibri-spacing))}.grid-flow-col{grid-auto-flow:column}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate:0;--tw-rotate-x:0;--tw-rotate-y:0;--tw-rotate-z:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;-webkit-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));-ms-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z))}.animate{-webkit-animation-iteration-count:1;animation-iteration-count:1}.filter{--tw-blur:var(--tw-empty, );--tw-brightness:var(--tw-empty, );--tw-contrast:var(--tw-empty, );--tw-grayscale:var(--tw-empty, );--tw-hue-rotate:var(--tw-empty, );--tw-invert:var(--tw-empty, );--tw-saturate:var(--tw-empty, );--tw-sepia:var(--tw-empty, );--tw-drop-shadow:var(--tw-empty, );-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:host *{-ms-hyphens:var(--kolibri-hyphens);-webkit-hyphens:var(--kolibri-hyphens);hyphens:var(--kolibri-hyphens);font-family:var(--kolibri-font-family);line-height:var(--kolibri-line-height);word-break:break-word}',r=class{constructor(e){t(this,e),this._icon=void 0,this._iconOnly=!1,this._label=void 0}render(){return e("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label},e("slot",{name:"expert",slot:"expert"}))}};r.style={default:a};export{r as kol_span};

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

@@ -0,0 +1 @@
+{"version":3,"names":["defaultStyleCss","KolSpan","render","h","_icon","this","_iconOnly","_label","name","slot"],"sources":["./src/components/style.sass?tag=kol-span&mode=default&encapsulation=shadow","./src/components/span/shadow.tsx"],"sourcesContent":["/* windicss-touch: 1649810622229 */\n@windicss\n\n:host\n\n  *\n    -ms-hyphens: var(--kolibri-hyphens)\n    -webkit-hyphens: var(--kolibri-hyphens)\n    hyphens: var(--kolibri-hyphens)\n    font-family: var(--kolibri-font-family)\n    line-height: var(--kolibri-line-height)\n    word-break: break-word\n\n//     &:focus\n//       // outline-color: var(--kolibri-color-primary) !important\n//       outline-color: var(--kolibri-color-outline) !important\n//       outline-offset: 3px !important\n//       outline-style: solid !important // macht eckige Ecken\n//       outline-width: 2px !important\n//       // position: relative !important // führt zu Fehler beim Modal\n//       // z-index: 9999 !important // führt zu Fehler im Storybook\n\n//     &::selection\n//       background-color: var(--kolibri-color-primary)\n//       font-weight: 600\n//       color: white\n","import { Component, h, JSX, Prop } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: '../style.sass',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Gibt einen beschreibenden Text für das Text-Element an.\n\t */\n\t@Prop() public _label!: string;\n}\n"],"mappings":";;;+CAAA,MAAMA,EAAkB,28P,MCaXC,EAAO,M,6DAiBmC,M,sBAhB/CC,SACN,OACCC,EAAA,eAAaC,MAAOC,KAAKD,MAAOE,UAAWD,KAAKC,UAAWC,OAAQF,KAAKE,QACvEJ,EAAA,QAAMK,KAAK,SAASC,KAAK,W"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,H as a}from"./index-a9774259.js";import{b as i}from"./prop.validators-82b345aa.js";import"./index.m-86dc8c44.js";import"./a11y.tipps-d591ee77.js";import"./dev.utils-daaf2f39.js";import"./index-d870d3e1.js";const r=class{constructor(e){t(this,e),this.showToggled=!1,this._show=!1,this.state={}}render(){return e(a,null,this.state._show?e("span",{"aria-busy":"true","aria-label":"Aktion wird ausgeführt ...","aria-live":"polite",class:"spin",role:"alert"},e("span",{class:"bg-spin-1"}),e("span",{class:"bg-spin-2"}),e("span",{class:"bg-spin-3"}),e("span",{class:"bg-neutral"})):this.showToggled&&e("span",{"aria-label":"Aktion abgeschlossen","aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(t){this.showToggled=!0===this.state._show&&!1===this._show,i(this,"_show",t)}componentWillLoad(){this.validateShow(this._show)}static get watchers(){return{_show:["validateShow"]}}};r.style={default:'*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--kolibri-border-color)}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:var(--kolibri-color);--tw-ring-color:rgba(undefined, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::moz-focus-inner{border-style:none;padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=\'search\']{-webkit-appearance:textfield;outline-offset:-2px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}b{font-weight:bolder}button,select{text-transform:none}button,[type=\'button\'],[type=\'reset\'],[type=\'submit\']{-webkit-appearance:button}button{background-color:transparent;background-image:none}button,[role="button"]{cursor:pointer}code{font-size:1em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}fieldset{margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}h1,p,h2,h3,h4,h5,h6{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}input,button,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;padding:0;line-height:inherit;color:inherit}input::placeholder{opacity:1;color:#9ca3af}input::webkit-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder{opacity:1;color:#9ca3af}input::-ms-input-placeholder{opacity:1;color:#9ca3af}legend{padding:0}progress{vertical-align:baseline}small{font-size:80%}svg{display:block;vertical-align:middle}table{text-indent:0;border-color:inherit;border-collapse:collapse}textarea{resize:vertical}textarea::placeholder{opacity:1;color:#9ca3af}textarea::webkit-input-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}ul,ol{list-style:none;margin:0;padding:0}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.bg-normal{background-color:var(--kolibri-color-normal)}.bg-white{--tw-bg-opacity:1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity))}.bg-spin-1{background-color:var(--kolibri-color-spin-1)}.bg-spin-2{background-color:var(--kolibri-color-spin-2)}.bg-spin-3{background-color:var(--kolibri-color-spin-3)}.rounded{border-radius:var(--kolibri-border-radius)}.border-1{border-width:1px}.cursor-pointer{cursor:pointer}.block{display:block}.inline-block{display:inline-block}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}.table{display:table}.grid{display:-ms-grid;display:grid}.hidden{display:none}.flex-wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.items-center{-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.content-center{-ms-flex-line-pack:center;-webkit-align-content:center;align-content:center}.float-left{float:left}.font-80{font-weight:80}.font-60{font-weight:60}.h-full{height:100%}.h-0{height:0px}.h-0\\.41c-2\\.42\\2c 0-4\\.82-1\\.57-4\\.82-3\\.58c0\\.05-0\\.98\\2c 0\\.43-1\\.91\\2c 1\\.07-2\\.65c0\\.3\\2c 0\\.05\\2c 0\\.61\\2c 0\\.09\\2c 0\\.92\\2c 0\\.09c1\\.1\\2c 0\\2c 1\\.69-0\\.58\\2c 1\\.74-1\\.16{height:0.29rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.leading-normal{line-height:1.5}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:calc(1 * var(--kolibri-spacing))}.mr-2{margin-right:calc(2 * var(--kolibri-spacing))}.ml-2{margin-left:calc(2 * var(--kolibri-spacing))}.mt-2{margin-top:calc(2 * var(--kolibri-spacing))}.mt-4{margin-top:calc(4 * var(--kolibri-spacing))}.outline{outline-style:solid}.overflow-hidden{overflow:hidden}.overflow-y-visible{overflow-y:visible}.p-2{padding:calc(2 * var(--kolibri-spacing))}.p-4{padding:calc(4 * var(--kolibri-spacing))}.px{padding-left:1px;padding-right:1px}.py-2{padding-top:calc(2 * var(--kolibri-spacing));padding-bottom:calc(2 * var(--kolibri-spacing))}.pl-8{padding-left:2rem}.pb-2{padding-bottom:calc(2 * var(--kolibri-spacing))}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.absolute{position:absolute}.text-center{text-align:center}.text-normal{color:var(--kolibri-color-normal)}.hover\\:text-primary:hover{color:var(--kolibri-color-primary)}.italic{font-style:italic}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.indent{text-indent:1.5rem}.visible{visibility:visible}.w-full{width:100%}.w-4\\/5{width:80%}.z-50{z-index:50}.gap-1{grid-gap:calc(1 * var(--kolibri-spacing));gap:calc(1 * var(--kolibri-spacing))}.gap-2{grid-gap:calc(2 * var(--kolibri-spacing));gap:calc(2 * var(--kolibri-spacing))}.grid-flow-col{grid-auto-flow:column}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate:0;--tw-rotate-x:0;--tw-rotate-y:0;--tw-rotate-z:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;-webkit-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));-ms-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z))}.animate{-webkit-animation-iteration-count:1;animation-iteration-count:1}.filter{--tw-blur:var(--tw-empty, );--tw-brightness:var(--tw-empty, );--tw-contrast:var(--tw-empty, );--tw-grayscale:var(--tw-empty, );--tw-hue-rotate:var(--tw-empty, );--tw-invert:var(--tw-empty, );--tw-saturate:var(--tw-empty, );--tw-sepia:var(--tw-empty, );--tw-drop-shadow:var(--tw-empty, );-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:host *{-ms-hyphens:var(--kolibri-hyphens);-webkit-hyphens:var(--kolibri-hyphens);hyphens:var(--kolibri-hyphens);font-family:var(--kolibri-font-family);line-height:var(--kolibri-line-height);word-break:break-word}.spin{display:inline-block;height:1rem;position:relative;width:3rem}.spin span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border:0.1rem solid #fff;border-radius:50%;height:0.8rem;width:0.8rem;top:0.1rem;position:absolute}.spin span:nth-child(1){z-index:0;animation:spin1 2s infinite;left:0.1rem}.spin span:nth-child(2){z-index:1;animation:spin2 2s infinite;left:0.1rem}.spin span:nth-child(3){z-index:1;animation:spin2 2s infinite;left:1.1rem}.spin span:nth-child(4){z-index:0;animation:spin3 2s infinite;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)}}'};export{r as kol_spin};
+import{r as t,h as e,H as a}from"./index-90999368.js";import{b as i}from"./prop.validators-82b345aa.js";import"./index.m-86dc8c44.js";import"./a11y.tipps-d591ee77.js";import"./dev.utils-daaf2f39.js";import"./index-d870d3e1.js";const r='*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--kolibri-border-color)}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:var(--kolibri-color);--tw-ring-color:rgba(undefined, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::moz-focus-inner{border-style:none;padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=\'search\']{-webkit-appearance:textfield;outline-offset:-2px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}b,strong{font-weight:bolder}button,select{text-transform:none}button,[type=\'button\'],[type=\'reset\'],[type=\'submit\']{-webkit-appearance:button}button{background-color:transparent;background-image:none}button,[role="button"]{cursor:pointer}code{font-size:1em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}fieldset{margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}h1,p,h2,h3,h4,h5,h6{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}input,button,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;padding:0;line-height:inherit;color:inherit}input::placeholder{opacity:1;color:#9ca3af}input::webkit-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder{opacity:1;color:#9ca3af}input::-ms-input-placeholder{opacity:1;color:#9ca3af}legend{padding:0}progress{vertical-align:baseline}small{font-size:80%}svg{display:block;vertical-align:middle}table{text-indent:0;border-color:inherit;border-collapse:collapse}textarea{resize:vertical}textarea::placeholder{opacity:1;color:#9ca3af}textarea::webkit-input-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}ul,ol{list-style:none;margin:0;padding:0}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.bg-normal{background-color:var(--kolibri-color-normal)}.bg-white{--tw-bg-opacity:1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity))}.bg-spin-1{background-color:var(--kolibri-color-spin-1)}.bg-spin-2{background-color:var(--kolibri-color-spin-2)}.bg-spin-3{background-color:var(--kolibri-color-spin-3)}.rounded{border-radius:var(--kolibri-border-radius)}.border-1{border-width:1px}.cursor-pointer{cursor:pointer}.block{display:block}.inline-block{display:inline-block}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}.table{display:table}.grid{display:-ms-grid;display:grid}.hidden{display:none}.flex-wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.items-center{-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.content-center{-ms-flex-line-pack:center;-webkit-align-content:center;align-content:center}.font-80{font-weight:80}.font-60{font-weight:60}.h-full{height:100%}.h-0{height:0px}.h-0\\.41c-2\\.42\\2c 0-4\\.82-1\\.57-4\\.82-3\\.58c0\\.05-0\\.98\\2c 0\\.43-1\\.91\\2c 1\\.07-2\\.65c0\\.3\\2c 0\\.05\\2c 0\\.61\\2c 0\\.09\\2c 0\\.92\\2c 0\\.09c1\\.1\\2c 0\\2c 1\\.69-0\\.58\\2c 1\\.74-1\\.16{height:0.29rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.leading-normal{line-height:1.5}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:calc(1 * var(--kolibri-spacing))}.mt-2{margin-top:calc(2 * var(--kolibri-spacing))}.mt-4{margin-top:calc(4 * var(--kolibri-spacing))}.mr-2{margin-right:calc(2 * var(--kolibri-spacing))}.ml-2{margin-left:calc(2 * var(--kolibri-spacing))}.outline{outline-style:solid}.overflow-hidden{overflow:hidden}.overflow-y-visible{overflow-y:visible}.p-2{padding:calc(2 * var(--kolibri-spacing))}.p-4{padding:calc(4 * var(--kolibri-spacing))}.px{padding-left:1px;padding-right:1px}.py-2{padding-top:calc(2 * var(--kolibri-spacing));padding-bottom:calc(2 * var(--kolibri-spacing))}.pl-8{padding-left:2rem}.pb-2{padding-bottom:calc(2 * var(--kolibri-spacing))}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.absolute{position:absolute}.text-center{text-align:center}.text-normal{color:var(--kolibri-color-normal)}.hover\\:text-primary:hover{color:var(--kolibri-color-primary)}.italic{font-style:italic}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.indent{text-indent:1.5rem}.visible{visibility:visible}.w-full{width:100%}.w-4\\/5{width:80%}.z-50{z-index:50}.gap-1{grid-gap:calc(1 * var(--kolibri-spacing));gap:calc(1 * var(--kolibri-spacing))}.gap-2{grid-gap:calc(2 * var(--kolibri-spacing));gap:calc(2 * var(--kolibri-spacing))}.grid-flow-col{grid-auto-flow:column}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate:0;--tw-rotate-x:0;--tw-rotate-y:0;--tw-rotate-z:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;-webkit-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));-ms-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z))}.animate{-webkit-animation-iteration-count:1;animation-iteration-count:1}.filter{--tw-blur:var(--tw-empty, );--tw-brightness:var(--tw-empty, );--tw-contrast:var(--tw-empty, );--tw-grayscale:var(--tw-empty, );--tw-hue-rotate:var(--tw-empty, );--tw-invert:var(--tw-empty, );--tw-saturate:var(--tw-empty, );--tw-sepia:var(--tw-empty, );--tw-drop-shadow:var(--tw-empty, );-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:host *{-ms-hyphens:var(--kolibri-hyphens);-webkit-hyphens:var(--kolibri-hyphens);hyphens:var(--kolibri-hyphens);font-family:var(--kolibri-font-family);line-height:var(--kolibri-line-height);word-break:break-word}.spin{display:inline-block;height:1rem;position:relative;width:3rem}.spin span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border:0.1rem solid #fff;border-radius:50%;height:0.8rem;width:0.8rem;top:0.1rem;position:absolute}.spin span:nth-child(1){z-index:0;animation:spin1 2s infinite;left:0.1rem}.spin span:nth-child(2){z-index:1;animation:spin2 2s infinite;left:0.1rem}.spin span:nth-child(3){z-index:1;animation:spin2 2s infinite;left:1.1rem}.spin span:nth-child(4){z-index:0;animation:spin3 2s infinite;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)}}',o=class{constructor(e){t(this,e),this.showToggled=!1,this._show=!1,this.state={}}render(){return e(a,null,this.state._show?e("span",{"aria-busy":"true","aria-label":"Aktion wird ausgeführt ...","aria-live":"polite",class:"spin",role:"alert"},e("span",{class:"bg-spin-1"}),e("span",{class:"bg-spin-2"}),e("span",{class:"bg-spin-3"}),e("span",{class:"bg-neutral"})):this.showToggled&&e("span",{"aria-label":"Aktion abgeschlossen","aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(t){this.showToggled=!0===this.state._show&&!1===this._show,i(this,"_show",t)}componentWillLoad(){this.validateShow(this._show)}static get watchers(){return{_show:["validateShow"]}}};o.style={default:r};export{o as kol_spin};

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

@@ -0,0 +1 @@
+{"version":3,"names":["defaultSpinCss","KolSpin","this","showToggled","render","h","Host","state","_show","class","role","validateShow","value","watchBoolean","componentWillLoad"],"sources":["./src/components/spin/spin.sass?tag=kol-spin&mode=default&encapsulation=shadow","./src/components/spin/component.tsx"],"sourcesContent":["/* windicss-touch: 1627744658474 */\n@import ../style\n\n$spin-size: 1rem\n$spin-speed: 2s\n\n.spin\n  display: inline-block\n  height: $spin-size\n  position: relative\n  width: #{3 * $spin-size}\n\n  span\n    animation-timing-function: cubic-bezier(0, 1, 1, 0)\n    border: #{0.1 * $spin-size} solid #fff\n    border-radius: 50%\n    height: #{0.8 * $spin-size}\n    width: #{0.8 * $spin-size}\n    top: #{0.1 * $spin-size}\n    position: absolute\n\n    &:nth-child(1)\n      z-index: 0\n      animation: spin1 $spin-speed infinite\n      left: #{0.1* $spin-size}\n\n    &:nth-child(2)\n      z-index: 1\n      animation: spin2 $spin-speed infinite\n      left: #{0.1 * $spin-size}\n\n    &:nth-child(3)\n      z-index: 1\n      animation: spin2 $spin-speed infinite\n      left: #{1 * $spin-size + 0.1 * $spin-size}\n\n    &:nth-child(4)\n      z-index: 0\n      animation: spin3 $spin-speed infinite\n      left: #{2 * $spin-size + 0.1 * $spin-size}\n\n@keyframes spin1\n  0%\n    transform: scale(0)\n\n  100%\n    transform: scale(1)\n\n@keyframes spin2\n  0%\n    transform: translate(0, 0)\n\n  100%\n    transform: translate(#{1 * $spin-size}, 0)\n\n@keyframes spin3\n  0%\n    transform: scale(1)\n\n  100%\n    transform: scale(0)\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@public-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/**\n * API\n */\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\tshow: boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './spin.sass',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span aria-busy=\"true\" aria-label=\"Aktion wird ausgeführt ...\" aria-live=\"polite\" class=\"spin\" role=\"alert\">\n\t\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label=\"Aktion abgeschlossen\" aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.\n\t */\n\t@Prop({ reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {};\n\n\tprivate showToggled = false;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\twatchBoolean(this, '_show', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"mappings":";;;mOAAA,MAAMA,EAAiB,yqR,MCyBVC,EAAO,M,yBA4BXC,KAAAC,YAAc,M,WAP4B,M,WAKlB,E,CAzBzBC,SACN,OACCC,EAACC,EAAI,KACHJ,KAAKK,MAAMC,MACXH,EAAA,oBAAgB,OAAM,aAAY,6BAA4B,YAAW,SAASI,MAAM,OAAOC,KAAK,SACnGL,EAAA,QAAMI,MAAM,cACZJ,EAAA,QAAMI,MAAM,cACZJ,EAAA,QAAMI,MAAM,cACZJ,EAAA,QAAMI,MAAM,gBAGbP,KAAKC,aAAeE,EAAA,qBAAiB,uBAAsB,YAAW,QAAO,YAAW,SAASK,KAAK,U,CAsBnGC,aAAaC,GACnBV,KAAKC,YAAcD,KAAKK,MAAMC,QAAU,MAAQN,KAAKM,QAAU,MAC/DK,EAAaX,KAAM,QAASU,E,CAMtBE,oBACNZ,KAAKS,aAAaT,KAAKM,M"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as a,h as i,H as t}from"./index-a9774259.js";import{w as s}from"./prop.validators-82b345aa.js";import"./index.m-86dc8c44.js";import"./a11y.tipps-d591ee77.js";import"./dev.utils-daaf2f39.js";import"./index-d870d3e1.js";const r=class{constructor(i){a(this,i),this._ariaLabel=void 0,this._symbol=void 0,this.state={_ariaLabel:"Warnung",_symbol:"⚠"}}render(){return i(t,null,i("span",{"aria-label":this.state._ariaLabel,role:"term"},this.state._symbol))}validateAriaLabel(a){s(this,"_ariaLabel",a,{required:!0})}validateSymbol(a){s(this,"_symbol",a,{required:!0})}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateSymbol(this._symbol)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_symbol:["validateSymbol"]}}};export{r as kol_symbol};
+import{r as a,h as i,H as t}from"./index-90999368.js";import{w as e}from"./prop.validators-82b345aa.js";import"./index.m-86dc8c44.js";import"./a11y.tipps-d591ee77.js";import"./dev.utils-daaf2f39.js";import"./index-d870d3e1.js";const r=class{constructor(i){a(this,i),this._ariaLabel=void 0,this._symbol=void 0,this.state={_ariaLabel:"Warnung",_symbol:"⚠"}}render(){return i(t,null,i("span",{"aria-label":this.state._ariaLabel,role:"term"},this.state._symbol))}validateAriaLabel(a){e(this,"_ariaLabel",a,{required:!0})}validateSymbol(a){e(this,"_symbol",a,{required:!0})}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateSymbol(this._symbol)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_symbol:["validateSymbol"]}}};export{r as kol_symbol};

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

@@ -0,0 +1 @@
+{"version":3,"names":["KolSymbol","_ariaLabel","_symbol","render","h","Host","this","state","role","validateAriaLabel","value","watchString","required","validateSymbol","componentWillLoad"],"sources":["./src/components/symbol/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@public-ui/core';\nimport { watchString } from '../../utils/prop.validators';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tariaLabel: string;\n\tsymbol: string;\n};\ntype OptionalProps = unknown;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-symbol',\n\tshadow: false,\n})\nexport class KolSymbol implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span aria-label={this.state._ariaLabel} role=\"term\">\n\t\t\t\t\t{this.state._symbol}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, was der Screenreader ausgeben soll\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Dieses Property gibt den String an der angezeigt werden soll.\n\t */\n\t@Prop() public _symbol!: string;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_ariaLabel: 'Warnung',\n\t\t_symbol: '⚠',\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_symbol')\n\tpublic validateSymbol(value?: string): void {\n\t\twatchString(this, '_symbol', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateSymbol(this._symbol);\n\t}\n}\n"],"mappings":";;;yOAuBaA,EAAS,M,qFAwBW,CAC/BC,WAAY,UACZC,QAAS,I,CAzBHC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,qBAAkBE,KAAKC,MAAMN,WAAYO,KAAK,QAC5CF,KAAKC,MAAML,S,CA4BTO,kBAAkBC,GACxBC,EAAYL,KAAM,aAAcI,EAAO,CACtCE,SAAU,M,CAQLC,eAAeH,GACrBC,EAAYL,KAAM,UAAWI,EAAO,CACnCE,SAAU,M,CAOLE,oBACNR,KAAKG,kBAAkBH,KAAKL,YAC5BK,KAAKO,eAAeP,KAAKJ,Q"}