npm - @public-ui/components - Versions diffs - 1.4.0-rc.11 → 1.4.0-rc.13 - Mend

@public-ui/components 1.4.0-rc.11 → 1.4.0-rc.13

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

Files changed (405) hide show

package/dist/components/component6.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"component6.js","mappings":"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","names":[],"sources":["./src/components/link/component.tsx"],"sourcesContent":["import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { translate } from '../../i18n';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tLinkOnCallbacks,\n\tLinkStates,\n\tLinkTarget,\n\tLinkUseCase,\n\tOptionalLinkProps,\n\tOptionalLinkStates,\n\tRequiredLinkProps,\n\tRequiredLinkStates,\n\twatchTooltipAlignment,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Alignment } from '../../types/props/alignment';\nimport { a11yHintDisabled, devHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { mapBoolean2String, scrollBySelector, setEventTargetAndStopPropagation, watchBoolean, watchString, watchValidator } from '../../utils/prop.validators';\nimport { propergateFocus } from '../../utils/reuse';\nimport { validateIcon, watchIconAlign } from '../../utils/validators/icon';\nimport { validateAriaLabel, validateLabel } from '../../utils/validators/label';\nimport { validateTabIndex } from '../../utils/validators/tab-index';\n\ntype RequiredNavLinkProps = RequiredLinkProps;\ntype OptionalNavLinkProps = OptionalLinkProps & {\n\tactive: boolean;\n};\nexport type NavLinkProps = Generic.Element.Members<RequiredNavLinkProps, OptionalNavLinkProps>;\n\n/*\n @internal\n /\n@Component({\n\ttag: 'kol-link-wc',\n\tshadow: false,\n})\nexport class KolLinkWc implements Generic.Element.ComponentApi<RequiredLinkProps, OptionalLinkProps, RequiredLinkStates, OptionalLinkStates> {\n\t@Element() private readonly host?: HTMLKolLinkWcElement;\n\tprivate readonly nonce = nonce();\n\tprivate ref?: HTMLAnchorElement;\n\n\tprivate readonly catchRef = (ref?: HTMLAnchorElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onClick = (event: Event) => {\n\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\tevent.preventDefault();\n\t\t\tsetEventTargetAndStopPropagation(event, this.ref);\n\t\t\tthis.state._on?.onClick(event, this.state._href);\n\t\t}\n\t};\n\n\tprivate readonly getRenderValues = () => {\n\t\t/\n\t\t DX\n\t\t * Das möchte ich ungern für HTML machen, sondern nur für Barrierefreiheitsthemen.\n\t\t /\n\t\t// if (typeof this.state._href === 'string' && this.state._href.length > 0) {\n\t\t// console.error('Setz den URL.');\n\t\t// throw new Error('Setz den URL.');\n\t\t// }\n\n\t\t// switch (this.state._target) {\n\t\t// case '_blank':\n\t\t// case '_self':\n\t\t// break;\n\t\t// default:\n\t\t// console.error('Fehlerhaftes Target.');\n\t\t// throw new Error('Fehlerhaftes Target.');\n\t\t// }\n\n\t\t// ROBUSTHEIT durch Validierung\n\t\tlet goToProps = {};\n\t\tif (typeof this.state._selector === 'string') {\n\t\t\tgoToProps = {\n\t\t\t\trole: 'link',\n\t\t\t\ttabIndex: 0,\n\t\t\t\tonClick: () => {\n\t\t\t\t\tscrollBySelector(this.state._selector as string);\n\t\t\t\t},\n\t\t\t\tonKeyPress: () => {\n\t\t\t\t\tscrollBySelector(this.state._selector as string);\n\t\t\t\t},\n\t\t\t};\n\t\t}\n\n\t\tconst isExternal = typeof this.state._target === 'string' && this.state._target !== '_self';\n\n\t\tconst tagAttrs = {\n\t\t\thref: typeof this.state._href === 'string' && this.state._href.length > 0 ? this.state._href : 'javascript:void(0)',\n\t\t\ttarget: typeof this.state._target === 'string' && this.state._target.length > 0 ? this.state._target : undefined,\n\t\t\trel: isExternal ? 'noopener' : undefined,\n\t\t};\n\n\t\tif (\n\t\t\t(this.state._useCase === 'image' \|\| this.state._iconOnly === true) &&\n\t\t\t(typeof this.state._ariaLabel !== 'string' \|\| this.state._ariaLabel.length === 0)\n\t\t) {\n\t\t\tdevHint(`[KolLink] Es muss ein Aria-Label gesetzt werden, wenn eine Grafik verlinkt oder der Icon-Only-Modus verwendet wird.`);\n\t\t}\n\t\treturn { isExternal, tagAttrs, goToProps };\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { isExternal, tagAttrs, goToProps } = this.getRenderValues();\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<a\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t{...tagAttrs}\n\t\t\t\t\taria-controls={this.state._ariaControls}\n\t\t\t\t\taria-current={this.state._ariaCurrent}\n\t\t\t\t\taria-expanded={mapBoolean2String(this.state._ariaExpanded)}\n\t\t\t\t\taria-labelledby={this.state._useCase === 'image' \|\| this.state._iconOnly === true ? this.nonce : undefined}\n\t\t\t\t\taria-selected={mapBoolean2String(this.state._ariaSelected)}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\t'skip ': this.state._stealth !== false,\n\t\t\t\t\t\t'icon-only': this.state._iconOnly === true,\n\t\t\t\t\t\t'external-link': isExternal,\n\t\t\t\t\t}}\n\t\t\t\t\t{...this.state._on}\n\t\t\t\t\t// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/click-events-have-key-events.md\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\tonKeyPress={this.onClick}\n\t\t\t\t\t{...goToProps}\n\t\t\t\t\trole={this.state._role}\n\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t>\n\t\t\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this.state._label}>\n\t\t\t\t\t\t{/\n\t\t\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t\t/}\n\t\t\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t\t\t</kol-span-wc>\n\t\t\t\t\t{isExternal && (\n\t\t\t\t\t\t<kol-icon class=\"external-link-icon\" _ariaLabel={this.state._targetDescription as string} _icon={'fa-solid fa-arrow-up-right-from-square'} />\n\t\t\t\t\t)}\n\t\t\t\t</a>\n\t\t\t\t{(this.state._iconOnly === true \|\| this.state._useCase === 'image') && (\n\t\t\t\t\t<kol-tooltip\n\t\t\t\t\t\t/\n\t\t\t\t\t\t Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t /\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t_align={this.state._tooltipAlign}\n\t\t\t\t\t\t_id={this.nonce}\n\t\t\t\t\t\t_label={this.state._ariaLabel \|\| this.state._label}\n\t\t\t\t\t></kol-tooltip>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t /\n\t@Prop() public _ariaControls?: string;\n\n\t/\n\t Gibt an, welchen aktuellen Auswahlstatus der Link hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t /\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/\n\t Gibt an, ob durch den Link etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t /\n\t@Prop({ reflect: true }) public _ariaExpanded?: boolean;\n\n\t/\n\t Gibt einen beschreibenden Text des Links an. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)\n\t /\n\t@Prop() public _ariaLabel?: string = '';\n\n\t/\n\t Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t /\n\t@Prop({ reflect: true }) public _ariaSelected?: boolean;\n\n\t/\n\t Gibt an, ob der Link deaktiviert ist.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/\n\t Gibt die Ziel-Url des Links an.\n\t /\n\t@Prop() public _href!: string;\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 das Icon entweder links oder rechts dargestellt werden soll.\n\t \n\t @deprecated Wird durch das neue flexibleren Icon-Typ abgedeckt.\n\t /\n\t@Prop() public _iconAlign?: Alignment = 'left';\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 den Label für die Beschriftung der Schaltfläche an.\n\t /\n\t// - eslint-disable-next-line @stencil/strict-mutable\n\t@Prop({ mutable: true, reflect: false }) public _label!: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für den Link an.\n\t \n\t @deprecated Hierzu sollte statt Link- die ButtonLink-Komponente verwendet werden.\n\t /\n\t@Prop() public _on?: LinkOnCallbacks;\n\n\t/\n\t Gibt an, welche Role der Schalter hat.\n\t /\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/\n\t Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.\n\t \n\t @deprecated Das Styling sollte stets über CSS erfolgen.\n\t /\n\t@Prop() public _selector?: string;\n\n\t/\n\t Gibt an, ob der Link nur beim Fokus sichtbar ist.\n\t \n\t @deprecated Das Styling sollte stets über CSS erfolgen.\n\t /\n\t@Prop({ reflect: true }) public _stealth?: boolean = false;\n\n\t/\n\t Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t Definiert das Verhalten, bei dem der Link geöffnet werden soll.\n\t /\n\t@Prop() public _target?: LinkTarget;\n\n\t/\n\t Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.\n\t /\n\t@Prop() public _targetDescription?: string = translate('kol-open-link-in-tab');\n\n\t/\n\t Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Alignment = 'right';\n\n\t/\n\t Gibt den Verwendungsfall des Links an.\n\t \n\t @deprecated Das Styling sollte stets über CSS erfolgen.\n\t /\n\t@Prop() public _useCase?: LinkUseCase = 'text';\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: LinkStates = {\n\t\t_ariaLabel: '',\n\t\t_href: 'javascript:void(0)',\n\t\t_icon: {},\n\t\t/\n\t\t @deprecated\n\t\t /\n\t\t_iconAlign: 'left',\n\t\t_label: '',\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\twatchString(this, '_ariaControls', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_ariaCurrent')\n\tpublic validateAriaCurrent(value?: AriaCurrent): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_ariaCurrent',\n\t\t\t(value) => value === true \|\| value === 'date' \|\| value === 'location' \|\| value === 'page' \|\| value === 'step' \|\| value === 'time',\n\t\t\tnew Set(['boolean', 'String {data, location, page, step, time}']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: boolean): void {\n\t\twatchBoolean(this, '_ariaExpanded', value);\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\tvalidateAriaLabel(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: boolean): void {\n\t\twatchBoolean(this, '_ariaSelected', 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\twatchBoolean(this, '_disabled', value);\n\t\tif (value === true) {\n\t\t\ta11yHintDisabled();\n\t\t}\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_href')\n\tpublic validateHref(value?: string): void {\n\t\twatchString(this, '_href', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_icon')\n\tpublic validateIcon(value?: KoliBriIconProp): void {\n\t\tvalidateIcon(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t /\n\t@Watch('_iconAlign')\n\tpublic validateIconAlign(value?: Alignment): void {\n\t\twatchIconAlign(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\twatchBoolean(this, '_iconOnly', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t /\n\t@Watch('_on')\n\tpublic validateOn(value?: LinkOnCallbacks): void {\n\t\tif (\n\t\t\ttypeof value === 'object' &&\n\t\t\tvalue !== null &&\n\t\t\t// https://eslint.org/docs/rules/no-prototype-builtins\n\t\t\tObject.prototype.hasOwnProperty.call(value, 'onClick') &&\n\t\t\ttypeof value.onClick === 'function'\n\t\t) {\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('_role')\n\tpublic validateRole(value?: AlternativButtonLinkRole): void {\n\t\twatchString(this, '_role', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_selector')\n\tpublic validateSelector(value?: string): void {\n\t\twatchString(this, '_selector', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_stealth')\n\tpublic validateStealth(value?: boolean): void {\n\t\twatchBoolean(this, '_stealth', 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\tvalidateTabIndex(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_target')\n\tpublic validateTarget(value?: LinkTarget): void {\n\t\twatchString(this, '_target', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_targetDescription')\n\tpublic validateTargetDescription(value?: string): void {\n\t\twatchString(this, '_targetDescription', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Alignment): 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('_useCase')\n\tpublic validateUseCase(value?: LinkUseCase): void {\n\t\tif (typeof value === 'string') {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_useCase: value,\n\t\t\t};\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.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaCurrent(this._ariaCurrent);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHref(this._href);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateIconAlign(this._iconAlign);\n\t\tthis.validateIconOnly(this._iconOnly);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateSelector(this._selector);\n\t\tthis.validateStealth(this._stealth);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTarget(this._target);\n\t\tthis.validateTargetDescription(this._targetDescription);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateUseCase(this._useCase);\n\t}\n}\n"],"version":3}
1	+ {"file":"component6.js","mappings":"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","names":[],"sources":["./src/components/link/component.tsx"],"sourcesContent":["import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { translate } from '../../i18n';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tLinkOnCallbacks,\n\tLinkStates,\n\tLinkTarget,\n\tLinkUseCase,\n\tOptionalLinkProps,\n\tOptionalLinkStates,\n\tRequiredLinkProps,\n\tRequiredLinkStates,\n\twatchTooltipAlignment,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Alignment } from '../../types/props/alignment';\nimport { a11yHintDisabled, devHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { mapBoolean2String, scrollBySelector, setEventTargetAndStopPropagation, watchBoolean, watchString, watchValidator } from '../../utils/prop.validators';\nimport { propergateFocus } from '../../utils/reuse';\nimport { validateIcon, watchIconAlign } from '../../utils/validators/icon';\nimport { validateAriaLabelWithLabel, validateLabelWithAriaLabel } from '../../utils/validators/label';\nimport { validateTabIndex } from '../../utils/validators/tab-index';\n\ntype RequiredNavLinkProps = RequiredLinkProps;\ntype OptionalNavLinkProps = OptionalLinkProps & {\n\tactive: boolean;\n};\nexport type NavLinkProps = Generic.Element.Members<RequiredNavLinkProps, OptionalNavLinkProps>;\n\n/*\n @internal\n /\n@Component({\n\ttag: 'kol-link-wc',\n\tshadow: false,\n})\nexport class KolLinkWc implements Generic.Element.ComponentApi<RequiredLinkProps, OptionalLinkProps, RequiredLinkStates, OptionalLinkStates> {\n\t@Element() private readonly host?: HTMLKolLinkWcElement;\n\tprivate readonly nonce = nonce();\n\tprivate ref?: HTMLAnchorElement;\n\n\tprivate readonly catchRef = (ref?: HTMLAnchorElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onClick = (event: Event) => {\n\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\tevent.preventDefault();\n\t\t\tsetEventTargetAndStopPropagation(event, this.ref);\n\t\t\tthis.state._on?.onClick(event, this.state._href);\n\t\t}\n\t};\n\n\tprivate readonly getRenderValues = () => {\n\t\t/\n\t\t DX\n\t\t * Das möchte ich ungern für HTML machen, sondern nur für Barrierefreiheitsthemen.\n\t\t /\n\t\t// if (typeof this.state._href === 'string' && this.state._href.length > 0) {\n\t\t// console.error('Setz den URL.');\n\t\t// throw new Error('Setz den URL.');\n\t\t// }\n\n\t\t// switch (this.state._target) {\n\t\t// case '_blank':\n\t\t// case '_self':\n\t\t// break;\n\t\t// default:\n\t\t// console.error('Fehlerhaftes Target.');\n\t\t// throw new Error('Fehlerhaftes Target.');\n\t\t// }\n\n\t\t// ROBUSTHEIT durch Validierung\n\t\tlet goToProps = {};\n\t\tif (typeof this.state._selector === 'string') {\n\t\t\tgoToProps = {\n\t\t\t\trole: 'link',\n\t\t\t\ttabIndex: 0,\n\t\t\t\tonClick: () => {\n\t\t\t\t\tscrollBySelector(this.state._selector as string);\n\t\t\t\t},\n\t\t\t\tonKeyPress: () => {\n\t\t\t\t\tscrollBySelector(this.state._selector as string);\n\t\t\t\t},\n\t\t\t};\n\t\t}\n\n\t\tconst isExternal = typeof this.state._target === 'string' && this.state._target !== '_self';\n\n\t\tconst tagAttrs = {\n\t\t\thref: typeof this.state._href === 'string' && this.state._href.length > 0 ? this.state._href : 'javascript:void(0)',\n\t\t\ttarget: typeof this.state._target === 'string' && this.state._target.length > 0 ? this.state._target : undefined,\n\t\t\trel: isExternal ? 'noopener' : undefined,\n\t\t};\n\n\t\tif (\n\t\t\t(this.state._useCase === 'image' \|\| this.state._iconOnly === true) &&\n\t\t\t(typeof this.state._ariaLabel !== 'string' \|\| this.state._ariaLabel.length === 0)\n\t\t) {\n\t\t\tdevHint(`[KolLink] Es muss ein Aria-Label gesetzt werden, wenn eine Grafik verlinkt oder der Icon-Only-Modus verwendet wird.`);\n\t\t}\n\t\treturn { isExternal, tagAttrs, goToProps };\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { isExternal, tagAttrs, goToProps } = this.getRenderValues();\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<a\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t{...tagAttrs}\n\t\t\t\t\taria-controls={this.state._ariaControls}\n\t\t\t\t\taria-current={this.state._ariaCurrent}\n\t\t\t\t\taria-expanded={mapBoolean2String(this.state._ariaExpanded)}\n\t\t\t\t\taria-labelledby={this.state._useCase === 'image' \|\| this.state._iconOnly === true ? this.nonce : undefined}\n\t\t\t\t\taria-selected={mapBoolean2String(this.state._ariaSelected)}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\t'skip ': this.state._stealth !== false,\n\t\t\t\t\t\t'icon-only': this.state._iconOnly === true,\n\t\t\t\t\t\t'external-link': isExternal,\n\t\t\t\t\t}}\n\t\t\t\t\t{...this.state._on}\n\t\t\t\t\t// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/click-events-have-key-events.md\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\tonKeyPress={this.onClick}\n\t\t\t\t\t{...goToProps}\n\t\t\t\t\trole={this.state._role}\n\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t>\n\t\t\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this.state._label}>\n\t\t\t\t\t\t{/\n\t\t\t\t\t\t\tEs ist keine gute Idee hier einen Slot einzufügen, da dadurch ermöglicht wird,\n\t\t\t\t\t\t\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t\t/}\n\t\t\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t\t\t</kol-span-wc>\n\t\t\t\t\t{isExternal && (\n\t\t\t\t\t\t<kol-icon class=\"external-link-icon\" _ariaLabel={this.state._targetDescription as string} _icon={'fa-solid fa-arrow-up-right-from-square'} />\n\t\t\t\t\t)}\n\t\t\t\t</a>\n\t\t\t\t{(this.state._iconOnly === true \|\| this.state._useCase === 'image') && (\n\t\t\t\t\t<kol-tooltip\n\t\t\t\t\t\t/\n\t\t\t\t\t\t Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t /\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t_align={this.state._tooltipAlign}\n\t\t\t\t\t\t_id={this.nonce}\n\t\t\t\t\t\t_label={this.state._ariaLabel \|\| this.state._label}\n\t\t\t\t\t></kol-tooltip>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t /\n\t@Prop() public _ariaControls?: string;\n\n\t/\n\t Gibt an, welchen aktuellen Auswahlstatus der Link hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t /\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/\n\t Gibt an, ob durch den Link etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t /\n\t@Prop({ reflect: true }) public _ariaExpanded?: boolean;\n\n\t/\n\t Gibt einen beschreibenden Text des Links an. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)\n\t /\n\t@Prop() public _ariaLabel?: string = '';\n\n\t/\n\t Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t /\n\t@Prop({ reflect: true }) public _ariaSelected?: boolean;\n\n\t/\n\t Gibt an, ob der Link deaktiviert ist.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/\n\t Gibt die Ziel-Url des Links an.\n\t /\n\t@Prop() public _href!: string;\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 das Icon entweder links oder rechts dargestellt werden soll.\n\t \n\t @deprecated Wird durch das neue flexibleren Icon-Typ abgedeckt.\n\t /\n\t@Prop() public _iconAlign?: Alignment = 'left';\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 den Label für die Beschriftung der Schaltfläche an.\n\t /\n\t// - eslint-disable-next-line @stencil/strict-mutable\n\t@Prop({ mutable: true, reflect: false }) public _label!: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für den Link an.\n\t \n\t @deprecated Hierzu sollte statt Link- die ButtonLink-Komponente verwendet werden.\n\t /\n\t@Prop() public _on?: LinkOnCallbacks;\n\n\t/\n\t Gibt an, welche Role der Schalter hat.\n\t /\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/\n\t Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.\n\t \n\t @deprecated Das Styling sollte stets über CSS erfolgen.\n\t /\n\t@Prop() public _selector?: string;\n\n\t/\n\t Gibt an, ob der Link nur beim Fokus sichtbar ist.\n\t \n\t @deprecated Das Styling sollte stets über CSS erfolgen.\n\t /\n\t@Prop({ reflect: true }) public _stealth?: boolean = false;\n\n\t/\n\t Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t Definiert das Verhalten, bei dem der Link geöffnet werden soll.\n\t /\n\t@Prop() public _target?: LinkTarget;\n\n\t/\n\t Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.\n\t /\n\t@Prop() public _targetDescription?: string = translate('kol-open-link-in-tab');\n\n\t/\n\t Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Alignment = 'right';\n\n\t/\n\t Gibt den Verwendungsfall des Links an.\n\t \n\t @deprecated Das Styling sollte stets über CSS erfolgen.\n\t /\n\t@Prop() public _useCase?: LinkUseCase = 'text';\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: LinkStates = {\n\t\t_ariaLabel: '',\n\t\t_href: 'javascript:void(0)',\n\t\t_icon: {},\n\t\t/\n\t\t @deprecated\n\t\t /\n\t\t_iconAlign: 'left',\n\t\t_label: '',\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\twatchString(this, '_ariaControls', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_ariaCurrent')\n\tpublic validateAriaCurrent(value?: AriaCurrent): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_ariaCurrent',\n\t\t\t(value) => value === true \|\| value === 'date' \|\| value === 'location' \|\| value === 'page' \|\| value === 'step' \|\| value === 'time',\n\t\t\tnew Set(['boolean', 'String {data, location, page, step, time}']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: boolean): void {\n\t\twatchBoolean(this, '_ariaExpanded', value);\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\tvalidateAriaLabelWithLabel(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: boolean): void {\n\t\twatchBoolean(this, '_ariaSelected', 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\twatchBoolean(this, '_disabled', value);\n\t\tif (value === true) {\n\t\t\ta11yHintDisabled();\n\t\t}\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_href')\n\tpublic validateHref(value?: string): void {\n\t\twatchString(this, '_href', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_icon')\n\tpublic validateIcon(value?: KoliBriIconProp): void {\n\t\tvalidateIcon(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t /\n\t@Watch('_iconAlign')\n\tpublic validateIconAlign(value?: Alignment): void {\n\t\twatchIconAlign(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\twatchBoolean(this, '_iconOnly', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tvalidateLabelWithAriaLabel(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t /\n\t@Watch('_on')\n\tpublic validateOn(value?: LinkOnCallbacks): void {\n\t\tif (\n\t\t\ttypeof value === 'object' &&\n\t\t\tvalue !== null &&\n\t\t\t// https://eslint.org/docs/rules/no-prototype-builtins\n\t\t\tObject.prototype.hasOwnProperty.call(value, 'onClick') &&\n\t\t\ttypeof value.onClick === 'function'\n\t\t) {\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('_role')\n\tpublic validateRole(value?: AlternativButtonLinkRole): void {\n\t\twatchString(this, '_role', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_selector')\n\tpublic validateSelector(value?: string): void {\n\t\twatchString(this, '_selector', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_stealth')\n\tpublic validateStealth(value?: boolean): void {\n\t\twatchBoolean(this, '_stealth', 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\tvalidateTabIndex(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_target')\n\tpublic validateTarget(value?: LinkTarget): void {\n\t\twatchString(this, '_target', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_targetDescription')\n\tpublic validateTargetDescription(value?: string): void {\n\t\twatchString(this, '_targetDescription', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Alignment): 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('_useCase')\n\tpublic validateUseCase(value?: LinkUseCase): void {\n\t\tif (typeof value === 'string') {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_useCase: value,\n\t\t\t};\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.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaCurrent(this._ariaCurrent);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHref(this._href);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateIconAlign(this._iconAlign);\n\t\tthis.validateIconOnly(this._iconOnly);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateSelector(this._selector);\n\t\tthis.validateStealth(this._stealth);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTarget(this._target);\n\t\tthis.validateTargetDescription(this._targetDescription);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateUseCase(this._useCase);\n\t}\n}\n"],"version":3}

