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

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

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 (542) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"names":["defaultStyleCss","Icon","props","h","class","_ariaLabel","heading","length","ariaLabel","_icon","icon","AlertIcon","type","translate","KolAlert","this","close","_a","_on","onClose","undefined","Event","on","onClick","validateOnValue","value","_level","render","state","_alert","Log","debug","navigator","vibrate","e","setTimeout","validateAlert","Host","_type","_variant","role","_heading","_label","_hasCloser","left","_iconOnly","_tooltipAlign","watchBoolean","validateHasCloser","validateHeading","watchString","validateLevel","watchHeadingLevel","validateOn","setState","validateType","watchValidator","Set","validateVariant","componentWillLoad"],"sources":["./src/components/alert/style.css?tag=kol-alert&mode=default&encapsulation=shadow","./src/components/alert/component.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > div {\n\tbackground-color: white;\n\tborder-color: var(--kolibri-border-color);\n\tborder-radius: var(--kolibri-border-radius);\n\tborder-style: solid;\n\tborder-width: calc(2 * var(--kolibri-border-width));\n\tdisplay: inline-block;\n\toverflow: hidden;\n\twidth: 100%;\n}\n\n:host > div > div.heading {\n\tdisplay: grid;\n\tgap: var(--kolibri-spacing);\n\tgrid-template-columns: 2em auto 44px;\n\tplace-items: stretch start;\n}\n:host > div > div.heading .heading-icon {\n\tdisplay: inline-flex;\n\tcolor: white;\n\tpadding: 0.5em;\n\tplace-items: center;\n}\n:host > div.card > div.heading .heading-icon {\n\tborder-radius: 0 0 var(--kolibri-border-radius) 0;\n}\n:host > div > div.heading > div {\n\talign-self: center;\n\tdisplay: grid;\n\tgap: var(--kolibri-spacing);\n}\n:host > div.card > div.content {\n\tpadding: var(--kolibri-spacing);\n}\n:host > div.default {\n\tborder-color: var(--kolibri-color-normal);\n}\n:host > div.default .heading-icon {\n\tbackground-color: var(--kolibri-color-normal);\n}\n:host > div.error {\n\tborder-color: var(--kolibri-color-error);\n}\n:host > div.error .heading-icon {\n\tbackground-color: var(--kolibri-color-error);\n}\n:host > div.info {\n\tborder-color: var(--kolibri-color-info);\n}\n:host > div.info .heading-icon {\n\tbackground-color: var(--kolibri-color-info);\n}\n:host > div.success {\n\tborder-color: var(--kolibri-color-success);\n}\n:host > div.success .heading-icon {\n\tbackground-color: var(--kolibri-color-success);\n}\n:host > div.warning {\n\tborder-color: var(--kolibri-color-warning);\n}\n:host > div.warning .heading-icon {\n\tbackground-color: var(--kolibri-color-warning);\n}\n\n/* close button /\n\n.close,\n.close > button {\n\tmin-width: 44px;\n\tmin-height: 44px;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { AlertType, AlertVariant, KoliBriAlertEventCallbacks } from '../../types/alert';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { Log } from '../../utils/dev.utils';\nimport { setState, watchBoolean, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { translate } from '../../i18n';\n\n/\n API\n /\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\talert: boolean;\n\thasCloser: boolean;\n\theading: string;\n\tlevel: HeadingLevel;\n\ton: KoliBriAlertEventCallbacks;\n\ttype: AlertType;\n\tvariant: AlertVariant;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst Icon = (props: { ariaLabel: string; icon: string; heading?: string }) => {\n\treturn <kol-icon class=\"heading-icon\" _ariaLabel={typeof props.heading === 'string' && props.heading.length > 0 ? '' : props.ariaLabel} _icon={props.icon} />;\n};\n\nconst AlertIcon = (props: { heading?: string; type?: AlertType }) => {\n\tswitch (props.type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"fa-solid fa-circle-xmark\" heading={props.heading} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"fa-solid fa-circle-info\" heading={props.heading} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"fa-solid fa-triangle-exclamation\" heading={props.heading} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"fa-solid fa-circle-check\" heading={props.heading} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"fa-regular fa-comment\" heading={props.heading} />;\n\t}\n};\n\n@Component({\n\ttag: 'kol-alert',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAlert implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tif (this.state._alert) {\n\t\t\t/\n\t\t\t - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n\t\t\t * - https://googlechrome.github.io/samples/vibration/\n\t\t\t /\n\t\t\ttry {\n\t\t\t\tLog.debug(['Navigator should vibrate ...', navigator.vibrate([100, 75, 100, 75, 100])]);\n\t\t\t} catch (e) {\n\t\t\t\tLog.debug('Navigator does not support vibration.');\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.validateAlert(false);\n\t\t\t}, 10000);\n\t\t}\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._type as string]: true,\n\t\t\t\t\t\t[this.state._variant as string]: true,\n\t\t\t\t\t}}\n\t\t\t\t\trole={this.state._alert ? 'alert' : undefined}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"heading\">\n\t\t\t\t\t\t<AlertIcon heading={this.state._heading} type={this.state._type} />\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t{typeof this.state._heading === 'string' && this.state._heading?.length > 0 && (\n\t\t\t\t\t\t\t\t<kol-heading-wc _label={this.state._heading} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this._variant === 'msg' && (\n\t\t\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t\t_icon={{\n\t\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\t\ticon: 'fa-solid fa-xmark',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t\t_label={translate('kol-close')}\n\t\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this._variant === 'card' && (\n\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt an, ob der Screenreader die Meldung vorlesen soll.\n\t /\n\t@Prop({ reflect: true }) public _alert?: boolean = false;\n\n\t/\n\t Gibt an, ob der Alert ein Schließen-Icon hat.\n\t /\n\t@Prop({ reflect: true }) public _hasCloser?: boolean = false;\n\n\t/\n\t Gibt den Titel der Meldung an.\n\t /\n\t@Prop() public _heading?: string;\n\n\t/\n\t Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t /\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/\n\t Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t /\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\n\n\t/\n\t Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt.\n\t /\n\t@Prop() public _type?: AlertType = 'default';\n\n\t/\n\t Gibt an, welche Benachrichtigungsvariante dargestellt wird.\n\t /\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_level: 1,\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: boolean): void {\n\t\twatchBoolean(this, '_hasCloser', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriAlertEventCallbacks).onClose === 'function';\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAlertEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriAlertEventCallbacks>(\n\t\t\t\tthis,\n\t\t\t\t'_on',\n\t\t\t\t{\n\t\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t\t}\n\t\t\t\t// {\n\t\t\t\t// \tafterPatch: (value: unknown) => {\n\t\t\t\t// \t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t\t// \t},\n\t\t\t\t// }\n\t\t\t);\n\t\t\t// } else {\n\t\t\t// \tsetState<KoliBriAlertEventCallbacks>(this, '_on', null, {\n\t\t\t// \t\tafterPatch: (value: unknown) => {\n\t\t\t// \t\t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t// \t\t},\n\t\t\t// \t});\n\t\t}\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value) => typeof value === 'string' && (value === 'default' \|\| value === 'error' \|\| value === 'info' \|\| value === 'success' \|\| value === 'warning'),\n\t\t\tnew Set('String {success, info, warning, error}'),\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('_variant')\n\tpublic validateVariant(value?: AlertVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'card' \|\| value === 'msg', new Set('AlertVariant {card, msg}'), value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateType(this._type);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["defaultStyleCss","Icon","props","h","class","_ariaLabel","heading","length","ariaLabel","_icon","icon","AlertIcon","type","translate","KolAlert","this","close","_a","_on","onClose","undefined","Event","on","onClick","validateOnValue","value","_level","render","state","_alert","Log","debug","navigator","vibrate","e","setTimeout","validateAlert","Host","_type","_variant","role","_heading","_label","_hasCloser","left","_iconOnly","_tooltipAlign","watchBoolean","validateHasCloser","validateHeading","watchString","validateLevel","watchHeadingLevel","validateOn","setState","validateType","watchValidator","Set","validateVariant","componentWillLoad"],"sources":["./src/components/alert/style.css?tag=kol-alert&mode=default&encapsulation=shadow","./src/components/alert/component.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > div {\n\tbackground-color: white;\n\tborder-color: var(--kolibri-border-color);\n\tborder-radius: var(--kolibri-border-radius);\n\tborder-style: solid;\n\tborder-width: calc(2 * var(--kolibri-border-width));\n\tdisplay: inline-block;\n\toverflow: hidden;\n\twidth: 100%;\n}\n\n:host > div > div.heading {\n\tdisplay: grid;\n\tgap: var(--kolibri-spacing);\n\tgrid-template-columns: 2em auto 44px;\n\tplace-items: stretch start;\n}\n:host > div > div.heading .heading-icon {\n\tdisplay: inline-flex;\n\tcolor: white;\n\tpadding: 0.5em;\n\tplace-items: center;\n}\n:host > div.card > div.heading .heading-icon {\n\tborder-radius: 0 0 var(--kolibri-border-radius) 0;\n}\n:host > div > div.heading > div {\n\talign-self: center;\n\tdisplay: grid;\n\tgap: var(--kolibri-spacing);\n}\n:host > div.card > div.content {\n\tpadding: var(--kolibri-spacing);\n}\n:host > div.default {\n\tborder-color: var(--kolibri-color-normal);\n}\n:host > div.default .heading-icon {\n\tbackground-color: var(--kolibri-color-normal);\n}\n:host > div.error {\n\tborder-color: var(--kolibri-color-error);\n}\n:host > div.error .heading-icon {\n\tbackground-color: var(--kolibri-color-error);\n}\n:host > div.info {\n\tborder-color: var(--kolibri-color-info);\n}\n:host > div.info .heading-icon {\n\tbackground-color: var(--kolibri-color-info);\n}\n:host > div.success {\n\tborder-color: var(--kolibri-color-success);\n}\n:host > div.success .heading-icon {\n\tbackground-color: var(--kolibri-color-success);\n}\n:host > div.warning {\n\tborder-color: var(--kolibri-color-warning);\n}\n:host > div.warning .heading-icon {\n\tbackground-color: var(--kolibri-color-warning);\n}\n\n/* close button /\n\n.close,\n.close > button {\n\tmin-width: 44px;\n\tmin-height: 44px;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { AlertType, AlertVariant, KoliBriAlertEventCallbacks } from '../../types/alert';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { Log } from '../../utils/log';\nimport { setState, watchBoolean, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { translate } from '../../i18n';\n\n/\n API\n /\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\talert: boolean;\n\thasCloser: boolean;\n\theading: string;\n\tlevel: HeadingLevel;\n\ton: KoliBriAlertEventCallbacks;\n\ttype: AlertType;\n\tvariant: AlertVariant;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst Icon = (props: { ariaLabel: string; icon: string; heading?: string }) => {\n\treturn <kol-icon class=\"heading-icon\" _ariaLabel={typeof props.heading === 'string' && props.heading.length > 0 ? '' : props.ariaLabel} _icon={props.icon} />;\n};\n\nconst AlertIcon = (props: { heading?: string; type?: AlertType }) => {\n\tswitch (props.type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"fa-solid fa-circle-xmark\" heading={props.heading} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"fa-solid fa-circle-info\" heading={props.heading} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"fa-solid fa-triangle-exclamation\" heading={props.heading} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"fa-solid fa-circle-check\" heading={props.heading} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"fa-regular fa-comment\" heading={props.heading} />;\n\t}\n};\n\n@Component({\n\ttag: 'kol-alert',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAlert implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tif (this.state._alert) {\n\t\t\t/\n\t\t\t - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n\t\t\t * - https://googlechrome.github.io/samples/vibration/\n\t\t\t /\n\t\t\ttry {\n\t\t\t\tLog.debug(['Navigator should vibrate ...', navigator.vibrate([100, 75, 100, 75, 100])]);\n\t\t\t} catch (e) {\n\t\t\t\tLog.debug('Navigator does not support vibration.');\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.validateAlert(false);\n\t\t\t}, 10000);\n\t\t}\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._type as string]: true,\n\t\t\t\t\t\t[this.state._variant as string]: true,\n\t\t\t\t\t}}\n\t\t\t\t\trole={this.state._alert ? 'alert' : undefined}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"heading\">\n\t\t\t\t\t\t<AlertIcon heading={this.state._heading} type={this.state._type} />\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t{typeof this.state._heading === 'string' && this.state._heading?.length > 0 && (\n\t\t\t\t\t\t\t\t<kol-heading-wc _label={this.state._heading} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this._variant === 'msg' && (\n\t\t\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t\t_icon={{\n\t\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\t\ticon: 'fa-solid fa-xmark',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t\t_label={translate('kol-close')}\n\t\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this._variant === 'card' && (\n\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt an, ob der Screenreader die Meldung vorlesen soll.\n\t /\n\t@Prop({ reflect: true }) public _alert?: boolean = false;\n\n\t/\n\t Gibt an, ob der Alert ein Schließen-Icon hat.\n\t /\n\t@Prop({ reflect: true }) public _hasCloser?: boolean = false;\n\n\t/\n\t Gibt den Titel der Meldung an.\n\t /\n\t@Prop() public _heading?: string;\n\n\t/\n\t Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t /\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/\n\t Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t /\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\n\n\t/\n\t Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt.\n\t /\n\t@Prop() public _type?: AlertType = 'default';\n\n\t/\n\t Gibt an, welche Benachrichtigungsvariante dargestellt wird.\n\t /\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_level: 1,\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: boolean): void {\n\t\twatchBoolean(this, '_hasCloser', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriAlertEventCallbacks).onClose === 'function';\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAlertEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriAlertEventCallbacks>(\n\t\t\t\tthis,\n\t\t\t\t'_on',\n\t\t\t\t{\n\t\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t\t}\n\t\t\t\t// {\n\t\t\t\t// \tafterPatch: (value: unknown) => {\n\t\t\t\t// \t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t\t// \t},\n\t\t\t\t// }\n\t\t\t);\n\t\t\t// } else {\n\t\t\t// \tsetState<KoliBriAlertEventCallbacks>(this, '_on', null, {\n\t\t\t// \t\tafterPatch: (value: unknown) => {\n\t\t\t// \t\t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t// \t\t},\n\t\t\t// \t});\n\t\t}\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value) => typeof value === 'string' && (value === 'default' \|\| value === 'error' \|\| value === 'info' \|\| value === 'success' \|\| value === 'warning'),\n\t\t\tnew Set('String {success, info, warning, error}'),\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('_variant')\n\tpublic validateVariant(value?: AlertVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'card' \|\| value === 'msg', new Set('AlertVariant {card, msg}'), value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateType(this._type);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as o,h as t,H as i}from"./index-50adf9a0.js";import{f as r,d as s,a as e}from"./a11y.tipps-353a7f35.js";import{r as a,c as n,a as l,o as c,p as h,s as d}from"./prop.validators-88dff60e.js";import{c as f}from"./index-d14da386.js";import"./dev.utils-3ec9f837.js";import"./reuse-2b3b6999.js";import"./index-599f5430.js";const b=(t,o,r)=>(299*t+587*o+114*r)/1e3>=128?-1:1,p=(t,o,r,i=1)=>{const s=[Math.max(Math.min(Math.round(o[0]+i*Math.max(1,o[0]/100)),255),0),Math.max(Math.min(Math.round(o[1]+i*Math.max(1,o[1]/100)),255),0),Math.max(Math.min(Math.round(o[2]+i*Math.max(1,o[2]/100)),255),0)],e=n(a.hex(`rgba(${t.join(",")},1)`),a.hex(`rgba(${s.join(",")},1)`)),l=s[0]+s[1]+s[2];return 0===l||765===l||e>r?{background:t,foreground:s,contrast:e}:p(t,s,r,i)},u=new Map,g=(t,o,r,a=1)=>{if(u.has(t))return u.get(t);const i=p(t,o,r,a);return u.set(t,i),i},k=(t,o=7)=>{let r=[0,0,0,1],i=[255,255,255,1];"string"==typeof t?(r=f(t),i=r):"object"==typeof t&&null!==t&&"string"==typeof t.background&&"string"==typeof t.foreground&&(r=f(t.background),i="string"==typeof t.foreground?f(t.foreground):r);const s=b(r[0],r[1],r[2]),n=g([r[0],r[1],r[2]],[i[0],i[1],i[2]],o,s);return i=[...n.foreground,1],{background:a.hex(`rgba(${r.join(",")})`),foreground:a.hex(`rgba(${i.join(",")})`),contrast:n.contrast}},m=":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}a,button,input,select,textarea{cursor:pointer}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}:host>span{display:inline-flex}:host>span>kol-button-wc{border-left:1px solid rgba(0, 0, 0, 0.25)}:host>span>kol-button-wc button{color:inherit}";r("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const y=/^([a-f0-9]{3}|[a-f0-9]{6})$/,w=class{constructor(t){o(this,t),this.bgColorStr="#000",this.colorStr="#fff",this.handleColorChange=t=>{let o,r=t;"string"==typeof r?(y.test(r)&&(s("[KolBadge] Bitte verwenden Sie zukünftig nur noch das Standard-Farbformat für CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."),r=`#${r}`),o=k(r)):o=k({background:r.backgroundColor,foreground:r.color}),o.contrast<7&&e(`[KolBadge] The contrast of ${o.contrast} (≥7, AAA) is too low, between the color pair ${o.background} and ${o.foreground}.`),this.bgColorStr=o.background,this.colorStr=o.foreground},this._color="#000",this._icon=void 0,this._iconOnly=!1,this._label=void 0,this._smartButton=void 0,this.state={_color:"#000"}}render(){return t(i,null,t("span",{class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},t("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label}),"object"==typeof this.state._smartButton&&null!==this.state._smartButton&&t("kol-button-wc",{_ariaLabel:this.state._smartButton._ariaLabel,_customClass:this.state._smartButton._customClass,_disabled:this.state._smartButton._disabled,_icon:this.state._smartButton._icon,_iconOnly:!0,_id:this.state._smartButton._id,_label:this.state._smartButton._label,_on:this.state._smartButton._on,_tooltipAlign:this.state._smartButton._tooltipAlign,_variant:this.state._smartButton._variant})))}validateColor(t){l(this,"_color",(t=>"string"==typeof t||"object"==typeof t&&null!==t&&"string"==typeof t.backgroundColor&&"string"==typeof t.color),new Set(["string","KoliBriColor"]),t,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(t){c(t,(()=>{try{t=h(t)}catch(t){}d(this,"_smartButton",t)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}};w.style={default:m};export{w as kol_badge};
+import{r as o,h as t,H as i}from"./index-50adf9a0.js";import{f as r,d as s,a as e}from"./a11y.tipps-7a139717.js";import{r as a,c as n,a as l,o as c,p as h,s as d}from"./prop.validators-27682076.js";import{c as b}from"./index-d14da386.js";import"./log-829fbbc7.js";import"./reuse-2b3b6999.js";import"./index-599f5430.js";const f=(t,o,r)=>(299*t+587*o+114*r)/1e3>=128?-1:1,p=(t,o,r,i=1)=>{const s=[Math.max(Math.min(Math.round(o[0]+i*Math.max(1,o[0]/100)),255),0),Math.max(Math.min(Math.round(o[1]+i*Math.max(1,o[1]/100)),255),0),Math.max(Math.min(Math.round(o[2]+i*Math.max(1,o[2]/100)),255),0)],e=n(a.hex(`rgba(${t.join(",")},1)`),a.hex(`rgba(${s.join(",")},1)`)),l=s[0]+s[1]+s[2];return 0===l||765===l||e>r?{background:t,foreground:s,contrast:e}:p(t,s,r,i)},u=new Map,g=(t,o,r,a=1)=>{if(u.has(t))return u.get(t);const i=p(t,o,r,a);return u.set(t,i),i},k=(t,o=7)=>{let r=[0,0,0,1],i=[255,255,255,1];"string"==typeof t?(r=b(t),i=r):"object"==typeof t&&null!==t&&"string"==typeof t.background&&"string"==typeof t.foreground&&(r=b(t.background),i="string"==typeof t.foreground?b(t.foreground):r);const n=f(r[0],r[1],r[2]),s=g([r[0],r[1],r[2]],[i[0],i[1],i[2]],o,n);return i=[...s.foreground,1],{background:a.hex(`rgba(${r.join(",")})`),foreground:a.hex(`rgba(${i.join(",")})`),contrast:s.contrast}},m=":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}:host>span{display:inline-flex}:host>span>kol-button-wc{border-left:1px solid rgba(0, 0, 0, 0.25)}:host>span>kol-button-wc button{color:inherit}";r("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const y=/^([a-f0-9]{3}|[a-f0-9]{6})$/,w=class{constructor(t){o(this,t),this.bgColorStr="#000",this.colorStr="#fff",this.handleColorChange=t=>{let o,r=t;"string"==typeof r?(y.test(r)&&(s("[KolBadge] Bitte verwenden Sie zukünftig nur noch das Standard-Farbformat für CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."),r=`#${r}`),o=k(r)):o=k({background:r.backgroundColor,foreground:r.color}),o.contrast<7&&e(`[KolBadge] The contrast of ${o.contrast} (≥7, AAA) is too low, between the color pair ${o.background} and ${o.foreground}.`),this.bgColorStr=o.background,this.colorStr=o.foreground},this._color="#000",this._icon=void 0,this._iconOnly=!1,this._label=void 0,this._smartButton=void 0,this.state={_color:"#000"}}render(){return t(i,null,t("span",{class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},t("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label}),"object"==typeof this.state._smartButton&&null!==this.state._smartButton&&t("kol-button-wc",{_ariaLabel:this.state._smartButton._ariaLabel,_customClass:this.state._smartButton._customClass,_disabled:this.state._smartButton._disabled,_icon:this.state._smartButton._icon,_iconOnly:!0,_id:this.state._smartButton._id,_label:this.state._smartButton._label,_on:this.state._smartButton._on,_tooltipAlign:this.state._smartButton._tooltipAlign,_variant:this.state._smartButton._variant})))}validateColor(t){l(this,"_color",(t=>"string"==typeof t||"object"==typeof t&&null!==t&&"string"==typeof t.backgroundColor&&"string"==typeof t.color),new Set(["string","KoliBriColor"]),t,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(t){c(t,(()=>{try{t=h(t)}catch(t){}d(this,"_smartButton",t)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}};w.style={default:m};export{w as kol_badge};

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

	@@ -1 +1 @@
1	- {"version":3,"names":["getContrastYIQ","r","g","b","yiq","calcColorContrast","baseColor","contrastColor","ratio","dir","color","Math","max","min","round","contrast","hex","rgbaConvert","join","summe","background","foreground","cache","Map","getColorContrast","has","get","set","createContrastColorPair","contrastRatio","colorRgba","colorContrast","defaultStyleCss","featureHint","HACK_REG_EX","KolBadge","this","bgColorStr","colorStr","handleColorChange","value","test","devHint","backgroundColor","a11yHint","_color","render","h","Host","class","state","_smartButton","style","_icon","_iconOnly","_label","_ariaLabel","_customClass","_disabled","_id","_on","_tooltipAlign","_variant","validateColor","watchValidator","Set","defaultValue","hooks","beforePatch","validateSmartButton","objectObjectHandler","parseJson","e","setState","componentWillLoad"],"sources":["./src/components/badge/contrast.ts","./src/components/badge/style.css?tag=kol-badge&mode=default&encapsulation=shadow","./src/components/badge/component.tsx"],"sourcesContent":["import { rgbaConvert } from './rgba-convert';\nimport { hex } from 'wcag-contrast';\nimport { colorRgba } from './color-rgba';\nimport { RGB } from 'color-convert/conversions';\n\ntype RGBA = [number, number, number, number];\n\n// const calcColor = (color: RGBA, diff: number): RGBA => [\n// Math.max(Math.min(Math.round(color[0] + (color[0] / 100 + 1) * diff), 255), 0),\n// Math.max(Math.min(Math.round(color[1] + (color[1] / 100 + 1) * diff), 255), 0),\n// Math.max(Math.min(Math.round(color[2] + (color[2] / 100 + 1) * diff), 255), 0),\n// color[3],\n// ];\n\n// const relativeLuminanceFormel = (c: number): number => {\n// if (c <= 0.03928) {\n// return c / 12.92;\n// } else {\n// return ((c + 0.055) / 1.055) ** 2.4;\n// }\n// };\n// // https://www.w3.org/TR/WCAG20/#contrast-ratiodef\n// const relativeLuminance = (r: number, g: number, b: number): number => {\n// return (\n// 0.2126 * relativeLuminanceFormel(r) + 0.7152 * relativeLuminanceFormel(g) + 0.0722 * relativeLuminanceFormel(b)\n// );\n// };\n\n// https://css-tricks.com/snippets/javascript/random-hex-color/\n// const randomColor = () => Math.floor(Math.random() * 16777215).toString(16);\n\n// https://24ways.org/2010/calculating-color-contrast/\n// ts-prune-ignore-next\nexport const getContrastYIQ = (r: number, g: number, b: number): number => {\n\tconst yiq = (r * 299 + g * 587 + b * 114) / 1000;\n\treturn yiq >= 128 ? -1 : 1;\n};\n\ntype ColorPair<T> = {\n\tbackground: T;\n\tforeground: T;\n};\n\nexport type ColorContrast<T> = ColorPair<T> & {\n\tcontrast: number;\n};\n\n// ts-prune-ignore-next\nexport const calcColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {\n\tconst color: RGB = [\n\t\tMath.max(Math.min(Math.round(contrastColor[0] + dir * Math.max(1, contrastColor[0] / 100)), 255), 0),\n\t\tMath.max(Math.min(Math.round(contrastColor[1] + dir * Math.max(1, contrastColor[1] / 100)), 255), 0),\n\t\tMath.max(Math.min(Math.round(contrastColor[2] + dir * Math.max(1, contrastColor[2] / 100)), 255), 0),\n\t];\n\tconst contrast = hex(rgbaConvert.hex(`rgba(${baseColor.join(',')},1)`), rgbaConvert.hex(`rgba(${color.join(',')},1)`));\n\tconst summe = color[0] + color[1] + color[2];\n\tif (summe === 0 \|\| summe === 765 \|\| contrast > ratio) {\n\t\treturn {\n\t\t\tbackground: baseColor,\n\t\t\tforeground: color,\n\t\t\tcontrast,\n\t\t};\n\t} else {\n\t\treturn calcColorContrast(baseColor, color, ratio, dir);\n\t}\n};\n\nconst cache: Map<unknown, ColorContrast<RGB>> = new Map();\n\n// ts-prune-ignore-next\nexport const getColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {\n\tif (cache.has(baseColor)) {\n\t\treturn cache.get(baseColor) as ColorContrast<RGB>;\n\t}\n\tconst color = calcColorContrast(baseColor, contrastColor, ratio, dir);\n\tcache.set(baseColor, color);\n\treturn color;\n};\n\nexport const createContrastColorPair = (color: string \| ColorPair<string>, contrastRatio = 7): ColorContrast<string> => {\n\tlet baseColor: RGBA = [0, 0, 0, 1];\n\tlet contrastColor: RGBA = [255, 255, 255, 1];\n\tif (typeof color === 'string') {\n\t\tbaseColor = colorRgba(color);\n\t\tcontrastColor = baseColor;\n\t} else if (typeof color === 'object' && color !== null && typeof color.background === 'string' && typeof color.foreground === 'string') {\n\t\tbaseColor = colorRgba(color.background);\n\t\tif (typeof color.foreground === 'string') {\n\t\t\tcontrastColor = colorRgba(color.foreground);\n\t\t} else {\n\t\t\tcontrastColor = baseColor;\n\t\t}\n\t}\n\tconst yiq = getContrastYIQ(baseColor[0], baseColor[1], baseColor[2]);\n\tconst colorContrast = getColorContrast(\n\t\t[baseColor[0], baseColor[1], baseColor[2]],\n\t\t[contrastColor[0], contrastColor[1], contrastColor[2]],\n\t\tcontrastRatio,\n\t\tyiq\n\t);\n\tcontrastColor = [...colorContrast.foreground, 1];\n\n\treturn {\n\t\tbackground: rgbaConvert.hex(`rgba(${baseColor.join(',')})`),\n\t\tforeground: rgbaConvert.hex(`rgba(${contrastColor.join(',')})`),\n\t\tcontrast: colorContrast.contrast,\n\t};\n};\n","@import '../style.css';\n\n:host > span {\n\tdisplay: inline-flex;\n}\n:host > span > kol-button-wc {\n\tborder-left: 1px solid rgba(0, 0, 0, 0.25);\n}\n:host > span > kol-button-wc button {\n\tcolor: inherit;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { a11yHint, devHint, featureHint } from '../../utils/a11y.tipps';\nimport { objectObjectHandler, parseJson, setState, watchValidator } from '../../utils/prop.validators';\nimport { ColorContrast, createContrastColorPair } from './contrast';\n\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\nconst HACK_REG_EX = /^([a-f0-9]{3}\|[a-f0-9]{6})$/;\n\nexport type KoliBriColor = {\n\tbackgroundColor: string;\n\tcolor: string;\n};\n\n/*\n API\n /\ntype RequiredProps = {\n\tlabel: string;\n};\ntype OptionalProps = {\n\tcolor: Stringified<KoliBriColor>;\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n\tsmartButton: Stringified<ButtonProps>;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tcolor: Stringified<KoliBriColor>;\n};\ntype OptionalStates = {\n\tsmartButton: ButtonProps;\n};\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements Props {\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this._label}></kol-span-wc>\n\t\t\t\t\t{typeof this.state._smartButton === 'object' && this.state._smartButton !== null && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t_ariaLabel={this.state._smartButton._ariaLabel}\n\t\t\t\t\t\t\t_customClass={this.state._smartButton._customClass}\n\t\t\t\t\t\t\t_disabled={this.state._smartButton._disabled}\n\t\t\t\t\t\t\t_icon={this.state._smartButton._icon}\n\t\t\t\t\t\t\t_iconOnly={true}\n\t\t\t\t\t\t\t_id={this.state._smartButton._id}\n\t\t\t\t\t\t\t_label={this.state._smartButton._label}\n\t\t\t\t\t\t\t_on={this.state._smartButton._on}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._smartButton._tooltipAlign}\n\t\t\t\t\t\t\t_variant={this.state._smartButton._variant}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt die Farbe des Hintergrundes bzw. der Schrift an.\n\t /\n\t@Prop() public _color?: string \| KoliBriColor = '#000';\n\n\t/\n\t Gibt einen Identifier eines Icons aus den Icofont's an. (https://icofont.com/)\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/\n\t Gibt an, ob nur das Icon angezeigt wird.\n\t /\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/\n\t Gibt den Label-Text des Badges an.\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).\n\t /\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_color: '#000',\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tlet color = value as string \| KoliBriColor;\n\t\tlet colorContrast: ColorContrast<string>;\n\t\tif (typeof color === 'string') {\n\t\t\tif (HACK_REG_EX.test(color)) {\n\t\t\t\t// Catch Breaking Change - remove next Major\n\t\t\t\tdevHint(\n\t\t\t\t\t`[KolBadge] Bitte verwenden Sie zukünftig nur noch das Standard-Farbformat für CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).`\n\t\t\t\t);\n\t\t\t\tcolor = `#${color}`;\n\t\t\t}\n\t\t\tcolorContrast = createContrastColorPair(color);\n\t\t} else {\n\t\t\tcolorContrast = createContrastColorPair({\n\t\t\t\tbackground: color.backgroundColor,\n\t\t\t\tforeground: color.color,\n\t\t\t});\n\t\t}\n\t\tif (colorContrast.contrast < 7) {\n\t\t\ta11yHint(\n\t\t\t\t`[KolBadge] The contrast of ${colorContrast.contrast} (≥7, AAA) is too low, between the color pair ${colorContrast.background} and ${colorContrast.foreground}.`\n\t\t\t);\n\t\t}\n\t\tthis.bgColorStr = colorContrast.background;\n\t\tthis.colorStr = colorContrast.foreground;\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_color')\n\tpublic validateColor(value?: string \| KoliBriColor): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_color',\n\t\t\t(value) =>\n\t\t\t\ttypeof value === 'string' \|\|\n\t\t\t\t(typeof value === 'object' && value !== null && typeof value.backgroundColor === 'string' && typeof value.color === 'string'),\n\t\t\tnew Set(['string', 'KoliBriColor']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: '#000',\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps \| string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\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.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["getContrastYIQ","r","g","b","yiq","calcColorContrast","baseColor","contrastColor","ratio","dir","color","Math","max","min","round","contrast","hex","rgbaConvert","join","summe","background","foreground","cache","Map","getColorContrast","has","get","set","createContrastColorPair","contrastRatio","colorRgba","colorContrast","defaultStyleCss","featureHint","HACK_REG_EX","KolBadge","this","bgColorStr","colorStr","handleColorChange","value","test","devHint","backgroundColor","a11yHint","_color","render","h","Host","class","state","_smartButton","style","_icon","_iconOnly","_label","_ariaLabel","_customClass","_disabled","_id","_on","_tooltipAlign","_variant","validateColor","watchValidator","Set","defaultValue","hooks","beforePatch","validateSmartButton","objectObjectHandler","parseJson","e","setState","componentWillLoad"],"sources":["./src/components/badge/contrast.ts","./src/components/badge/style.css?tag=kol-badge&mode=default&encapsulation=shadow","./src/components/badge/component.tsx"],"sourcesContent":["import { rgbaConvert } from './rgba-convert';\nimport { hex } from 'wcag-contrast';\nimport { colorRgba } from './color-rgba';\nimport { RGB } from 'color-convert/conversions';\n\ntype RGBA = [number, number, number, number];\n\n// const calcColor = (color: RGBA, diff: number): RGBA => [\n// Math.max(Math.min(Math.round(color[0] + (color[0] / 100 + 1) * diff), 255), 0),\n// Math.max(Math.min(Math.round(color[1] + (color[1] / 100 + 1) * diff), 255), 0),\n// Math.max(Math.min(Math.round(color[2] + (color[2] / 100 + 1) * diff), 255), 0),\n// color[3],\n// ];\n\n// const relativeLuminanceFormel = (c: number): number => {\n// if (c <= 0.03928) {\n// return c / 12.92;\n// } else {\n// return ((c + 0.055) / 1.055) ** 2.4;\n// }\n// };\n// // https://www.w3.org/TR/WCAG20/#contrast-ratiodef\n// const relativeLuminance = (r: number, g: number, b: number): number => {\n// return (\n// 0.2126 * relativeLuminanceFormel(r) + 0.7152 * relativeLuminanceFormel(g) + 0.0722 * relativeLuminanceFormel(b)\n// );\n// };\n\n// https://css-tricks.com/snippets/javascript/random-hex-color/\n// const randomColor = () => Math.floor(Math.random() * 16777215).toString(16);\n\n// https://24ways.org/2010/calculating-color-contrast/\n// ts-prune-ignore-next\nexport const getContrastYIQ = (r: number, g: number, b: number): number => {\n\tconst yiq = (r * 299 + g * 587 + b * 114) / 1000;\n\treturn yiq >= 128 ? -1 : 1;\n};\n\ntype ColorPair<T> = {\n\tbackground: T;\n\tforeground: T;\n};\n\nexport type ColorContrast<T> = ColorPair<T> & {\n\tcontrast: number;\n};\n\n// ts-prune-ignore-next\nexport const calcColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {\n\tconst color: RGB = [\n\t\tMath.max(Math.min(Math.round(contrastColor[0] + dir * Math.max(1, contrastColor[0] / 100)), 255), 0),\n\t\tMath.max(Math.min(Math.round(contrastColor[1] + dir * Math.max(1, contrastColor[1] / 100)), 255), 0),\n\t\tMath.max(Math.min(Math.round(contrastColor[2] + dir * Math.max(1, contrastColor[2] / 100)), 255), 0),\n\t];\n\tconst contrast = hex(rgbaConvert.hex(`rgba(${baseColor.join(',')},1)`), rgbaConvert.hex(`rgba(${color.join(',')},1)`));\n\tconst summe = color[0] + color[1] + color[2];\n\tif (summe === 0 \|\| summe === 765 \|\| contrast > ratio) {\n\t\treturn {\n\t\t\tbackground: baseColor,\n\t\t\tforeground: color,\n\t\t\tcontrast,\n\t\t};\n\t} else {\n\t\treturn calcColorContrast(baseColor, color, ratio, dir);\n\t}\n};\n\nconst cache: Map<unknown, ColorContrast<RGB>> = new Map();\n\n// ts-prune-ignore-next\nexport const getColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {\n\tif (cache.has(baseColor)) {\n\t\treturn cache.get(baseColor) as ColorContrast<RGB>;\n\t}\n\tconst color = calcColorContrast(baseColor, contrastColor, ratio, dir);\n\tcache.set(baseColor, color);\n\treturn color;\n};\n\nexport const createContrastColorPair = (color: string \| ColorPair<string>, contrastRatio = 7): ColorContrast<string> => {\n\tlet baseColor: RGBA = [0, 0, 0, 1];\n\tlet contrastColor: RGBA = [255, 255, 255, 1];\n\tif (typeof color === 'string') {\n\t\tbaseColor = colorRgba(color);\n\t\tcontrastColor = baseColor;\n\t} else if (typeof color === 'object' && color !== null && typeof color.background === 'string' && typeof color.foreground === 'string') {\n\t\tbaseColor = colorRgba(color.background);\n\t\tif (typeof color.foreground === 'string') {\n\t\t\tcontrastColor = colorRgba(color.foreground);\n\t\t} else {\n\t\t\tcontrastColor = baseColor;\n\t\t}\n\t}\n\tconst yiq = getContrastYIQ(baseColor[0], baseColor[1], baseColor[2]);\n\tconst colorContrast = getColorContrast(\n\t\t[baseColor[0], baseColor[1], baseColor[2]],\n\t\t[contrastColor[0], contrastColor[1], contrastColor[2]],\n\t\tcontrastRatio,\n\t\tyiq\n\t);\n\tcontrastColor = [...colorContrast.foreground, 1];\n\n\treturn {\n\t\tbackground: rgbaConvert.hex(`rgba(${baseColor.join(',')})`),\n\t\tforeground: rgbaConvert.hex(`rgba(${contrastColor.join(',')})`),\n\t\tcontrast: colorContrast.contrast,\n\t};\n};\n","@import '../style.css';\n\n:host > span {\n\tdisplay: inline-flex;\n}\n:host > span > kol-button-wc {\n\tborder-left: 1px solid rgba(0, 0, 0, 0.25);\n}\n:host > span > kol-button-wc button {\n\tcolor: inherit;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { a11yHint, devHint, featureHint } from '../../utils/a11y.tipps';\nimport { objectObjectHandler, parseJson, setState, watchValidator } from '../../utils/prop.validators';\nimport { ColorContrast, createContrastColorPair } from './contrast';\n\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\nconst HACK_REG_EX = /^([a-f0-9]{3}\|[a-f0-9]{6})$/;\n\nexport type KoliBriColor = {\n\tbackgroundColor: string;\n\tcolor: string;\n};\n\n/*\n API\n /\ntype RequiredProps = {\n\tlabel: string;\n};\ntype OptionalProps = {\n\tcolor: Stringified<KoliBriColor>;\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n\tsmartButton: Stringified<ButtonProps>;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tcolor: Stringified<KoliBriColor>;\n};\ntype OptionalStates = {\n\tsmartButton: ButtonProps;\n};\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements Props {\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this._label}></kol-span-wc>\n\t\t\t\t\t{typeof this.state._smartButton === 'object' && this.state._smartButton !== null && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t_ariaLabel={this.state._smartButton._ariaLabel}\n\t\t\t\t\t\t\t_customClass={this.state._smartButton._customClass}\n\t\t\t\t\t\t\t_disabled={this.state._smartButton._disabled}\n\t\t\t\t\t\t\t_icon={this.state._smartButton._icon}\n\t\t\t\t\t\t\t_iconOnly={true}\n\t\t\t\t\t\t\t_id={this.state._smartButton._id}\n\t\t\t\t\t\t\t_label={this.state._smartButton._label}\n\t\t\t\t\t\t\t_on={this.state._smartButton._on}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._smartButton._tooltipAlign}\n\t\t\t\t\t\t\t_variant={this.state._smartButton._variant}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt die Farbe des Hintergrundes bzw. der Schrift an.\n\t /\n\t@Prop() public _color?: string \| KoliBriColor = '#000';\n\n\t/\n\t Gibt einen Identifier eines Icons aus den Icofont's an. (https://icofont.com/)\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/\n\t Gibt an, ob nur das Icon angezeigt wird.\n\t /\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/\n\t Gibt den Label-Text des Badges an.\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).\n\t /\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_color: '#000',\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tlet color = value as string \| KoliBriColor;\n\t\tlet colorContrast: ColorContrast<string>;\n\t\tif (typeof color === 'string') {\n\t\t\tif (HACK_REG_EX.test(color)) {\n\t\t\t\t// Catch Breaking Change - remove next Major\n\t\t\t\tdevHint(\n\t\t\t\t\t`[KolBadge] Bitte verwenden Sie zukünftig nur noch das Standard-Farbformat für CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).`\n\t\t\t\t);\n\t\t\t\tcolor = `#${color}`;\n\t\t\t}\n\t\t\tcolorContrast = createContrastColorPair(color);\n\t\t} else {\n\t\t\tcolorContrast = createContrastColorPair({\n\t\t\t\tbackground: color.backgroundColor,\n\t\t\t\tforeground: color.color,\n\t\t\t});\n\t\t}\n\t\tif (colorContrast.contrast < 7) {\n\t\t\ta11yHint(\n\t\t\t\t`[KolBadge] The contrast of ${colorContrast.contrast} (≥7, AAA) is too low, between the color pair ${colorContrast.background} and ${colorContrast.foreground}.`\n\t\t\t);\n\t\t}\n\t\tthis.bgColorStr = colorContrast.background;\n\t\tthis.colorStr = colorContrast.foreground;\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_color')\n\tpublic validateColor(value?: string \| KoliBriColor): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_color',\n\t\t\t(value) =>\n\t\t\t\ttypeof value === 'string' \|\|\n\t\t\t\t(typeof value === 'object' && value !== null && typeof value.backgroundColor === 'string' && typeof value.color === 'string'),\n\t\t\tnew Set(['string', 'KoliBriColor']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: '#000',\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps \| string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\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.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as o,F as r,H as a}from"./index-50adf9a0.js";import{b as e}from"./a11y.tipps-353a7f35.js";import{w as l}from"./prop.validators-88dff60e.js";import{w as t}from"./validation-29598b1e.js";import"./dev.utils-3ec9f837.js";import"./reuse-2b3b6999.js";import"./index-599f5430.js";const s=":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}a,button,input,select,textarea{cursor:pointer}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}ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;place-items:center start}:host kol-icon[exportparts*='separator']{padding:0 0.5rem}:host kol-icon::part(icon separator){font-weight:900;font-size:0.875rem}:host kol-icon::part(icon separator)::before{color:black;content:'\\f054';font-family:'Font Awesome 6 Free'}",n=class{constructor(a){i(this,a),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){const i=this.state._links.length-1;return o(a,null,o("nav",{"aria-label":this.state._ariaLabel},o("ul",null,0===this.state._links.length&&o("li",null,o("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-house"}),"…"),this.state._links.map(((a,l)=>o("li",{key:l},0!==l&&o("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-angle-right",_part:"separator",exportparts:"separator"}),l===i?o("span",null,a._iconOnly?o("kol-icon",{_ariaLabel:a._label,_icon:"string"==typeof a._icon?a._icon:"fa-solid fa-link-slash"}):o(r,null,a._label)):o("kol-link",Object.assign({exportparts:"link",_useCase:"nav"},a,{_ariaLabel:a._label}),a._label)))))))}validateAriaLabel(i){l(this,"_ariaLabel",i,{required:!0}),e(i)}validateLinks(i){t("KolBreadcrumb",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};n.style={default:s};export{n as kol_breadcrumb};
+import{r as i,h as o,F as r,H as a}from"./index-50adf9a0.js";import{b as e}from"./a11y.tipps-7a139717.js";import{w as l}from"./prop.validators-27682076.js";import{w as t}from"./validation-57ce54ee.js";import"./log-829fbbc7.js";import"./reuse-2b3b6999.js";import"./index-599f5430.js";const n=":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}ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;place-items:center start}:host kol-icon[exportparts*='separator']{padding:0 0.5rem}:host kol-icon::part(icon separator){font-weight:900;font-size:0.875rem}:host kol-icon::part(icon separator)::before{color:black;content:'\\f054';font-family:'Font Awesome 6 Free'}",s=class{constructor(a){i(this,a),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){const i=this.state._links.length-1;return o(a,null,o("nav",{"aria-label":this.state._ariaLabel},o("ul",null,0===this.state._links.length&&o("li",null,o("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-house"}),"…"),this.state._links.map(((a,l)=>o("li",{key:l},0!==l&&o("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-angle-right",_part:"separator",exportparts:"separator"}),l===i?o("span",null,a._iconOnly?o("kol-icon",{_ariaLabel:a._label,_icon:"string"==typeof a._icon?a._icon:"fa-solid fa-link-slash"}):o(r,null,a._label)):o("kol-link",Object.assign({exportparts:"link",_useCase:"nav"},a,{_ariaLabel:a._label}),a._label)))))))}validateAriaLabel(i){l(this,"_ariaLabel",i,{required:!0}),e(i)}validateLinks(i){t("KolBreadcrumb",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};s.style={default:n};export{s as kol_breadcrumb};

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

	@@ -1 +1 @@
1	- {"version":3,"names":["defaultStyleCss","KolBreadcrumb","_ariaLabel","_links","render","lastIndex","this","state","length","h","Host","_icon","map","link","index","key","_part","exportparts","_iconOnly","_label","Fragment","Object","assign","_useCase","validateAriaLabel","value","watchString","required","a11yHintLabelingLandmarks","validateLinks","watchNavLinks","componentWillLoad"],"sources":["./src/components/breadcrumb/style.css?tag=kol-breadcrumb&mode=default&encapsulation=shadow","./src/components/breadcrumb/component.tsx"],"sourcesContent":["@import '../style.css';\n\nul {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tplace-items: center start;\n}\n:host kol-icon[exportparts='separator'] {\n\tpadding: 0 0.5rem;\n}\n:host kol-icon::part(icon separator) {\n\tfont-weight: 900;\n\tfont-size: 0.875rem;\n}\n:host kol-icon::part(icon separator)::before {\n\tcolor: black;\n\tcontent: '\\f054';\n\tfont-family: 'Font Awesome 6 Free';\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { NavLinkProps } from '../link/component';\nimport { watchNavLinks } from '../nav/validation';\n\n/\n API\n /\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<NavLinkProps[]>;\n};\ntype OptionalProps = unknown;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: NavLinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/\n @part link - Ermöglicht das Stylen der Links.\n * @part separator - Ermöglicht das Ändern des Separator-Icons.\n /\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-house\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map((link, index: number) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t{index !== 0 && <kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-angle-right\" _part=\"separator\" exportparts=\"separator\" />}\n\t\t\t\t\t\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t{link._iconOnly ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<kol-icon _ariaLabel={link._label} _icon={typeof link._icon === 'string' ? link._icon : 'fa-solid fa-link-slash'} />\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<Fragment>{link._label}</Fragment>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<kol-link exportparts=\"link\" _useCase=\"nav\" {...link} _ariaLabel={link._label}>\n\t\t\t\t\t\t\t\t\t\t\t{link._label}\n\t\t\t\t\t\t\t\t\t\t</kol-link>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\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 geordnete Liste der Seitenhierarchie in Links an.\n\t /\n\t@Prop() public _links!: Stringified<NavLinkProps[]>;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<NavLinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;~~iSAAA~~,MAAMA,EAAkB,~~i9C~~,MCqCXC,EAAa,M,oFAmDO,CAC/BC,WAAY,IACZC,OAAQ,G,CApDFC,SACN,MAAMC,EAAYC,KAAKC,MAAMJ,OAAOK,OAAS,EAC7C,OACCC,EAACC,EAAI,KACJD,EAAA,oBAAiBH,KAAKC,MAAML,YAC3BO,EAAA,UACEH,KAAKC,MAAMJ,OAAOK,SAAW,GAC7BC,EAAA,UACCA,EAAA,YAAUP,WAAW,GAAGS,MAAM,sBAAsB,KAGrDL,KAAKC,MAAMJ,OAAOS,KAAI,CAACC,EAAMC,IAE5BL,EAAA,MAAIM,IAAKD,GACPA,IAAU,GAAKL,EAAA,YAAUP,WAAW,GAAGS,MAAM,0BAA0BK,MAAM,YAAYC,YAAY,cACrGH,IAAUT,EACVI,EAAA,YACEI,EAAKK,UACLT,EAAA,YAAUP,WAAYW,EAAKM,OAAQR,aAAcE,EAAKF,QAAU,SAAWE,EAAKF,MAAQ,2BAExFF,EAACW,EAAQ,KAAEP,EAAKM,SAIlBV,EAAA,WAAAY,OAAAC,OAAA,CAAUL,YAAY,OAAOM,SAAS,OAAUV,EAAI,CAAEX,WAAYW,EAAKM,SACrEN,EAAKM,a,CAkCTK,kBAAkBC,GACxBC,EAAYpB,KAAM,aAAcmB,EAAO,CACtCE,SAAU,OAEXC,EAA0BH,E,CAOpBI,cAAcJ,GACpBK,EAAc,gBAAiBxB,KAAMmB,E,CAM/BM,oBACNzB,KAAKkB,kBAAkBlB,KAAKJ,YAC5BI,KAAKuB,cAAcvB,KAAKH,O"}
1	+ {"version":3,"names":["defaultStyleCss","KolBreadcrumb","_ariaLabel","_links","render","lastIndex","this","state","length","h","Host","_icon","map","link","index","key","_part","exportparts","_iconOnly","_label","Fragment","Object","assign","_useCase","validateAriaLabel","value","watchString","required","a11yHintLabelingLandmarks","validateLinks","watchNavLinks","componentWillLoad"],"sources":["./src/components/breadcrumb/style.css?tag=kol-breadcrumb&mode=default&encapsulation=shadow","./src/components/breadcrumb/component.tsx"],"sourcesContent":["@import '../style.css';\n\nul {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tplace-items: center start;\n}\n:host kol-icon[exportparts='separator'] {\n\tpadding: 0 0.5rem;\n}\n:host kol-icon::part(icon separator) {\n\tfont-weight: 900;\n\tfont-size: 0.875rem;\n}\n:host kol-icon::part(icon separator)::before {\n\tcolor: black;\n\tcontent: '\\f054';\n\tfont-family: 'Font Awesome 6 Free';\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { NavLinkProps } from '../link/component';\nimport { watchNavLinks } from '../nav/validation';\n\n/\n API\n /\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<NavLinkProps[]>;\n};\ntype OptionalProps = unknown;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: NavLinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/\n @part link - Ermöglicht das Stylen der Links.\n * @part separator - Ermöglicht das Ändern des Separator-Icons.\n /\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-house\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map((link, index: number) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t{index !== 0 && <kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-angle-right\" _part=\"separator\" exportparts=\"separator\" />}\n\t\t\t\t\t\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t{link._iconOnly ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<kol-icon _ariaLabel={link._label} _icon={typeof link._icon === 'string' ? link._icon : 'fa-solid fa-link-slash'} />\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<Fragment>{link._label}</Fragment>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<kol-link exportparts=\"link\" _useCase=\"nav\" {...link} _ariaLabel={link._label}>\n\t\t\t\t\t\t\t\t\t\t\t{link._label}\n\t\t\t\t\t\t\t\t\t\t</kol-link>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\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 geordnete Liste der Seitenhierarchie in Links an.\n\t /\n\t@Prop() public _links!: Stringified<NavLinkProps[]>;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<NavLinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;2RAAA,MAAMA,EAAkB,8hD,MCqCXC,EAAa,M,oFAmDO,CAC/BC,WAAY,IACZC,OAAQ,G,CApDFC,SACN,MAAMC,EAAYC,KAAKC,MAAMJ,OAAOK,OAAS,EAC7C,OACCC,EAACC,EAAI,KACJD,EAAA,oBAAiBH,KAAKC,MAAML,YAC3BO,EAAA,UACEH,KAAKC,MAAMJ,OAAOK,SAAW,GAC7BC,EAAA,UACCA,EAAA,YAAUP,WAAW,GAAGS,MAAM,sBAAsB,KAGrDL,KAAKC,MAAMJ,OAAOS,KAAI,CAACC,EAAMC,IAE5BL,EAAA,MAAIM,IAAKD,GACPA,IAAU,GAAKL,EAAA,YAAUP,WAAW,GAAGS,MAAM,0BAA0BK,MAAM,YAAYC,YAAY,cACrGH,IAAUT,EACVI,EAAA,YACEI,EAAKK,UACLT,EAAA,YAAUP,WAAYW,EAAKM,OAAQR,aAAcE,EAAKF,QAAU,SAAWE,EAAKF,MAAQ,2BAExFF,EAACW,EAAQ,KAAEP,EAAKM,SAIlBV,EAAA,WAAAY,OAAAC,OAAA,CAAUL,YAAY,OAAOM,SAAS,OAAUV,EAAI,CAAEX,WAAYW,EAAKM,SACrEN,EAAKM,a,CAkCTK,kBAAkBC,GACxBC,EAAYpB,KAAM,aAAcmB,EAAO,CACtCE,SAAU,OAEXC,EAA0BH,E,CAOpBI,cAAcJ,GACpBK,EAAc,gBAAiBxB,KAAMmB,E,CAM/BM,oBACNzB,KAAKkB,kBAAkBlB,KAAKJ,YAC5BI,KAAKuB,cAAcvB,KAAKH,O"}

package/dist/kolibri/kol-button-group.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as o,h as r,H as i}from"./index-50adf9a0.js";const l=":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}a,button,input,select,textarea{cursor:pointer}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}:host>kol-button-group-wc{display:inline-flex;flex-wrap:wrap;gap:calc(2 * var(--kolibri-spacing))}",a=class{constructor(r){o(this,r)}render(){return r(i,null,r("kol-button-group-wc",null,r("slot",null)))}};a.style={default:l};export{a as kol_button_group};
+import{r as o,h as i,H as r}from"./index-50adf9a0.js";const l=":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}:host>kol-button-group-wc{display:inline-flex;flex-wrap:wrap;gap:calc(2 * var(--kolibri-spacing))}",n=class{constructor(i){o(this,i)}render(){return i(r,null,i("kol-button-group-wc",null,i("slot",null)))}};n.style={default:l};export{n as kol_button_group};

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

	@@ -1 +1 @@
1	- {"version":3,"names":["defaultStyleCss","KolButtonGroup","render","h","Host"],"sources":["./src/components/button-group/style.css?tag=kol-button-group&mode=default&encapsulation=shadow","./src/components/button-group/shadow.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > kol-button-group-wc {\n\tdisplay: inline-flex;\n\tflex-wrap: wrap;\n\tgap: calc(2 * var(--kolibri-spacing));\n}\n","import { Component, h, Host, JSX } from '@stencil/core';\n\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-group-wc>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-button-group-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,~~0uC~~,MCWXC,EAAc,M,yBACnBC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,2BACCA,EAAA,c"}
1	+ {"version":3,"names":["defaultStyleCss","KolButtonGroup","render","h","Host"],"sources":["./src/components/button-group/style.css?tag=kol-button-group&mode=default&encapsulation=shadow","./src/components/button-group/shadow.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > kol-button-group-wc {\n\tdisplay: inline-flex;\n\tflex-wrap: wrap;\n\tgap: calc(2 * var(--kolibri-spacing));\n}\n","import { Component, h, Host, JSX } from '@stencil/core';\n\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-group-wc>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-button-group-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,uzC,MCWXC,EAAc,M,yBACnBC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,2BACCA,EAAA,c"}

package/dist/kolibri/kol-button-link.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as o,H as e,g as t}from"./index-50adf9a0.js";import{a as n}from"./reuse-2b3b6999.js";const r=":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}a,button,input,select,textarea{cursor:pointer}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-link-wc,kol-link-button-wc{display:inline-block}kol-link-wc a,kol-button-wc button{background-color:transparent;display:inline-flex;font-size:inherit;gap:var(--kolibri-spacing);place-items:center;text-decoration-line:underline}a:focus,a:hover,button:focus,button:hover{text-decoration-thickness:0.2em}kol-icon{padding:0 var(--kolibri-spacing);display:inline-block}.hidden{display:none;visibility:hidden}.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}.skip:focus{background-color:white;box-shadow:0 0 calc(2 * var(--kolibri-spacing)) calc(2 * var(--kolibri-spacing)) white;left:unset;position:unset}",s=class{constructor(o){i(this,o),this.catchRef=i=>{this.ref=i,n(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._disabled=!1,this._icon=void 0,this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}render(){return o(e,null,o("kol-button-wc",{ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icon:this._icon,_iconOnly:this._iconOnly,_id:this._id,_label:this._label,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},o("slot",{name:"expert",slot:"expert"})))}get host(){return t(this)}};s.style={default:r};export{s as kol_button_link};
+import{r as i,h as o,H as e,g as n}from"./index-50adf9a0.js";import{a as t}from"./reuse-2b3b6999.js";const r=":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-link-wc,kol-link-button-wc{display:inline-block}kol-link-wc a,kol-button-wc button{background-color:transparent;display:inline-flex;font-size:inherit;gap:var(--kolibri-spacing);place-items:center;text-decoration-line:underline}a:focus,a:hover,button:focus,button:hover{text-decoration-thickness:0.2em}kol-icon{padding:0 var(--kolibri-spacing);display:inline-block}.hidden{display:none;visibility:hidden}.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}.skip:focus{background-color:white;box-shadow:0 0 calc(2 * var(--kolibri-spacing)) calc(2 * var(--kolibri-spacing)) white;left:unset;position:unset}",s=class{constructor(o){i(this,o),this.catchRef=i=>{this.ref=i,t(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._disabled=!1,this._icon=void 0,this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}render(){return o(e,null,o("kol-button-wc",{ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icon:this._icon,_iconOnly:this._iconOnly,_id:this._id,_label:this._label,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},o("slot",{name:"expert",slot:"expert"})))}get host(){return n(this)}};s.style={default:r};export{s as kol_button_link};

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

	@@ -1 +1 @@
1	- {"version":3,"names":["defaultStyleCss","KolButtonLink","this","catchRef","ref","propergateFocus","host","render","h","Host","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_icon","_iconOnly","_id","_label","_on","_role","_tabIndex","_tooltipAlign","_type","_value","name","slot"],"sources":["./src/components/button-link/style.css?tag=kol-button-link&mode=default&encapsulation=shadow","./src/components/button-link/component.tsx"],"sourcesContent":["@import '../link.css';\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tOptionalButtonLinkProps,\n\tRequiredButtonLinkProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { propergateFocus } from '../../utils/reuse';\nimport { Alignment } from '../../types/props/alignment';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonLink implements Generic.Element.Members<RequiredButtonLinkProps, OptionalButtonLinkProps> {\n\t@Element() private readonly host?: HTMLKolButtonLinkElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconOnly={this._iconOnly}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t>\n\t\t\t\t\t{/\n\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\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t/}\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/*\n\t Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t /\n\t@Prop() public _ariaControls?: string;\n\n\t/\n\t Gibt an, welchen aktuellen Auswahlstatus der Button 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 Button 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 für den Screenreader an. Damit die\n\t * Sprachsteuerung von interaktiven Elementen funktioniert, muss der\n\t * Aria-Label-Text mit dem Label-Text des Buttons beginnen.\n\t \n\t - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n\t /\n\t@Prop({ mutable: true, reflect: false }) 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 Button deaktiviert ist.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/\n\t Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/\n\t Gibt an, ob nur das Icon angezeigt wird.\n\t /\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/\n\t Gibt die ID der Schaltfläche an. (Selection, Testing)\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Gibt einen beschreibenden Text für das Text-Element an.\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für die Button-Events an.\n\t /\n\t@Prop() public _on?: KoliBriButtonCallbacks<unknown>;\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 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 Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/\n\t Gibt an, welche Typ der Button hat.\n\t /\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/\n\t Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<unknown>;\n}\n"],"mappings":";;;qGAAA,MAAMA,EAAkB,~~ywD~~,MCuBXC,EAAa,M,yBAIRC,KAAAC,SAAYC,IAC5BF,KAAKE,IAAMA,EACXC,EAAgBH,KAAKI,KAAMJ,KAAKE,IAAI,E,gIA+DiC,G,4CAUhB,M,oCAUA,M,6HA8BX,M,WAKA,S,sBAnHpCG,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBACCJ,IAAKF,KAAKC,SACVO,WAAYR,KAAKQ,WACjBC,cAAeT,KAAKS,cACpBC,aAAcV,KAAKU,aACnBC,cAAeX,KAAKW,cACpBC,WAAYZ,KAAKY,WACjBC,cAAeb,KAAKa,cACpBC,UAAWd,KAAKc,UAChBC,MAAOf,KAAKe,MACZC,UAAWhB,KAAKgB,UAChBC,IAAKjB,KAAKiB,IACVC,OAAQlB,KAAKkB,OACbC,IAAKnB,KAAKmB,IACVC,MAAOpB,KAAKoB,MACZC,UAAWrB,KAAKqB,UAChBC,cAAetB,KAAKsB,cACpBC,MAAOvB,KAAKuB,MACZC,OAAQxB,KAAKwB,QAMblB,EAAA,QAAMmB,KAAK,SAASC,KAAK,Y"}
1	+ {"version":3,"names":["defaultStyleCss","KolButtonLink","this","catchRef","ref","propergateFocus","host","render","h","Host","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_icon","_iconOnly","_id","_label","_on","_role","_tabIndex","_tooltipAlign","_type","_value","name","slot"],"sources":["./src/components/button-link/style.css?tag=kol-button-link&mode=default&encapsulation=shadow","./src/components/button-link/component.tsx"],"sourcesContent":["@import '../link.css';\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tOptionalButtonLinkProps,\n\tRequiredButtonLinkProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { propergateFocus } from '../../utils/reuse';\nimport { Alignment } from '../../types/props/alignment';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonLink implements Generic.Element.Members<RequiredButtonLinkProps, OptionalButtonLinkProps> {\n\t@Element() private readonly host?: HTMLKolButtonLinkElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconOnly={this._iconOnly}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t>\n\t\t\t\t\t{/\n\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\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t/}\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/*\n\t Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t /\n\t@Prop() public _ariaControls?: string;\n\n\t/\n\t Gibt an, welchen aktuellen Auswahlstatus der Button 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 Button 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 für den Screenreader an. Damit die\n\t * Sprachsteuerung von interaktiven Elementen funktioniert, muss der\n\t * Aria-Label-Text mit dem Label-Text des Buttons beginnen.\n\t \n\t - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n\t /\n\t@Prop({ mutable: true, reflect: false }) 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 Button deaktiviert ist.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/\n\t Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/\n\t Gibt an, ob nur das Icon angezeigt wird.\n\t /\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/\n\t Gibt die ID der Schaltfläche an. (Selection, Testing)\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Gibt einen beschreibenden Text für das Text-Element an.\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für die Button-Events an.\n\t /\n\t@Prop() public _on?: KoliBriButtonCallbacks<unknown>;\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 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 Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/\n\t Gibt an, welche Typ der Button hat.\n\t /\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/\n\t Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<unknown>;\n}\n"],"mappings":";;;qGAAA,MAAMA,EAAkB,s1D,MCuBXC,EAAa,M,yBAIRC,KAAAC,SAAYC,IAC5BF,KAAKE,IAAMA,EACXC,EAAgBH,KAAKI,KAAMJ,KAAKE,IAAI,E,gIA+DiC,G,4CAUhB,M,oCAUA,M,6HA8BX,M,WAKA,S,sBAnHpCG,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBACCJ,IAAKF,KAAKC,SACVO,WAAYR,KAAKQ,WACjBC,cAAeT,KAAKS,cACpBC,aAAcV,KAAKU,aACnBC,cAAeX,KAAKW,cACpBC,WAAYZ,KAAKY,WACjBC,cAAeb,KAAKa,cACpBC,UAAWd,KAAKc,UAChBC,MAAOf,KAAKe,MACZC,UAAWhB,KAAKgB,UAChBC,IAAKjB,KAAKiB,IACVC,OAAQlB,KAAKkB,OACbC,IAAKnB,KAAKmB,IACVC,MAAOpB,KAAKoB,MACZC,UAAWrB,KAAKqB,UAChBC,cAAetB,KAAKsB,cACpBC,MAAOvB,KAAKuB,MACZC,OAAQxB,KAAKwB,QAMblB,EAAA,QAAMmB,KAAK,SAASC,KAAK,Y"}

package/dist/kolibri/kol-button-wc_2.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as s,g as a}from"./index-50adf9a0.js";import{w as e}from"./button-link-72d562a8.js";import{d as l,e as n}from"./a11y.tipps-353a7f35.js";import{n as h}from"./dev.utils-3ec9f837.js";import{f as o,j as d,h as r,w as c,a as u,b as f,s as _}from"./prop.validators-88dff60e.js";import{a as v}from"./reuse-2b3b6999.js";import{v as p,w as b}from"./icon-2c58e2a8.js";import{v as m,a as y}from"./label-99de85b5.js";import{v as A}from"./tab-index-91119b1c.js";import{p as g,a as j}from"./controller-c793954a.js";import{a as I,w as x}from"./controller-ee858115.js";import"./index-599f5430.js";const C=class{constructor(t){i(this,t),this.nonce=h(),this.catchRef=t=>{this.ref=t,v(this.host,this.ref)},this.onClick=t=>{var a,i;"submit"===this.state._type?g({form:this.host,ref:this.ref}):"reset"===this.state._type?j({form:this.host,ref:this.ref}):"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)?(o(t,this.ref),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._value)):l("It was no button click callback configured!")},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._icon=void 0,this._iconAlign="left",this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_ariaLabel:"",_icon:{},_iconAlign:"left",_label:"",_on:{},_type:"button"}}render(){return t(s,null,t("button",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-current":d(this.state._ariaCurrent),"aria-expanded":r(this.state._ariaExpanded),"aria-label":!1===this.state._iconOnly?this.state._ariaLabel||this.state._label:void 0,"aria-labelledby":!0===this.state._iconOnly?this.nonce:void 0,"aria-selected":d(this.state._ariaSelected),class:{[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"icon-only":!0===this.state._iconOnly},disabled:this.state._disabled,id:this.state._id},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),t("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._label},t("slot",{name:"expert",slot:"expert"}))),!0===this.state._iconOnly&&t("kol-tooltip",{"aria-hidden":"true",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._ariaLabel||this.state._label}))}validateAccessKey(t){c(this,"_accessKey",t)}validateAriaControls(t){c(this,"_ariaControls",t)}validateAriaCurrent(t){u(this,"_ariaControls",(t=>!0===t||"date"===t||"location"===t||"page"===t||"step"===t||"time"===t),new Set(["boolean","String {data, location, page, step, time}"]),t)}validateAriaExpanded(t){f(this,"_ariaExpanded",t)}validateAriaLabel(t){m(this,t)}validateAriaSelected(t){f(this,"_ariaSelected",t)}validateCustomClass(t){c(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){f(this,"_disabled",t),!0===t&&n()}validateIcon(t){p(this,t)}validateIconAlign(t){b(this,t)}validateIconOnly(t){f(this,"_iconOnly",t,{defaultValue:!1})}validateId(t){c(this,"_id",t)}validateLabel(t){y(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){c(this,"_role",t)}validateTabIndex(t){A(this,t)}validateTooltipAlign(t){e(this,"_tooltipAlign",t)}validateType(t){I(this,"_type",t)}validateValue(t){_(this,"_value",t)}validateVariant(t){x(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateIcon(this._icon),this.validateIconAlign(this._iconAlign),this.validateIconOnly(this._iconOnly),this.validateId(this._id),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_icon:["validateIcon"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_id:["validateId"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}},O=t=>{t instanceof Node&&setTimeout((()=>{var a,i;null===(a=t.parentElement)||void 0===a||a.removeChild(t),null===(i=t.parentNode)||void 0===i||i.removeChild(t)}))},L=class{constructor(t){i(this,t),this._icon=void 0,this._iconOnly=!1,this._label=void 0,this.state={_icon:{},_iconOnly:!1,_label:""}}render(){return t(s,{class:{"icon-only":this.state._iconOnly}},this.state._icon.top&&t("kol-icon",{class:{"icon top":!0},style:this.state._icon.top.style,_ariaLabel:"",_icon:this.state._icon.top.icon}),t("span",null,this.state._icon.left&&t("kol-icon",{class:{"icon left":!0},style:this.state._icon.left.style,_ariaLabel:"",_icon:this.state._icon.left.icon}),!0!==this.state._iconOnly&&this.state._label.length>0?t("span",null,this.state._label):"",t("span",{ref:this.state._label.length>0||!0===this.state._iconOnly?O:void 0},t("slot",{name:"expert"})),this.state._icon.right&&t("kol-icon",{class:{"icon right":!0},style:this.state._icon.right.style,_ariaLabel:"",_icon:this.state._icon.right.icon})),this.state._icon.bottom&&t("kol-icon",{class:{"icon bottom":!0},style:this.state._icon.bottom.style,_ariaLabel:"",_icon:this.state._icon.bottom.icon}))}validateIcon(t){p(this,t)}validateIconOnly(t){f(this,"_iconOnly",t)}validateLabel(t){y(this,t)}componentWillLoad(){this.validateIcon(this._icon),this.validateIconOnly(this._iconOnly),this.validateLabel(this._label)}static get watchers(){return{_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"]}}};export{C as kol_button_wc,L as kol_span_wc};
+import{r as i,h as t,H as s,g as a}from"./index-50adf9a0.js";import{w as e}from"./button-link-75df8fe4.js";import{d as l,e as n}from"./a11y.tipps-7a139717.js";import{n as h}from"./log-829fbbc7.js";import{f as o,j as d,h as r,w as c,a as u,b as f,s as _}from"./prop.validators-27682076.js";import{a as v}from"./reuse-2b3b6999.js";import{v as b,w as p}from"./icon-286d4116.js";import{v as m,a as y}from"./label-bd914c5e.js";import{v as g}from"./tab-index-7446a923.js";import{p as A,a as j}from"./controller-4fb4a3b9.js";import{a as I,w as x}from"./controller-3dd01f3f.js";import"./index-599f5430.js";const C=class{constructor(t){i(this,t),this.nonce=h(),this.catchRef=t=>{this.ref=t,v(this.host,this.ref)},this.onClick=t=>{var a,i;"submit"===this.state._type?A({form:this.host,ref:this.ref}):"reset"===this.state._type?j({form:this.host,ref:this.ref}):"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)?(o(t,this.ref),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._value)):l("It was no button click callback configured!")},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._icon=void 0,this._iconAlign="left",this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_ariaLabel:"",_icon:{},_iconAlign:"left",_label:"",_on:{},_type:"button"}}render(){return t(s,null,t("button",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-current":d(this.state._ariaCurrent),"aria-expanded":r(this.state._ariaExpanded),"aria-label":!1===this.state._iconOnly?this.state._ariaLabel||this.state._label:void 0,"aria-labelledby":!0===this.state._iconOnly?this.nonce:void 0,"aria-selected":d(this.state._ariaSelected),class:{[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"icon-only":!0===this.state._iconOnly},disabled:this.state._disabled,id:this.state._id},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),t("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._label},t("slot",{name:"expert",slot:"expert"}))),!0===this.state._iconOnly&&t("kol-tooltip",{"aria-hidden":"true",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._ariaLabel||this.state._label}))}validateAccessKey(t){c(this,"_accessKey",t)}validateAriaControls(t){c(this,"_ariaControls",t)}validateAriaCurrent(t){u(this,"_ariaControls",(t=>!0===t||"date"===t||"location"===t||"page"===t||"step"===t||"time"===t),new Set(["boolean","String {data, location, page, step, time}"]),t)}validateAriaExpanded(t){f(this,"_ariaExpanded",t)}validateAriaLabel(t){m(this,t)}validateAriaSelected(t){f(this,"_ariaSelected",t)}validateCustomClass(t){c(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){f(this,"_disabled",t),!0===t&&n()}validateIcon(t){b(this,t)}validateIconAlign(t){p(this,t)}validateIconOnly(t){f(this,"_iconOnly",t,{defaultValue:!1})}validateId(t){c(this,"_id",t)}validateLabel(t){y(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){c(this,"_role",t)}validateTabIndex(t){g(this,t)}validateTooltipAlign(t){e(this,"_tooltipAlign",t)}validateType(t){I(this,"_type",t)}validateValue(t){_(this,"_value",t)}validateVariant(t){x(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateIcon(this._icon),this.validateIconAlign(this._iconAlign),this.validateIconOnly(this._iconOnly),this.validateId(this._id),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_icon:["validateIcon"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_id:["validateId"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}},O=t=>{t instanceof Node&&setTimeout((()=>{var a,i;null===(a=t.parentElement)||void 0===a||a.removeChild(t),null===(i=t.parentNode)||void 0===i||i.removeChild(t)}))},L=class{constructor(t){i(this,t),this._icon=void 0,this._iconOnly=!1,this._label=void 0,this.state={_icon:{},_iconOnly:!1,_label:""}}render(){return t(s,{class:{"icon-only":this.state._iconOnly}},this.state._icon.top&&t("kol-icon",{class:{"icon top":!0},style:this.state._icon.top.style,_ariaLabel:"",_icon:this.state._icon.top.icon}),t("span",null,this.state._icon.left&&t("kol-icon",{class:{"icon left":!0},style:this.state._icon.left.style,_ariaLabel:"",_icon:this.state._icon.left.icon}),!0!==this.state._iconOnly&&this.state._label.length>0?t("span",null,this.state._label):"",t("span",{ref:this.state._label.length>0||!0===this.state._iconOnly?O:void 0},t("slot",{name:"expert"})),this.state._icon.right&&t("kol-icon",{class:{"icon right":!0},style:this.state._icon.right.style,_ariaLabel:"",_icon:this.state._icon.right.icon})),this.state._icon.bottom&&t("kol-icon",{class:{"icon bottom":!0},style:this.state._icon.bottom.style,_ariaLabel:"",_icon:this.state._icon.bottom.icon}))}validateIcon(t){b(this,t)}validateIconOnly(t){f(this,"_iconOnly",t)}validateLabel(t){y(this,t)}componentWillLoad(){this.validateIcon(this._icon),this.validateIconOnly(this._iconOnly),this.validateLabel(this._label)}static get watchers(){return{_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"]}}};export{C as kol_button_wc,L as kol_span_wc};

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

	@@ -1 +1 @@
1	- {"version":3,"names":["KolButtonWc","this","nonce","catchRef","ref","propergateFocus","host","onClick","event","state","_type","propergateSubmitEventToForm","form","propergateResetEventToForm","_a","_on","setEventTargetAndStopPropagation","_b","_value","devHint","_ariaLabel","_icon","_iconAlign","_label","render","h","Host","Object","assign","accessKey","_accessKey","_ariaControls","mapStringOrBoolean2String","_ariaCurrent","mapBoolean2String","_ariaExpanded","_iconOnly","undefined","_ariaSelected","class","_variant","_customClass","length","disabled","_disabled","id","_id","role","_role","tabIndex","_tabIndex","type","name","slot","_align","_tooltipAlign","validateAccessKey","value","watchString","validateAriaControls","validateAriaCurrent","watchValidator","Set","validateAriaExpanded","watchBoolean","validateAriaLabel","validateAriaSelected","validateCustomClass","defaultValue","validateDisabled","a11yHintDisabled","validateIcon","validateIconAlign","watchIconAlign","validateIconOnly","validateId","validateLabel","validateOn","validateRole","validateTabIndex","validateTooltipAlign","watchTooltipAlignment","validateType","watchButtonType","validateValue","setState","validateVariant","watchButtonVariant","componentWillLoad","removeNode","el","Node","setTimeout","parentElement","removeChild","parentNode","KolSpanWc","top","style","icon","left","right","bottom"],"sources":["./src/components/button/component.tsx","./src/components/span/component.tsx"],"sourcesContent":["import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tButtonStates,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tKoliBriButtonVariant,\n\tOptionalButtonProps,\n\tOptionalButtonStates,\n\tRequiredButtonProps,\n\tRequiredButtonStates,\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 {\n\tmapBoolean2String,\n\tmapStringOrBoolean2String,\n\tsetEventTargetAndStopPropagation,\n\tsetState,\n\twatchBoolean,\n\twatchString,\n\twatchValidator,\n} 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';\nimport { propergateResetEventToForm, propergateSubmitEventToForm } from '../form/controller';\nimport { watchButtonType, watchButtonVariant } from './controller';\n\n/*\n @internal\n /\n@Component({\n\ttag: 'kol-button-wc',\n\tshadow: false,\n})\nexport class KolButtonWc implements Generic.Element.ComponentApi<RequiredButtonProps, OptionalButtonProps, RequiredButtonStates, OptionalButtonStates> {\n\t@Element() private readonly host?: HTMLKolButtonWcElement;\n\tprivate readonly nonce = nonce();\n\tprivate ref?: HTMLButtonElement;\n\n\tprivate readonly catchRef = (ref?: HTMLButtonElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onClick = (event: MouseEvent) => {\n\t\tif (this.state._type === 'submit') {\n\t\t\tpropergateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else if (this.state._type === 'reset') {\n\t\t\tpropergateResetEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else if (typeof this.state._on?.onClick === 'function') {\n\t\t\tsetEventTargetAndStopPropagation(event, this.ref);\n\t\t\tthis.state._on?.onClick(event, this.state._value);\n\t\t} else {\n\t\t\tdevHint(`It was no button click callback configured!`);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<button\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\taria-controls={this.state._ariaControls}\n\t\t\t\t\taria-current={mapStringOrBoolean2String(this.state._ariaCurrent)}\n\t\t\t\t\taria-expanded={mapBoolean2String(this.state._ariaExpanded)}\n\t\t\t\t\taria-label={this.state._iconOnly === false ? this.state._ariaLabel \|\| this.state._label : undefined}\n\t\t\t\t\taria-labelledby={this.state._iconOnly === true ? this.nonce : undefined}\n\t\t\t\t\taria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant as string]: this.state._variant !== 'custom',\n\t\t\t\t\t\t[this.state._customClass as string]:\n\t\t\t\t\t\t\tthis.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,\n\t\t\t\t\t\t'icon-only': this.state._iconOnly === true,\n\t\t\t\t\t}}\n\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t{...this.state._on}\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\trole={this.state._role}\n\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\ttype={this.state._type}\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</button>\n\t\t\t\t{this.state._iconOnly === true && (\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, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t /\n\t@Prop() public _ariaControls?: string;\n\n\t/\n\t Gibt an, welchen aktuellen Auswahlstatus der Button 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 Button 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 für den Screenreader an. Damit die\n\t * Sprachsteuerung von interaktiven Elementen funktioniert, muss der\n\t * Aria-Label-Text mit dem Label-Text des Buttons beginnen.\n\t \n\t - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n\t /\n\t@Prop({ mutable: true, reflect: false }) 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, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t /\n\t@Prop() public _customClass?: string;\n\n\t/\n\t Gibt an, ob der Button deaktiviert ist.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\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 links oder rechts dargestellt werden soll.\n\t \n\t @deprecated\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 die ID der Schaltfläche an. (Selection, Testing)\n\t /\n\t@Prop() public _id?: string;\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 die Button-Events an.\n\t /\n\t@Prop() public _on?: KoliBriButtonCallbacks<unknown>;\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 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 Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/\n\t Gibt an, welche Typ der Button hat.\n\t /\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/\n\t Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t /\n\t@Prop() public _value?: Stringified<unknown>;\n\n\t/\n\t Gibt an, welche Ausprägung der Button hat.\n\t /\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: ButtonStates = {\n\t\t_ariaLabel: '',\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\t_on: {},\n\t\t_type: 'button',\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\twatchString(this, '_accessKey', value);\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'_ariaControls',\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('_customClass')\n\tpublic validateCustomClass(value?: string): void {\n\t\twatchString(this, '_customClass', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_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('_icon')\n\tpublic validateIcon(value?: KoliBriIconProp): void {\n\t\tvalidateIcon(this, value);\n\t}\n\n\t/\n\t @deprecated\n\t /\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\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\t\tdefaultValue: false,\n\t\t\t// hooks: {\n\t\t\t// beforePatch: (_value, nextState) => {\n\t\t\t// let ariaLabel = this.state._ariaLabel;\n\t\t\t// if (nextState.has('_ariaLabel')) {\n\t\t\t// ariaLabel = nextState.get('_ariaLabel') as string;\n\t\t\t// }\n\t\t\t// if (typeof ariaLabel !== 'string' \|\| ariaLabel.length <= 0) {\n\t\t\t// devHint(`[KolButton]: Bevor Icon-Only aktiviert wird, muss ein Aria-Label bzw. Label gesetzt werden.`);\n\t\t\t// nextState.set('_iconOnly', false);\n\t\t\t// }\n\t\t\t// },\n\t\t\t// },\n\t\t});\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\twatchString(this, '_id', 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 /\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriButtonCallbacks<unknown>): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_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('_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('_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('_type')\n\tpublic validateType(value?: KoliBriButtonType): void {\n\t\twatchButtonType(this, '_type', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown>): void {\n\t\tsetState(this, '_value', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriButtonVariant): void {\n\t\twatchButtonVariant(this, '_variant', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t /\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\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.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateIconAlign(this._iconAlign);\n\t\tthis.validateIconOnly(this._iconOnly);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n","import { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriCustomIcon, KoliBriIconProp } from '../../types/icon';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { validateIcon } from '../../utils/validators/icon';\nimport { validateLabel } from '../../utils/validators/label';\n\n/\n API\n /\ntype RequiredProps = {\n\tlabel: string;\n};\ntype OptionalProps = {\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\ticon: {\n\t\ttop?: KoliBriCustomIcon;\n\t\tright?: KoliBriCustomIcon;\n\t\tbottom?: KoliBriCustomIcon;\n\t\tleft?: KoliBriCustomIcon;\n\t};\n\ticonOnly: boolean;\n\tlabel: string;\n};\ntype OptionalStates = unknown;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst removeNode = (el?: Node) => {\n\tif (el instanceof Node) {\n\t\tsetTimeout(() => {\n\t\t\tel.parentElement?.removeChild(el);\n\t\t\tel.parentNode?.removeChild(el);\n\t\t});\n\t}\n};\n\n/\n @internal\n /\n@Component({\n\ttag: 'kol-span-wc',\n\tshadow: false,\n})\nexport class KolSpanWc implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'icon-only': this.state._iconOnly,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._icon.top && (\n\t\t\t\t\t<kol-icon\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t'icon top': true,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tstyle={this.state._icon.top.style}\n\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t_icon={this.state._icon.top.icon}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<span>\n\t\t\t\t\t{this.state._icon.left && (\n\t\t\t\t\t\t<kol-icon\n\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t'icon left': true,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={this.state._icon.left.style}\n\t\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t\t_icon={this.state._icon.left.icon}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._iconOnly !== true && this.state._label.length > 0 ? <span>{this.state._label}</span> : ''}\n\n\t\t\t\t\t<span ref={this.state._label.length > 0 \|\| this.state._iconOnly === true ? removeNode : undefined}>\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\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.state._icon.right && (\n\t\t\t\t\t\t<kol-icon\n\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t'icon right': true,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={this.state._icon.right.style}\n\t\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t\t_icon={this.state._icon.right.icon}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t\t{this.state._icon.bottom && (\n\t\t\t\t\t<kol-icon\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t'icon bottom': true,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tstyle={this.state._icon.bottom.style}\n\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t_icon={this.state._icon.bottom.icon}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/\n\t Gibt an, ob nur das Icon angezeigt wird.\n\t /\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/\n\t Gibt einen beschreibenden Text für das Text-Element an.\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_icon: {},\n\t\t_iconOnly: false,\n\t\t_label: '',\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 /\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 (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateIconOnly(this._iconOnly);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["KolButtonWc","this","nonce","catchRef","ref","propergateFocus","host","onClick","event","state","_type","propergateSubmitEventToForm","form","propergateResetEventToForm","_a","_on","setEventTargetAndStopPropagation","_b","_value","devHint","_ariaLabel","_icon","_iconAlign","_label","render","h","Host","Object","assign","accessKey","_accessKey","_ariaControls","mapStringOrBoolean2String","_ariaCurrent","mapBoolean2String","_ariaExpanded","_iconOnly","undefined","_ariaSelected","class","_variant","_customClass","length","disabled","_disabled","id","_id","role","_role","tabIndex","_tabIndex","type","name","slot","_align","_tooltipAlign","validateAccessKey","value","watchString","validateAriaControls","validateAriaCurrent","watchValidator","Set","validateAriaExpanded","watchBoolean","validateAriaLabel","validateAriaSelected","validateCustomClass","defaultValue","validateDisabled","a11yHintDisabled","validateIcon","validateIconAlign","watchIconAlign","validateIconOnly","validateId","validateLabel","validateOn","validateRole","validateTabIndex","validateTooltipAlign","watchTooltipAlignment","validateType","watchButtonType","validateValue","setState","validateVariant","watchButtonVariant","componentWillLoad","removeNode","el","Node","setTimeout","parentElement","removeChild","parentNode","KolSpanWc","top","style","icon","left","right","bottom"],"sources":["./src/components/button/component.tsx","./src/components/span/component.tsx"],"sourcesContent":["import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tButtonStates,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tKoliBriButtonVariant,\n\tOptionalButtonProps,\n\tOptionalButtonStates,\n\tRequiredButtonProps,\n\tRequiredButtonStates,\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 {\n\tmapBoolean2String,\n\tmapStringOrBoolean2String,\n\tsetEventTargetAndStopPropagation,\n\tsetState,\n\twatchBoolean,\n\twatchString,\n\twatchValidator,\n} 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';\nimport { propergateResetEventToForm, propergateSubmitEventToForm } from '../form/controller';\nimport { watchButtonType, watchButtonVariant } from './controller';\n\n/*\n @internal\n /\n@Component({\n\ttag: 'kol-button-wc',\n\tshadow: false,\n})\nexport class KolButtonWc implements Generic.Element.ComponentApi<RequiredButtonProps, OptionalButtonProps, RequiredButtonStates, OptionalButtonStates> {\n\t@Element() private readonly host?: HTMLKolButtonWcElement;\n\tprivate readonly nonce = nonce();\n\tprivate ref?: HTMLButtonElement;\n\n\tprivate readonly catchRef = (ref?: HTMLButtonElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onClick = (event: MouseEvent) => {\n\t\tif (this.state._type === 'submit') {\n\t\t\tpropergateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else if (this.state._type === 'reset') {\n\t\t\tpropergateResetEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else if (typeof this.state._on?.onClick === 'function') {\n\t\t\tsetEventTargetAndStopPropagation(event, this.ref);\n\t\t\tthis.state._on?.onClick(event, this.state._value);\n\t\t} else {\n\t\t\tdevHint(`It was no button click callback configured!`);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<button\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\taria-controls={this.state._ariaControls}\n\t\t\t\t\taria-current={mapStringOrBoolean2String(this.state._ariaCurrent)}\n\t\t\t\t\taria-expanded={mapBoolean2String(this.state._ariaExpanded)}\n\t\t\t\t\taria-label={this.state._iconOnly === false ? this.state._ariaLabel \|\| this.state._label : undefined}\n\t\t\t\t\taria-labelledby={this.state._iconOnly === true ? this.nonce : undefined}\n\t\t\t\t\taria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant as string]: this.state._variant !== 'custom',\n\t\t\t\t\t\t[this.state._customClass as string]:\n\t\t\t\t\t\t\tthis.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,\n\t\t\t\t\t\t'icon-only': this.state._iconOnly === true,\n\t\t\t\t\t}}\n\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t{...this.state._on}\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\trole={this.state._role}\n\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\ttype={this.state._type}\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</button>\n\t\t\t\t{this.state._iconOnly === true && (\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, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t /\n\t@Prop() public _ariaControls?: string;\n\n\t/\n\t Gibt an, welchen aktuellen Auswahlstatus der Button 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 Button 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 für den Screenreader an. Damit die\n\t * Sprachsteuerung von interaktiven Elementen funktioniert, muss der\n\t * Aria-Label-Text mit dem Label-Text des Buttons beginnen.\n\t \n\t - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n\t /\n\t@Prop({ mutable: true, reflect: false }) 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, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t /\n\t@Prop() public _customClass?: string;\n\n\t/\n\t Gibt an, ob der Button deaktiviert ist.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\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 links oder rechts dargestellt werden soll.\n\t \n\t @deprecated\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 die ID der Schaltfläche an. (Selection, Testing)\n\t /\n\t@Prop() public _id?: string;\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 die Button-Events an.\n\t /\n\t@Prop() public _on?: KoliBriButtonCallbacks<unknown>;\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 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 Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/\n\t Gibt an, welche Typ der Button hat.\n\t /\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/\n\t Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t /\n\t@Prop() public _value?: Stringified<unknown>;\n\n\t/\n\t Gibt an, welche Ausprägung der Button hat.\n\t /\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: ButtonStates = {\n\t\t_ariaLabel: '',\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\t_on: {},\n\t\t_type: 'button',\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\twatchString(this, '_accessKey', value);\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'_ariaControls',\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('_customClass')\n\tpublic validateCustomClass(value?: string): void {\n\t\twatchString(this, '_customClass', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_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('_icon')\n\tpublic validateIcon(value?: KoliBriIconProp): void {\n\t\tvalidateIcon(this, value);\n\t}\n\n\t/\n\t @deprecated\n\t /\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\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\t\tdefaultValue: false,\n\t\t\t// hooks: {\n\t\t\t// beforePatch: (_value, nextState) => {\n\t\t\t// let ariaLabel = this.state._ariaLabel;\n\t\t\t// if (nextState.has('_ariaLabel')) {\n\t\t\t// ariaLabel = nextState.get('_ariaLabel') as string;\n\t\t\t// }\n\t\t\t// if (typeof ariaLabel !== 'string' \|\| ariaLabel.length <= 0) {\n\t\t\t// devHint(`[KolButton]: Bevor Icon-Only aktiviert wird, muss ein Aria-Label bzw. Label gesetzt werden.`);\n\t\t\t// nextState.set('_iconOnly', false);\n\t\t\t// }\n\t\t\t// },\n\t\t\t// },\n\t\t});\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\twatchString(this, '_id', 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 /\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriButtonCallbacks<unknown>): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_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('_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('_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('_type')\n\tpublic validateType(value?: KoliBriButtonType): void {\n\t\twatchButtonType(this, '_type', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown>): void {\n\t\tsetState(this, '_value', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriButtonVariant): void {\n\t\twatchButtonVariant(this, '_variant', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t /\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\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.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateIconAlign(this._iconAlign);\n\t\tthis.validateIconOnly(this._iconOnly);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n","import { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriCustomIcon, KoliBriIconProp } from '../../types/icon';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { validateIcon } from '../../utils/validators/icon';\nimport { validateLabel } from '../../utils/validators/label';\n\n/\n API\n /\ntype RequiredProps = {\n\tlabel: string;\n};\ntype OptionalProps = {\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\ticon: {\n\t\ttop?: KoliBriCustomIcon;\n\t\tright?: KoliBriCustomIcon;\n\t\tbottom?: KoliBriCustomIcon;\n\t\tleft?: KoliBriCustomIcon;\n\t};\n\ticonOnly: boolean;\n\tlabel: string;\n};\ntype OptionalStates = unknown;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst removeNode = (el?: Node) => {\n\tif (el instanceof Node) {\n\t\tsetTimeout(() => {\n\t\t\tel.parentElement?.removeChild(el);\n\t\t\tel.parentNode?.removeChild(el);\n\t\t});\n\t}\n};\n\n/\n @internal\n /\n@Component({\n\ttag: 'kol-span-wc',\n\tshadow: false,\n})\nexport class KolSpanWc implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'icon-only': this.state._iconOnly,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._icon.top && (\n\t\t\t\t\t<kol-icon\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t'icon top': true,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tstyle={this.state._icon.top.style}\n\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t_icon={this.state._icon.top.icon}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<span>\n\t\t\t\t\t{this.state._icon.left && (\n\t\t\t\t\t\t<kol-icon\n\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t'icon left': true,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={this.state._icon.left.style}\n\t\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t\t_icon={this.state._icon.left.icon}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._iconOnly !== true && this.state._label.length > 0 ? <span>{this.state._label}</span> : ''}\n\n\t\t\t\t\t<span ref={this.state._label.length > 0 \|\| this.state._iconOnly === true ? removeNode : undefined}>\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\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.state._icon.right && (\n\t\t\t\t\t\t<kol-icon\n\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t'icon right': true,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={this.state._icon.right.style}\n\t\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t\t_icon={this.state._icon.right.icon}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t\t{this.state._icon.bottom && (\n\t\t\t\t\t<kol-icon\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t'icon bottom': true,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tstyle={this.state._icon.bottom.style}\n\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t_icon={this.state._icon.bottom.icon}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/\n\t Gibt an, ob nur das Icon angezeigt wird.\n\t /\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/\n\t Gibt einen beschreibenden Text für das Text-Element an.\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_icon: {},\n\t\t_iconOnly: false,\n\t\t_label: '',\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 /\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 (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateIconOnly(this._iconOnly);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as o,g as n}from"./index-50adf9a0.js";import{a as s}from"./reuse-2b3b6999.js";const e=":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}a,button,input,select,textarea{cursor:pointer}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}:host{display:inline-block}:host>kol-button-wc,:host>kol-link-wc{width:inherit}:host>kol-button-wc a,:host>kol-button-wc button,:host>kol-link-wc a,:host>kol-link-wc button{cursor:pointer;display:inline-block;min-height:44px;min-width:44px;padding:0;text-align:center;transition-duration:0.5s;transition-property:background-color, color, border-color;width:inherit}:host>kol-button-wc a:active,:host>kol-button-wc button:active,:host>kol-link-wc a:active,:host>kol-link-wc button:active{outline:0 !important;box-shadow:none !important}:host>kol-button-wc a:disabled,:host>kol-button-wc button:disabled,:host>kol-link-wc a:disabled,:host>kol-link-wc button:disabled{box-shadow:none;cursor:not-allowed;opacity:0.5}",r=class{constructor(o){i(this,o),this.catchRef=i=>{this.ref=i,s(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._icon=void 0,this._iconAlign="left",this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}render(){return t(o,null,t("kol-button-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icon:this._icon,_iconAlign:this._iconAlign,_iconOnly:this._iconOnly,_id:this._id,_label:this._label,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},t("slot",{name:"expert",slot:"expert"})))}get host(){return n(this)}};r.style={default:e};export{r as kol_button};
+import{r as i,h as t,H as o,g as n}from"./index-50adf9a0.js";import{a as s}from"./reuse-2b3b6999.js";const e=":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}:host{display:inline-block}:host>kol-button-wc,:host>kol-link-wc{width:inherit}:host>kol-button-wc a,:host>kol-button-wc button,:host>kol-link-wc a,:host>kol-link-wc button{cursor:pointer;display:inline-block;min-height:44px;min-width:44px;padding:0;text-align:center;transition-duration:0.5s;transition-property:background-color, color, border-color;width:inherit}:host>kol-button-wc a:active,:host>kol-button-wc button:active,:host>kol-link-wc a:active,:host>kol-link-wc button:active{outline:0 !important;box-shadow:none !important}:host>kol-button-wc a:disabled,:host>kol-button-wc button:disabled,:host>kol-link-wc a:disabled,:host>kol-link-wc button:disabled{box-shadow:none;cursor:not-allowed;opacity:0.5}",r=class{constructor(t){i(this,t),this.catchRef=i=>{this.ref=i,s(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._icon=void 0,this._iconAlign="left",this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}render(){return t(o,null,t("kol-button-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icon:this._icon,_iconAlign:this._iconAlign,_iconOnly:this._iconOnly,_id:this._id,_label:this._label,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},t("slot",{name:"expert",slot:"expert"})))}get host(){return n(this)}};r.style={default:e};export{r as kol_button};

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

	@@ -1 +1 @@
1	- {"version":3,"names":["defaultStyleCss","KolButton","this","catchRef","ref","propergateFocus","host","render","h","Host","class","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_icon","_iconAlign","_iconOnly","_id","_label","_on","_role","_tabIndex","_tooltipAlign","_type","_value","name","slot"],"sources":["./src/components/button/style.css?tag=kol-button&mode=default&encapsulation=shadow","./src/components/button/shadow.tsx"],"sourcesContent":["@import '../button.css';\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tKoliBriButtonVariant,\n\tOptionalButtonProps,\n\tRequiredButtonProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Alignment } from '../../types/props/alignment';\nimport { propergateFocus } from '../../utils/reuse';\n\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements Generic.Element.Members<RequiredButtonProps, OptionalButtonProps> {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconAlign={this._iconAlign}\n\t\t\t\t\t_iconOnly={this._iconOnly}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t{/\n\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\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t/}\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/*\n\t Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t /\n\t@Prop() public _ariaControls?: string;\n\n\t/\n\t Gibt an, welchen aktuellen Auswahlstatus der Button 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 Button 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 Buttons 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, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t /\n\t@Prop() public _customClass?: string;\n\n\t/\n\t Gibt an, ob der Button deaktiviert ist.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\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 links oder rechts dargestellt werden soll.\n\t \n\t @deprecated\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 die ID der Schaltfläche an. (Selection, Testing)\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Gibt den Label für die Beschriftung der Schaltfläche an.\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für die Button-Events an.\n\t /\n\t@Prop() public _on?: KoliBriButtonCallbacks<unknown>;\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 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 Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/\n\t Gibt an, welche Typ der Button hat.\n\t /\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/\n\t Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t /\n\t@Prop() public _value?: Stringified<unknown>;\n\n\t/\n\t Gibt an, welche Ausprägung der Button hat.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n}\n"],"mappings":";;;qGAAA,MAAMA,EAAkB,~~g1D~~,MCwBXC,EAAS,M,yBAIJC,KAAAC,SAAYC,IAC5BF,KAAKE,IAAMA,EACXC,EAAgBH,KAAKI,KAAMJ,KAAKE,IAAI,E,gIAmEA,G,wEAeiB,M,qCAYd,O,eAKc,M,6HA8BX,M,WAKA,S,oCAUM,Q,CA7I1CG,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBACCJ,IAAKF,KAAKC,SACVO,MAAO,CACNC,OAAQ,KACR,CAACT,KAAKU,UAAqBV,KAAKU,WAAa,SAC7C,CAACV,KAAKW,cAAyBX,KAAKU,WAAa,iBAAmBV,KAAKW,eAAiB,UAAYX,KAAKW,aAAaC,OAAS,GAElIC,WAAYb,KAAKa,WACjBC,cAAed,KAAKc,cACpBC,aAAcf,KAAKe,aACnBC,cAAehB,KAAKgB,cACpBC,WAAYjB,KAAKiB,WACjBC,cAAelB,KAAKkB,cACpBP,aAAcX,KAAKW,aACnBQ,UAAWnB,KAAKmB,UAChBC,MAAOpB,KAAKoB,MACZC,WAAYrB,KAAKqB,WACjBC,UAAWtB,KAAKsB,UAChBC,IAAKvB,KAAKuB,IACVC,OAAQxB,KAAKwB,OACbC,IAAKzB,KAAKyB,IACVC,MAAO1B,KAAK0B,MACZC,UAAW3B,KAAK2B,UAChBC,cAAe5B,KAAK4B,cACpBC,MAAO7B,KAAK6B,MACZC,OAAQ9B,KAAK8B,OACbpB,SAAUV,KAAKU,UAMfJ,EAAA,QAAMyB,KAAK,SAASC,KAAK,Y"}
1	+ {"version":3,"names":["defaultStyleCss","KolButton","this","catchRef","ref","propergateFocus","host","render","h","Host","class","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_icon","_iconAlign","_iconOnly","_id","_label","_on","_role","_tabIndex","_tooltipAlign","_type","_value","name","slot"],"sources":["./src/components/button/style.css?tag=kol-button&mode=default&encapsulation=shadow","./src/components/button/shadow.tsx"],"sourcesContent":["@import '../button.css';\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport {\n\tAlternativButtonLinkRole,\n\tAriaCurrent,\n\tKoliBriButtonCallbacks,\n\tKoliBriButtonType,\n\tKoliBriButtonVariant,\n\tOptionalButtonProps,\n\tRequiredButtonProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Alignment } from '../../types/props/alignment';\nimport { propergateFocus } from '../../utils/reuse';\n\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements Generic.Element.Members<RequiredButtonProps, OptionalButtonProps> {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconAlign={this._iconAlign}\n\t\t\t\t\t_iconOnly={this._iconOnly}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t{/\n\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\tdie Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.\n\t\t\t\t\t/}\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/*\n\t Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t /\n\t@Prop() public _ariaControls?: string;\n\n\t/\n\t Gibt an, welchen aktuellen Auswahlstatus der Button 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 Button 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 Buttons 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, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t /\n\t@Prop() public _customClass?: string;\n\n\t/\n\t Gibt an, ob der Button deaktiviert ist.\n\t /\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\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 links oder rechts dargestellt werden soll.\n\t \n\t @deprecated\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 die ID der Schaltfläche an. (Selection, Testing)\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Gibt den Label für die Beschriftung der Schaltfläche an.\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Gibt die EventCallback-Funktionen für die Button-Events an.\n\t /\n\t@Prop() public _on?: KoliBriButtonCallbacks<unknown>;\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 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 Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/\n\t Gibt an, welche Typ der Button hat.\n\t /\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/\n\t Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t /\n\t@Prop() public _value?: Stringified<unknown>;\n\n\t/\n\t Gibt an, welche Ausprägung der Button hat.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n}\n"],"mappings":";;;qGAAA,MAAMA,EAAkB,65D,MCwBXC,EAAS,M,yBAIJC,KAAAC,SAAYC,IAC5BF,KAAKE,IAAMA,EACXC,EAAgBH,KAAKI,KAAMJ,KAAKE,IAAI,E,gIAmEA,G,wEAeiB,M,qCAYd,O,eAKc,M,6HA8BX,M,WAKA,S,oCAUM,Q,CA7I1CG,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,iBACCJ,IAAKF,KAAKC,SACVO,MAAO,CACNC,OAAQ,KACR,CAACT,KAAKU,UAAqBV,KAAKU,WAAa,SAC7C,CAACV,KAAKW,cAAyBX,KAAKU,WAAa,iBAAmBV,KAAKW,eAAiB,UAAYX,KAAKW,aAAaC,OAAS,GAElIC,WAAYb,KAAKa,WACjBC,cAAed,KAAKc,cACpBC,aAAcf,KAAKe,aACnBC,cAAehB,KAAKgB,cACpBC,WAAYjB,KAAKiB,WACjBC,cAAelB,KAAKkB,cACpBP,aAAcX,KAAKW,aACnBQ,UAAWnB,KAAKmB,UAChBC,MAAOpB,KAAKoB,MACZC,WAAYrB,KAAKqB,WACjBC,UAAWtB,KAAKsB,UAChBC,IAAKvB,KAAKuB,IACVC,OAAQxB,KAAKwB,OACbC,IAAKzB,KAAKyB,IACVC,MAAO1B,KAAK0B,MACZC,UAAW3B,KAAK2B,UAChBC,cAAe5B,KAAK4B,cACpBC,MAAO7B,KAAK6B,MACZC,OAAQ9B,KAAK8B,OACbpB,SAAUV,KAAKU,UAMfJ,EAAA,QAAMyB,KAAK,SAASC,KAAK,Y"}