npm - @public-ui/components - Versions diffs - 2.1.7 → 2.1.8 - Mend

@public-ui/components 2.1.7 → 2.1.8

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

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

	@@ -1 +1 @@
1	- {"file":"kol-input.js","mappings":"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","names":[],"sources":["src/components/input/component.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/label-has-associated-control /\nimport { handleSlotContent, type MsgPropType, showExpertSlot } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { translate } from '../../i18n';\n\nimport type {\n\tAccessKeyPropType,\n\tAnyIconFontClass,\n\tButtonProps,\n\tIdPropType,\n\tKoliBriCustomIcon,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '../../schema';\nimport { FormFieldMsg } from '../@shared/form-field-msg';\nimport type { Props } from './types';\nimport { KolButtonWcTag, KolIconTag, KolTooltipWcTag } from '../../core/component-names';\n\n/\n @internal\n /\n@Component({\n\ttag: 'kol-input',\n\tshadow: false,\n})\nexport class KolInputWc implements Props {\n\t@Element() private readonly host?: HTMLElement;\n\n\tprivate slotName: string = 'input';\n\n\tpublic componentWillRender(): void {\n\t\tthis.slotName = this._slotName ? this._slotName : 'input';\n\t}\n\n\tprivate catchInputSlot = (slot?: HTMLDivElement): void => {\n\t\thandleSlotContent(this.host!, slot!, this.slotName);\n\t};\n\n\tprivate getIconStyles(icon?: AnyIconFontClass \| KoliBriCustomIcon): Record<string, string> {\n\t\treturn icon && typeof icon === 'object' && icon.style ? icon.style : {};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst isMessageValidError = Boolean(this._msg?._type === 'error' && this._msg._description && this._msg._description?.length > 0);\n\t\tconst hasError = !this._readOnly && isMessageValidError && this._touched === true;\n\t\tconst showFormFieldMsg = Boolean(hasError \|\| (this._msg?._type !== 'error' && this._msg?._description));\n\t\tconst hasExpertSlot = showExpertSlot(this._label);\n\t\tconst hasHint = typeof this._hint === 'string' && this._hint.length > 0;\n\t\tconst useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={clsx('kol-input', this.getModifierClassNameByMsgType(), {\n\t\t\t\t\tdisabled: this._disabled === true,\n\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t'read-only': this._readOnly === true,\n\t\t\t\t\trequired: this._required === true,\n\t\t\t\t\ttouched: this._touched === true,\n\t\t\t\t\t'hidden-error': this._hideError === true,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<label class=\"input-label\" id={!useTooltopInsteadOfLabel ? `${this._id}-label` : undefined} hidden={useTooltopInsteadOfLabel} htmlFor={this._id}>\n\t\t\t\t\t{/ INFO: span is needed for css styling :after content like a star () or optional text ! /}\n\t\t\t\t\t<span class=\"input-label-span\">\n\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! /}\n\t\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t\t</span>\n\t\t\t\t</label>\n\t\t\t\t{hasHint && (\n\t\t\t\t\t<span class=\"hint\" id={`${this._id}-hint`}>\n\t\t\t\t\t\t{this._hint}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tinput: true,\n\t\t\t\t\t\t'icon-left': typeof this._icons?.left === 'object',\n\t\t\t\t\t\t'icon-right': typeof this._icons?.right === 'object',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this._icons?.left && (\n\t\t\t\t\t\t<KolIconTag _label=\"\" _icons={(this._icons?.left as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.left)}></KolIconTag>\n\t\t\t\t\t)}\n\t\t\t\t\t<div ref={this.catchInputSlot} id={this.slotName} class=\"input-slot\"></div>\n\t\t\t\t\t{typeof this._smartButton === 'object' && this._smartButton !== null && (\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t_customClass={this._smartButton._customClass}\n\t\t\t\t\t\t\t_disabled={this._smartButton._disabled}\n\t\t\t\t\t\t\t_icons={this._smartButton._icons}\n\t\t\t\t\t\t\t_hideLabel={true}\n\t\t\t\t\t\t\t_id={this._smartButton._id}\n\t\t\t\t\t\t\t_label={this._smartButton._label}\n\t\t\t\t\t\t\t_on={this._smartButton._on}\n\t\t\t\t\t\t\t_tooltipAlign={this._smartButton._tooltipAlign}\n\t\t\t\t\t\t\t_variant={this._smartButton._variant}\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t)}\n\t\t\t\t\t{this._icons?.right && (\n\t\t\t\t\t\t<KolIconTag _label=\"\" _icons={(this._icons?.right as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.right)}></KolIconTag>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{useTooltopInsteadOfLabel && (\n\t\t\t\t\t<KolTooltipWcTag\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\tclass=\"input-tooltip\"\n\t\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t_id={this._hideLabel ? `${this._id}-label` : undefined}\n\t\t\t\t\t\t_label={this._label}\n\t\t\t\t\t></KolTooltipWcTag>\n\t\t\t\t)}\n\t\t\t\t{showFormFieldMsg && <FormFieldMsg _alert={this._alert} _hideError={this._hideError} _msg={this._msg} _id={this._id} />}\n\t\t\t\t{Array.isArray(this._suggestions) && this._suggestions.length > 0 && (\n\t\t\t\t\t<datalist id={`${this._id}-list`}>\n\t\t\t\t\t\t{this._suggestions.map((option: W3CInputValue) => (\n\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</datalist>\n\t\t\t\t)}\n\t\t\t\t{this._hasCounter && (\n\t\t\t\t\t<span class=\"counter\" aria-atomic=\"true\" aria-live=\"polite\">\n\t\t\t\t\t\t{this._currentLength}\n\t\t\t\t\t\t{this._maxLength && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<span aria-label={translate('kol-of')} role=\"img\">\n\t\t\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{this._maxLength}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t<span>{translate('kol-characters')}</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Defines the elements access key.\n\t /\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/\n\t Defines whether the screen-readers should read out the notification.\n\t * @TODO: Change type back to `AlertPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _alert?: boolean = true;\n\n\t/\n\t @internal\n\t /\n\t@Prop() public _currentLength?: number;\n\n\t/\n\t Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _disabled?: boolean = false;\n\n\t/\n\t Shows the character count on the lower border of the input.\n\t * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/\n\t Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideError?: boolean = false;\n\n\t/\n\t Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t Defines the hint text.\n\t /\n\t@Prop() public _hint?: string = '';\n\n\t/\n\t Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icons?: KoliBriHorizontalIcons;\n\n\t/\n\t Defines the internal ID of the primary component element.\n\t /\n\t@Prop() public _id!: IdPropType;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t /\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/\n\t Defines the maximum number of input characters.\n\t /\n\t@Prop() public _maxLength?: number;\n\n\t/\n\t Defines the properties for a message rendered as Alert component.\n\t /\n\t@Prop() public _msg?: MsgPropType;\n\n\t/\n\t Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/\n\t Gibt an, ob die Komponente kein Label rendern soll.\n\t /\n\t@Prop() public _renderNoLabel?: boolean = false;\n\n\t/\n\t Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _required?: boolean = false;\n\n\t/\n\t Ermöglicht den Slotnamen zu bestimmen. Wird nur verwendet, wenn sonst mehrere Slots mit dem gleichen Namen innerhalb eines Shadow DOMs existieren würden.\n\t * @internal\n\t /\n\t@Prop() public _slotName?: string;\n\n\t/\n\t Suggestions to provide for the input.\n\t /\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/\n\t Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t /\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/\n\t Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t /\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/\n\t Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _touched?: boolean = false;\n\n\tprivate getModifierClassNameByMsgType() {\n\t\tif (this._msg?._type) {\n\t\t\treturn {\n\t\t\t\tdefault: 'msg-type-default',\n\t\t\t\tinfo: 'msg-type-info',\n\t\t\t\tsuccess: 'msg-type-success',\n\t\t\t\twarning: 'msg-type-warning',\n\t\t\t\terror: 'msg-type-error',\n\t\t\t}[this._msg?._type];\n\t\t}\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-input.js","mappings":"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","names":[],"sources":["src/components/input/component.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/label-has-associated-control /\nimport { handleSlotContent, type MsgPropType, showExpertSlot } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { translate } from '../../i18n';\n\nimport type {\n\tAccessKeyPropType,\n\tAnyIconFontClass,\n\tButtonProps,\n\tIdPropType,\n\tKoliBriCustomIcon,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '../../schema';\nimport { FormFieldMsg } from '../@shared/form-field-msg';\nimport type { Props } from './types';\nimport { KolButtonWcTag, KolIconTag, KolTooltipWcTag } from '../../core/component-names';\n\n/\n @internal\n /\n@Component({\n\ttag: 'kol-input',\n\tshadow: false,\n})\nexport class KolInputWc implements Props {\n\t@Element() private readonly host?: HTMLElement;\n\n\tprivate slotName: string = 'input';\n\n\tpublic componentWillRender(): void {\n\t\tthis.slotName = this._slotName ? this._slotName : 'input';\n\t}\n\n\tprivate catchInputSlot = (slot?: HTMLDivElement): void => {\n\t\thandleSlotContent(this.host!, slot!, this.slotName);\n\t};\n\n\tprivate getIconStyles(icon?: AnyIconFontClass \| KoliBriCustomIcon): Record<string, string> {\n\t\treturn icon && typeof icon === 'object' && icon.style ? icon.style : {};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst isMessageValidError = Boolean(this._msg?._type === 'error' && this._msg._description && this._msg._description?.length > 0);\n\t\tconst hasError = !this._readOnly && isMessageValidError && this._touched === true;\n\t\tconst showFormFieldMsg = Boolean(hasError \|\| (this._msg?._type !== 'error' && this._msg?._description));\n\t\tconst hasExpertSlot = showExpertSlot(this._label);\n\t\tconst hasHint = typeof this._hint === 'string' && this._hint.length > 0;\n\t\tconst useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={clsx('kol-input', this.getModifierClassNameByMsgType(), {\n\t\t\t\t\tdisabled: this._disabled === true,\n\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t'read-only': this._readOnly === true,\n\t\t\t\t\trequired: this._required === true,\n\t\t\t\t\ttouched: this._touched === true,\n\t\t\t\t\t'hidden-error': this._hideError === true,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<label class=\"input-label\" id={!useTooltopInsteadOfLabel ? `${this._id}-label` : undefined} hidden={useTooltopInsteadOfLabel} htmlFor={this._id}>\n\t\t\t\t\t{/ INFO: span is needed for css styling :after content like a star () or optional text ! /}\n\t\t\t\t\t<span class=\"input-label-span\">\n\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! /}\n\t\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t\t</span>\n\t\t\t\t</label>\n\t\t\t\t{hasHint && (\n\t\t\t\t\t<span class=\"hint\" id={`${this._id}-hint`}>\n\t\t\t\t\t\t{this._hint}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tinput: true,\n\t\t\t\t\t\t'icon-left': typeof this._icons?.left === 'object',\n\t\t\t\t\t\t'icon-right': typeof this._icons?.right === 'object',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this._icons?.left && (\n\t\t\t\t\t\t<KolIconTag _label=\"\" _icons={(this._icons?.left as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.left)}></KolIconTag>\n\t\t\t\t\t)}\n\t\t\t\t\t<div ref={this.catchInputSlot} id={this.slotName} class=\"input-slot\"></div>\n\t\t\t\t\t{typeof this._smartButton === 'object' && this._smartButton !== null && (\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t_customClass={this._smartButton._customClass}\n\t\t\t\t\t\t\t_disabled={this._smartButton._disabled}\n\t\t\t\t\t\t\t_icons={this._smartButton._icons}\n\t\t\t\t\t\t\t_hideLabel={true}\n\t\t\t\t\t\t\t_id={this._smartButton._id}\n\t\t\t\t\t\t\t_label={this._smartButton._label}\n\t\t\t\t\t\t\t_on={this._smartButton._on}\n\t\t\t\t\t\t\t_tooltipAlign={this._smartButton._tooltipAlign}\n\t\t\t\t\t\t\t_variant={this._smartButton._variant}\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t)}\n\t\t\t\t\t{this._icons?.right && (\n\t\t\t\t\t\t<KolIconTag _label=\"\" _icons={(this._icons?.right as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.right)}></KolIconTag>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{useTooltopInsteadOfLabel && (\n\t\t\t\t\t<KolTooltipWcTag\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\tclass=\"input-tooltip\"\n\t\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t_id={this._hideLabel ? `${this._id}-label` : undefined}\n\t\t\t\t\t\t_label={this._label}\n\t\t\t\t\t></KolTooltipWcTag>\n\t\t\t\t)}\n\t\t\t\t{showFormFieldMsg && <FormFieldMsg _alert={this._alert} _hideError={this._hideError} _msg={this._msg} _id={this._id} />}\n\t\t\t\t{Array.isArray(this._suggestions) && this._suggestions.length > 0 && (\n\t\t\t\t\t<datalist id={`${this._id}-list`}>\n\t\t\t\t\t\t{this._suggestions.map((option: W3CInputValue) => (\n\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</datalist>\n\t\t\t\t)}\n\t\t\t\t{this._hasCounter && (\n\t\t\t\t\t<span class=\"counter\" aria-atomic=\"true\" aria-live=\"polite\" data-testid=\"input-counter\">\n\t\t\t\t\t\t{this._currentLength}\n\t\t\t\t\t\t{this._maxLength && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<span aria-label={translate('kol-of')} role=\"img\">\n\t\t\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{this._maxLength}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t<span>{translate('kol-characters')}</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Defines the elements access key.\n\t /\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/\n\t Defines whether the screen-readers should read out the notification.\n\t * @TODO: Change type back to `AlertPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _alert?: boolean = true;\n\n\t/\n\t @internal\n\t /\n\t@Prop() public _currentLength?: number;\n\n\t/\n\t Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _disabled?: boolean = false;\n\n\t/\n\t Shows the character count on the lower border of the input.\n\t * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/\n\t Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideError?: boolean = false;\n\n\t/\n\t Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t Defines the hint text.\n\t /\n\t@Prop() public _hint?: string = '';\n\n\t/\n\t Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icons?: KoliBriHorizontalIcons;\n\n\t/\n\t Defines the internal ID of the primary component element.\n\t /\n\t@Prop() public _id!: IdPropType;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t /\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/\n\t Defines the maximum number of input characters.\n\t /\n\t@Prop() public _maxLength?: number;\n\n\t/\n\t Defines the properties for a message rendered as Alert component.\n\t /\n\t@Prop() public _msg?: MsgPropType;\n\n\t/\n\t Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/\n\t Gibt an, ob die Komponente kein Label rendern soll.\n\t /\n\t@Prop() public _renderNoLabel?: boolean = false;\n\n\t/\n\t Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _required?: boolean = false;\n\n\t/\n\t Ermöglicht den Slotnamen zu bestimmen. Wird nur verwendet, wenn sonst mehrere Slots mit dem gleichen Namen innerhalb eines Shadow DOMs existieren würden.\n\t * @internal\n\t /\n\t@Prop() public _slotName?: string;\n\n\t/\n\t Suggestions to provide for the input.\n\t /\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/\n\t Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t /\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/\n\t Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t /\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/\n\t Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _touched?: boolean = false;\n\n\tprivate getModifierClassNameByMsgType() {\n\t\tif (this._msg?._type) {\n\t\t\treturn {\n\t\t\t\tdefault: 'msg-type-default',\n\t\t\t\tinfo: 'msg-type-info',\n\t\t\t\tsuccess: 'msg-type-success',\n\t\t\t\twarning: 'msg-type-warning',\n\t\t\t\terror: 'msg-type-error',\n\t\t\t}[this._msg?._type];\n\t\t}\n\t}\n}\n"],"version":3}

package/dist/components/kol-nav.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as translate}from"./i18n2.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{n as KolLinkWcTag,c as KolButtonWcTag,o as KolButtonTag}from"./component-names.js";import{c as watchBoolean,v as devWarning,i as a11yHintLabelingLandmarks,t as devHint,w as watchValidator}from"./prop.validators.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateLabel}from"./label.js";const validateCollapsible=(e,n)=>{watchBoolean(e,"_collapsible",n)},validateHasCompactButton=(e,n)=>{watchBoolean(e,"_hasCompactButton",n)},validateHasIconsWhenExpanded=(e,n)=>{watchBoolean(e,"_hasIconsWhenExpanded",n)},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n    place-items: center;\n  }\n  :not(.is-compact) nav {\n    width: 100%;\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry-item {\n    flex-grow: 1;\n  }\n}",KolNavDefaultStyle0=defaultStyleCss,entryIsLink=e=>"string"==typeof e._href,entryIsButton=e=>{var n;return void 0===e._href&&"function"==typeof(null===(n=e._on)||void 0===n?void 0:n.onClick)},KolNav$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.handleToggleExpansionClick=e=>{e&&(this.state._expandedChildren.includes(e)?this.collapseChildren(e):this.expandChildren(e))},this.linkList=e=>h("ul",{class:"list "+(0===e.deep&&"horizontal"===e.orientation?" horizontal":" vertical"),"data-deep":e.deep},e.links.map(((n,t)=>this.li(e.collapsible,e.hideLabel,e.deep,t,n,e.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_expandedChildren:[]}}expandChildren(e){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,e]})}collapseChildren(e){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter((n=>n!=e))})}entry(e,n,t,a,i){const l=this.state._hasIconsWhenExpanded||this.state._hideLabel?a._icons||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0;return h("div",{class:{entry:!0,"hide-label":n}},entryIsLink(a)?h(KolLinkWcTag,Object.assign({class:"entry-item"},a,{_hideLabel:n,_icons:l})):h(KolButtonWcTag,{class:"entry-item",_label:a._label,_hideLabel:n,_icons:l,_on:{onClick:(e,n)=>{entryIsButton(a)&&"function"==typeof a._on.onClick?a._on.onClick(e,n):this.handleToggleExpansionClick(a._children)}}}),t?this.expandButton(e,a,i):"")}expandButton(e,n,t){return h(KolButtonWcTag,{class:"expand-button",_ariaExpanded:t,_disabled:!e,_icons:"codicon codicon-"+(t?"remove":"add"),_hideLabel:!0,_label:`${translate(t?"kol-nav-label-close":"kol-nav-label-open",{placeholders:{label:n._label}})}`,_on:{onClick:()=>this.handleToggleExpansionClick(n._children)}})}li(e,n,t,a,i,l){const o=!!i._active,s=Array.isArray(i._children)&&i._children.length>0,d=Boolean(i._children&&this.state._expandedChildren.includes(i._children));return h("li",{class:{active:o,expanded:d,"has-children":s},key:a},this.entry(e,n,s,i,d),d&&h(this.linkList,{collapsible:e,hideLabel:n,deep:t+1,links:i._children||[],orientation:l}))}initializeExpandedChildren(){const e=n=>{if(n._active)return n._children&&this.expandChildren(n._children),!0;if(n._children)for(const t of n._children)if(e(t))return this.expandChildren(n._children),!0;return!1};this.state._links.forEach(e)}render(){let e=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(e=!1,devWarning("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const n=!0===this.state._collapsible,t=!0===this.state._hideLabel,a=this.state._orientation;return h(Host,{key:"e5df59a6b0f2955c7ffe0a1b8ae05828d089a03a",class:"kol-nav"},h("div",{key:"5d82a8a378240b280609a81899cb8252983ee0b9",class:{nav:!0,[a]:!0,"is-compact":this.state._hideLabel}},h("nav",{key:"10ccef9a51a0c52f74edeacca8c484cded85ccdd","aria-label":this.state._label,id:"nav"},h(this.linkList,{key:"64913625fc3f3d8ffd61edd3cb6c720b816e1d79",collapsible:n,hideLabel:t,deep:0,links:this.state._links,orientation:a})),e&&h("div",{key:"e6578b70620b8039bc1b9ec85eb994eac960d675",class:"compact"},h(KolButtonTag,{key:"9fa2d5bb11c1ae77020d7329cb0fd70050b4e58d",_ariaControls:"nav",_ariaExpanded:!t,_icons:t?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:translate(t?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_variant:"ghost"}))))}validateCollapsible(e){validateCollapsible(this,e)}validateHasCompactButton(e){validateHasCompactButton(this,e)}validateHasIconsWhenExpanded(e){validateHasIconsWhenExpanded(this,e)}validateHideLabel(e){validateHideLabel(this,e)}validateLabel(e,n,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,e,{required:!0}),a11yHintLabelingLandmarks(e),addNavLabel(this.state._label)}validateLinks(e){watchNavLinks("KolNav",this,e),devHint("[KolNav] The navigation structure is not yet validated recursively.")}validateOrientation(e){watchValidator(this,"_orientation",(e=>"horizontal"===e||"vertical"===e),new Set(["Orientation {horizontal, vertical}"]),e,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}static get style(){return{default:KolNavDefaultStyle0}}},[33,"kol-nav",{_collapsible:[4],_hasCompactButton:[4,"_has-compact-button"],_hasIconsWhenExpanded:[4,"_has-icons-when-expanded"],_hideLabel:[4,"_hide-label"],_label:[1],_links:[1],_orientation:[1],state:[32]},void 0,{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-nav"].forEach((e=>{if("kol-nav"===e)customElements.get(e)||customElements.define(e,KolNav$1)}))}const KolNav=KolNav$1,defineCustomElement=defineCustomElement$1;export{KolNav,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as translate}from"./i18n2.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{n as KolLinkWcTag,c as KolButtonWcTag,o as KolButtonTag}from"./component-names.js";import{c as watchBoolean,v as devWarning,i as a11yHintLabelingLandmarks,t as devHint,w as watchValidator}from"./prop.validators.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateLabel}from"./label.js";const validateCollapsible=(e,n)=>{watchBoolean(e,"_collapsible",n)},validateHasCompactButton=(e,n)=>{watchBoolean(e,"_hasCompactButton",n)},validateHasIconsWhenExpanded=(e,n)=>{watchBoolean(e,"_hasIconsWhenExpanded",n)},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n    place-items: center;\n  }\n  :not(.is-compact) nav {\n    width: 100%;\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .list.horizontal {\n    flex-wrap: wrap;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry-item {\n    flex-grow: 1;\n  }\n}",KolNavDefaultStyle0=defaultStyleCss,entryIsLink=e=>"string"==typeof e._href,entryIsButton=e=>{var n;return void 0===e._href&&"function"==typeof(null===(n=e._on)||void 0===n?void 0:n.onClick)},KolNav$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.handleToggleExpansionClick=e=>{e&&(this.state._expandedChildren.includes(e)?this.collapseChildren(e):this.expandChildren(e))},this.linkList=e=>h("ul",{class:"list "+(0===e.deep&&"horizontal"===e.orientation?" horizontal":" vertical"),"data-deep":e.deep},e.links.map(((n,t)=>this.li(e.collapsible,e.hideLabel,e.deep,t,n,e.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_expandedChildren:[]}}expandChildren(e){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,e]})}collapseChildren(e){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter((n=>n!=e))})}entry(e,n,t,a,i){const l=this.state._hasIconsWhenExpanded||this.state._hideLabel?a._icons||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0;return h("div",{class:{entry:!0,"hide-label":n}},entryIsLink(a)?h(KolLinkWcTag,Object.assign({class:"entry-item"},a,{_hideLabel:n,_icons:l})):h(KolButtonWcTag,{class:"entry-item",_label:a._label,_hideLabel:n,_icons:l,_on:{onClick:(e,n)=>{entryIsButton(a)&&"function"==typeof a._on.onClick?a._on.onClick(e,n):this.handleToggleExpansionClick(a._children)}}}),t?this.expandButton(e,a,i):"")}expandButton(e,n,t){return h(KolButtonWcTag,{class:"expand-button",_ariaExpanded:t,_disabled:!e,_icons:"codicon codicon-"+(t?"remove":"add"),_hideLabel:!0,_label:`${translate(t?"kol-nav-label-close":"kol-nav-label-open",{placeholders:{label:n._label}})}`,_on:{onClick:()=>this.handleToggleExpansionClick(n._children)}})}li(e,n,t,a,i,l){const o=!!i._active,s=Array.isArray(i._children)&&i._children.length>0,d=Boolean(i._children&&this.state._expandedChildren.includes(i._children));return h("li",{class:{active:o,expanded:d,"has-children":s},key:a},this.entry(e,n,s,i,d),d&&h(this.linkList,{collapsible:e,hideLabel:n,deep:t+1,links:i._children||[],orientation:l}))}initializeExpandedChildren(){const e=n=>{if(n._active)return n._children&&this.expandChildren(n._children),!0;if(n._children)for(const t of n._children)if(e(t))return this.expandChildren(n._children),!0;return!1};this.state._links.forEach(e)}render(){let e=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(e=!1,devWarning("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const n=!0===this.state._collapsible,t=!0===this.state._hideLabel,a=this.state._orientation;return h(Host,{key:"e5df59a6b0f2955c7ffe0a1b8ae05828d089a03a",class:"kol-nav"},h("div",{key:"5d82a8a378240b280609a81899cb8252983ee0b9",class:{nav:!0,[a]:!0,"is-compact":this.state._hideLabel}},h("nav",{key:"10ccef9a51a0c52f74edeacca8c484cded85ccdd","aria-label":this.state._label,id:"nav"},h(this.linkList,{key:"64913625fc3f3d8ffd61edd3cb6c720b816e1d79",collapsible:n,hideLabel:t,deep:0,links:this.state._links,orientation:a})),e&&h("div",{key:"e6578b70620b8039bc1b9ec85eb994eac960d675",class:"compact"},h(KolButtonTag,{key:"9fa2d5bb11c1ae77020d7329cb0fd70050b4e58d",_ariaControls:"nav",_ariaExpanded:!t,_icons:t?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:translate(t?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_variant:"ghost"}))))}validateCollapsible(e){validateCollapsible(this,e)}validateHasCompactButton(e){validateHasCompactButton(this,e)}validateHasIconsWhenExpanded(e){validateHasIconsWhenExpanded(this,e)}validateHideLabel(e){validateHideLabel(this,e)}validateLabel(e,n,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,e,{required:!0}),a11yHintLabelingLandmarks(e),addNavLabel(this.state._label)}validateLinks(e){watchNavLinks("KolNav",this,e),devHint("[KolNav] The navigation structure is not yet validated recursively.")}validateOrientation(e){watchValidator(this,"_orientation",(e=>"horizontal"===e||"vertical"===e),new Set(["Orientation {horizontal, vertical}"]),e,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}static get style(){return{default:KolNavDefaultStyle0}}},[33,"kol-nav",{_collapsible:[4],_hasCompactButton:[4,"_has-compact-button"],_hasIconsWhenExpanded:[4,"_has-icons-when-expanded"],_hideLabel:[4,"_hide-label"],_label:[1],_links:[1],_orientation:[1],state:[32]},void 0,{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-nav"].forEach((e=>{if("kol-nav"===e)customElements.get(e)||customElements.define(e,KolNav$1)}))}const KolNav=KolNav$1,defineCustomElement=defineCustomElement$1;export{KolNav,defineCustomElement};

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

	@@ -1 +1 @@
1	- {"file":"kol-nav.js","mappings":"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","names":["KolNav"],"sources":["src/schema/props/collapsible.ts","src/schema/props/has-compact-button.ts","src/schema/props/has-icons-when-expanded.ts","src/components/nav/style.scss?tag=kol-nav&mode=default&encapsulation=shadow","src/components/nav/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types /\nexport type CollapsiblePropType = boolean;\n\n/\n Defines if navigation nodes can be collapsed or not.\n /\nexport type PropCollapsible = {\n\tcollapsible: CollapsiblePropType;\n};\n\n/ validator /\nexport const validateCollapsible = (component: Generic.Element.Component, value?: CollapsiblePropType): void => {\n\twatchBoolean(component, '_collapsible', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\ntype HasCompactButtonPropType = boolean;\n\n/\n Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n /\nexport type PropHasCompactButton = {\n\thasCompactButton: HasCompactButtonPropType;\n};\n\n/ validator /\nexport const validateHasCompactButton = (component: Generic.Element.Component, value?: HasCompactButtonPropType): void => {\n\twatchBoolean(component, '_hasCompactButton', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/ types /\nexport type HasIconsWhenExpandedPropType = boolean;\n\n/\n Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n /\nexport type PropHasIconsWhenExpanded = {\n\thasIconsWhenExpanded: HasIconsWhenExpandedPropType;\n};\n\n/ validator /\nexport const validateHasIconsWhenExpanded = (component: Generic.Element.Component, value?: HasIconsWhenExpandedPropType): void => {\n\twatchBoolean(component, '_hasIconsWhenExpanded', value);\n};\n","@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t:host > div {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t:not(.is-compact) nav {\n\t\twidth: 100%;\n\t}\n\n\t.list {\n\t\tdisplay: flex;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.list.vertical {\n\t\tflex-direction: column;\n\t}\n\n\t.entry {\n\t\tdisplay: flex;\n\t}\n\n\t.entry-item {\n\t\tflex-grow: 1;\n\t}\n}\n","import type {\n\tButtonOrLinkOrTextWithChildrenProps,\n\tButtonWithChildrenProps,\n\tCollapsiblePropType,\n\tHideLabelPropType,\n\tLabelPropType,\n\tLinkProps,\n\tLinkWithChildrenProps,\n\tNavAPI,\n\tNavStates,\n\tOrientation,\n\tStringified,\n} from '../../schema';\nimport {\n\ta11yHintLabelingLandmarks,\n\tdevHint,\n\tdevWarning,\n\tvalidateCollapsible,\n\tvalidateHasCompactButton,\n\tvalidateHasIconsWhenExpanded,\n\tvalidateHideLabel,\n\tvalidateLabel,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from './validation';\nimport { KolButtonTag, KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport type { StencilUnknown } from '../../schema';\n\nconst linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\tif (typeof link === 'object' && typeof link._label === 'string' / && typeof newLink._href === 'string' /) {\n\t\tif (Array.isArray(link._children)) {\n\t\t\treturn linksValidator(link._children);\n\t\t}\n\t\treturn false;\n\t}\n\treturn true;\n};\n\nconst linksValidator = (links: ButtonOrLinkOrTextWithChildrenProps[]): boolean => {\n\tif (Array.isArray(links)) {\n\t\treturn links.find(linkValidator) !== undefined;\n\t}\n\treturn true;\n};\n\nconst entryIsLink = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is LinkWithChildrenProps => {\n\treturn typeof (entryProps as LinkProps)._href === 'string';\n};\n\nconst entryIsButton = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is ButtonWithChildrenProps => {\n\treturn (entryProps as LinkProps)._href === undefined && typeof (entryProps as ButtonWithChildrenProps)._on?.onClick === 'function';\n};\n\n@Component({\n\ttag: 'kol-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolNav implements NavAPI {\n\tprivate expandChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [...this.state._expandedChildren, children],\n\t\t};\n\t}\n\tprivate collapseChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren != children),\n\t\t};\n\t}\n\n\tprivate readonly handleToggleExpansionClick = (children?: ButtonOrLinkOrTextWithChildrenProps[]): void => {\n\t\tif (children) {\n\t\t\tif (this.state._expandedChildren.includes(children)) {\n\t\t\t\tthis.collapseChildren(children);\n\t\t\t} else {\n\t\t\t\tthis.expandChildren(children);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate entry(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\thasChildren: boolean,\n\t\tentry: ButtonOrLinkOrTextWithChildrenProps,\n\t\texpanded: boolean,\n\t): JSX.Element {\n\t\tconst icons =\n\t\t\tthis.state._hasIconsWhenExpanded \|\| this.state._hideLabel\n\t\t\t\t? entry._icons \|\| (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)\n\t\t\t\t: undefined;\n\n\t\treturn (\n\t\t\t<div class={{ entry: true, 'hide-label': hideLabel }}>\n\t\t\t\t{entryIsLink(entry) ? (\n\t\t\t\t\t<KolLinkWcTag class=\"entry-item\" {...entry} _hideLabel={hideLabel} _icons={icons} />\n\t\t\t\t) : (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"entry-item\"\n\t\t\t\t\t\t_label={entry._label}\n\t\t\t\t\t\t_hideLabel={hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: (event: MouseEvent, value: Stringified<StencilUnknown>) => {\n\t\t\t\t\t\t\t\tif (entryIsButton(entry) && typeof entry._on.onClick === 'function') {\n\t\t\t\t\t\t\t\t\tentry._on.onClick(event, value);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tthis.handleToggleExpansionClick(entry._children);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{hasChildren ? this.expandButton(collapsible, entry as ButtonWithChildrenProps, expanded) : ''}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate expandButton(collapsible: boolean, link: ButtonWithChildrenProps, expanded: boolean): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tclass=\"expand-button\"\n\t\t\t\t_ariaExpanded={expanded}\n\t\t\t\t_disabled={!collapsible}\n\t\t\t\t_icons={'codicon codicon-' + (expanded ? 'remove' : 'add')}\n\t\t\t\t_hideLabel\n\t\t\t\t_label={`${expanded ? translate('kol-nav-label-close', { placeholders: { label: link._label } }) : translate('kol-nav-label-open', { placeholders: { label: link._label } })}`}\n\t\t\t\t_on={{ onClick: () => this.handleToggleExpansionClick(link._children) }}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tprivate li(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\tdeep: number,\n\t\tindex: number,\n\t\tlink: ButtonOrLinkOrTextWithChildrenProps,\n\t\torientation: Orientation,\n\t): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={{\n\t\t\t\t\tactive,\n\t\t\t\t\texpanded,\n\t\t\t\t\t'has-children': hasChildren,\n\t\t\t\t}}\n\t\t\t\tkey={index}\n\t\t\t>\n\t\t\t\t{this.entry(collapsible, hideLabel, hasChildren, link, expanded)}\n\t\t\t\t{expanded && <this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={deep + 1} links={link._children \|\| []} orientation={orientation} />}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: {\n\t\tcollapsible: boolean;\n\t\thideLabel: HideLabelPropType;\n\t\tdeep: number;\n\t\tlinks: ButtonOrLinkOrTextWithChildrenProps[];\n\t\torientation: Orientation;\n\t}): JSX.Element => {\n\t\treturn (\n\t\t\t<ul class={`list ${props.deep === 0 && props.orientation === 'horizontal' ? ' horizontal' : ' vertical'}`} data-deep={props.deep}>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tprivate initializeExpandedChildren() {\n\t\t/\n\t\t Recursively process branches and expand branches which are active or have active children somewhere in the tree.\n\t\t * @param {ButtonOrLinkOrTextWithChildrenProps} branch\n\t\t * @return boolean - true indicates that the current branch or a child branch is active\n\t\t /\n\t\tconst handleBranch = (branch: ButtonOrLinkOrTextWithChildrenProps) => {\n\t\t\tif (branch._active) {\n\t\t\t\tif (branch._children) {\n\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t} else if (branch._children) {\n\t\t\t\tfor (const childBranch of branch._children) {\n\t\t\t\t\tif (handleBranch(childBranch)) {\n\t\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false;\n\t\t};\n\t\tthis.state._links.forEach(handleBranch);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tlet hasCompactButton = this.state._hasCompactButton;\n\t\tif (this.state._orientation === 'horizontal' && this.state._hasCompactButton === true) {\n\t\t\thasCompactButton = false;\n\t\t\tdevWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);\n\t\t}\n\t\tconst collapsible = this.state._collapsible === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\t\tconst orientation = this.state._orientation;\n\t\treturn (\n\t\t\t<Host class=\"kol-nav\">\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tnav: true,\n\t\t\t\t\t\t[orientation]: true,\n\t\t\t\t\t\t'is-compact': this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<nav aria-label={this.state._label} id=\"nav\">\n\t\t\t\t\t\t<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={0} links={this.state._links} orientation={orientation}></this.linkList>\n\t\t\t\t\t</nav>\n\t\t\t\t\t{hasCompactButton && (\n\t\t\t\t\t\t<div class=\"compact\">\n\t\t\t\t\t\t\t<KolButtonTag\n\t\t\t\t\t\t\t\t_ariaControls=\"nav\"\n\t\t\t\t\t\t\t\t_ariaExpanded={!hideLabel}\n\t\t\t\t\t\t\t\t_icons={hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left'}\n\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t_label={translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel: this.state._hideLabel === false,\n\t\t\t\t\t\t\t\t\t\t};\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_tooltipAlign=\"right\"\n\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t></KolButtonTag>\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 Defines if navigation nodes can be collapsed or not. Enabled by default.\n\t * @TODO: Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _collapsible?: boolean = true;\n\n\t/\n\t Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n\t /\n\t@Prop() public _hasCompactButton?: boolean = false;\n\n\t/\n\t Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n\t /\n\t@Prop() public _hasIconsWhenExpanded?: boolean = false;\n\n\t/\n\t Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label!: LabelPropType;\n\n\t/\n\t Defines the list of links, buttons or texts to render.\n\t /\n\t@Prop() public _links!: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>;\n\n\t/\n\t Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t@State() public state: NavStates = {\n\t\t_collapsible: true,\n\t\t_hasCompactButton: false,\n\t\t_hasIconsWhenExpanded: false,\n\t\t_hideLabel: false,\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t\t_orientation: 'vertical',\n\t\t_expandedChildren: [],\n\t};\n\n\t@Watch('_collapsible')\n\tpublic validateCollapsible(value?: CollapsiblePropType): void {\n\t\tvalidateCollapsible(this, value);\n\t}\n\n\t@Watch('_hasCompactButton')\n\tpublic validateHasCompactButton(value?: boolean): void {\n\t\tvalidateHasCompactButton(this, value);\n\t}\n\n\t@Watch('_hasIconsWhenExpanded')\n\tpublic validateHasIconsWhenExpanded(value?: boolean): void {\n\t\tvalidateHasIconsWhenExpanded(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType) {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>): void {\n\t\twatchNavLinks('KolNav', this, value);\n\t\tdevHint(`[KolNav] The navigation structure is not yet validated recursively.`);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' \|\| value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t},\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCollapsible(this._collapsible);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateHasCompactButton(this._hasCompactButton);\n\t\tthis.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n\n// console.log(\n// stringifyJson([\n// { _label: '1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n// { _label: '2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n// {\n// _active: true,\n// _label: '3 Navigationspunkt',\n// _href: '#abc',\n// _icons: 'codicon codicon-folder-closed',\n// _children: [\n// { _label: '3.1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n// { _label: '3.2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n// {\n// _active: true,\n// _label: '3.3 Navigationspunkt',\n// _href: '#abc',\n// _children: [\n// { _active: true, _label: '3.3.1 Navigationspunkt (aktiv)', _href: '#abc' },\n// { _label: '3.3.2 Navigationspunkt', _href: '#abc' },\n// ],\n// },\n// {\n// _label: '3.4 Navigationspunkt',\n// _href: '#abc',\n// _children: [\n// { _label: '3.4.1 Navigationspunkt', _href: '#abc' },\n// { _label: '3.4.2 Navigationspunkt', _href: '#abc' },\n// ],\n// },\n// { _label: '3.5 Navigationspunkt', _href: '#abc' },\n// ],\n// },\n// { _label: '4 Navigationspunkt', _href: '#abc' },\n// ])\n// );\n"],"version":3}
1	+ {"file":"kol-nav.js","mappings":"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","names":["KolNav"],"sources":["src/schema/props/collapsible.ts","src/schema/props/has-compact-button.ts","src/schema/props/has-icons-when-expanded.ts","src/components/nav/style.scss?tag=kol-nav&mode=default&encapsulation=shadow","src/components/nav/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types /\nexport type CollapsiblePropType = boolean;\n\n/\n Defines if navigation nodes can be collapsed or not.\n /\nexport type PropCollapsible = {\n\tcollapsible: CollapsiblePropType;\n};\n\n/ validator /\nexport const validateCollapsible = (component: Generic.Element.Component, value?: CollapsiblePropType): void => {\n\twatchBoolean(component, '_collapsible', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\ntype HasCompactButtonPropType = boolean;\n\n/\n Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n /\nexport type PropHasCompactButton = {\n\thasCompactButton: HasCompactButtonPropType;\n};\n\n/ validator /\nexport const validateHasCompactButton = (component: Generic.Element.Component, value?: HasCompactButtonPropType): void => {\n\twatchBoolean(component, '_hasCompactButton', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/ types /\nexport type HasIconsWhenExpandedPropType = boolean;\n\n/\n Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n /\nexport type PropHasIconsWhenExpanded = {\n\thasIconsWhenExpanded: HasIconsWhenExpandedPropType;\n};\n\n/ validator /\nexport const validateHasIconsWhenExpanded = (component: Generic.Element.Component, value?: HasIconsWhenExpandedPropType): void => {\n\twatchBoolean(component, '_hasIconsWhenExpanded', value);\n};\n","@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t:host > div {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t:not(.is-compact) nav {\n\t\twidth: 100%;\n\t}\n\n\t.list {\n\t\tdisplay: flex;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.list.vertical {\n\t\tflex-direction: column;\n\t}\n\n\t.list.horizontal {\n\t\tflex-wrap: wrap;\n\t}\n\n\t.entry {\n\t\tdisplay: flex;\n\t}\n\n\t.entry-item {\n\t\tflex-grow: 1;\n\t}\n}\n","import type {\n\tButtonOrLinkOrTextWithChildrenProps,\n\tButtonWithChildrenProps,\n\tCollapsiblePropType,\n\tHideLabelPropType,\n\tLabelPropType,\n\tLinkProps,\n\tLinkWithChildrenProps,\n\tNavAPI,\n\tNavStates,\n\tOrientation,\n\tStringified,\n} from '../../schema';\nimport {\n\ta11yHintLabelingLandmarks,\n\tdevHint,\n\tdevWarning,\n\tvalidateCollapsible,\n\tvalidateHasCompactButton,\n\tvalidateHasIconsWhenExpanded,\n\tvalidateHideLabel,\n\tvalidateLabel,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from './validation';\nimport { KolButtonTag, KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport type { StencilUnknown } from '../../schema';\n\nconst linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\tif (typeof link === 'object' && typeof link._label === 'string' / && typeof newLink._href === 'string' /) {\n\t\tif (Array.isArray(link._children)) {\n\t\t\treturn linksValidator(link._children);\n\t\t}\n\t\treturn false;\n\t}\n\treturn true;\n};\n\nconst linksValidator = (links: ButtonOrLinkOrTextWithChildrenProps[]): boolean => {\n\tif (Array.isArray(links)) {\n\t\treturn links.find(linkValidator) !== undefined;\n\t}\n\treturn true;\n};\n\nconst entryIsLink = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is LinkWithChildrenProps => {\n\treturn typeof (entryProps as LinkProps)._href === 'string';\n};\n\nconst entryIsButton = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is ButtonWithChildrenProps => {\n\treturn (entryProps as LinkProps)._href === undefined && typeof (entryProps as ButtonWithChildrenProps)._on?.onClick === 'function';\n};\n\n@Component({\n\ttag: 'kol-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolNav implements NavAPI {\n\tprivate expandChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [...this.state._expandedChildren, children],\n\t\t};\n\t}\n\tprivate collapseChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren != children),\n\t\t};\n\t}\n\n\tprivate readonly handleToggleExpansionClick = (children?: ButtonOrLinkOrTextWithChildrenProps[]): void => {\n\t\tif (children) {\n\t\t\tif (this.state._expandedChildren.includes(children)) {\n\t\t\t\tthis.collapseChildren(children);\n\t\t\t} else {\n\t\t\t\tthis.expandChildren(children);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate entry(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\thasChildren: boolean,\n\t\tentry: ButtonOrLinkOrTextWithChildrenProps,\n\t\texpanded: boolean,\n\t): JSX.Element {\n\t\tconst icons =\n\t\t\tthis.state._hasIconsWhenExpanded \|\| this.state._hideLabel\n\t\t\t\t? entry._icons \|\| (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)\n\t\t\t\t: undefined;\n\n\t\treturn (\n\t\t\t<div class={{ entry: true, 'hide-label': hideLabel }}>\n\t\t\t\t{entryIsLink(entry) ? (\n\t\t\t\t\t<KolLinkWcTag class=\"entry-item\" {...entry} _hideLabel={hideLabel} _icons={icons} />\n\t\t\t\t) : (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"entry-item\"\n\t\t\t\t\t\t_label={entry._label}\n\t\t\t\t\t\t_hideLabel={hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: (event: MouseEvent, value: Stringified<StencilUnknown>) => {\n\t\t\t\t\t\t\t\tif (entryIsButton(entry) && typeof entry._on.onClick === 'function') {\n\t\t\t\t\t\t\t\t\tentry._on.onClick(event, value);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tthis.handleToggleExpansionClick(entry._children);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{hasChildren ? this.expandButton(collapsible, entry as ButtonWithChildrenProps, expanded) : ''}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate expandButton(collapsible: boolean, link: ButtonWithChildrenProps, expanded: boolean): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tclass=\"expand-button\"\n\t\t\t\t_ariaExpanded={expanded}\n\t\t\t\t_disabled={!collapsible}\n\t\t\t\t_icons={'codicon codicon-' + (expanded ? 'remove' : 'add')}\n\t\t\t\t_hideLabel\n\t\t\t\t_label={`${expanded ? translate('kol-nav-label-close', { placeholders: { label: link._label } }) : translate('kol-nav-label-open', { placeholders: { label: link._label } })}`}\n\t\t\t\t_on={{ onClick: () => this.handleToggleExpansionClick(link._children) }}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tprivate li(\n\t\tcollapsible: boolean,\n\t\thideLabel: HideLabelPropType,\n\t\tdeep: number,\n\t\tindex: number,\n\t\tlink: ButtonOrLinkOrTextWithChildrenProps,\n\t\torientation: Orientation,\n\t): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={{\n\t\t\t\t\tactive,\n\t\t\t\t\texpanded,\n\t\t\t\t\t'has-children': hasChildren,\n\t\t\t\t}}\n\t\t\t\tkey={index}\n\t\t\t>\n\t\t\t\t{this.entry(collapsible, hideLabel, hasChildren, link, expanded)}\n\t\t\t\t{expanded && <this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={deep + 1} links={link._children \|\| []} orientation={orientation} />}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: {\n\t\tcollapsible: boolean;\n\t\thideLabel: HideLabelPropType;\n\t\tdeep: number;\n\t\tlinks: ButtonOrLinkOrTextWithChildrenProps[];\n\t\torientation: Orientation;\n\t}): JSX.Element => {\n\t\treturn (\n\t\t\t<ul class={`list ${props.deep === 0 && props.orientation === 'horizontal' ? ' horizontal' : ' vertical'}`} data-deep={props.deep}>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tprivate initializeExpandedChildren() {\n\t\t/\n\t\t Recursively process branches and expand branches which are active or have active children somewhere in the tree.\n\t\t * @param {ButtonOrLinkOrTextWithChildrenProps} branch\n\t\t * @return boolean - true indicates that the current branch or a child branch is active\n\t\t /\n\t\tconst handleBranch = (branch: ButtonOrLinkOrTextWithChildrenProps) => {\n\t\t\tif (branch._active) {\n\t\t\t\tif (branch._children) {\n\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t} else if (branch._children) {\n\t\t\t\tfor (const childBranch of branch._children) {\n\t\t\t\t\tif (handleBranch(childBranch)) {\n\t\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false;\n\t\t};\n\t\tthis.state._links.forEach(handleBranch);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tlet hasCompactButton = this.state._hasCompactButton;\n\t\tif (this.state._orientation === 'horizontal' && this.state._hasCompactButton === true) {\n\t\t\thasCompactButton = false;\n\t\t\tdevWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);\n\t\t}\n\t\tconst collapsible = this.state._collapsible === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\t\tconst orientation = this.state._orientation;\n\t\treturn (\n\t\t\t<Host class=\"kol-nav\">\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tnav: true,\n\t\t\t\t\t\t[orientation]: true,\n\t\t\t\t\t\t'is-compact': this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<nav aria-label={this.state._label} id=\"nav\">\n\t\t\t\t\t\t<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={0} links={this.state._links} orientation={orientation}></this.linkList>\n\t\t\t\t\t</nav>\n\t\t\t\t\t{hasCompactButton && (\n\t\t\t\t\t\t<div class=\"compact\">\n\t\t\t\t\t\t\t<KolButtonTag\n\t\t\t\t\t\t\t\t_ariaControls=\"nav\"\n\t\t\t\t\t\t\t\t_ariaExpanded={!hideLabel}\n\t\t\t\t\t\t\t\t_icons={hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left'}\n\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t_label={translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel: this.state._hideLabel === false,\n\t\t\t\t\t\t\t\t\t\t};\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_tooltipAlign=\"right\"\n\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t></KolButtonTag>\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 Defines if navigation nodes can be collapsed or not. Enabled by default.\n\t * @TODO: Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _collapsible?: boolean = true;\n\n\t/\n\t Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n\t /\n\t@Prop() public _hasCompactButton?: boolean = false;\n\n\t/\n\t Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n\t /\n\t@Prop() public _hasIconsWhenExpanded?: boolean = false;\n\n\t/\n\t Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label!: LabelPropType;\n\n\t/\n\t Defines the list of links, buttons or texts to render.\n\t /\n\t@Prop() public _links!: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>;\n\n\t/\n\t Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t@State() public state: NavStates = {\n\t\t_collapsible: true,\n\t\t_hasCompactButton: false,\n\t\t_hasIconsWhenExpanded: false,\n\t\t_hideLabel: false,\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t\t_orientation: 'vertical',\n\t\t_expandedChildren: [],\n\t};\n\n\t@Watch('_collapsible')\n\tpublic validateCollapsible(value?: CollapsiblePropType): void {\n\t\tvalidateCollapsible(this, value);\n\t}\n\n\t@Watch('_hasCompactButton')\n\tpublic validateHasCompactButton(value?: boolean): void {\n\t\tvalidateHasCompactButton(this, value);\n\t}\n\n\t@Watch('_hasIconsWhenExpanded')\n\tpublic validateHasIconsWhenExpanded(value?: boolean): void {\n\t\tvalidateHasIconsWhenExpanded(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType) {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>): void {\n\t\twatchNavLinks('KolNav', this, value);\n\t\tdevHint(`[KolNav] The navigation structure is not yet validated recursively.`);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' \|\| value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t},\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCollapsible(this._collapsible);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateHasCompactButton(this._hasCompactButton);\n\t\tthis.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n\n// console.log(\n// stringifyJson([\n// { _label: '1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n// { _label: '2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n// {\n// _active: true,\n// _label: '3 Navigationspunkt',\n// _href: '#abc',\n// _icons: 'codicon codicon-folder-closed',\n// _children: [\n// { _label: '3.1 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed' },\n// { _label: '3.2 Navigationspunkt', _href: '#abc', _icons: 'codicon codicon-folder-closed', _target: 'asdasd' },\n// {\n// _active: true,\n// _label: '3.3 Navigationspunkt',\n// _href: '#abc',\n// _children: [\n// { _active: true, _label: '3.3.1 Navigationspunkt (aktiv)', _href: '#abc' },\n// { _label: '3.3.2 Navigationspunkt', _href: '#abc' },\n// ],\n// },\n// {\n// _label: '3.4 Navigationspunkt',\n// _href: '#abc',\n// _children: [\n// { _label: '3.4.1 Navigationspunkt', _href: '#abc' },\n// { _label: '3.4.2 Navigationspunkt', _href: '#abc' },\n// ],\n// },\n// { _label: '3.5 Navigationspunkt', _href: '#abc' },\n// ],\n// },\n// { _label: '4 Navigationspunkt', _href: '#abc' },\n// ])\n// );\n"],"version":3}