package/dist/components/controller-icon.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{y as objectObjectHandler,z as parseJson,a as watchValidator,A as isString}from"./prop.validators.js";import{i as isIcon}from"./component3.js";import{I as InputController}from"./controller.js";const beforePatchIcon=(o,t)=>{const n=o;"object"==typeof n&&null!==n&&(isString(n.right,1)&&(n.right={icon:n.right}),isString(n.left,1)&&(n.left={icon:n.left}),t.set("_icon",n))};class InputIconController extends InputController{constructor(o,t,n){super(o,t,n),this.component=o}validateIcon(o){objectObjectHandler(o,(()=>{try{o=parseJson(o)}catch(o){}watchValidator(this.component,"_icon",(o=>"object"==typeof o&&null!==o&&(isString(o.left,1)||isIcon(o.left)||isString(o.right,1)||isIcon(o.right))),new Set(["KoliBriHorizontalIcon"]),o,{hooks:{beforePatch:beforePatchIcon},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcon(this.component._icon)}}export{InputIconController as I};
+import{y as objectObjectHandler,z as parseJson,a as watchValidator,B as isString}from"./prop.validators.js";import{i as isIcon}from"./component3.js";import{I as InputController}from"./controller.js";const beforePatchIcon=(o,t)=>{const n=o;"object"==typeof n&&null!==n&&(isString(n.right,1)&&(n.right={icon:n.right}),isString(n.left,1)&&(n.left={icon:n.left}),t.set("_icon",n))};class InputIconController extends InputController{constructor(o,t,n){super(o,t,n),this.component=o}validateIcon(o){objectObjectHandler(o,(()=>{try{o=parseJson(o)}catch(o){}watchValidator(this.component,"_icon",(o=>"object"==typeof o&&null!==o&&(isString(o.left,1)||isIcon(o.left)||isString(o.right,1)||isIcon(o.right))),new Set(["KoliBriHorizontalIcon"]),o,{hooks:{beforePatch:beforePatchIcon},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcon(this.component._icon)}}export{InputIconController as I};

package/dist/components/devtools.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"devtools.js","mappings":";;;;;~~AAYA~~,SAAS,gBAAgB,CAAI,IAAY,EAAE,EAAK;EAC/C,IAAI;IACH,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE;MACpC,GAAG,EAAE;QACJ,OAAO,EAAE,CAAC;OACV;KACD,CAAC,CAAC;GACH;EAAC,OAAO,CAAC,EAAE;IACX,GAAG,CAAC,KAAK,CAAC,oBAAoB,IAAI,mBAAmB,CAAC,CAAC;GACvD;AACF,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,MAAe,KAAK,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,IAAI,MAAM,GAAG,EAAE,GAAG,MAAM,WAAW,CAAC,CAAC;MAEhG,UAAU,GAAG;EACzB,WAAW,EAAE,CAAC;EACd,IAAI,UAAU,EAAE,EAAE;IACjB,eAAe,EAAE,CAAC;IAElB,gBAAgB,CAAC,mBAAmB,EAAE,wBAAwB,CAAC,CAAC;IAChE,gBAAgB,CAAC,eAAe,EAAE,oBAAoB,CAAC,CAAC;IACxD,gBAAgB,CAAC,kBAAkB,EAAE,uBAAuB,CAAC,CAAC;IAC9D,gBAAgB,CAAC,qBAAqB,EAAE,0BAA0B,CAAC,CAAC;IACpE,gBAAgB,CAAC,OAAO,EAAE;MACzB,OAAO,YAAY,CAAC;KACpB,CAAC,CAAC;IACH,gBAAgB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IACzC,gBAAgB,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IAEjD,MAAM,IAAI,GAAG,WAAW,EAAE,CAAC,IAAI,CAAC;IAEhC,MAAM,GAAG,GAAG,WAAW,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/C,GAAG,CAAC,YAAY,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAC;IACnD,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,4BAA4B,CAAC,CAAC;IACxD,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACpC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,8EAA8E,CAAC,CAAC;IAC1G,GAAG,CAAC,SAAS,GAAG;;;;;;;;;;;;OAYX,CAAC;IAEN,WAAW,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAEpC,WAAW,CAAC,kBAAkB,EAAE,UAAU,EAAE,CAAC,CAAC;IAC9C,WAAW,CAAC,mBAAmB,EAAE,gBAAgB,EAAE,CAAC,CAAC;IACrD,WAAW,CAAC,yBAAyB,EAAE,wBAAwB,EAAE,CAAC,CAAC;IAEnE,IAAI,wBAAwB,EAAE,EAAE;MAC/B,MAAM,OAAO,GAAG,UAAU,CAAC;QAC1B,YAAY,CAAC,OAAO,CAAC,CAAC;QACtB,WAAW,CAAC;UACX,YAAY,CAAC,sBAAsB,CAAC,WAAW,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,wBAAwB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;SACtH,EAAE,KAAK,CAAC,CAAC;OACV,EAAE,IAAI,CAAC,CAAC;KACT;GAmBD;AACF;;;;","names":[],"sources":["./src/global/devtools.ts"],"sourcesContent":["import { getColorContrastAnalysis, getDevMode, getDocument, getExperimalMode, initKoliBri, KoliBri, renderDevAdvice } from '../utils/dev.utils';\nimport { ~~Log } from '../utils/log';\nimport {~~\n\tkoliBriA11yColorContrast,\n\tkoliBriQuerySelector,\n\tkoliBriQuerySelectorAll,\n\tkoliBriQuerySelectorColors,\n\tKoliBriUtils,\n\tparseJson,\n\tstringifyJson,\n} from '../utils/prop.validators';\n\nfunction prototypeKoliBri<T>(name: string, cb: T) {\n\ttry {\n\t\tObject.defineProperty(KoliBri, name, {\n\t\t\tget: function () {\n\t\t\t\treturn cb;\n\t\t\t},\n\t\t});\n\t} catch (e) {\n\t\tLog.debug(`KoliBri property ${name} is already bind.`);\n\t}\n}\n\nconst metaModeLog = (name: string, active: boolean) => Log.debug(`${name} ${active ? '' : 'not '}activated`);\n\nexport const initialize = (): void => {\n\tinitKoliBri();\n\tif (getDevMode()) {\n\t\trenderDevAdvice();\n\n\t\tprototypeKoliBri('a11yColorContrast', koliBriA11yColorContrast);\n\t\tprototypeKoliBri('querySelector', koliBriQuerySelector);\n\t\tprototypeKoliBri('querySelectorAll', koliBriQuerySelectorAll);\n\t\tprototypeKoliBri('querySelectorColors', koliBriQuerySelectorColors);\n\t\tprototypeKoliBri('utils', function () {\n\t\t\treturn KoliBriUtils;\n\t\t});\n\t\tprototypeKoliBri('parseJson', parseJson);\n\t\tprototypeKoliBri('stringifyJson', stringifyJson);\n\n\t\tconst body = getDocument().body;\n\n\t\tconst div = getDocument().createElement('svg');\n\t\tdiv.setAttribute('aria-label', 'KoliBri-DevTools');\n\t\tdiv.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\t\tdiv.setAttribute('role', 'toolbar');\n\t\tdiv.setAttribute('style', 'position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;');\n\t\tdiv.innerHTML = `<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"50\"\n height=\"50\"\n viewBox=\"0 0 600 600\"\n>\n <path d=\"M353 322L213 304V434L353 322Z\" fill=\"#047\" />\n <path d=\"M209 564V304L149 434L209 564Z\" fill=\"#047\" />\n <path d=\"M357 316L417 250L361 210L275 244L357 316Z\" fill=\"#047\" />\n <path d=\"M353 318L35 36L213 300L353 318Z\" fill=\"#047\" />\n <path d=\"M329 218L237 92L250 222L272 241L329 218Z\" fill=\"#047\" />\n <path d=\"M391 286L565 272L421 252L391 286Z\" fill=\"#047\" />\n</svg>`;\n\n\t\tgetDocument().body.appendChild(div);\n\n\t\tmetaModeLog('Development mode', getDevMode());\n\t\tmetaModeLog('Experimental mode', getExperimalMode());\n\t\tmetaModeLog('Color contrast analysis', getColorContrastAnalysis());\n\n\t\tif (getColorContrastAnalysis()) {\n\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t\tsetInterval(() => {\n\t\t\t\t\tKoliBriUtils.queryHtmlElementColors(getDocument().createElement('div'), koliBriA11yColorContrast(body), false, false);\n\t\t\t\t}, 10000);\n\t\t\t}, 2500);\n\t\t}\n\n\t\t// setTimeout(() => {\n\t\t// const kolButton = koliBriQuerySelector<HTMLButtonElement>(document, '[_label=\"Aktion ausführen\"]');\n\t\t// if (kolButton) {\n\t\t// const button = koliBriQuerySelector<HTMLButtonElement>(kolButton?.shadowRoot as ShadowRoot, 'button');\n\t\t// if (button) {\n\t\t// kolButton.style.backgroundColor = '#988';\n\t\t// button.style.backgroundColor = 'inherit';\n\t\t// button.style.color = '#988';\n\t\t// const kolButtonColors = koliBriQuerySelectorColors('[_label=\"Aktion ausführen\"]');\n\t\t// console.log(\n\t\t// koliBriQuerySelectorColors('button', {\n\t\t// ...kolButtonColors,\n\t\t// })\n\t\t// );\n\t\t// }\n\t\t// }\n\t\t// }, 2500);\n\t}\n};\n"],"version":3}
1	+ {"file":"devtools.js","mappings":";;;;;AAWA,SAAS,gBAAgB,CAAI,IAAY,EAAE,EAAK;EAC/C,IAAI;IACH,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE;MACpC,GAAG,EAAE;QACJ,OAAO,EAAE,CAAC;OACV;KACD,CAAC,CAAC;GACH;EAAC,OAAO,CAAC,EAAE;IACX,GAAG,CAAC,KAAK,CAAC,oBAAoB,IAAI,mBAAmB,CAAC,CAAC;GACvD;AACF,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,MAAe,KAAK,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,IAAI,MAAM,GAAG,EAAE,GAAG,MAAM,WAAW,CAAC,CAAC;MAEhG,UAAU,GAAG;EACzB,WAAW,EAAE,CAAC;EACd,IAAI,UAAU,EAAE,EAAE;IACjB,eAAe,EAAE,CAAC;IAElB,gBAAgB,CAAC,mBAAmB,EAAE,wBAAwB,CAAC,CAAC;IAChE,gBAAgB,CAAC,eAAe,EAAE,oBAAoB,CAAC,CAAC;IACxD,gBAAgB,CAAC,kBAAkB,EAAE,uBAAuB,CAAC,CAAC;IAC9D,gBAAgB,CAAC,qBAAqB,EAAE,0BAA0B,CAAC,CAAC;IACpE,gBAAgB,CAAC,OAAO,EAAE;MACzB,OAAO,YAAY,CAAC;KACpB,CAAC,CAAC;IACH,gBAAgB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IACzC,gBAAgB,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IAEjD,MAAM,IAAI,GAAG,WAAW,EAAE,CAAC,IAAI,CAAC;IAEhC,MAAM,GAAG,GAAG,WAAW,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/C,GAAG,CAAC,YAAY,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAC;IACnD,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,4BAA4B,CAAC,CAAC;IACxD,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACpC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,8EAA8E,CAAC,CAAC;IAC1G,GAAG,CAAC,SAAS,GAAG;;;;;;;;;;;;OAYX,CAAC;IAEN,WAAW,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAEpC,WAAW,CAAC,kBAAkB,EAAE,UAAU,EAAE,CAAC,CAAC;IAC9C,WAAW,CAAC,mBAAmB,EAAE,gBAAgB,EAAE,CAAC,CAAC;IACrD,WAAW,CAAC,yBAAyB,EAAE,wBAAwB,EAAE,CAAC,CAAC;IAEnE,IAAI,wBAAwB,EAAE,EAAE;MAC/B,MAAM,OAAO,GAAG,UAAU,CAAC;QAC1B,YAAY,CAAC,OAAO,CAAC,CAAC;QACtB,WAAW,CAAC;UACX,YAAY,CAAC,sBAAsB,CAAC,WAAW,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,wBAAwB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;SACtH,EAAE,KAAK,CAAC,CAAC;OACV,EAAE,IAAI,CAAC,CAAC;KACT;GAmBD;AACF;;;;","names":[],"sources":["./src/global/devtools.ts"],"sourcesContent":["import { getColorContrastAnalysis, getDevMode, getDocument, getExperimalMode, initKoliBri, KoliBri, Log, renderDevAdvice } from '../utils/dev.utils';\nimport {\n\tkoliBriA11yColorContrast,\n\tkoliBriQuerySelector,\n\tkoliBriQuerySelectorAll,\n\tkoliBriQuerySelectorColors,\n\tKoliBriUtils,\n\tparseJson,\n\tstringifyJson,\n} from '../utils/prop.validators';\n\nfunction prototypeKoliBri<T>(name: string, cb: T) {\n\ttry {\n\t\tObject.defineProperty(KoliBri, name, {\n\t\t\tget: function () {\n\t\t\t\treturn cb;\n\t\t\t},\n\t\t});\n\t} catch (e) {\n\t\tLog.debug(`KoliBri property ${name} is already bind.`);\n\t}\n}\n\nconst metaModeLog = (name: string, active: boolean) => Log.debug(`${name} ${active ? '' : 'not '}activated`);\n\nexport const initialize = (): void => {\n\tinitKoliBri();\n\tif (getDevMode()) {\n\t\trenderDevAdvice();\n\n\t\tprototypeKoliBri('a11yColorContrast', koliBriA11yColorContrast);\n\t\tprototypeKoliBri('querySelector', koliBriQuerySelector);\n\t\tprototypeKoliBri('querySelectorAll', koliBriQuerySelectorAll);\n\t\tprototypeKoliBri('querySelectorColors', koliBriQuerySelectorColors);\n\t\tprototypeKoliBri('utils', function () {\n\t\t\treturn KoliBriUtils;\n\t\t});\n\t\tprototypeKoliBri('parseJson', parseJson);\n\t\tprototypeKoliBri('stringifyJson', stringifyJson);\n\n\t\tconst body = getDocument().body;\n\n\t\tconst div = getDocument().createElement('svg');\n\t\tdiv.setAttribute('aria-label', 'KoliBri-DevTools');\n\t\tdiv.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\t\tdiv.setAttribute('role', 'toolbar');\n\t\tdiv.setAttribute('style', 'position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;');\n\t\tdiv.innerHTML = `<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"50\"\n height=\"50\"\n viewBox=\"0 0 600 600\"\n>\n <path d=\"M353 322L213 304V434L353 322Z\" fill=\"#047\" />\n <path d=\"M209 564V304L149 434L209 564Z\" fill=\"#047\" />\n <path d=\"M357 316L417 250L361 210L275 244L357 316Z\" fill=\"#047\" />\n <path d=\"M353 318L35 36L213 300L353 318Z\" fill=\"#047\" />\n <path d=\"M329 218L237 92L250 222L272 241L329 218Z\" fill=\"#047\" />\n <path d=\"M391 286L565 272L421 252L391 286Z\" fill=\"#047\" />\n</svg>`;\n\n\t\tgetDocument().body.appendChild(div);\n\n\t\tmetaModeLog('Development mode', getDevMode());\n\t\tmetaModeLog('Experimental mode', getExperimalMode());\n\t\tmetaModeLog('Color contrast analysis', getColorContrastAnalysis());\n\n\t\tif (getColorContrastAnalysis()) {\n\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t\tsetInterval(() => {\n\t\t\t\t\tKoliBriUtils.queryHtmlElementColors(getDocument().createElement('div'), koliBriA11yColorContrast(body), false, false);\n\t\t\t\t}, 10000);\n\t\t\t}, 2500);\n\t\t}\n\n\t\t// setTimeout(() => {\n\t\t// const kolButton = koliBriQuerySelector<HTMLButtonElement>(document, '[_label=\"Aktion ausführen\"]');\n\t\t// if (kolButton) {\n\t\t// const button = koliBriQuerySelector<HTMLButtonElement>(kolButton?.shadowRoot as ShadowRoot, 'button');\n\t\t// if (button) {\n\t\t// kolButton.style.backgroundColor = '#988';\n\t\t// button.style.backgroundColor = 'inherit';\n\t\t// button.style.color = '#988';\n\t\t// const kolButtonColors = koliBriQuerySelectorColors('[_label=\"Aktion ausführen\"]');\n\t\t// console.log(\n\t\t// koliBriQuerySelectorColors('button', {\n\t\t// ...kolButtonColors,\n\t\t// })\n\t\t// );\n\t\t// }\n\t\t// }\n\t\t// }, 2500);\n\t}\n};\n"],"version":3}

package/dist/components/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{L as Log,s as setThemeStyle,g as getThemeDetails}from"./prop.validators.js";export{K as KoliBriDevHelper,T as ToasterService,c as configKoliBri}from"./prop.validators.js";import{setMode}from"@stencil/core/internal/client";export{setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";export{c as BUNDESAEMTER,e as BUNDESANSTALTEN,a as BUNDESMINISTERIEN,f as BUND_LOGO_TEXT_MAP,b as Bundesamt,d as Bundesanstalt,B as Bundesministerium}from"./bund.js";export{r as register,t as translations}from"./i18n.js";const appGlobalScript=()=>{Log.debug("\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | `--' |  |) /_  ,--.--. `--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n`--' `--´  `---´  `--' `--' `------´  `--'    `--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io\n\t",{forceLog:!0}),setMode((e=>(e.shadowRoot instanceof ShadowRoot&&setThemeStyle(e,getThemeDetails(e)),"default"))),import("./devtools.js").then((e=>{"object"==typeof e&&null!==e&&"function"==typeof e.initialize&&e.initialize()})).catch((e=>{Log.error(e)}))},globalScripts=appGlobalScript;globalScripts();
+import{s as setThemeStyle,L as Log,g as getThemeDetails}from"./prop.validators.js";export{K as KoliBriDevHelper,T as ToasterService,c as configKoliBri}from"./prop.validators.js";import{setMode}from"@stencil/core/internal/client";export{setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";export{c as BUNDESAEMTER,e as BUNDESANSTALTEN,a as BUNDESMINISTERIEN,f as BUND_LOGO_TEXT_MAP,b as Bundesamt,d as Bundesanstalt,B as Bundesministerium}from"./bund.js";export{r as register,t as translations}from"./i18n.js";const appGlobalScript=()=>{setMode((e=>(e.shadowRoot instanceof ShadowRoot&&setThemeStyle(e,getThemeDetails(e)),"default"))),import("./devtools.js").then((e=>{"object"==typeof e&&null!==e&&"function"==typeof e.initialize&&e.initialize()})).catch((e=>{Log.error(e)}))},globalScripts=appGlobalScript;globalScripts();

package/dist/components/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index.js","mappings":";;;;;;;;;;AAKA,wBAAe;EACd,~~GAAG~~,CAAC,~~KAAK~~,~~CACR;;;;;;;EAOA,EACA~~;~~IACC;GACA~~,~~CACD,CAAC;EAEF;IACC,~~IAAI,GAAG,CAAC;MACP,aAAa,CAAC,GAAG,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC;KACzC;IACD;GACA,CAAC,CAAC;EAEH;KACE,IAAI,CAAC,CAAC,QAAQ;IACd,IAAI,OAAO,QAAQ;MAClB,QAAQ,CAAC,UAAU,EAAE,CAAC;KACtB;GACD,CAAC;;IAED,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;GACjB,CAAC,CAAC;AACL,CAAC;;~~ACnCM~~,MAAM,aAAa,GAAG,eAAe;;","names":[],"sources":["./src/global/script.ts","@stencil/core/internal/app-globals"],"sourcesContent":["import { getThemeDetails, setThemeStyle } from '@a11y-ui/core';\nimport { setMode } from '@stencil/core';\nimport { Log } from '../utils/~~log~~';\n\n// ts-prune-ignore-next\nexport default (): void => {\n\tLog.debug(\n\t\t`\n,--. ,--. ,--. ,--. ,-----. ,--.\n\| .' / ,---. \| \| \\`--' \| \|) /_ ,--.--. \\`--'\n\| . ' \| .-. \| \| \| ,--. \| .-. \\\\ \| .--' ,--.\n\| \|\\\\ \\\\ \| '-' \| \| \| \| \| \| '--' / \| \| \| \|\n\\`--' \\`--´ \\`---´ \\`--' \\`--' \\`------´ \\`--' \\`--'\n🚹 The accessible HTML-Standard \| 👉 https://public-ui.github.io\n\t`,\n\t\t{\n\t\t\tforceLog: true,\n\t\t}\n\t);\n\n\tsetMode((elm) => {\n\t\tif (elm.shadowRoot instanceof ShadowRoot) {\n\t\t\tsetThemeStyle(elm, getThemeDetails(elm));\n\t\t}\n\t\treturn 'default';\n\t});\n\n\timport('./devtools')\n\t\t.then((devTools) => {\n\t\t\tif (typeof devTools === 'object' && devTools !== null && typeof devTools.initialize === 'function') {\n\t\t\t\tdevTools.initialize();\n\t\t\t}\n\t\t})\n\t\t.catch((error) => {\n\t\t\tLog.error(error);\n\t\t});\n};\n","import appGlobalScript from '/home/runner/work/kolibri/kolibri/packages/library/src/global/script.ts';\nexport const globalScripts = appGlobalScript;\n"],"version":3}
1	+ {"file":"index.js","mappings":";;;;;;;;;;AAKA,wBAAe;EACd,OAAO,CAAC,CAAC,GAAG;IACX,IAAI,GAAG,CAAC;MACP,aAAa,CAAC,GAAG,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC;KACzC;IACD;GACA,CAAC,CAAC;EAEH;KACE,IAAI,CAAC,CAAC,QAAQ;IACd,IAAI,OAAO,QAAQ;MAClB,QAAQ,CAAC,UAAU,EAAE,CAAC;KACtB;GACD,CAAC;;IAED,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;GACjB,CAAC,CAAC;AACL,CAAC;;ACrBM,MAAM,aAAa,GAAG,eAAe;;","names":[],"sources":["./src/global/script.ts","@stencil/core/internal/app-globals"],"sourcesContent":["import { getThemeDetails, setThemeStyle } from '@a11y-ui/core';\nimport { setMode } from '@stencil/core';\nimport { Log } from '../utils/dev.utils';\n\n// ts-prune-ignore-next\nexport default (): void => {\n\tsetMode((elm) => {\n\t\tif (elm.shadowRoot instanceof ShadowRoot) {\n\t\t\tsetThemeStyle(elm, getThemeDetails(elm));\n\t\t}\n\t\treturn 'default';\n\t});\n\n\timport('./devtools')\n\t\t.then((devTools) => {\n\t\t\tif (typeof devTools === 'object' && devTools !== null && typeof devTools.initialize === 'function') {\n\t\t\t\tdevTools.initialize();\n\t\t\t}\n\t\t})\n\t\t.catch((error) => {\n\t\t\tLog.error(error);\n\t\t});\n};\n","import appGlobalScript from '/home/runner/work/kolibri/kolibri/packages/library/src/global/script.ts';\nexport const globalScripts = appGlobalScript;\n"],"version":3}

package/dist/components/kol-input-adapter-leanup.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{C as deprecatedHint}from"./prop.validators.js";import{d as defineCustomElement$a}from"./component5.js";import{d as defineCustomElement$2,a as defineCustomElement$8,b as defineCustomElement$9}from"./component.js";import{d as defineCustomElement$7}from"./component4.js";import{d as defineCustomElement$6}from"./component2.js";import{d as defineCustomElement$5}from"./shadow.js";import{d as defineCustomElement$4}from"./component6.js";import{d as defineCustomElement$3}from"./component3.js";const KolInputAdapterLeanup$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow()}componentWillLoad(){deprecatedHint("Die Komponente 'kol-input-adapter-leanup' mit dem Release v1.1.7 umgezogen. Lesen Sie hier, wie Sie sie migrieren: https://public-ui.github.io/docs/changelog/#117---30092022")}render(){return h(Host,null,h("kol-alert",{_type:"warning"},"Die Komponente ",h("code",null,"kol-input-adapter-leanup")," ist umgezogen. Lesen Sie hier, wie Sie sie migrieren:"," ",h("kol-link",{_href:"https://public-ui.github.io/docs/changelog#118---07102022",_label:"https://public-ui.github.io/docs/changelog#118---07102022",_target:"documentation"})))}},[1,"kol-input-adapter-leanup"]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-adapter-leanup","kol-alert","kol-badge","kol-button-wc","kol-heading-wc","kol-icon","kol-link","kol-link-wc","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-input-adapter-leanup":customElements.get(e)||customElements.define(e,KolInputAdapterLeanup$1);break;case"kol-alert":customElements.get(e)||defineCustomElement$a();break;case"kol-badge":customElements.get(e)||defineCustomElement$9();break;case"kol-button-wc":customElements.get(e)||defineCustomElement$8();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$7();break;case"kol-icon":customElements.get(e)||defineCustomElement$6();break;case"kol-link":customElements.get(e)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(e)||defineCustomElement$2()}}))}const KolInputAdapterLeanup=KolInputAdapterLeanup$1,defineCustomElement=defineCustomElement$1;export{KolInputAdapterLeanup,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{D as deprecatedHint}from"./prop.validators.js";import{d as defineCustomElement$a}from"./component5.js";import{d as defineCustomElement$2,a as defineCustomElement$8,b as defineCustomElement$9}from"./component.js";import{d as defineCustomElement$7}from"./component4.js";import{d as defineCustomElement$6}from"./component2.js";import{d as defineCustomElement$5}from"./shadow.js";import{d as defineCustomElement$4}from"./component6.js";import{d as defineCustomElement$3}from"./component3.js";const KolInputAdapterLeanup$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow()}componentWillLoad(){deprecatedHint("Die Komponente 'kol-input-adapter-leanup' mit dem Release v1.1.7 umgezogen. Lesen Sie hier, wie Sie sie migrieren: https://public-ui.github.io/docs/changelog/#117---30092022")}render(){return h(Host,null,h("kol-alert",{_type:"warning"},"Die Komponente ",h("code",null,"kol-input-adapter-leanup")," ist umgezogen. Lesen Sie hier, wie Sie sie migrieren:"," ",h("kol-link",{_href:"https://public-ui.github.io/docs/changelog#118---07102022",_label:"https://public-ui.github.io/docs/changelog#118---07102022",_target:"documentation"})))}},[1,"kol-input-adapter-leanup"]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-adapter-leanup","kol-alert","kol-badge","kol-button-wc","kol-heading-wc","kol-icon","kol-link","kol-link-wc","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-input-adapter-leanup":customElements.get(e)||customElements.define(e,KolInputAdapterLeanup$1);break;case"kol-alert":customElements.get(e)||defineCustomElement$a();break;case"kol-badge":customElements.get(e)||defineCustomElement$9();break;case"kol-button-wc":customElements.get(e)||defineCustomElement$8();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$7();break;case"kol-icon":customElements.get(e)||defineCustomElement$6();break;case"kol-link":customElements.get(e)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(e)||defineCustomElement$2()}}))}const KolInputAdapterLeanup=KolInputAdapterLeanup$1,defineCustomElement=defineCustomElement$1;export{KolInputAdapterLeanup,defineCustomElement};

package/dist/components/kol-input-checkbox.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as watchBoolean,a as watchValidator,A as isString,d as devHint,v as setState,m as propergateFocus}from"./prop.validators.js";import{g as getRenderStates}from"./controller.js";import{I as InputCheckboxRadioController}from"./controller2.js";import{d as defineCustomElement$9}from"./component5.js";import{d as defineCustomElement$2,a as defineCustomElement$7,b as defineCustomElement$8}from"./component.js";import{d as defineCustomElement$6}from"./component4.js";import{d as defineCustomElement$5}from"./component2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component3.js";class InputCheckboxController extends InputCheckboxRadioController{constructor(e,t,i){super(e,t,i),this.component=e}validateChecked(e){watchBoolean(this.component,"_checked",e),this.setFormAssociatedValue(this.component.state._checked)}validateIcon(e){watchValidator(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&(isString(e.checked,1)||isString(e.indeterminate,1)||isString(e.unchecked,1))),new Set(["InputCheckboxIcons"]),e)}validateIndeterminate(e){watchBoolean(this.component,"_indeterminate",e)}validateType(e){devHint('The "_type" prop is deprecated. Use "_variant" instead.'),this.validateVariant(e)}validateValue(e){setState(this.component,"_value",e)}validateVariant(e){watchValidator(this.component,"_variant",(e=>"string"==typeof e&&("button"===e||"checkbox"===e||"switch"===e)),new Set(["String {button, checkbox, switch}"]),e)}componentWillLoad(){super.componentWillLoad(),this.validateChecked(this.component._checked),this.validateIcon(this.component._icon),this.validateIndeterminate(this.component._indeterminate),this.validateValue(this.component._value),this.validateVariant(this.component._variant||this.component._type)}}const defaultStyleCss=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}.kol-required span::after{content:'*'}input,select,textarea{border-color:var(--kolibri-border-color);border-style:solid;border-width:1px}input input.error,input select.error,input textarea.error,select input.error,select select.error,select textarea.error,textarea input.error,textarea select.error,textarea textarea.error{border-color:var(--kolibri-border-error)}input input:focus,input input:hover,input select:focus,input select:hover,input textarea:focus,input textarea:hover,select input:focus,select input:hover,select select:focus,select select:hover,select textarea:focus,select textarea:hover,textarea input:focus,textarea input:hover,textarea select:focus,textarea select:hover,textarea textarea:focus,textarea 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}label{cursor:pointer}input{border-color:var(--kolibri-border-color);border-width:2px;border-style:solid;line-height:24px;font-size:var(--kolibri-font-size)}.required label>span::after{content:'*';padding-left:0.125em}input:hover{border-color:var(--kolibri-color-normal)}kol-input{align-items:center;display:grid;gap:calc(2 * var(--kolibri-spacing));justify-items:left;width:100%}kol-input.checkbox{grid-template-columns:calc(6 * var(--kolibri-spacing)) auto}kol-input.switch{grid-template-columns:calc(13 * var(--kolibri-spacing)) auto}kol-input .input{display:inline-flex;order:1}kol-input .input div{display:inline-flex}kol-input .input input{margin:0px}kol-input label{order:2}kol-input kol-alert.error{order:3;padding-top:0.25em;grid-column:span 2 / auto}input[type='checkbox']{appearance:none;background-color:white;cursor:pointer;transition:0.5s}input[type='checkbox'].kol-disabled:before{cursor:not-allowed}input[type='checkbox']:before{content:'';cursor:pointer}input[type='checkbox']:checked{background-color:var(--kolibri-color-primary);border-color:var(--kolibri-color-primary)}.disabled{opacity:0.33}.checkbox kol-icon,.switch kol-icon{display:none}kol-input span.hint{grid-column:span 2;font-style:italic;color:gray;display:block;order:3;padding:0 var(--kolibri-spacing)}.button label{cursor:pointer;display:inline-flex;width:auto}.button label>span>span{display:inline-flex;gap:calc(2 * var(--kolibri-spacing));place-items:center}.button input{display:none}.checkbox input[type='checkbox']{height:calc(6 * var(--kolibri-spacing));min-width:calc(6 * var(--kolibri-spacing));width:calc(6 * var(--kolibri-spacing))}.checkbox input[type='checkbox']:before{background-color:transparent;display:block;height:calc(6 * var(--kolibri-spacing));position:relative;width:calc(6 * var(--kolibri-spacing))}.checkbox input[type='checkbox']:checked:before{border-right-width:3px;border-bottom-width:3px;left:calc(1.5 * var(--kolibri-spacing) - 2px);top:calc(2.85 * var(--kolibri-spacing) - 2px);transform:rotate(40deg) translate(-50%, -50%);background-color:transparent;border-width:0px 3px 3px 0px;border-color:white;border-radius:1px;border-style:solid;height:calc(3 * var(--kolibri-spacing));width:calc(1.5 * var(--kolibri-spacing))}.checkbox input[type='checkbox']:indeterminate:before{background-color:var(--kolibri-color-normal);height:0.375rem;top:0.45rem;left:0.15rem;width:calc(4 * var(--kolibri-spacing))}.switch input[type='checkbox']{min-width:3.2em;width:3.2em;height:1.7em;display:inline-block;position:relative}.switch input[type='checkbox']:before{-webkit-transition:0.5s;-moz-transition:0.5s;-ms-transition:0.5s;transition:0.5;width:1.2em;height:1.2em;left:calc(0.25em - 2px);top:calc(0.25em - 2px);background-color:black;position:absolute}.switch input[type='checkbox']:checked:before{-webkit-transform:translateX(1.5em);-moz-transform:translateX(1.5em);-ms-transform:translateX(1.5em);transform:translateX(1.5em);background-color:white}.switch input[type='checkbox']:indeterminate:before{-webkit-transform:translateX(0.75em);-moz-transform:translateX(0.75em);-ms-transform:translateX(0.75em);transform:translateX(0.75em);background-color:var(--kolibri-color-normal)}",KolInputCheckbox$1=proxyCustomElement(class extends HTMLElement{render(){const{ariaDiscribedBy:e}=getRenderStates(this.state);return h(Host,null,h("kol-input",{class:{[this.state._variant]:!0},_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_required:this.state._required,_touched:this.state._touched},h("span",{"data-role":"button"===this.state._variant?"button":void 0,onKeyPress:"button"===this.state._variant?this.onChange:void 0,tabIndex:"button"===this.state._variant?0:void 0,slot:"label"},h("kol-icon",{onClick:this.onChange,_ariaLabel:"",_icon:this.state._indeterminate?this.state._icon.indeterminate:this.state._checked?this.state._icon.checked:this.state._icon.unchecked}),h("slot",null)),h("div",{slot:"input"},h("input",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,checked:!0===this.state._checked,disabled:!0===this.state._disabled,id:this.state._id,indeterminate:!0===this.state._indeterminate,name:this.state._name,required:!0===this.state._required,tabIndex:this.state._tabIndex,title:"",type:"checkbox",value:"string"==typeof this.state._value?this.state._value:""},this.controller.onFacade,{onChange:this.onChange})))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.ref=e,propergateFocus(this.host,this.ref)},this.onChange=e=>{this._checked=!1===this._checked,this._indeterminate=!1,this.controller.setValue(e,this._checked)},this._accessKey=void 0,this._alert=!0,this._checked=!1,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._indeterminate=void 0,this._name=void 0,this._on=void 0,this._required=void 0,this._tabIndex=void 0,this._touched=!1,this._type=void 0,this._value=void 0,this._variant=void 0,this.state={_checked:!1,_icon:{checked:"fa-solid fa-check",indeterminate:"fa-solid fa-minus",unchecked:"fa-solid fa-plus"},_id:"⚠",_indeterminate:!1,_variant:"checkbox"},this.controller=new InputCheckboxController(this,"checkbox",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateChecked(e){this.controller.validateChecked(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcon(e){this.controller.validateIcon(e)}validateId(e){this.controller.validateId(e)}validateIndeterminate(e){this.controller.validateIndeterminate(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateType(e){this.controller.validateType(e)}validateValue(e){this.controller.validateValue(e)}validateVariant(e){this.controller.validateVariant(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-input-checkbox",{_accessKey:[1,"_access-key"],_alert:[1540],_checked:[1540],_disabled:[516],_error:[1],_hideLabel:[516,"_hide-label"],_hint:[1],_icon:[1],_id:[1],_indeterminate:[1540],_name:[1],_on:[16],_required:[516],_tabIndex:[2,"_tab-index"],_touched:[1540],_type:[1],_value:[1],_variant:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-checkbox","kol-alert","kol-badge","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-input-checkbox":customElements.get(e)||customElements.define(e,KolInputCheckbox$1);break;case"kol-alert":customElements.get(e)||defineCustomElement$9();break;case"kol-badge":customElements.get(e)||defineCustomElement$8();break;case"kol-button-wc":customElements.get(e)||defineCustomElement$7();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$6();break;case"kol-icon":customElements.get(e)||defineCustomElement$5();break;case"kol-input":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(e)||defineCustomElement$2()}}))}const KolInputCheckbox=KolInputCheckbox$1,defineCustomElement=defineCustomElement$1;export{KolInputCheckbox,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as watchBoolean,a as watchValidator,B as isString,d as devHint,v as setState,m as propergateFocus}from"./prop.validators.js";import{g as getRenderStates}from"./controller.js";import{I as InputCheckboxRadioController}from"./controller2.js";import{d as defineCustomElement$9}from"./component5.js";import{d as defineCustomElement$2,a as defineCustomElement$7,b as defineCustomElement$8}from"./component.js";import{d as defineCustomElement$6}from"./component4.js";import{d as defineCustomElement$5}from"./component2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component3.js";class InputCheckboxController extends InputCheckboxRadioController{constructor(e,t,i){super(e,t,i),this.component=e}validateChecked(e){watchBoolean(this.component,"_checked",e),this.setFormAssociatedValue(this.component.state._checked)}validateIcon(e){watchValidator(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&(isString(e.checked,1)||isString(e.indeterminate,1)||isString(e.unchecked,1))),new Set(["InputCheckboxIcons"]),e)}validateIndeterminate(e){watchBoolean(this.component,"_indeterminate",e)}validateType(e){devHint('The "_type" prop is deprecated. Use "_variant" instead.'),this.validateVariant(e)}validateValue(e){setState(this.component,"_value",e)}validateVariant(e){watchValidator(this.component,"_variant",(e=>"string"==typeof e&&("button"===e||"checkbox"===e||"switch"===e)),new Set(["String {button, checkbox, switch}"]),e)}componentWillLoad(){super.componentWillLoad(),this.validateChecked(this.component._checked),this.validateIcon(this.component._icon),this.validateIndeterminate(this.component._indeterminate),this.validateValue(this.component._value),this.validateVariant(this.component._variant||this.component._type)}}const defaultStyleCss=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}.kol-required span::after{content:'*'}input,select,textarea{border-color:var(--kolibri-border-color);border-style:solid;border-width:1px}input input.error,input select.error,input textarea.error,select input.error,select select.error,select textarea.error,textarea input.error,textarea select.error,textarea textarea.error{border-color:var(--kolibri-border-error)}input input:focus,input input:hover,input select:focus,input select:hover,input textarea:focus,input textarea:hover,select input:focus,select input:hover,select select:focus,select select:hover,select textarea:focus,select textarea:hover,textarea input:focus,textarea input:hover,textarea select:focus,textarea select:hover,textarea textarea:focus,textarea 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}label{cursor:pointer}input{border-color:var(--kolibri-border-color);border-width:2px;border-style:solid;line-height:24px;font-size:var(--kolibri-font-size)}.required label>span::after{content:'*';padding-left:0.125em}input:hover{border-color:var(--kolibri-color-normal)}kol-input{align-items:center;display:grid;gap:calc(2 * var(--kolibri-spacing));justify-items:left;width:100%}kol-input.checkbox{grid-template-columns:calc(6 * var(--kolibri-spacing)) auto}kol-input.switch{grid-template-columns:calc(13 * var(--kolibri-spacing)) auto}kol-input .input{display:inline-flex;order:1}kol-input .input div{display:inline-flex}kol-input .input input{margin:0px}kol-input label{order:2}kol-input kol-alert.error{order:3;padding-top:0.25em;grid-column:span 2 / auto}input[type='checkbox']{appearance:none;background-color:white;cursor:pointer;transition:0.5s}input[type='checkbox'].kol-disabled:before{cursor:not-allowed}input[type='checkbox']:before{content:'';cursor:pointer}input[type='checkbox']:checked{background-color:var(--kolibri-color-primary);border-color:var(--kolibri-color-primary)}.disabled{opacity:0.33}.checkbox kol-icon,.switch kol-icon{display:none}kol-input span.hint{grid-column:span 2;font-style:italic;color:gray;display:block;order:3;padding:0 var(--kolibri-spacing)}.button label{cursor:pointer;display:inline-flex;width:auto}.button label>span>span{display:inline-flex;gap:calc(2 * var(--kolibri-spacing));place-items:center}.button input{display:none}.checkbox input[type='checkbox']{height:calc(6 * var(--kolibri-spacing));min-width:calc(6 * var(--kolibri-spacing));width:calc(6 * var(--kolibri-spacing))}.checkbox input[type='checkbox']:before{background-color:transparent;display:block;height:calc(6 * var(--kolibri-spacing));position:relative;width:calc(6 * var(--kolibri-spacing))}.checkbox input[type='checkbox']:checked:before{border-right-width:3px;border-bottom-width:3px;left:calc(1.5 * var(--kolibri-spacing) - 2px);top:calc(2.85 * var(--kolibri-spacing) - 2px);transform:rotate(40deg) translate(-50%, -50%);background-color:transparent;border-width:0px 3px 3px 0px;border-color:white;border-radius:1px;border-style:solid;height:calc(3 * var(--kolibri-spacing));width:calc(1.5 * var(--kolibri-spacing))}.checkbox input[type='checkbox']:indeterminate:before{background-color:var(--kolibri-color-normal);height:0.375rem;top:0.45rem;left:0.15rem;width:calc(4 * var(--kolibri-spacing))}.switch input[type='checkbox']{min-width:3.2em;width:3.2em;height:1.7em;display:inline-block;position:relative}.switch input[type='checkbox']:before{-webkit-transition:0.5s;-moz-transition:0.5s;-ms-transition:0.5s;transition:0.5;width:1.2em;height:1.2em;left:calc(0.25em - 2px);top:calc(0.25em - 2px);background-color:black;position:absolute}.switch input[type='checkbox']:checked:before{-webkit-transform:translateX(1.5em);-moz-transform:translateX(1.5em);-ms-transform:translateX(1.5em);transform:translateX(1.5em);background-color:white}.switch input[type='checkbox']:indeterminate:before{-webkit-transform:translateX(0.75em);-moz-transform:translateX(0.75em);-ms-transform:translateX(0.75em);transform:translateX(0.75em);background-color:var(--kolibri-color-normal)}",KolInputCheckbox$1=proxyCustomElement(class extends HTMLElement{render(){const{ariaDiscribedBy:e}=getRenderStates(this.state);return h(Host,null,h("kol-input",{class:{[this.state._variant]:!0},_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_required:this.state._required,_touched:this.state._touched},h("span",{"data-role":"button"===this.state._variant?"button":void 0,onKeyPress:"button"===this.state._variant?this.onChange:void 0,tabIndex:"button"===this.state._variant?0:void 0,slot:"label"},h("kol-icon",{onClick:this.onChange,_ariaLabel:"",_icon:this.state._indeterminate?this.state._icon.indeterminate:this.state._checked?this.state._icon.checked:this.state._icon.unchecked}),h("slot",null)),h("div",{slot:"input"},h("input",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,checked:!0===this.state._checked,disabled:!0===this.state._disabled,id:this.state._id,indeterminate:!0===this.state._indeterminate,name:this.state._name,required:!0===this.state._required,tabIndex:this.state._tabIndex,title:"",type:"checkbox",value:"string"==typeof this.state._value?this.state._value:""},this.controller.onFacade,{onChange:this.onChange})))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.ref=e,propergateFocus(this.host,this.ref)},this.onChange=e=>{this._checked=!1===this._checked,this._indeterminate=!1,this.controller.setValue(e,this._checked)},this._accessKey=void 0,this._alert=!0,this._checked=!1,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._indeterminate=void 0,this._name=void 0,this._on=void 0,this._required=void 0,this._tabIndex=void 0,this._touched=!1,this._type=void 0,this._value=void 0,this._variant=void 0,this.state={_checked:!1,_icon:{checked:"fa-solid fa-check",indeterminate:"fa-solid fa-minus",unchecked:"fa-solid fa-plus"},_id:"⚠",_indeterminate:!1,_variant:"checkbox"},this.controller=new InputCheckboxController(this,"checkbox",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateChecked(e){this.controller.validateChecked(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcon(e){this.controller.validateIcon(e)}validateId(e){this.controller.validateId(e)}validateIndeterminate(e){this.controller.validateIndeterminate(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateType(e){this.controller.validateType(e)}validateValue(e){this.controller.validateValue(e)}validateVariant(e){this.controller.validateVariant(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-input-checkbox",{_accessKey:[1,"_access-key"],_alert:[1540],_checked:[1540],_disabled:[516],_error:[1],_hideLabel:[516,"_hide-label"],_hint:[1],_icon:[1],_id:[1],_indeterminate:[1540],_name:[1],_on:[16],_required:[516],_tabIndex:[2,"_tab-index"],_touched:[1540],_type:[1],_value:[1],_variant:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-checkbox","kol-alert","kol-badge","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-input-checkbox":customElements.get(e)||customElements.define(e,KolInputCheckbox$1);break;case"kol-alert":customElements.get(e)||defineCustomElement$9();break;case"kol-badge":customElements.get(e)||defineCustomElement$8();break;case"kol-button-wc":customElements.get(e)||defineCustomElement$7();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$6();break;case"kol-icon":customElements.get(e)||defineCustomElement$5();break;case"kol-input":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(e)||defineCustomElement$2()}}))}const KolInputCheckbox=KolInputCheckbox$1,defineCustomElement=defineCustomElement$1;export{KolInputCheckbox,defineCustomElement};

package/dist/components/kol-input-radio-group.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{C as deprecatedHint}from"./prop.validators.js";import{d as defineCustomElement$a}from"./component5.js";import{d as defineCustomElement$2,a as defineCustomElement$8,b as defineCustomElement$9}from"./component.js";import{d as defineCustomElement$7}from"./component4.js";import{d as defineCustomElement$6}from"./component2.js";import{d as defineCustomElement$5}from"./component9.js";import{d as defineCustomElement$4}from"./component11.js";import{d as defineCustomElement$3}from"./component3.js";const KolInputRadioGroup$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._orientation="vertical",this._required=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0}render(){return deprecatedHint("[KolInputRadioGroup] Die Komponenten Input-Radio-Group und Input-Radio werden zur Komponente Input-Radio zusammengeführt. Wir empfehlen den Tag <kol-input-radio> statt <kol-input-radio-group> zu verwenden.\n\nMit der Version 1.1 wird die Komponente KolInputRadioGroup aus der Bibliothek entfernt."),h("kol-input-radio",{_accessKey:this._accessKey,_disabled:this._disabled,_error:this._error,_hideLabel:this._hideLabel,_id:this._id,_list:this._list,_name:this._name,_on:this._on,_orientation:this._orientation,_required:this._required,_tabIndex:this._tabIndex,_touched:this._touched,_value:this._value},h("slot",null))}},[1,"kol-input-radio-group",{_accessKey:[1,"_access-key"],_alert:[516],_disabled:[516],_error:[1],_hideLabel:[516,"_hide-label"],_hint:[1],_id:[1],_list:[1],_name:[1],_on:[16],_orientation:[1],_required:[516],_tabIndex:[2,"_tab-index"],_touched:[516],_value:[8]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-radio-group","kol-alert","kol-badge","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-input-radio","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-input-radio-group":customElements.get(e)||customElements.define(e,KolInputRadioGroup$1);break;case"kol-alert":customElements.get(e)||defineCustomElement$a();break;case"kol-badge":customElements.get(e)||defineCustomElement$9();break;case"kol-button-wc":customElements.get(e)||defineCustomElement$8();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$7();break;case"kol-icon":customElements.get(e)||defineCustomElement$6();break;case"kol-input":customElements.get(e)||defineCustomElement$5();break;case"kol-input-radio":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(e)||defineCustomElement$2()}}))}const KolInputRadioGroup=KolInputRadioGroup$1,defineCustomElement=defineCustomElement$1;export{KolInputRadioGroup,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{D as deprecatedHint}from"./prop.validators.js";import{d as defineCustomElement$a}from"./component5.js";import{d as defineCustomElement$2,a as defineCustomElement$8,b as defineCustomElement$9}from"./component.js";import{d as defineCustomElement$7}from"./component4.js";import{d as defineCustomElement$6}from"./component2.js";import{d as defineCustomElement$5}from"./component9.js";import{d as defineCustomElement$4}from"./component11.js";import{d as defineCustomElement$3}from"./component3.js";const KolInputRadioGroup$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._orientation="vertical",this._required=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0}render(){return deprecatedHint("[KolInputRadioGroup] Die Komponenten Input-Radio-Group und Input-Radio werden zur Komponente Input-Radio zusammengeführt. Wir empfehlen den Tag <kol-input-radio> statt <kol-input-radio-group> zu verwenden.\n\nMit der Version 1.1 wird die Komponente KolInputRadioGroup aus der Bibliothek entfernt."),h("kol-input-radio",{_accessKey:this._accessKey,_disabled:this._disabled,_error:this._error,_hideLabel:this._hideLabel,_id:this._id,_list:this._list,_name:this._name,_on:this._on,_orientation:this._orientation,_required:this._required,_tabIndex:this._tabIndex,_touched:this._touched,_value:this._value},h("slot",null))}},[1,"kol-input-radio-group",{_accessKey:[1,"_access-key"],_alert:[516],_disabled:[516],_error:[1],_hideLabel:[516,"_hide-label"],_hint:[1],_id:[1],_list:[1],_name:[1],_on:[16],_orientation:[1],_required:[516],_tabIndex:[2,"_tab-index"],_touched:[516],_value:[8]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-radio-group","kol-alert","kol-badge","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-input-radio","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-input-radio-group":customElements.get(e)||customElements.define(e,KolInputRadioGroup$1);break;case"kol-alert":customElements.get(e)||defineCustomElement$a();break;case"kol-badge":customElements.get(e)||defineCustomElement$9();break;case"kol-button-wc":customElements.get(e)||defineCustomElement$8();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$7();break;case"kol-icon":customElements.get(e)||defineCustomElement$6();break;case"kol-input":customElements.get(e)||defineCustomElement$5();break;case"kol-input-radio":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(e)||defineCustomElement$2()}}))}const KolInputRadioGroup=KolInputRadioGroup$1,defineCustomElement=defineCustomElement$1;export{KolInputRadioGroup,defineCustomElement};

package/dist/components/kol-tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-tabs.js","mappings":"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","names":["KolTabs"],"sources":["./src/utils/validators/alignment.ts","./src/components/tabs/style.css?tag=kol-tabs&mode=default&encapsulation=shadow","./src/components/tabs/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Alignment } from '../../types/props/alignment';\nimport { watchValidator } from '../prop.validators';\n\nconst AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES = new Set(['\"left\", \"right\"']);\n// export const validateHorizontalAlignment = (component: Generic.Element.Component, propName: string, value?: HorizontalAlignment): void => {\n// \twatchValidator(component, propName, (value) => value === 'left' \|\| value === 'right', AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, value);\n// };\n\nconst AVAILABLE_VERTICAL_ALIGNMENT_VALUES = new Set(['\"left\", \"right\"']);\n// export const validateVertivalAlignment = (component: Generic.Element.Component, propName: string, value?: VerticalAlignment): void => {\n// \twatchValidator(component, propName, (value) => value === 'top' \|\| value === 'bottom', AVAILABLE_VERTICAL_ALIGNMENT_VALUES, value);\n// };\n\nconst AVAILABLE_ALIGNMENT_VALUES = new Set([...AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, ...AVAILABLE_VERTICAL_ALIGNMENT_VALUES]);\nexport const validateAlignment = (component: Generic.Element.Component, propName: string, value?: Alignment): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\tpropName,\n\t\t(value) => value === 'bottom' \|\| value === 'left' \|\| value === 'right' \|\| value === 'top',\n\t\tAVAILABLE_ALIGNMENT_VALUES,\n\t\tvalue\n\t);\n};\n","@import '../style.css';\n\n:host kol-button-group-wc {\n\tdisplay: inline-flex;\n\tgap: calc(2 * var(--kolibri-spacing));\n\tflex-wrap: wrap;\n}\n:host kol-button-group-wc button {\n\tborder: 0;\n\tborder-bottom-color: transparent;\n\tborder-bottom-style: solid;\n\tborder-bottom-width: var(--kolibri-spacing);\n}\n\n:host kol-button-group-wc button[aria-selected='true'],\n:host kol-button-group-wc button:focus {\n\tborder-bottom-color: var(--kolibri-color-accent);\n}\n\n:host .close-button {\n\tfont-size: 50%;\n\theight: fit-content;\n\tleft: -3em;\n\tposition: relative;\n\ttop: 0.25em;\n}\n\n:host div[role='tabpanel'] {\n\theight: 100%;\n}\n:host div.grid {\n\theight: 100%;\n}\n:host > .tabs-align-right {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n}\n:host > .tabs-align-right kol-button-group-wc {\n\tdisplay: grid;\n\torder: 2;\n}\n:host > .tabs-align-left {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr;\n}\n:host > .tabs-align-left kol-button-group-wc {\n\tdisplay: grid;\n\torder: 0;\n}\n:host > .tabs-align-bottom {\n\tdisplay: grid;\n\tgrid-template-rows: 1fr auto;\n}\n:host > .tabs-align-bottom kol-button-group-wc {\n\torder: 2;\n}\n:host > .tabs-align-bottom kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n\tmargin: 0px 1em 0px 0px;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n\tmargin: 0px 1em;\n}\n:host > .tabs-align-top {\n\tdisplay: grid;\n\tgrid-template-rows: auto 1fr;\n}\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-top kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n\tmargin: 0px 1em 0px 0px;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n\tmargin: 0px 1em;\n}\n:host > div {\n\tdisplay: grid;\n}\n:host > div.tabs-align-left {\n\tgrid-template-columns: auto 1fr;\n}\n:host > div.tabs-align-right {\n\tgrid-template-columns: 1fr auto;\n}\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n\torder: 1;\n}\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n\tdisplay: grid;\n}\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n\twidth: 100%;\n}\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\nimport { KoliBriIconProp } from '../../types/icon';\n\nimport { Generic } from '@a11y-ui/core';\nimport { EventCallback, EventValueOrEventCallback } from '../../types/callbacks';\nimport { Stringified } from '../../types/common';\nimport { Alignment } from '../../types/props/alignment';\nimport { a11yHintLabelingLandmarks, devHint, featureHint, uiUxHintMillerscheZahl } from '../../utils/a11y.tipps';\nimport { Log } from '../../utils/log';\nimport { koliBriQuerySelector, setState, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { validateAlignment } from '../../utils/validators/alignment';\nimport { translate } from '../../i18n';\nimport { KoliBriButtonCallbacks } from '../../types/button-link';\n\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\nexport type KoliBriTabsCallbacks = /* {\n\tonClose?: true \| EventOrEventValueCallback<Event, number>;\n} & / {\n\tonCreate?:\n\t\t\| EventCallback<Event>\n\t\t\| {\n\t\t\t\tlabel: string;\n\t\t\t\tcallback: EventCallback<Event>;\n\t\t };\n} & {\n\t[Events.onSelect]?: EventValueOrEventCallback<CustomEvent \| KeyboardEvent \| MouseEvent \| PointerEvent, number>;\n};\n\ntype RequiredTabButtonProps = {\n\tlabel: string;\n};\ntype OptionalTabButtonProps = {\n\tdisabled: boolean;\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n\ttooltipAlign: Alignment;\n};\nexport type TabButtonProps = Generic.Element.Members<RequiredTabButtonProps, OptionalTabButtonProps>;\n\n/\n API\n /\ntype RequiredProps = {\n\tariaLabel: string;\n\ttabs: Stringified<TabButtonProps[]>;\n};\ntype OptionalProps = {\n\ton: KoliBriTabsCallbacks;\n\ttabsAlign: Alignment;\n\tselected: number;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\ttabsAlign: Alignment;\n\tselected: number;\n\ttabs: TabButtonProps[];\n};\ntype OptionalStates = {\n\ton: KoliBriTabsCallbacks;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate showCreateTab = false;\n\tprivate selectedTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step: number): number => {\n\t\tif (step > 0) {\n\t\t\tif (offset + step < tabs.length) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t} else if (step < 0) {\n\t\t\tif (offset + step >= 0) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step - 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t}\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tlet selectedIndex: number \| null = null;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, 1);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, -1);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t\tif (selectedIndex !== null) {\n\t\t\t\tthis.onSelect(event, selectedIndex, true);\n\t\t\t}\n\t\t}, 250);\n\t};\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.onSelect(event, index, true);\n\t};\n\n\t// private readonly onClickClose = (event: Event, button: TabButtonProps, index: number) => {\n\t// \tevent.stopPropagation();\n\t// \tthis.onClose(button, event, index);\n\t// };\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.stopPropagation();\n\t};\n\n\tprivate readonly callbacks: KoliBriButtonCallbacks<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t<kol-button-group-wc role=\"tablist\" aria-label={this.state._ariaLabel} onKeyDown={this.onKeyDown}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icon={button._icon}\n\t\t\t\t\t\t_iconOnly={button._iconOnly}\n\t\t\t\t\t\t_label={button._label && button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as KoliBriButtonCallbacks<unknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_variant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : undefined}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\tclass=\"create-button\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t)}\n\t\t\t</kol-button-group-wc>\n\t\t);\n\t}\n\n\tprivate tabPanelHost?: HTMLDivElement;\n\n\tprivate readonly catchTabPanelHost = (el?: HTMLDivElement) => {\n\t\tthis.tabPanelHost = el;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t\t}}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[`tabs-align-${this.state._tabsAlign}`]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t\t<div ref={this.catchTabPanelHost}>{/ <slot /> /}</div>\n\t\t\t\t</div>\n\t\t\t</Host>\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 Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.\n\t /\n\t@Prop() public _on?: KoliBriTabsCallbacks;\n\n\t/\n\t Gibt an, welches Tab selektiert sein soll.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/\n\t Gibt die geordnete Liste der Seitenhierarchie in Links an.\n\t /\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t/\n\t Gibt an, ob die Tab-Schalter entweder oben, rechts, unten oder links angeordnet sind.\n\t /\n\t@Prop() public _tabsAlign?: Alignment = 'top';\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_selected: 0,\n\t\t_tabs: [],\n\t\t_tabsAlign: 'top',\n\t};\n\n\tprivate selectNextNotDisabledTab = (selected: number, tabs: TabButtonProps[], upOrDown = true, initialSelected?: number): number => {\n\t\tif (selected > tabs.length - 1) {\n\t\t\tselected = tabs.length - 1;\n\t\t}\n\t\tif (selected < 0) {\n\t\t\tselected = 0;\n\t\t}\n\t\tif (Array.isArray(tabs) && tabs[selected]) {\n\t\t\tif (tabs[selected]._disabled) {\n\t\t\t\tif (upOrDown === true) {\n\t\t\t\t\tif (selected < tabs.length - 1) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected \|\| selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselected = initialSelected \|\| selected;\n\t\t\t\t\t\tupOrDown = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (upOrDown === false) {\n\t\t\t\t\tif (selected > 0) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected \|\| selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdevHint(`[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\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('_on')\n\tpublic validateOn(value?: KoliBriTabsCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tfeatureHint('[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');\n\t\t\tconst callbacks: KoliBriTabsCallbacks = {};\n\t\t\tif (typeof value.onCreate === 'function' \|\| typeof value.onCreate === 'object') {\n\t\t\t\tif (typeof value.onCreate === 'object') {\n\t\t\t\t\tif (typeof value.onCreate.label === 'string' && value.onCreate.label.length > 0) {\n\t\t\t\t\t\tthis.onCreateLabel = value.onCreate.label;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Der Label-Text für Neu in {\n onCreate: {\n label: string (!),\n callback: Function\n }\n} ist nicht korrekt gesetzt.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif (typeof value.onCreate.callback === 'function') {\n\t\t\t\t\t\tcallbacks.onCreate = value.onCreate.callback;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n onCreate: {\n label: string,\n callback: Function (!)\n }\n} ist nicht korrekt gesetzt.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t\t}\n\t\t\t\tthis.showCreateTab = typeof callbacks.onCreate === 'function';\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\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('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_tabsAlign')\n\tpublic validateTabsAlign(value?: Alignment): void {\n\t\tvalidateAlignment(this, '_tabsAlign', 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.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t\tthis.validateTabsAlign(this._tabsAlign);\n\t}\n\n\tprivate readonly handleTabPanels = () => {\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = this.tabPanelHost.children.length; i < this.state._tabs.length; i++) {\n\t\t\t\tconst div = document.createElement('div');\n\t\t\t\tdiv.setAttribute('aria-labelledby', `tab-${i}`);\n\t\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\t\tdiv.setAttribute('hidden', '');\n\t\t\t\tconst slot = document.createElement('slot');\n\t\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\t\tdiv.appendChild(slot);\n\t\t\t\tthis.tabPanelHost.appendChild(div);\n\t\t\t\tif (this.host?.children instanceof HTMLCollection && this.host?.children[i] / SSR instanceof HTMLElement /) {\n\t\t\t\t\t// div.appendChild(this.host?.children[0]);\n\t\t\t\t\tthis.host?.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.handleTabPanels();\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = 0; i < this.tabPanelHost.children.length; i++) {\n\t\t\t\tif (i !== this.state._selected) {\n\t\t\t\t\tthis.tabPanelHost.children[i].setAttribute('hidden', '');\n\t\t\t\t} else {\n\t\t\t\t\tthis.tabPanelHost.children[i].removeAttribute('hidden');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent \| KeyboardEvent \| MouseEvent \| PointerEvent, index: number, focus = false): void {\n\t\tthis._selected = index;\n\t\tif (typeof this._on?.onSelect === 'function') {\n\t\t\tthis._on?.onSelect(event, index);\n\t\t}\n\t\tif (focus === true) {\n\t\t\t// TODO: prüfen, ob hier noch was offen ist\n\t\t\t// devHint('[KolTabs] Tab-Fokus-verschieben geht im Moment nicht.');\n\t\t\tthis.selectedTimeout = setTimeout(() => {\n\t\t\t\tclearTimeout(this.selectedTimeout);\n\t\t\t\tif (this.tabPanelsElement / SSR instanceof HTMLElement */) {\n\t\t\t\t\tconst button: HTMLElement \| null = koliBriQuerySelector(`button#tab-${index}`, this.tabPanelsElement);\n\t\t\t\t\tbutton?.focus();\n\t\t\t\t}\n\t\t\t}, 250);\n\t\t}\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onCreate === 'function') {\n\t\t\tthis.state._on?.onCreate(event);\n\t\t}\n\t};\n}\n"],"version":3}
1	+ {"file":"kol-tabs.js","mappings":"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","names":["KolTabs"],"sources":["./src/utils/validators/alignment.ts","./src/components/tabs/style.css?tag=kol-tabs&mode=default&encapsulation=shadow","./src/components/tabs/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Alignment } from '../../types/props/alignment';\nimport { watchValidator } from '../prop.validators';\n\nconst AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES = new Set(['\"left\", \"right\"']);\n// export const validateHorizontalAlignment = (component: Generic.Element.Component, propName: string, value?: HorizontalAlignment): void => {\n// \twatchValidator(component, propName, (value) => value === 'left' \|\| value === 'right', AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, value);\n// };\n\nconst AVAILABLE_VERTICAL_ALIGNMENT_VALUES = new Set(['\"left\", \"right\"']);\n// export const validateVertivalAlignment = (component: Generic.Element.Component, propName: string, value?: VerticalAlignment): void => {\n// \twatchValidator(component, propName, (value) => value === 'top' \|\| value === 'bottom', AVAILABLE_VERTICAL_ALIGNMENT_VALUES, value);\n// };\n\nconst AVAILABLE_ALIGNMENT_VALUES = new Set([...AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, ...AVAILABLE_VERTICAL_ALIGNMENT_VALUES]);\nexport const validateAlignment = (component: Generic.Element.Component, propName: string, value?: Alignment): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\tpropName,\n\t\t(value) => value === 'bottom' \|\| value === 'left' \|\| value === 'right' \|\| value === 'top',\n\t\tAVAILABLE_ALIGNMENT_VALUES,\n\t\tvalue\n\t);\n};\n","@import '../style.css';\n\n:host kol-button-group-wc {\n\tdisplay: inline-flex;\n\tgap: calc(2 * var(--kolibri-spacing));\n\tflex-wrap: wrap;\n}\n:host kol-button-group-wc button {\n\tborder: 0;\n\tborder-bottom-color: transparent;\n\tborder-bottom-style: solid;\n\tborder-bottom-width: var(--kolibri-spacing);\n}\n\n:host kol-button-group-wc button[aria-selected='true'],\n:host kol-button-group-wc button:focus {\n\tborder-bottom-color: var(--kolibri-color-accent);\n}\n\n:host .close-button {\n\tfont-size: 50%;\n\theight: fit-content;\n\tleft: -3em;\n\tposition: relative;\n\ttop: 0.25em;\n}\n\n:host div[role='tabpanel'] {\n\theight: 100%;\n}\n:host div.grid {\n\theight: 100%;\n}\n:host > .tabs-align-right {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n}\n:host > .tabs-align-right kol-button-group-wc {\n\tdisplay: grid;\n\torder: 2;\n}\n:host > .tabs-align-left {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr;\n}\n:host > .tabs-align-left kol-button-group-wc {\n\tdisplay: grid;\n\torder: 0;\n}\n:host > .tabs-align-bottom {\n\tdisplay: grid;\n\tgrid-template-rows: 1fr auto;\n}\n:host > .tabs-align-bottom kol-button-group-wc {\n\torder: 2;\n}\n:host > .tabs-align-bottom kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n\tmargin: 0px 1em 0px 0px;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n\tmargin: 0px 1em;\n}\n:host > .tabs-align-top {\n\tdisplay: grid;\n\tgrid-template-rows: auto 1fr;\n}\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-top kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n\tmargin: 0px 1em 0px 0px;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n\tmargin: 0px 1em;\n}\n:host > div {\n\tdisplay: grid;\n}\n:host > div.tabs-align-left {\n\tgrid-template-columns: auto 1fr;\n}\n:host > div.tabs-align-right {\n\tgrid-template-columns: 1fr auto;\n}\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n\torder: 1;\n}\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n\tdisplay: grid;\n}\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n\twidth: 100%;\n}\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\nimport { KoliBriIconProp } from '../../types/icon';\n\nimport { Generic } from '@a11y-ui/core';\nimport { EventCallback, EventValueOrEventCallback } from '../../types/callbacks';\nimport { Stringified } from '../../types/common';\nimport { Alignment } from '../../types/props/alignment';\nimport { a11yHintLabelingLandmarks, devHint, featureHint, uiUxHintMillerscheZahl } from '../../utils/a11y.tipps';\nimport { koliBriQuerySelector, setState, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { validateAlignment } from '../../utils/validators/alignment';\nimport { translate } from '../../i18n';\nimport { KoliBriButtonCallbacks } from '../../types/button-link';\nimport { Log } from '../../utils/dev.utils';\n\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\nexport type KoliBriTabsCallbacks = /* {\n\tonClose?: true \| EventOrEventValueCallback<Event, number>;\n} & / {\n\tonCreate?:\n\t\t\| EventCallback<Event>\n\t\t\| {\n\t\t\t\tlabel: string;\n\t\t\t\tcallback: EventCallback<Event>;\n\t\t };\n} & {\n\t[Events.onSelect]?: EventValueOrEventCallback<CustomEvent \| KeyboardEvent \| MouseEvent \| PointerEvent, number>;\n};\n\ntype RequiredTabButtonProps = {\n\tlabel: string;\n};\ntype OptionalTabButtonProps = {\n\tdisabled: boolean;\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n\ttooltipAlign: Alignment;\n};\nexport type TabButtonProps = Generic.Element.Members<RequiredTabButtonProps, OptionalTabButtonProps>;\n\n/\n API\n /\ntype RequiredProps = {\n\tariaLabel: string;\n\ttabs: Stringified<TabButtonProps[]>;\n};\ntype OptionalProps = {\n\ton: KoliBriTabsCallbacks;\n\ttabsAlign: Alignment;\n\tselected: number;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\ttabsAlign: Alignment;\n\tselected: number;\n\ttabs: TabButtonProps[];\n};\ntype OptionalStates = {\n\ton: KoliBriTabsCallbacks;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate showCreateTab = false;\n\tprivate selectedTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step: number): number => {\n\t\tif (step > 0) {\n\t\t\tif (offset + step < tabs.length) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t} else if (step < 0) {\n\t\t\tif (offset + step >= 0) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step - 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t}\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tlet selectedIndex: number \| null = null;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, 1);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, -1);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t\tif (selectedIndex !== null) {\n\t\t\t\tthis.onSelect(event, selectedIndex, true);\n\t\t\t}\n\t\t}, 250);\n\t};\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.onSelect(event, index, true);\n\t};\n\n\t// private readonly onClickClose = (event: Event, button: TabButtonProps, index: number) => {\n\t// \tevent.stopPropagation();\n\t// \tthis.onClose(button, event, index);\n\t// };\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.stopPropagation();\n\t};\n\n\tprivate readonly callbacks: KoliBriButtonCallbacks<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t<kol-button-group-wc role=\"tablist\" aria-label={this.state._ariaLabel} onKeyDown={this.onKeyDown}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icon={button._icon}\n\t\t\t\t\t\t_iconOnly={button._iconOnly}\n\t\t\t\t\t\t_label={button._label && button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as KoliBriButtonCallbacks<unknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_variant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : undefined}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\tclass=\"create-button\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t)}\n\t\t\t</kol-button-group-wc>\n\t\t);\n\t}\n\n\tprivate tabPanelHost?: HTMLDivElement;\n\n\tprivate readonly catchTabPanelHost = (el?: HTMLDivElement) => {\n\t\tthis.tabPanelHost = el;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t\t}}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[`tabs-align-${this.state._tabsAlign}`]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t\t<div ref={this.catchTabPanelHost}>{/ <slot /> /}</div>\n\t\t\t\t</div>\n\t\t\t</Host>\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 Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.\n\t /\n\t@Prop() public _on?: KoliBriTabsCallbacks;\n\n\t/\n\t Gibt an, welches Tab selektiert sein soll.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/\n\t Gibt die geordnete Liste der Seitenhierarchie in Links an.\n\t /\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t/\n\t Gibt an, ob die Tab-Schalter entweder oben, rechts, unten oder links angeordnet sind.\n\t /\n\t@Prop() public _tabsAlign?: Alignment = 'top';\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_selected: 0,\n\t\t_tabs: [],\n\t\t_tabsAlign: 'top',\n\t};\n\n\tprivate selectNextNotDisabledTab = (selected: number, tabs: TabButtonProps[], upOrDown = true, initialSelected?: number): number => {\n\t\tif (selected > tabs.length - 1) {\n\t\t\tselected = tabs.length - 1;\n\t\t}\n\t\tif (selected < 0) {\n\t\t\tselected = 0;\n\t\t}\n\t\tif (Array.isArray(tabs) && tabs[selected]) {\n\t\t\tif (tabs[selected]._disabled) {\n\t\t\t\tif (upOrDown === true) {\n\t\t\t\t\tif (selected < tabs.length - 1) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected \|\| selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselected = initialSelected \|\| selected;\n\t\t\t\t\t\tupOrDown = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (upOrDown === false) {\n\t\t\t\t\tif (selected > 0) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected \|\| selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdevHint(`[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\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('_on')\n\tpublic validateOn(value?: KoliBriTabsCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tfeatureHint('[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');\n\t\t\tconst callbacks: KoliBriTabsCallbacks = {};\n\t\t\tif (typeof value.onCreate === 'function' \|\| typeof value.onCreate === 'object') {\n\t\t\t\tif (typeof value.onCreate === 'object') {\n\t\t\t\t\tif (typeof value.onCreate.label === 'string' && value.onCreate.label.length > 0) {\n\t\t\t\t\t\tthis.onCreateLabel = value.onCreate.label;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Der Label-Text für Neu in {\n onCreate: {\n label: string (!),\n callback: Function\n }\n} ist nicht korrekt gesetzt.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif (typeof value.onCreate.callback === 'function') {\n\t\t\t\t\t\tcallbacks.onCreate = value.onCreate.callback;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n onCreate: {\n label: string,\n callback: Function (!)\n }\n} ist nicht korrekt gesetzt.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t\t}\n\t\t\t\tthis.showCreateTab = typeof callbacks.onCreate === 'function';\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\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('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_tabsAlign')\n\tpublic validateTabsAlign(value?: Alignment): void {\n\t\tvalidateAlignment(this, '_tabsAlign', 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.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t\tthis.validateTabsAlign(this._tabsAlign);\n\t}\n\n\tprivate readonly handleTabPanels = () => {\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = this.tabPanelHost.children.length; i < this.state._tabs.length; i++) {\n\t\t\t\tconst div = document.createElement('div');\n\t\t\t\tdiv.setAttribute('aria-labelledby', `tab-${i}`);\n\t\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\t\tdiv.setAttribute('hidden', '');\n\t\t\t\tconst slot = document.createElement('slot');\n\t\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\t\tdiv.appendChild(slot);\n\t\t\t\tthis.tabPanelHost.appendChild(div);\n\t\t\t\tif (this.host?.children instanceof HTMLCollection && this.host?.children[i] / SSR instanceof HTMLElement /) {\n\t\t\t\t\t// div.appendChild(this.host?.children[0]);\n\t\t\t\t\tthis.host?.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.handleTabPanels();\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = 0; i < this.tabPanelHost.children.length; i++) {\n\t\t\t\tif (i !== this.state._selected) {\n\t\t\t\t\tthis.tabPanelHost.children[i].setAttribute('hidden', '');\n\t\t\t\t} else {\n\t\t\t\t\tthis.tabPanelHost.children[i].removeAttribute('hidden');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent \| KeyboardEvent \| MouseEvent \| PointerEvent, index: number, focus = false): void {\n\t\tthis._selected = index;\n\t\tif (typeof this._on?.onSelect === 'function') {\n\t\t\tthis._on?.onSelect(event, index);\n\t\t}\n\t\tif (focus === true) {\n\t\t\t// TODO: prüfen, ob hier noch was offen ist\n\t\t\t// devHint('[KolTabs] Tab-Fokus-verschieben geht im Moment nicht.');\n\t\t\tthis.selectedTimeout = setTimeout(() => {\n\t\t\t\tclearTimeout(this.selectedTimeout);\n\t\t\t\tif (this.tabPanelsElement / SSR instanceof HTMLElement */) {\n\t\t\t\t\tconst button: HTMLElement \| null = koliBriQuerySelector(`button#tab-${index}`, this.tabPanelsElement);\n\t\t\t\t\tbutton?.focus();\n\t\t\t\t}\n\t\t\t}, 250);\n\t\t}\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onCreate === 'function') {\n\t\t\tthis.state._on?.onCreate(event);\n\t\t}\n\t};\n}\n"],"version":3}