@public-ui/components 4.1.2-rc.2 → 4.1.2-rc.4

package/dist/components/kol-popover-button-wc.js.map

@@ -1 +1 @@
-{"file":"kol-popover-button-wc.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/schema/props/popover-align.ts","src/components/popover-button/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { validateAlignment } from '../validators';\n\nimport type { AlignPropType } from './align';\n\n/* types */\nexport type PopoverAlignPropType = AlignPropType;\n\n/**\n * Defines where to show the popover preferably: top, right, bottom or left.\n */\nexport type PropPopoverAlign = {\n\tpopoverAlign: PopoverAlignPropType;\n};\n\n/* validator */\nexport const validatePopoverAlign = (component: Generic.Element.Component, value?: PopoverAlignPropType): void => {\n\tvalidateAlignment(component, '_popoverAlign', value);\n};\n","import { autoUpdate } from '@floating-ui/dom';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tIdPropType,\n\tInlinePropType,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { validateInline, validatePopoverAlign } from '../../schema';\nimport type { PopoverButtonProps, PopoverButtonStates } from '../../schema/components/popover-button';\nimport { alignFloatingElements } from '../../utils/align-floating-elements';\nimport clsx from '../../utils/clsx';\n\n/**\n * @internal\n * @slot - The popover content.\n */\n@Component({\n\ttag: 'kol-popover-button-wc',\n\tshadow: false,\n})\n// class implementing PopoverButtonProps and not API because we don't want to repeat the entire state and validation for button props\nexport class KolPopoverButton implements PopoverButtonProps {\n\tprivate refButton?: HTMLKolButtonWcElement;\n\tprivate refPopover?: HTMLDivElement;\n\tprivate cleanupAutoPositioning?: () => void;\n\tprivate on: ButtonCallbacksPropType<StencilUnknown> = {\n\t\tonClick: this.handleButtonClick.bind(this),\n\t};\n\n\t@State() public state: PopoverButtonStates = {\n\t\t_label: '',\n\t\t_popoverAlign: 'bottom',\n\t};\n\t@State() private justClosed = false;\n\t@State() private popoverOpen = false;\n\n\t/**\n\t * Hides the popover programmatically by calling the native hidePopover method.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.refPopover?.hidePopover();\n\t}\n\n\t/**\n\t * Show the popover programmatically by calling the native showPopover method.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async showPopover() {\n\t\tvoid this.refPopover?.showPopover();\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\treturn Promise.resolve(this.refButton?.focus());\n\t}\n\n\t/* Regarding type issue see https://github.com/microsoft/TypeScript/issues/54864 */\n\tprivate handleBeforeToggle(event: Event) {\n\t\tif ((event as ToggleEvent).newState === 'closed') {\n\t\t\tthis.justClosed = true;\n\n\t\t\tsetTimeout(() => {\n\t\t\t\t// Reset the flag after the event loop tick.\n\t\t\t\tthis.justClosed = false;\n\t\t\t}, 10); // timeout of 0 should be sufficient but doesn't work in Safari Mobile (needs further investigation).\n\t\t} else {\n\t\t\tif (this.refPopover) {\n\t\t\t\t/**\n\t\t\t\t * Avoid \"flicker\" by hiding the element until the position is set in the `toggle` event handler. `alignFloatingElements` is responsible for setting the visibility back to 'visible'.\n\t\t\t\t */\n\t\t\t\tthis.refPopover.style.visibility = 'hidden';\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate alignPopover() {\n\t\tif (this.refPopover && this.refButton) {\n\t\t\tvoid alignFloatingElements({\n\t\t\t\talign: this.state._popoverAlign,\n\t\t\t\tfloatingElement: this.refPopover,\n\t\t\t\treferenceElement: this.refButton,\n\t\t\t});\n\t\t}\n\t}\n\n\tprivate handleToggle(event: Event) {\n\t\tthis.popoverOpen = (event as ToggleEvent).newState === 'open';\n\n\t\tif (this.popoverOpen) {\n\t\t\tif (this.refPopover && this.refButton) {\n\t\t\t\tthis.cleanupAutoPositioning = autoUpdate(this.refButton, this.refPopover, () => {\n\t\t\t\t\tthis.alignPopover();\n\t\t\t\t});\n\t\t\t}\n\t\t} else if (this.cleanupAutoPositioning) {\n\t\t\tthis.cleanupAutoPositioning();\n\t\t\tthis.cleanupAutoPositioning = undefined;\n\t\t}\n\t}\n\n\tprivate handleButtonClick() {\n\t\t// If the popover was just closed by native behavior, do nothing (and let it stay closed).\n\t\tif (!this.justClosed) {\n\t\t\tthis.refPopover?.togglePopover();\n\t\t}\n\t}\n\n\tpublic componentDidRender() {\n\t\tthis.refPopover?.addEventListener('toggle', this.handleToggle.bind(this));\n\t\tthis.refPopover?.addEventListener('beforetoggle', this.handleBeforeToggle.bind(this));\n\t}\n\n\tpublic disconnectedCallback() {\n\t\tthis.refPopover?.removeEventListener('toggle', this.handleToggle.bind(this));\n\t\tthis.refPopover?.removeEventListener('beforetoggle', this.handleBeforeToggle.bind(this));\n\t\tthis.cleanupAutoPositioning?.();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={clsx('kol-popover-button', {\n\t\t\t\t\t'kol-popover-button--open': this.popoverOpen,\n\t\t\t\t\t'kol-popover-button--inline': this.state._inline === true,\n\t\t\t\t\t'kol-popover-button--standalone': this.state._inline === false,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_aria-controls=\"popover\"\n\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t_ariaExpanded={this.popoverOpen}\n\t\t\t\t\t_ariaHasPopup={'dialog'}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_inline={this._inline}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this.on}\n\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t\tdata-testid=\"popover-button\"\n\t\t\t\t\tclass=\"kol-popover-button__button\"\n\t\t\t\t\tref={(element) => (this.refButton = element)}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolButtonWcTag>\n\n\t\t\t\t<div ref={(element) => (this.refPopover = element)} data-testid=\"popover-content\" popover=\"auto\" id=\"popover\" class=\"kol-popover-button__popover\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: 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 icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t * @internal\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = false;\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 technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@Watch('_inline')\n\tpublic validateInline(value?: InlinePropType): void {\n\t\tvalidateInline(this, value, {\n\t\t\tdefaultValue: false,\n\t\t});\n\t}\n\n\t@Watch('_popoverAlign')\n\tpublic validatePopoverAlign(value?: PopoverAlignPropType): void {\n\t\tvalidatePopoverAlign(this, value);\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.validateInline(this._inline);\n\t\tthis.validatePopoverAlign(this._popoverAlign);\n\t}\n}\n"],"version":3}
+{"file":"kol-popover-button-wc.js","mappings":"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","names":["KolPopoverButtonWc","__stencil_proxyCustomElement"],"sources":["src/schema/props/popover-align.ts","src/internal/functional-components/popover/component.tsx","src/internal/functional-components/popover/controller.ts","src/components/popover-button/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { validateAlignment } from '../validators';\n\nimport type { AlignPropType } from './align';\n\n/* types */\nexport type PopoverAlignPropType = AlignPropType;\n\n/**\n * Defines where to show the popover preferably: top, right, bottom or left.\n */\nexport type PropPopoverAlign = {\n\tpopoverAlign: PopoverAlignPropType;\n};\n\n/* validator */\nexport const validatePopoverAlign = (component: Generic.Element.Component, value?: PopoverAlignPropType): void => {\n\tvalidateAlignment(component, '_popoverAlign', value);\n};\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from '../../../utils/clsx';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { PopoverApi } from './api';\n\nexport type PopoverFCProps = FunctionalComponentProps<PopoverApi> &\n\tJSXBase.HTMLAttributes<HTMLDivElement> & {\n\t\tpopoverRef?: (el?: HTMLDivElement) => void;\n\t\tarrowRef?: (el?: HTMLDivElement) => void;\n\t};\n\nexport const PopoverFC: FC<PopoverFCProps> = (props) => {\n\tconst { align = 'bottom', popoverRef, arrowRef, class: classNames, ...rest } = props;\n\n\treturn (\n\t\t<div {...rest} class={clsx('kol-popover', classNames)} ref={popoverRef} popover=\"auto\">\n\t\t\t<div class={clsx('kol-popover__arrow', `kol-popover__arrow--${align}`)} ref={arrowRef} />\n\t\t\t<slot />\n\t\t</div>\n\t);\n};\n","import { autoUpdate } from '@floating-ui/dom';\nimport type { AlignPropType } from '../../../schema';\nimport { alignFloatingElements } from '../../../utils/align-floating-elements';\n\nexport class PopoverController {\n\tprivate show: boolean = false;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement;\n\tprivate align: AlignPropType = 'bottom';\n\tprivate cleanupAutoUpdate?: () => void;\n\n\tpublic setShow(value: boolean): void {\n\t\tthis.show = value;\n\t\tif (!this.popoverElement) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst toggleVisibility = (): void => {\n\t\t\tif (!this.popoverElement) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst isOpen = this.popoverElement.matches(':popover-open');\n\t\t\tif (this.show) {\n\t\t\t\tif (!isOpen) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tthis.popoverElement.showPopover();\n\t\t\t\t\t\tthis.setupAutoUpdate();\n\t\t\t\t\t\tvoid this.alignPopover();\n\t\t\t\t\t} catch {\n\t\t\t\t\t\t// Ignore DOMException if already open\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (isOpen) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tthis.popoverElement.hidePopover();\n\t\t\t\t\t\tthis.cleanupAutoUpdate?.();\n\t\t\t\t\t\tthis.cleanupAutoUpdate = undefined;\n\t\t\t\t\t} catch {\n\t\t\t\t\t\t// Ignore DOMException if already closed\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tif (this.popoverElement.isConnected) {\n\t\t\ttoggleVisibility();\n\t\t} else {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\ttoggleVisibility();\n\t\t\t});\n\t\t}\n\t}\n\n\tpublic setPopoverElementRef = (element?: HTMLDivElement): void => {\n\t\tthis.popoverElement = element;\n\t\tthis.arrowElement = element?.querySelector('.kol-popover__arrow') as HTMLDivElement | undefined;\n\t};\n\n\tpublic setTriggerElement = (element?: HTMLElement): void => {\n\t\tthis.triggerElement = element;\n\t};\n\n\tpublic setAlign = (align: AlignPropType): void => {\n\t\tthis.align = align;\n\t};\n\n\tprivate alignPopover = async (): Promise<void> => {\n\t\tif (!this.popoverElement || !this.triggerElement) {\n\t\t\treturn;\n\t\t}\n\n\t\tawait alignFloatingElements({\n\t\t\talign: this.align,\n\t\t\treferenceElement: this.triggerElement,\n\t\t\tarrowElement: this.arrowElement,\n\t\t\tfloatingElement: this.popoverElement,\n\t\t});\n\t};\n\n\tprivate setupAutoUpdate = (): void => {\n\t\tif (!this.popoverElement || !this.triggerElement || this.cleanupAutoUpdate) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.cleanupAutoUpdate = autoUpdate(this.triggerElement, this.popoverElement, () => {\n\t\t\tvoid this.alignPopover();\n\t\t});\n\t};\n\n\tpublic destroy(): void {\n\t\tthis.cleanupAutoUpdate?.();\n\t\tthis.cleanupAutoUpdate = undefined;\n\t\tthis.popoverElement = undefined;\n\t\tthis.arrowElement = undefined;\n\t\tthis.triggerElement = undefined;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Fragment, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { PopoverFC } from '../../internal/functional-components/popover/component';\nimport { PopoverController } from '../../internal/functional-components/popover/controller';\nimport type {\n\tAccessKeyPropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tIdPropType,\n\tInlinePropType,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { validateInline, validatePopoverAlign } from '../../schema';\nimport type { PopoverButtonProps, PopoverButtonStates } from '../../schema/components/popover-button';\nimport clsx from '../../utils/clsx';\nimport { nonce } from '../../utils/dev.utils';\nimport { setFocus } from '../../utils/element-focus';\n\n/**\n * @internal\n * @slot - The popover content.\n *\n * **Note:** The `_on` button callback prop is not supported. The button's `onClick` is reserved for toggling the popover.\n * Manage the popover visibility state and coordinate with the internal popover element.\n */\n@Component({\n\ttag: 'kol-popover-button-wc',\n\tshadow: false,\n})\n// class implementing PopoverButtonProps and not API because we don't want to repeat the entire state and validation for button props\nexport class KolPopoverButtonWc implements PopoverButtonProps, FocusableElement {\n\tprivate refButton?: HTMLKolButtonWcElement;\n\tprivate readonly popoverCtrl = new PopoverController();\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate readonly popoverId = `popover-${nonce()}`;\n\n\tprivate readonly setPopoverElementRef = (element?: HTMLDivElement) => {\n\t\tthis.popoverElement = element;\n\t\tthis.popoverCtrl.setPopoverElementRef(element);\n\t};\n\n\tprivate readonly setButtonElementRef = (element?: HTMLKolButtonWcElement) => {\n\t\tthis.refButton = element;\n\t\tif (element) {\n\t\t\tthis.popoverCtrl.setTriggerElement(element as HTMLElement);\n\t\t}\n\t};\n\n\tprivate on: ButtonCallbacksPropType<StencilUnknown> = {\n\t\tonClick: () => {\n\t\t\tthis.popoverCtrl.setShow(!this.popoverOpen);\n\t\t},\n\t};\n\n\t@State() public state: PopoverButtonStates = {\n\t\t_label: '',\n\t\t_popoverAlign: 'bottom',\n\t\t_inline: false,\n\t};\n\t@State() private popoverOpen = false;\n\n\t/**\n\t * Hides the popover programmatically by calling the PopoverController.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tthis.popoverCtrl.setShow(false);\n\t}\n\n\t/**\n\t * Show the popover programmatically by calling the PopoverController.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async showPopover() {\n\t\tthis.popoverCtrl.setShow(true);\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn setFocus(this.refButton!);\n\t}\n\n\tprivate handleToggle = (event: Event): void => {\n\t\tthis.popoverOpen = (event as ToggleEvent).newState === 'open';\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tclass={clsx('kol-popover-button', {\n\t\t\t\t\t\t'kol-popover-button--open': this.popoverOpen,\n\t\t\t\t\t\t'kol-popover-button--inline': this.state._inline === true,\n\t\t\t\t\t\t'kol-popover-button--standalone': this.state._inline === false,\n\t\t\t\t\t})}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this.popoverId}\n\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t_ariaExpanded={this.popoverOpen}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_inline={this._inline}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this.on}\n\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t\tref={this.setButtonElementRef}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolButtonWcTag>\n\t\t\t\t<PopoverFC align={this.state._popoverAlign || 'bottom'} popoverRef={this.setPopoverElementRef} class=\"kol-popover-button__popover\" id={this.popoverId}>\n\t\t\t\t\t<slot />\n\t\t\t\t</PopoverFC>\n\t\t\t</>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: 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 icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t * @internal\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = false;\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 technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@Watch('_inline')\n\tpublic validateInline(value?: InlinePropType): void {\n\t\tvalidateInline(this, value, {\n\t\t\tdefaultValue: false,\n\t\t});\n\t}\n\n\t@Watch('_popoverAlign')\n\tpublic validatePopoverAlign(value?: PopoverAlignPropType): void {\n\t\tvalidatePopoverAlign(this, value);\n\t\tif (value) {\n\t\t\tthis.popoverCtrl.setAlign(value);\n\t\t}\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.validateInline(this._inline);\n\t\tthis.validatePopoverAlign(this._popoverAlign);\n\t}\n\n\tpublic componentDidRender() {\n\t\t// The popoverElement is already set via popoverRef callback from PopoverFC.\n\t\t// Register the toggle listener once the popover element is available.\n\t\tif (this.popoverElement) {\n\t\t\tthis.popoverElement.addEventListener('toggle', this.handleToggle);\n\t\t}\n\t\t// Ensure align value is synced with controller\n\t\tif (this.state._popoverAlign) {\n\t\t\tthis.popoverCtrl.setAlign(this.state._popoverAlign);\n\t\t}\n\t}\n\n\tpublic disconnectedCallback() {\n\t\tif (this.popoverElement) {\n\t\t\tthis.popoverElement.removeEventListener('toggle', this.handleToggle);\n\t\t}\n\t\tthis.popoverCtrl.destroy();\n\t\tthis.popoverElement = undefined;\n\t}\n}\n"],"version":3}

package/dist/components/kol-popover-button.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{j as KolPopoverButtonWcTag}from"./component-names.js";const defaultStyleCss='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1773990435463"); /* IE9*/\n  src: url("kolicons.eot?t=1773990435463#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1773990435463") format("woff2"), url("kolicons.woff?t=1773990435463") format("woff"), url("kolicons.ttf?t=1773990435463") format("truetype"), url("kolicons.svg?t=1773990435463#kolicons") format("svg"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=" kolicon-"] {\n  font-family: "kolicons";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: "\\ea01";\n}\n\n.kolicon-alert-info::before {\n  content: "\\ea02";\n}\n\n.kolicon-alert-success::before {\n  content: "\\ea03";\n}\n\n.kolicon-alert-warning::before {\n  content: "\\ea04";\n}\n\n.kolicon-check::before {\n  content: "\\ea05";\n}\n\n.kolicon-chevron-double-left::before {\n  content: "\\ea06";\n}\n\n.kolicon-chevron-double-right::before {\n  content: "\\ea07";\n}\n\n.kolicon-chevron-down::before {\n  content: "\\ea08";\n}\n\n.kolicon-chevron-left::before {\n  content: "\\ea09";\n}\n\n.kolicon-chevron-right::before {\n  content: "\\ea0a";\n}\n\n.kolicon-chevron-up::before {\n  content: "\\ea0b";\n}\n\n.kolicon-cogwheel::before {\n  content: "\\ea0c";\n}\n\n.kolicon-cross::before {\n  content: "\\ea0d";\n}\n\n.kolicon-eye-closed::before {\n  content: "\\ea0e";\n}\n\n.kolicon-eye::before {\n  content: "\\ea0f";\n}\n\n.kolicon-house::before {\n  content: "\\ea10";\n}\n\n.kolicon-kolibri::before {\n  content: "\\ea11";\n}\n\n.kolicon-link-external::before {\n  content: "\\ea12";\n}\n\n.kolicon-link::before {\n  content: "\\ea13";\n}\n\n.kolicon-minus::before {\n  content: "\\ea14";\n}\n\n.kolicon-plus::before {\n  content: "\\ea15";\n}\n\n.kolicon-settings::before {\n  content: "\\ea16";\n}\n\n.kolicon-sort-asc::before {\n  content: "\\ea17";\n}\n\n.kolicon-sort-desc::before {\n  content: "\\ea18";\n}\n\n.kolicon-sort-neutral::before {\n  content: "\\ea19";\n}\n\n.kolicon-up::before {\n  content: "\\ea1a";\n}\n\n.kolicon-version::before {\n  content: "\\ea1b";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-popover-button--open .kol-button__tooltip {\n    display: none;\n  }\n  .kol-popover-button--inline .kol-button {\n    min-width: 0;\n    min-height: 1em;\n  }\n}',KolPopoverButton$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.catchRef=n=>{this.ref=n},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){var n;null===(n=this.ref)||void 0===n||n.hidePopover()}async showPopover(){var n;null===(n=this.ref)||void 0===n||n.showPopover()}async focus(){var n;return Promise.resolve(null===(n=this.ref)||void 0===n?void 0:n.focus())}render(){return h(KolPopoverButtonWcTag,{key:"d405c3e4ea58c0d884d854e8bf847f471bc7e4ba",ref:this.catchRef,_accessKey:this._accessKey,_ariaDescription:this._ariaDescription,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_inline:this._inline,_label:this._label,_name:this._name,_popoverAlign:this._popoverAlign,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},h("slot",{key:"9098b79390a2413a30c74badf954b1276941e44d",name:"expert",slot:"expert"}),h("slot",{key:"213ab1212f3b13899c33e46531b6c97e1c28db7b"}))}static get style(){return{default:defaultStyleCss}}},[289,"kol-popover-button",{_accessKey:[1,"_access-key"],_ariaDescription:[1,"_aria-description"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_inline:[4],_label:[1],_name:[1],_popoverAlign:[1,"_popover-align"],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],hidePopover:[64],showPopover:[64],focus:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-popover-button"].forEach(n=>{if("kol-popover-button"===n)customElements.get(n)||customElements.define(n,KolPopoverButton$1)})}const KolPopoverButton=KolPopoverButton$1,defineCustomElement=defineCustomElement$1;export{KolPopoverButton,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{j as KolPopoverButtonWcTag}from"./component-names.js";import{d as delegateFocus,s as setFocus}from"./element-focus.js";const defaultStyleCss='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1774611662986"); /* IE9*/\n  src: url("kolicons.eot?t=1774611662986#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1774611662986") format("woff2"), url("kolicons.woff?t=1774611662986") format("woff"), url("kolicons.ttf?t=1774611662986") format("truetype"), url("kolicons.svg?t=1774611662986#kolicons") format("svg"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=" kolicon-"] {\n  font-family: "kolicons";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: "\\ea01";\n}\n\n.kolicon-alert-info::before {\n  content: "\\ea02";\n}\n\n.kolicon-alert-success::before {\n  content: "\\ea03";\n}\n\n.kolicon-alert-warning::before {\n  content: "\\ea04";\n}\n\n.kolicon-check::before {\n  content: "\\ea05";\n}\n\n.kolicon-chevron-double-left::before {\n  content: "\\ea06";\n}\n\n.kolicon-chevron-double-right::before {\n  content: "\\ea07";\n}\n\n.kolicon-chevron-down::before {\n  content: "\\ea08";\n}\n\n.kolicon-chevron-left::before {\n  content: "\\ea09";\n}\n\n.kolicon-chevron-right::before {\n  content: "\\ea0a";\n}\n\n.kolicon-chevron-up::before {\n  content: "\\ea0b";\n}\n\n.kolicon-cogwheel::before {\n  content: "\\ea0c";\n}\n\n.kolicon-cross::before {\n  content: "\\ea0d";\n}\n\n.kolicon-eye-closed::before {\n  content: "\\ea0e";\n}\n\n.kolicon-eye::before {\n  content: "\\ea0f";\n}\n\n.kolicon-house::before {\n  content: "\\ea10";\n}\n\n.kolicon-kolibri::before {\n  content: "\\ea11";\n}\n\n.kolicon-link-external::before {\n  content: "\\ea12";\n}\n\n.kolicon-link::before {\n  content: "\\ea13";\n}\n\n.kolicon-minus::before {\n  content: "\\ea14";\n}\n\n.kolicon-plus::before {\n  content: "\\ea15";\n}\n\n.kolicon-settings::before {\n  content: "\\ea16";\n}\n\n.kolicon-sort-asc::before {\n  content: "\\ea17";\n}\n\n.kolicon-sort-desc::before {\n  content: "\\ea18";\n}\n\n.kolicon-sort-neutral::before {\n  content: "\\ea19";\n}\n\n.kolicon-up::before {\n  content: "\\ea1a";\n}\n\n.kolicon-version::before {\n  content: "\\ea1b";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-popover {\n    opacity: 0;\n    transition: 0.2s ease-out opacity;\n  }\n  .kol-popover-button--open + .kol-popover {\n    opacity: 1;\n  }\n  .kol-popover-button--open .kol-button__tooltip {\n    display: none;\n  }\n  .kol-popover-button--inline {\n    display: inline-block;\n  }\n  .kol-popover-button--inline .kol-button {\n    min-width: 0;\n    min-height: 1em;\n  }\n}',KolPopoverButton$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.setRef=n=>{this.ref=n},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){var n;null===(n=this.ref)||void 0===n||n.hidePopover()}async showPopover(){var n;null===(n=this.ref)||void 0===n||n.showPopover()}async focus(){return delegateFocus(this.host,()=>setFocus(this.ref))}render(){return h(KolPopoverButtonWcTag,{key:"c23cfecac27ef0322483968dd59817d4ffe83e24",ref:this.setRef,_accessKey:this._accessKey,_ariaDescription:this._ariaDescription,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_inline:this._inline,_label:this._label,_name:this._name,_popoverAlign:this._popoverAlign,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},h("slot",{key:"604c665d1a204675e99a57114afe15ce6aa3d45d",name:"expert",slot:"expert"}),h("slot",{key:"97aaf0fb8e4f96be21a5b1c18c007eb929ceeb1b"}))}get host(){return this}static get style(){return{default:defaultStyleCss}}},[289,"kol-popover-button",{_accessKey:[1,"_access-key"],_ariaDescription:[1,"_aria-description"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_inline:[4],_label:[1],_name:[1],_popoverAlign:[1,"_popover-align"],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],hidePopover:[64],showPopover:[64],focus:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-popover-button"].forEach(n=>{if("kol-popover-button"===n)customElements.get(n)||customElements.define(n,KolPopoverButton$1)})}const KolPopoverButton=KolPopoverButton$1,defineCustomElement=defineCustomElement$1;export{KolPopoverButton,defineCustomElement};

package/dist/components/kol-popover-button.js.map

@@ -1 +1 @@
-{"file":"kol-popover-button.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,uoUAAuoU;;MC8BlpUA,kBAAgB,GAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAP7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AA4BS,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,GAAmC,KAAI;AAC1D,YAAA,IAAI,CAAC,GAAG,GAAG,GAAG;AACf,SAAC;AAwDc,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAO3B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AAU5B,QAAA,IAAO,CAAA,OAAA,GAAoB,KAAK;AAehC,QAAA,IAAa,CAAA,aAAA,GAA0B,QAAQ;AAqB/C,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAK5C,QAAA,IAAK,CAAA,KAAA,GAAwB,QAAQ;AAUrC,QAAA,IAAQ,CAAA,QAAA,GAA2B,QAAQ;AAC1D;AA5IO,IAAA,MAAM,WAAW,GAAA;;AACvB,QAAA,MAAK,MAAA,IAAI,CAAC,GAAG,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,EAAE,CAAA;;AAQtB,IAAA,MAAM,WAAW,GAAA;;AACvB,QAAA,MAAK,MAAA,IAAI,CAAC,GAAG,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,EAAE,CAAA;;AAWtB,IAAA,MAAM,KAAK,GAAA;;AACjB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,GAAG,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE,CAAC;;IAGnC,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,qBAAqB,EACrB,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolPopoverButton","__stencil_proxyCustomElement"],"sources":["src/components/popover-button/style.scss?tag=kol-popover-button&mode=default&encapsulation=shadow","src/components/popover-button/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n@use '../@shared/button.mixin' as *;\n@use '../@shared/popover-button.mixin' as *;\n@use '../tooltip/style' as *;\n\n@layer kol-component {\n\t@include kol-button-styles('kol-button');\n\t@include kol-popover-button-styles;\n\n\t.kol-popover-button {\n\t\t&--open {\n\t\t\t.kol-button__tooltip {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&--inline {\n\t\t\t.kol-button {\n\t\t\t\tmin-width: 0;\n\t\t\t\tmin-height: 1em;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAriaDescriptionPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tInlinePropType,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\n\n/**\n * @slot - The popover content.\n */\n@Component({\n\ttag: 'kol-popover-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPopoverButton implements PopoverButtonProps {\n\tprivate ref?: HTMLKolPopoverButtonWcElement;\n\n\t/**\n\t * Hides the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.ref?.hidePopover();\n\t}\n\n\t/**\n\t * Shows the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async showPopover() {\n\t\tvoid this.ref?.showPopover();\n\t}\n\n\tprivate catchRef = (ref?: HTMLKolPopoverButtonWcElement) => {\n\t\tthis.ref = ref;\n\t};\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\treturn Promise.resolve(this.ref?.focus());\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={this.catchRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_inline={this._inline}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_popoverAlign={this._popoverAlign}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t<slot />\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: 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 icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = false;\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 technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"],"version":3}
+{"file":"kol-popover-button.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,61UAA61U;;MCoCx2UA,kBAAgB,GAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAP7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AA6BkB,QAAA,IAAA,CAAA,MAAM,GAAG,CAAC,GAAmC,KAAI;AACjE,YAAA,IAAI,CAAC,GAAG,GAAG,GAAG;AACf,SAAC;AAwDc,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAO3B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AAU5B,QAAA,IAAO,CAAA,OAAA,GAAoB,KAAK;AAehC,QAAA,IAAa,CAAA,aAAA,GAA0B,QAAQ;AAqB/C,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAK5C,QAAA,IAAK,CAAA,KAAA,GAAwB,QAAQ;AAUrC,QAAA,IAAQ,CAAA,QAAA,GAA2B,QAAQ;AAC1D;AA5IO,IAAA,MAAM,WAAW,GAAA;;AACvB,QAAA,MAAK,MAAA,IAAI,CAAC,GAAG,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,EAAE,CAAA;;AAQtB,IAAA,MAAM,WAAW,GAAA;;AACvB,QAAA,MAAK,MAAA,IAAI,CAAC,GAAG,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,EAAE,CAAA;;AAWtB,IAAA,MAAM,KAAK,GAAA;AACjB,QAAA,OAAO,aAAa,CAAC,IAAI,CAAC,IAAK,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,GAAI,CAAC,CAAC;;IAGrD,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,qBAAqB,EACrB,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolPopoverButton","__stencil_proxyCustomElement"],"sources":["src/components/popover-button/style.scss?tag=kol-popover-button&mode=default&encapsulation=shadow","src/components/popover-button/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n@use '../@shared/button.mixin' as *;\n@use '../@shared/popover-button.mixin' as *;\n@use '../tooltip/style' as *;\n\n@layer kol-component {\n\t@include kol-button-styles('kol-button');\n\t@include kol-popover-button-styles;\n\n\t.kol-popover-button {\n\t\t&--open {\n\t\t\t.kol-button__tooltip {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&--inline {\n\t\t\tdisplay: inline-block;\n\n\t\t\t.kol-button {\n\t\t\t\tmin-width: 0;\n\t\t\t\tmin-height: 1em;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAriaDescriptionPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInlinePropType,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport { delegateFocus, setFocus } from '../../utils/element-focus';\n\n/**\n * A button that toggles the visibility of a popover overlay containing arbitrary content.\n * The popover uses the native HTML Popover API for lightweight, non-modal overlays.\n *\n * @slot - The popover content (displayed when the button is clicked).\n * @slot expert - Custom label content for the button (when `_label` is `false`).\n */\n@Component({\n\ttag: 'kol-popover-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPopoverButton implements PopoverButtonProps, FocusableElement {\n\t@Element() private readonly host?: HTMLKolPopoverButtonElement;\n\tprivate ref?: HTMLKolPopoverButtonWcElement;\n\n\t/**\n\t * Hides the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.ref?.hidePopover();\n\t}\n\n\t/**\n\t * Shows the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async showPopover() {\n\t\tvoid this.ref?.showPopover();\n\t}\n\n\tprivate readonly setRef = (ref?: HTMLKolPopoverButtonWcElement) => {\n\t\tthis.ref = ref;\n\t};\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn delegateFocus(this.host!, () => setFocus(this.ref!));\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={this.setRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_inline={this._inline}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_popoverAlign={this._popoverAlign}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t<slot />\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: 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 icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = false;\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 technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"],"version":3}

package/dist/components/kol-progress.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,proxyCustomElement,Host}from"@stencil/core/internal/client";import{c as createPropDefinition,b as normalizeNumber,n as normalizeString,d as createDependentPropDefinition,B as BaseController,a as BaseWebComponent}from"./base-web-component.js";import"./common.js";import{l as labelProp}from"./label2.js";const maxProp=createPropDefinition("max",100,normalizeNumber,e=>e>0),unitProp=createPropDefinition("unit","%",normalizeString,e=>e.length>0),clampedNumberValueProp=createDependentPropDefinition("value",0,(e,n)=>{const t=normalizeNumber(e);return t<n.min?n.min:t>n.max?n.max:t},e=>e>=0),progressVariantOptions=["bar","cycle"],variantProgressProp=createPropDefinition("variant","bar",e=>{const n=normalizeString(e);if(progressVariantOptions.includes(n))return n;throw new Error(`Invalid progress variant: ${n}`)},()=>!0),FULL_CIRCLE=342,CycleSvg=({max:e,value:n})=>h("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},h("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(n/e*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),BarSvg=({max:e,value:n})=>{const t=n/e*100;return h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},h("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100%"}),h("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100%"}),h("rect",{class:"kol-progress__bar-progress",x:"3",y:"3",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${t}% - 4px)`}}))},createProgressSVG=(e,n,t)=>{switch(e){case"cycle":return h(CycleSvg,{max:n,value:t});case"bar":return h(BarSvg,{max:n,value:t});default:throw new Error(`Progress variant ${e} not implemented.`)}},ProgressFC=e=>{const{label:n,max:t,unit:r,value:o,variant:a,liveValue:l}=e,s="%"===r,i=s?`${Math.round(l/t*100)}`:l,c=s?Math.round(o/t*100):o,d=`${`${(s?100:t)+1}`.length}ch`;return h("div",{class:"kol-progress"},h("div",{"aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===a,"kol-progress__bar":"bar"===a}},"bar"===a&&n&&h("div",{class:"kol-progress__bar-label"},n),createProgressSVG(a,t,o),"cycle"===a&&h("div",{class:"kol-progress__cycle-text"},n&&h("div",{class:"kol-progress__cycle-label"},n),h("div",{class:"kol-progress__cycle-value"},`${c} ${r}`)),"bar"===a&&h("div",{class:"kol-progress__bar-value",style:{width:d}},c),"bar"===a&&h("div",{class:"kol-progress__bar-unit"},r)),h("progress",{class:"visually-hidden","aria-busy":o<t?"true":"false",max:t,value:o}),h("span",{"aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},s?`${i} %`:`${i} von ${t} ${r}`))},progressPropsConfig={optional:[labelProp,unitProp,variantProgressProp],required:[maxProp,clampedNumberValueProp]};class ProgressController extends BaseController{constructor(e,n){super(progressPropsConfig,e,n)}componentWillLoad(e){const{label:n,max:t,unit:r,value:o,variant:a}=e;this.watchLabel(n),this.watchMax(t),this.watchUnit(r),this.watchValue(o),this.watchVariant(a),this.setState("liveValue",this.getRenderProp("value")),this.startLiveValueInterval()}watchLabel(e){labelProp.apply(e,e=>{this.setRenderProp("label",e)})}watchMax(e){maxProp.apply(e,e=>{this.setRenderProp("max",e),this.watchValue(this.getRawProp("value"))})}watchUnit(e){unitProp.apply(e,e=>{this.setRenderProp("unit",e)})}watchValue(e){this.setRawProp("value",e),clampedNumberValueProp.apply(e,e=>{this.setRenderProp("value",e)},{min:0,max:this.getRenderProp("max")})}watchVariant(e){variantProgressProp.apply(e,e=>{this.setRenderProp("variant",e)})}startLiveValueInterval(){this.interval=setInterval(()=>{const e=this.getRenderProp("value");this.setState("liveValue",e)},5e3)}destroy(){this.interval&&(clearInterval(this.interval),this.interval=void 0)}}const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-progress__bar {\n    display: grid;\n    column-gap: 0.05rem;\n    align-items: center;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    grid-template-columns: 1fr auto;\n  }\n  .kol-progress__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-progress__bar svg {\n    grid-area: BAR;\n  }\n  .kol-progress__bar-value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-progress__bar-unit {\n    grid-area: UNIT;\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: #0075ff;\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle {\n    display: grid;\n    align-content: center;\n    justify-items: center;\n    grid-template-areas: \"ALL\";\n    grid-template-columns: auto;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: x-small;\n    text-align: center;\n  }\n  .kol-progress__cycle-text * {\n    background-color: white;\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    transform: rotate(-90deg);\n    transform-origin: 50% 50%;\n    fill: transparent;\n    stroke: #0075ff;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",KolProgress$1=proxyCustomElement(class extends BaseWebComponent{constructor(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow(),this.ctrl=new ProgressController(this.setState,this.getState),this.liveValue=0}watchLabel(e){this.ctrl.watchLabel(e)}watchMax(e){this.ctrl.watchMax(e)}watchUnit(e){this.ctrl.watchUnit(e)}watchValue(e){this.ctrl.watchValue(e)}watchVariant(e){this.ctrl.watchVariant(e)}componentWillLoad(){this.ctrl.componentWillLoad({label:this._label,max:this._max,unit:this._unit,value:this._value,variant:this._variant})}disconnectedCallback(){this.ctrl.destroy()}render(){return h(Host,{key:"8801c8e80e2ee4bfb96dd200064ee6c9da368eb6"},h(ProgressFC,{key:"00f2817835b0654a20cd11f7598f13b298616e06",label:this.ctrl.getRenderProp("label"),max:this.ctrl.getRenderProp("max"),unit:this.ctrl.getRenderProp("unit"),value:this.ctrl.getRenderProp("value"),variant:this.ctrl.getRenderProp("variant"),liveValue:this.liveValue}))}static get watchers(){return{_label:["watchLabel"],_max:["watchMax"],_unit:["watchUnit"],_value:["watchValue"],_variant:["watchVariant"]}}static get style(){return{default:defaultStyleCss}}},[801,"kol-progress",{_label:[1],_max:[2],_unit:[1],_value:[2],_variant:[1],liveValue:[32]},void 0,{_label:["watchLabel"],_max:["watchMax"],_unit:["watchUnit"],_value:["watchValue"],_variant:["watchVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-progress"].forEach(e=>{if("kol-progress"===e)customElements.get(e)||customElements.define(e,KolProgress$1)})}const KolProgress=KolProgress$1,defineCustomElement=defineCustomElement$1;export{KolProgress,defineCustomElement};
+import{h,proxyCustomElement,Host}from"@stencil/core/internal/client";import{B as BaseController,a as BaseWebComponent}from"./base-web-component.js";import"./common.js";import{l as labelProp}from"./label2.js";import{c as createPropDefinition,b as normalizeNumber,n as normalizeString,d as createDependentPropDefinition}from"./normalizers.js";const maxProp=createPropDefinition("max",100,normalizeNumber,e=>e>0),unitProp=createPropDefinition("unit","%",normalizeString,e=>e.length>0),clampedNumberValueProp=createDependentPropDefinition("value",0,(e,n)=>{const t=normalizeNumber(e);return t<n.min?n.min:t>n.max?n.max:t},e=>e>=0),progressVariantOptions=["bar","cycle"],variantProgressProp=createPropDefinition("variant","bar",e=>{const n=normalizeString(e);if(progressVariantOptions.includes(n))return n;throw new Error(`Invalid progress variant: ${n}`)},()=>!0),FULL_CIRCLE=342,CycleSvg=({max:e,value:n})=>h("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},h("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(n/e*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),BarSvg=({max:e,value:n})=>{const t=n/e*100;return h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},h("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100%"}),h("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100%"}),h("rect",{class:"kol-progress__bar-progress",x:"3",y:"3",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${t}% - 4px)`}}))},createProgressSVG=(e,n,t)=>{switch(e){case"cycle":return h(CycleSvg,{max:n,value:t});case"bar":return h(BarSvg,{max:n,value:t});default:throw new Error(`Progress variant ${e} not implemented.`)}},ProgressFC=e=>{const{label:n,max:t,unit:r,value:o,variant:a,liveValue:l}=e,s="%"===r,i=s?`${Math.round(l/t*100)}`:l,c=s?Math.round(o/t*100):o,d=`${`${(s?100:t)+1}`.length}ch`;return h("div",{class:"kol-progress"},h("div",{"aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===a,"kol-progress__bar":"bar"===a}},"bar"===a&&n&&h("div",{class:"kol-progress__bar-label"},n),createProgressSVG(a,t,o),"cycle"===a&&h("div",{class:"kol-progress__cycle-text"},n&&h("div",{class:"kol-progress__cycle-label"},n),h("div",{class:"kol-progress__cycle-value"},`${c} ${r}`)),"bar"===a&&h("div",{class:"kol-progress__bar-value",style:{width:d}},c),"bar"===a&&h("div",{class:"kol-progress__bar-unit"},r)),h("progress",{class:"visually-hidden","aria-busy":o<t?"true":"false",max:t,value:o}),h("span",{"aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},s?`${i} %`:`${i} von ${t} ${r}`))},progressPropsConfig={optional:[labelProp,unitProp,variantProgressProp],required:[maxProp,clampedNumberValueProp]};class ProgressController extends BaseController{constructor(e,n){super(progressPropsConfig,e,n)}componentWillLoad(e){const{label:n,max:t,unit:r,value:o,variant:a}=e;this.watchLabel(n),this.watchMax(t),this.watchUnit(r),this.watchValue(o),this.watchVariant(a),this.setState("liveValue",this.getRenderProp("value")),this.startLiveValueInterval()}watchLabel(e){labelProp.apply(e,e=>{this.setRenderProp("label",e)})}watchMax(e){maxProp.apply(e,e=>{this.setRenderProp("max",e),this.watchValue(this.getRawProp("value"))})}watchUnit(e){unitProp.apply(e,e=>{this.setRenderProp("unit",e)})}watchValue(e){this.setRawProp("value",e),clampedNumberValueProp.apply(e,e=>{this.setRenderProp("value",e)},{min:0,max:this.getRenderProp("max")})}watchVariant(e){variantProgressProp.apply(e,e=>{this.setRenderProp("variant",e)})}startLiveValueInterval(){this.interval=setInterval(()=>{const e=this.getRenderProp("value");this.setState("liveValue",e)},5e3)}destroy(){this.interval&&(clearInterval(this.interval),this.interval=void 0)}}const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-progress__bar {\n    display: grid;\n    align-items: center;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    grid-template-columns: 1fr auto;\n  }\n  .kol-progress__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-progress__bar svg {\n    grid-area: BAR;\n  }\n  .kol-progress__bar-value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-progress__bar-unit {\n    grid-area: UNIT;\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: #0075ff;\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle {\n    display: grid;\n    align-content: center;\n    justify-items: center;\n    grid-template-areas: \"ALL\";\n    grid-template-columns: auto;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: x-small;\n    text-align: center;\n  }\n  .kol-progress__cycle-text * {\n    background-color: white;\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    transform: rotate(-90deg);\n    transform-origin: 50% 50%;\n    fill: transparent;\n    stroke: #0075ff;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",KolProgress$1=proxyCustomElement(class extends BaseWebComponent{constructor(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow(),this.ctrl=new ProgressController(this.setState,this.getState),this.liveValue=0}watchLabel(e){this.ctrl.watchLabel(e)}watchMax(e){this.ctrl.watchMax(e)}watchUnit(e){this.ctrl.watchUnit(e)}watchValue(e){this.ctrl.watchValue(e)}watchVariant(e){this.ctrl.watchVariant(e)}componentWillLoad(){this.ctrl.componentWillLoad({label:this._label,max:this._max,unit:this._unit,value:this._value,variant:this._variant})}disconnectedCallback(){this.ctrl.destroy()}render(){return h(Host,{key:"f4ac31d34bcf5b79af35229f3ffea6243af399a6"},h(ProgressFC,{key:"587e065337158c4301d523f2d2330ce1c46b7bbc",label:this.ctrl.getRenderProp("label"),max:this.ctrl.getRenderProp("max"),unit:this.ctrl.getRenderProp("unit"),value:this.ctrl.getRenderProp("value"),variant:this.ctrl.getRenderProp("variant"),liveValue:this.liveValue}))}static get watchers(){return{_label:["watchLabel"],_max:["watchMax"],_unit:["watchUnit"],_value:["watchValue"],_variant:["watchVariant"]}}static get style(){return{default:defaultStyleCss}}},[801,"kol-progress",{_label:[1],_max:[2],_unit:[1],_value:[2],_variant:[1],liveValue:[32]},void 0,{_label:["watchLabel"],_max:["watchMax"],_unit:["watchUnit"],_value:["watchValue"],_variant:["watchVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-progress"].forEach(e=>{if("kol-progress"===e)customElements.get(e)||customElements.define(e,KolProgress$1)})}const KolProgress=KolProgress$1,defineCustomElement=defineCustomElement$1;export{KolProgress,defineCustomElement};

package/dist/components/kol-progress.js.map

@@ -1 +1 @@
-{"file":"kol-progress.js","mappings":";;;;;;;;AA0BO,MAAM,OAAO,GAAG,oBAAoB,CAAU,KAAK,EAAE,GAAG,EAAE,eAAe,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;;ACExF,MAAM,QAAQ,GAAG,oBAAoB,CAAW,MAAM,EAAE,GAAG,EAAE,eAAe,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;;ACOlG,MAAM,sBAAsB,GAAG,6BAA6B,CAClE,OAAO,EACP,CAAC,EACD,CAAC,KAAK,EAAE,IAAI,KAAI;AACf,IAAA,MAAM,UAAU,GAAG,eAAe,CAAC,KAAK,CAAC;AACzC,IAAA,IAAI,UAAU,GAAG,IAAI,CAAC,GAAG,EAAE;QAC1B,OAAO,IAAI,CAAC,GAAG;;AACT,SAAA,IAAI,UAAU,GAAG,IAAI,CAAC,GAAG,EAAE;QACjC,OAAO,IAAI,CAAC,GAAG;;AAEhB,IAAA,OAAO,UAAU;AAClB,CAAC,EACD,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CACb;;ACtBM,MAAM,sBAAsB,GAAG,CAAC,KAAK,EAAE,OAAO,CAAU;AAIxD,MAAM,mBAAmB,GAAG,oBAAoB,CACtD,SAAS,EACT,KAAK,EACL,CAAC,KAAc,KAAI;AAClB,IAAA,MAAM,GAAG,GAAG,eAAe,CAAC,KAAK,CAAC;AAClC,IAAA,IAAI,sBAAsB,CAAC,QAAQ,CAAC,GAA0B,CAAC,EAAE;AAChE,QAAA,OAAO,GAA0B;;AAElC,IAAA,MAAM,IAAI,KAAK,CAAC,6BAA6B,GAAG,CAAA,CAAE,CAAC;AACpD,CAAC,EACD,MAAM,IAAI,CACV;;AClCD,MAAM,WAAW,GAAG,GAAG;AAEvB,MAAM,QAAQ,GAAuC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,MACnE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACxE,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,gCAAgC,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,EAAc,cAAA,EAAA,GAAG,EAAU,CAAA,EAC5I,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,gCAAgC,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,EAAc,cAAA,EAAA,GAAG,EAAU,CAAA,EAC1I,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,EAAc,cAAA,EAAA,GAAG,EAAU,CAAA,EACtI,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,gCAAgC,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,EAAc,cAAA,EAAA,GAAG,EAAU,CAAA,EAC1I,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,EAAc,cAAA,EAAA,GAAG,EAAU,CAAA,EACtI,CACC,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACN,gBAAA,EAAA,OAAO,sBACJ,CAAA,EAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,GAAG,IAAI,WAAW,CAAC,CAAA,GAAA,EAAM,WAAW,CAAA,EAAA,CAAI,EACpE,cAAA,EAAA,GAAG,EAChB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,MAAM,EAAA,CACC,CACL,CACN;AAED,MAAM,MAAM,GAAuC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,KAAI;IACrE,MAAM,UAAU,GAAG,GAAG,IAAI,KAAK,GAAG,GAAG,CAAC;AACtC,IAAA,QACC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAA,EAClF,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,8BAA8B,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,EAAC,KAAK,EAAC,MAAM,EAAQ,CAAA,EACzJ,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,0BAA0B,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,EAAC,KAAK,EAAC,MAAM,EAAQ,CAAA,EACrJ,CAAA,CAAA,MAAA,EAAA,EACC,KAAK,EAAC,4BAA4B,EAClC,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,MAAM,EAAC,GAAG,EACV,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACR,cAAA,EAAA,GAAG,EAChB,KAAK,EAAE,EAAE,KAAK,EAAE,CAAA,KAAA,EAAQ,UAAU,CAAU,QAAA,CAAA,EAAE,EACvC,CAAA,CACH;AAER,CAAC;AAED,MAAM,iBAAiB,GAAG,CAAC,OAA4B,EAAE,GAAW,EAAE,KAAa,KAAI;IACtF,QAAQ,OAAO;AACd,QAAA,KAAK,OAAO;AACX,YAAA,OAAO,CAAA,CAAC,QAAQ,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAA,CAAI;AAC5C,QAAA,KAAK,KAAK;AACT,YAAA,OAAO,CAAA,CAAC,MAAM,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAA,CAAI;AAC1C,QAAA;AACC,YAAA,MAAM,IAAI,KAAK,CAAC,oBAAoB,OAAiB,CAAA,iBAAA,CAAmB,CAAC;;AAE5E,CAAC;AAEM,MAAM,UAAU,GAA8C,CAAC,KAAK,KAAI;AAC9E,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK;AAC7D,IAAA,MAAM,YAAY,GAAG,IAAI,KAAK,GAAG;IACjC,MAAM,iBAAiB,GAAG,YAAY,GAAG,CAAG,EAAA,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG,IAAI,GAAG,CAAC,EAAE,GAAG,SAAS;IAC7F,MAAM,YAAY,GAAG,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,KAAK;IAC3E,MAAM,gBAAgB,GAAG,CAAG,EAAA,CAAA,EAAG,CAAC,YAAY,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,CAAE,CAAA,CAAC,MAAM,CAAA,EAAA,CAAI;IAE1E,QACC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACxB,CACa,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,MAAM,EAClB,KAAK,EAAE;YACN,qBAAqB,EAAE,OAAO,KAAK,OAAO;YAC1C,mBAAmB,EAAE,OAAO,KAAK,KAAK;SACtC,EAAA,EAEA,OAAO,KAAK,KAAK,IAAI,KAAK,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,yBAAyB,EAAE,EAAA,KAAK,CAAO,EAChF,iBAAiB,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,EACtC,OAAO,KAAK,OAAO,KACnB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,KAAK,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EAAE,KAAK,CAAO,EAC9D,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,2BAA2B,EAAE,EAAA,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAO,CACnE,CACN,EACA,OAAO,KAAK,KAAK,KACjB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,yBAAyB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,EACrE,EAAA,YAAY,CACR,CACN,EACA,OAAO,KAAK,KAAK,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EAAE,IAAI,CAAO,CACjE,EAGN,CAAU,CAAA,UAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,WAAA,EAAY,KAAK,GAAG,GAAG,GAAG,MAAM,GAAG,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAa,CAAA,EAChH,CAAA,CAAA,MAAA,EAAA,EAAA,WAAA,EAAgB,QAAQ,EAAA,eAAA,EAAe,eAAe,EAAC,KAAK,EAAC,iBAAiB,EAAA,EAC5E,YAAY,GAAG,CAAG,EAAA,iBAAiB,IAAI,GAAG,CAAG,EAAA,iBAAiB,QAAQ,GAAG,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAC9E,CACF;AAER,CAAC;;AClGM,MAAM,mBAAmB,GAAG;AAClC,IAAA,QAAQ,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,mBAAmB,CAAC;AACpD,IAAA,QAAQ,EAAE,CAAC,OAAO,EAAE,sBAAsB,CAAC;CACP;;ACA/B,MAAO,kBAAmB,SAAQ,cAA2B,CAAA;IAGlE,WAAmB,CAAA,QAAiC,EAAE,QAAiC,EAAA;AACtF,QAAA,KAAK,CAAC,mBAAmB,EAAE,QAAQ,EAAE,QAAQ,CAAC;;AAGxC,IAAA,iBAAiB,CAAC,KAAsC,EAAA;AAC9D,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK;AAClD,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AACtB,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;AAClB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AACpB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AACtB,QAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;AAE1B,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACvD,IAAI,CAAC,sBAAsB,EAAE;;AAGvB,IAAA,UAAU,CAAC,KAAc,EAAA;QAC/B,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,KAAI;AAC5B,YAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;AAC/B,SAAC,CAAC;;AAGI,IAAA,QAAQ,CAAC,KAAc,EAAA;QAC7B,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,KAAI;AAC1B,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC,CAAC;YAC5B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;AAC1C,SAAC,CAAC;;AAGI,IAAA,SAAS,CAAC,KAAc,EAAA;QAC9B,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,KAAI;AAC3B,YAAA,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC;AAC9B,SAAC,CAAC;;AAGI,IAAA,UAAU,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC;QAC/B,sBAAsB,CAAC,KAAK,CAC3B,KAAK,EACL,CAAC,CAAC,KAAI;AACL,YAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;AAC/B,SAAC,EACD,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAC1C;;AAGK,IAAA,YAAY,CAAC,KAAc,EAAA;QACjC,mBAAmB,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,KAAI;AACtC,YAAA,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC,CAAC;AACjC,SAAC,CAAC;;IAIK,sBAAsB,GAAA;AAC7B,QAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,MAAK;YAChC,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;AACzC,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC;SACjC,EAAE,IAAI,CAAC;;IAGF,OAAO,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC5B,YAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;;;AAG3B;;AC3ED,MAAM,eAAe,GAAG,wnOAAwnO;;MCmBnoOA,aAAY,GAAAC,kBAAA,CAAA,MAAA,WAAA,SAAQ,gBAA6B,CAAA;;;;;;;AAC5C,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,kBAAkB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;AA6DrE,QAAA,IAAS,CAAA,SAAA,GAAW,CAAC;;AApDrB,IAAA,UAAU,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;;AAUrB,IAAA,QAAQ,CAAC,KAAc,EAAA;AAC7B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;;AAUnB,IAAA,SAAS,CAAC,KAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;;AAUpB,IAAA,UAAU,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;;AAUrB,IAAA,YAAY,CAAC,KAA2B,EAAA;AAC9C,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;;IASvB,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;YAC3B,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,GAAG,EAAE,IAAI,CAAC,IAAI;YACd,IAAI,EAAE,IAAI,CAAC,KAAK;YAChB,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,OAAO,EAAE,IAAI,CAAC,QAAQ;AACtB,SAAA,CAAC;;IAGI,oBAAoB,GAAA;AAC1B,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;;IAGb,MAAM,GAAA;AACZ,QAAA,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAA,CAAC,UAAU,EAAA,EAAA,GAAA,EAAA,0CAAA,EACV,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EACvC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EACnC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EACvC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,EAC3C,SAAS,EAAE,IAAI,CAAC,SAAS,EACxB,CAAA,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolProgress","__stencil_proxyCustomElement"],"sources":["src/internal/props/max.ts","src/internal/props/unit.ts","src/internal/props/value-number-clamped.ts","src/internal/props/variant-progress.ts","src/internal/functional-components/progress/component.tsx","src/internal/functional-components/progress/api.tsx","src/internal/functional-components/progress/controller.ts","src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeNumber } from './helpers/normalizers';\n\n/**\n * Max prop for upper boundary of progress and meter elements\n *\n * Description:\n * The max attribute defines the upper bound of a range. It is used by progress bars and\n * meter elements to indicate the total or maximum achievable value.\n *\n * Usage (according to W3C HTML specification and WAI-ARIA):\n * - Must be a positive number greater than 0\n * - Corresponds to the HTML progress element's max attribute\n * - Maps to aria-valuemax in WAI-ARIA to communicate the upper limit to assistive technologies\n * - Default value is 100 (representing 100%)\n *\n * Accessibility:\n * - Screen readers use aria-valuemax together with aria-valuenow to announce progress status\n * - The relationship between value and max must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\n *\n * @see https://html.spec.whatwg.org/multipage/form-elements.html#attr-progress-max\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuemax\n * @see https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html\n */\nexport type MaxProp = SimpleProp<'max', number>;\nexport const maxProp = createPropDefinition<MaxProp>('max', 100, normalizeNumber, (v) => v > 0);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Unit prop for value display formatting\n *\n * Description:\n * Defines the unit of measurement to display alongside a numeric value (e.g., \"%\", \"MB\", \"km/h\").\n * The unit helps users understand the meaning and scale of the displayed value.\n *\n * Usage:\n * - Must be a non-empty string\n * - Default is \"%\" (percentage)\n * - The unit is appended to the displayed value for visual users\n * - Common units: \"%\", \"MB\", \"s\", \"€\", \"kg\"\n *\n * Accessibility:\n * - The unit must be part of the accessible value description for screen reader users\n * - Consider using aria-valuetext to create human-readable descriptions that include the unit\n *   (e.g., aria-valuetext=\"75 percent\" instead of just the number 75)\n * - Units convey meaningful information and must be programmatically determinable\n *   (WCAG 1.3.1 Info and Relationships)\n *\n * @see https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuetext\n */\nexport type UnitProp = SimpleProp<'unit', string>;\nexport const unitProp = createPropDefinition<UnitProp>('unit', '%', normalizeString, (v) => v.length > 0);\n","import type { SimpleProp } from './helpers/factory';\nimport { createDependentPropDefinition } from './helpers/factory';\nimport { normalizeNumber } from './helpers/normalizers';\n\n/**\n * Clamped value prop for bounded numeric ranges\n *\n * Description:\n * Represents a numeric value that is automatically clamped between a minimum and maximum.\n * If the provided value falls outside the allowed range, it is silently adjusted to the\n * nearest boundary. This ensures the value always stays within valid bounds.\n *\n * Usage (according to W3C HTML specification and WAI-ARIA):\n * - Depends on min and max props to define the valid range\n * - Corresponds to the HTML <progress> or <meter> element's value, min, and max attributes\n * - Maps to aria-valuenow, aria-valuemin, and aria-valuemax in WAI-ARIA\n * - Clamping happens transparently; no error is raised for out-of-range inputs\n *\n * Accessibility:\n * - The value boundaries must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\n * - Screen readers use aria-valuemin, aria-valuenow, and aria-valuemax to announce range status\n * - Consider providing aria-valuetext for a human-readable description of the value\n *\n * @see https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuenow\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuemin\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuemax\n */\nexport type ClampedNumberValueProp = SimpleProp<'value', number>;\n\nexport type ClampedNumberValueDeps = {\n\tmin: number;\n\tmax: number;\n};\n\nexport const clampedNumberValueProp = createDependentPropDefinition<ClampedNumberValueProp, ClampedNumberValueDeps>(\n\t'value',\n\t0,\n\t(value, deps) => {\n\t\tconst normalized = normalizeNumber(value);\n\t\tif (normalized < deps.min) {\n\t\t\treturn deps.min;\n\t\t} else if (normalized > deps.max) {\n\t\t\treturn deps.max;\n\t\t}\n\t\treturn normalized;\n\t},\n\t(v) => v >= 0,\n);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Variant prop for progress display style\n *\n * Description:\n * Determines the visual presentation of a progress indicator. Both variants use the\n * WAI-ARIA progressbar role and convey the same semantic information to assistive technologies.\n *\n * Usage (according to W3C HTML specification and WAI-ARIA):\n * - \"bar\": Linear horizontal progress bar (default)\n * - \"cycle\": Circular/radial progress indicator\n * - Both variants must expose role=\"progressbar\" with aria-valuenow, aria-valuemin, and aria-valuemax\n * - The visual variant choice is presentation-only and does not affect the accessible semantics\n *\n * Accessibility:\n * - Progress state must be announced to screen readers (WCAG 4.1.3 Status Messages)\n * - The progress indicator must be perceivable through non-visual means (WCAG 1.1.1 Non-text Content)\n * - Animation in the cycle variant must respect prefers-reduced-motion (WCAG 2.3.3 Animation from Interactions)\n *\n * @see https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element\n * @see https://www.w3.org/TR/wai-aria-1.2/#progressbar\n * @see https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html\n */\nexport const progressVariantOptions = ['bar', 'cycle'] as const;\nexport type ProgressVariantType = (typeof progressVariantOptions)[number];\n\nexport type VariantProgressProp = SimpleProp<'variant', ProgressVariantType>;\nexport const variantProgressProp = createPropDefinition<VariantProgressProp>(\n\t'variant',\n\t'bar',\n\t(value: unknown) => {\n\t\tconst str = normalizeString(value);\n\t\tif (progressVariantOptions.includes(str as ProgressVariantType)) {\n\t\t\treturn str as ProgressVariantType;\n\t\t}\n\t\tthrow new Error(`Invalid progress variant: ${str}`);\n\t},\n\t() => true,\n);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport type { ProgressVariantType } from '../../props';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { ProgressApi } from './api';\n\nconst FULL_CIRCLE = 342;\n\nconst CycleSvg: FC<{ max: number; value: number }> = ({ max, value }) => (\n\t<svg width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<circle class=\"kol-progress__cycle-background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle\n\t\t\tclass=\"kol-progress__cycle-progress\"\n\t\t\tfill=\"currentColor\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstroke-linecap=\"round\"\n\t\t\tstroke-dasharray={`${Math.round((value / max) * FULL_CIRCLE)}px ${FULL_CIRCLE}px`}\n\t\t\tstroke-width=\"6\"\n\t\t\tcx=\"60\"\n\t\t\tcy=\"60\"\n\t\t\tr=\"54.5\"\n\t\t></circle>\n\t</svg>\n);\n\nconst BarSvg: FC<{ max: number; value: number }> = ({ max, value }) => {\n\tconst percentage = 100 * (value / max);\n\treturn (\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\">\n\t\t\t<rect class=\"kol-progress__bar-background\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100%\"></rect>\n\t\t\t<rect class=\"kol-progress__bar-border\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100%\"></rect>\n\t\t\t<rect\n\t\t\t\tclass=\"kol-progress__bar-progress\"\n\t\t\t\tx=\"3\"\n\t\t\t\ty=\"3\"\n\t\t\t\theight=\"7\"\n\t\t\t\trx=\"3.5\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-width=\"3\"\n\t\t\t\tstyle={{ width: `calc(${percentage}% - 4px)` }}\n\t\t\t></rect>\n\t\t</svg>\n\t);\n};\n\nconst createProgressSVG = (variant: ProgressVariantType, max: number, value: number) => {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <CycleSvg max={max} value={value} />;\n\t\tcase 'bar':\n\t\t\treturn <BarSvg max={max} value={value} />;\n\t\tdefault:\n\t\t\tthrow new Error(`Progress variant ${variant as string} not implemented.`);\n\t}\n};\n\nexport const ProgressFC: FC<FunctionalComponentProps<ProgressApi>> = (props) => {\n\tconst { label, max, unit, value, variant, liveValue } = props;\n\tconst isPercentage = unit === '%';\n\tconst liveProgressValue = isPercentage ? `${Math.round((liveValue / max) * 100)}` : liveValue;\n\tconst displayValue = isPercentage ? Math.round((value / max) * 100) : value;\n\tconst valueColumnWidth = `${`${(isPercentage ? 100 : max) + 1}`.length}ch`;\n\n\treturn (\n\t\t<div class=\"kol-progress\">\n\t\t\t<div\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclass={{\n\t\t\t\t\t'kol-progress__cycle': variant === 'cycle',\n\t\t\t\t\t'kol-progress__bar': variant === 'bar',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{variant === 'bar' && label && <div class=\"kol-progress__bar-label\">{label}</div>}\n\t\t\t\t{createProgressSVG(variant, max, value)}\n\t\t\t\t{variant === 'cycle' && (\n\t\t\t\t\t<div class=\"kol-progress__cycle-text\">\n\t\t\t\t\t\t{label && <div class=\"kol-progress__cycle-label\">{label}</div>}\n\t\t\t\t\t\t<div class=\"kol-progress__cycle-value\">{`${displayValue} ${unit}`}</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{variant === 'bar' && (\n\t\t\t\t\t<div class=\"kol-progress__bar-value\" style={{ width: valueColumnWidth }}>\n\t\t\t\t\t\t{displayValue}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{variant === 'bar' && <div class=\"kol-progress__bar-unit\">{unit}</div>}\n\t\t\t</div>\n\n\t\t\t{/* https://css-tricks.com/html5-progress-element/ */}\n\t\t\t<progress class=\"visually-hidden\" aria-busy={value < max ? 'true' : 'false'} max={max} value={value}></progress>\n\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden\">\n\t\t\t\t{isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${max} ${unit}`}\n\t\t\t</span>\n\t\t</div>\n\t);\n};\n","import { clampedNumberValueProp, labelProp, maxProp, unitProp, variantProgressProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const progressPropsConfig = {\n\toptional: [labelProp, unitProp, variantProgressProp],\n\trequired: [maxProp, clampedNumberValueProp],\n} as const satisfies PropsConfigShape;\n\nexport type ProgressApi = ApiFromConfig<typeof progressPropsConfig, { States: { liveValue: number } }>;\n","import { clampedNumberValueProp, labelProp, maxProp, unitProp, variantProgressProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';\nimport type { ProgressApi } from './api';\nimport { progressPropsConfig } from './api';\n\nexport class ProgressController extends BaseController<ProgressApi> implements ControllerInterface<ProgressApi> {\n\tprivate interval?: ReturnType<typeof setInterval>;\n\n\tpublic constructor(setState: SetStateFn<ProgressApi>, getState: GetStateFn<ProgressApi>) {\n\t\tsuper(progressPropsConfig, setState, getState);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<ProgressApi>): void {\n\t\tconst { label, max, unit, value, variant } = props;\n\t\tthis.watchLabel(label);\n\t\tthis.watchMax(max);\n\t\tthis.watchUnit(unit);\n\t\tthis.watchValue(value);\n\t\tthis.watchVariant(variant);\n\n\t\tthis.setState('liveValue', this.getRenderProp('value'));\n\t\tthis.startLiveValueInterval();\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n\n\tpublic watchMax(value?: number): void {\n\t\tmaxProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('max', v);\n\t\t\tthis.watchValue(this.getRawProp('value'));\n\t\t});\n\t}\n\n\tpublic watchUnit(value?: string): void {\n\t\tunitProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('unit', v);\n\t\t});\n\t}\n\n\tpublic watchValue(value?: number): void {\n\t\tthis.setRawProp('value', value);\n\t\tclampedNumberValueProp.apply(\n\t\t\tvalue,\n\t\t\t(v) => {\n\t\t\t\tthis.setRenderProp('value', v);\n\t\t\t},\n\t\t\t{ min: 0, max: this.getRenderProp('max') },\n\t\t);\n\t}\n\n\tpublic watchVariant(value?: string): void {\n\t\tvariantProgressProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('variant', v);\n\t\t});\n\t}\n\n\t// a11y: says the value of the component every 5s\n\tprivate startLiveValueInterval(): void {\n\t\tthis.interval = setInterval(() => {\n\t\t\tconst value = this.getRenderProp('value');\n\t\t\tthis.setState('liveValue', value);\n\t\t}, 5000);\n\t}\n\n\tpublic destroy(): void {\n\t\tif (this.interval) {\n\t\t\tclearInterval(this.interval);\n\t\t\tthis.interval = undefined;\n\t\t}\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-progress {\n\t\t&__bar {\n\t\t\tdisplay: grid;\n\t\t\tcolumn-gap: 0.05rem;\n\t\t\talign-items: center;\n\t\t\tgrid-template-areas:\n\t\t\t\t'LABEL LABEL LABEL'\n\t\t\t\t'BAR VALUE UNIT';\n\t\t\tgrid-template-columns: 1fr auto;\n\n\t\t\t&-label {\n\t\t\t\tgrid-column-end: 2;\n\t\t\t\tgrid-area: LABEL;\n\t\t\t}\n\n\t\t\tsvg {\n\t\t\t\tgrid-area: BAR;\n\t\t\t}\n\n\t\t\t&-value {\n\t\t\t\tgrid-area: VALUE;\n\t\t\t\ttext-align: right;\n\t\t\t}\n\n\t\t\t&-unit {\n\t\t\t\tgrid-area: UNIT;\n\t\t\t}\n\n\t\t\t&-border {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: black;\n\t\t\t}\n\n\t\t\t&-background {\n\t\t\t\tfill: lightgray;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-progress {\n\t\t\t\tfill: #0075ff;\n\t\t\t\tstroke: transparent;\n\n\t\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__cycle {\n\t\t\tdisplay: grid;\n\t\t\talign-content: center;\n\t\t\tjustify-items: center;\n\t\t\tgrid-template-areas: 'ALL';\n\t\t\tgrid-template-columns: auto;\n\n\t\t\t> * {\n\t\t\t\tgrid-area: ALL;\n\t\t\t}\n\n\t\t\t&-text {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: center;\n\n\t\t\t\tfont-size: x-small;\n\t\t\t\ttext-align: center;\n\n\t\t\t\t* {\n\t\t\t\t\tbackground-color: white;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&-background {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: lightgray;\n\t\t\t}\n\n\t\t\t&-border {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: black;\n\t\t\t}\n\n\t\t\t&-whitespace {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-progress {\n\t\t\t\ttransform: rotate(-90deg);\n\t\t\t\ttransform-origin: 50% 50%;\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: #0075ff;\n\n\t\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { ProgressApi } from '../../internal/functional-components/progress/api';\nimport { ProgressFC } from '../../internal/functional-components/progress/component';\nimport { ProgressController } from '../../internal/functional-components/progress/controller';\nimport type { ProgressVariantType } from '../../internal/props';\n\n/**\n * The **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants.\n */\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolProgress extends BaseWebComponent<ProgressApi> implements WebComponentInterface<ProgressApi> {\n\tprivate readonly ctrl = new ProgressController(this.setState, this.getState);\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()\n\tpublic _label?: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Defines the maximum value of the element.\n\t */\n\t@Prop()\n\tpublic _max!: number;\n\n\t@Watch('_max')\n\tpublic watchMax(value?: number): void {\n\t\tthis.ctrl.watchMax(value);\n\t}\n\n\t/**\n\t * Defines the unit of the step values (not shown).\n\t */\n\t@Prop()\n\tpublic _unit?: string;\n\n\t@Watch('_unit')\n\tpublic watchUnit(value?: string): void {\n\t\tthis.ctrl.watchUnit(value);\n\t}\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop()\n\tpublic _value!: number;\n\n\t@Watch('_value')\n\tpublic watchValue(value?: number): void {\n\t\tthis.ctrl.watchValue(value);\n\t}\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop()\n\tpublic _variant?: ProgressVariantType;\n\n\t@Watch('_variant')\n\tpublic watchVariant(value?: ProgressVariantType): void {\n\t\tthis.ctrl.watchVariant(value);\n\t}\n\n\t/**\n\t * A11y: Aria live value\n\t */\n\t@State()\n\tpublic liveValue: number = 0;\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tlabel: this._label,\n\t\t\tmax: this._max,\n\t\t\tunit: this._unit,\n\t\t\tvalue: this._value,\n\t\t\tvariant: this._variant,\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ctrl.destroy();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<ProgressFC\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tmax={this.ctrl.getRenderProp('max')}\n\t\t\t\t\tunit={this.ctrl.getRenderProp('unit')}\n\t\t\t\t\tvalue={this.ctrl.getRenderProp('value')}\n\t\t\t\t\tvariant={this.ctrl.getRenderProp('variant')}\n\t\t\t\t\tliveValue={this.liveValue}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-progress.js","mappings":"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","names":["KolProgress","__stencil_proxyCustomElement"],"sources":["src/internal/props/max.ts","src/internal/props/unit.ts","src/internal/props/value-number-clamped.ts","src/internal/props/variant-progress.ts","src/internal/functional-components/progress/component.tsx","src/internal/functional-components/progress/api.tsx","src/internal/functional-components/progress/controller.ts","src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeNumber } from './helpers/normalizers';\n\n/**\n * Max prop for upper boundary of progress and meter elements\n *\n * Description:\n * The max attribute defines the upper bound of a range. It is used by progress bars and\n * meter elements to indicate the total or maximum achievable value.\n *\n * Usage (according to W3C HTML specification and WAI-ARIA):\n * - Must be a positive number greater than 0\n * - Corresponds to the HTML progress element's max attribute\n * - Maps to aria-valuemax in WAI-ARIA to communicate the upper limit to assistive technologies\n * - Default value is 100 (representing 100%)\n *\n * Accessibility:\n * - Screen readers use aria-valuemax together with aria-valuenow to announce progress status\n * - The relationship between value and max must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\n *\n * @see https://html.spec.whatwg.org/multipage/form-elements.html#attr-progress-max\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuemax\n * @see https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html\n */\nexport type MaxProp = SimpleProp<'max', number>;\nexport const maxProp = createPropDefinition<MaxProp>('max', 100, normalizeNumber, (v) => v > 0);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Unit prop for value display formatting\n *\n * Description:\n * Defines the unit of measurement to display alongside a numeric value (e.g., \"%\", \"MB\", \"km/h\").\n * The unit helps users understand the meaning and scale of the displayed value.\n *\n * Usage:\n * - Must be a non-empty string\n * - Default is \"%\" (percentage)\n * - The unit is appended to the displayed value for visual users\n * - Common units: \"%\", \"MB\", \"s\", \"€\", \"kg\"\n *\n * Accessibility:\n * - The unit must be part of the accessible value description for screen reader users\n * - Consider using aria-valuetext to create human-readable descriptions that include the unit\n *   (e.g., aria-valuetext=\"75 percent\" instead of just the number 75)\n * - Units convey meaningful information and must be programmatically determinable\n *   (WCAG 1.3.1 Info and Relationships)\n *\n * @see https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuetext\n */\nexport type UnitProp = SimpleProp<'unit', string>;\nexport const unitProp = createPropDefinition<UnitProp>('unit', '%', normalizeString, (v) => v.length > 0);\n","import type { SimpleProp } from './helpers/factory';\nimport { createDependentPropDefinition } from './helpers/factory';\nimport { normalizeNumber } from './helpers/normalizers';\n\n/**\n * Clamped value prop for bounded numeric ranges\n *\n * Description:\n * Represents a numeric value that is automatically clamped between a minimum and maximum.\n * If the provided value falls outside the allowed range, it is silently adjusted to the\n * nearest boundary. This ensures the value always stays within valid bounds.\n *\n * Usage (according to W3C HTML specification and WAI-ARIA):\n * - Depends on min and max props to define the valid range\n * - Corresponds to the HTML <progress> or <meter> element's value, min, and max attributes\n * - Maps to aria-valuenow, aria-valuemin, and aria-valuemax in WAI-ARIA\n * - Clamping happens transparently; no error is raised for out-of-range inputs\n *\n * Accessibility:\n * - The value boundaries must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\n * - Screen readers use aria-valuemin, aria-valuenow, and aria-valuemax to announce range status\n * - Consider providing aria-valuetext for a human-readable description of the value\n *\n * @see https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuenow\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuemin\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuemax\n */\nexport type ClampedNumberValueProp = SimpleProp<'value', number>;\n\nexport type ClampedNumberValueDeps = {\n\tmin: number;\n\tmax: number;\n};\n\nexport const clampedNumberValueProp = createDependentPropDefinition<ClampedNumberValueProp, ClampedNumberValueDeps>(\n\t'value',\n\t0,\n\t(value, deps) => {\n\t\tconst normalized = normalizeNumber(value);\n\t\tif (normalized < deps.min) {\n\t\t\treturn deps.min;\n\t\t} else if (normalized > deps.max) {\n\t\t\treturn deps.max;\n\t\t}\n\t\treturn normalized;\n\t},\n\t(v) => v >= 0,\n);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Variant prop for progress display style\n *\n * Description:\n * Determines the visual presentation of a progress indicator. Both variants use the\n * WAI-ARIA progressbar role and convey the same semantic information to assistive technologies.\n *\n * Usage (according to W3C HTML specification and WAI-ARIA):\n * - \"bar\": Linear horizontal progress bar (default)\n * - \"cycle\": Circular/radial progress indicator\n * - Both variants must expose role=\"progressbar\" with aria-valuenow, aria-valuemin, and aria-valuemax\n * - The visual variant choice is presentation-only and does not affect the accessible semantics\n *\n * Accessibility:\n * - Progress state must be announced to screen readers (WCAG 4.1.3 Status Messages)\n * - The progress indicator must be perceivable through non-visual means (WCAG 1.1.1 Non-text Content)\n * - Animation in the cycle variant must respect prefers-reduced-motion (WCAG 2.3.3 Animation from Interactions)\n *\n * @see https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element\n * @see https://www.w3.org/TR/wai-aria-1.2/#progressbar\n * @see https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html\n */\nexport const progressVariantOptions = ['bar', 'cycle'] as const;\nexport type ProgressVariantType = (typeof progressVariantOptions)[number];\n\nexport type VariantProgressProp = SimpleProp<'variant', ProgressVariantType>;\nexport const variantProgressProp = createPropDefinition<VariantProgressProp>(\n\t'variant',\n\t'bar',\n\t(value: unknown) => {\n\t\tconst str = normalizeString(value);\n\t\tif (progressVariantOptions.includes(str as ProgressVariantType)) {\n\t\t\treturn str as ProgressVariantType;\n\t\t}\n\t\tthrow new Error(`Invalid progress variant: ${str}`);\n\t},\n\t() => true,\n);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport type { ProgressVariantType } from '../../props';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { ProgressApi } from './api';\n\nconst FULL_CIRCLE = 342;\n\nconst CycleSvg: FC<{ max: number; value: number }> = ({ max, value }) => (\n\t<svg width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<circle class=\"kol-progress__cycle-background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle\n\t\t\tclass=\"kol-progress__cycle-progress\"\n\t\t\tfill=\"currentColor\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstroke-linecap=\"round\"\n\t\t\tstroke-dasharray={`${Math.round((value / max) * FULL_CIRCLE)}px ${FULL_CIRCLE}px`}\n\t\t\tstroke-width=\"6\"\n\t\t\tcx=\"60\"\n\t\t\tcy=\"60\"\n\t\t\tr=\"54.5\"\n\t\t></circle>\n\t</svg>\n);\n\nconst BarSvg: FC<{ max: number; value: number }> = ({ max, value }) => {\n\tconst percentage = 100 * (value / max);\n\treturn (\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\">\n\t\t\t<rect class=\"kol-progress__bar-background\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100%\"></rect>\n\t\t\t<rect class=\"kol-progress__bar-border\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100%\"></rect>\n\t\t\t<rect\n\t\t\t\tclass=\"kol-progress__bar-progress\"\n\t\t\t\tx=\"3\"\n\t\t\t\ty=\"3\"\n\t\t\t\theight=\"7\"\n\t\t\t\trx=\"3.5\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-width=\"3\"\n\t\t\t\tstyle={{ width: `calc(${percentage}% - 4px)` }}\n\t\t\t></rect>\n\t\t</svg>\n\t);\n};\n\nconst createProgressSVG = (variant: ProgressVariantType, max: number, value: number) => {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <CycleSvg max={max} value={value} />;\n\t\tcase 'bar':\n\t\t\treturn <BarSvg max={max} value={value} />;\n\t\tdefault:\n\t\t\tthrow new Error(`Progress variant ${variant as string} not implemented.`);\n\t}\n};\n\nexport const ProgressFC: FC<FunctionalComponentProps<ProgressApi>> = (props) => {\n\tconst { label, max, unit, value, variant, liveValue } = props;\n\tconst isPercentage = unit === '%';\n\tconst liveProgressValue = isPercentage ? `${Math.round((liveValue / max) * 100)}` : liveValue;\n\tconst displayValue = isPercentage ? Math.round((value / max) * 100) : value;\n\tconst valueColumnWidth = `${`${(isPercentage ? 100 : max) + 1}`.length}ch`;\n\n\treturn (\n\t\t<div class=\"kol-progress\">\n\t\t\t<div\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclass={{\n\t\t\t\t\t'kol-progress__cycle': variant === 'cycle',\n\t\t\t\t\t'kol-progress__bar': variant === 'bar',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{variant === 'bar' && label && <div class=\"kol-progress__bar-label\">{label}</div>}\n\t\t\t\t{createProgressSVG(variant, max, value)}\n\t\t\t\t{variant === 'cycle' && (\n\t\t\t\t\t<div class=\"kol-progress__cycle-text\">\n\t\t\t\t\t\t{label && <div class=\"kol-progress__cycle-label\">{label}</div>}\n\t\t\t\t\t\t<div class=\"kol-progress__cycle-value\">{`${displayValue} ${unit}`}</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{variant === 'bar' && (\n\t\t\t\t\t<div class=\"kol-progress__bar-value\" style={{ width: valueColumnWidth }}>\n\t\t\t\t\t\t{displayValue}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{variant === 'bar' && <div class=\"kol-progress__bar-unit\">{unit}</div>}\n\t\t\t</div>\n\n\t\t\t{/* https://css-tricks.com/html5-progress-element/ */}\n\t\t\t<progress class=\"visually-hidden\" aria-busy={value < max ? 'true' : 'false'} max={max} value={value}></progress>\n\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden\">\n\t\t\t\t{isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${max} ${unit}`}\n\t\t\t</span>\n\t\t</div>\n\t);\n};\n","import { clampedNumberValueProp, labelProp, maxProp, unitProp, variantProgressProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const progressPropsConfig = {\n\toptional: [labelProp, unitProp, variantProgressProp],\n\trequired: [maxProp, clampedNumberValueProp],\n} as const satisfies PropsConfigShape;\n\nexport type ProgressApi = ApiFromConfig<typeof progressPropsConfig, { States: { liveValue: number } }>;\n","import { clampedNumberValueProp, labelProp, maxProp, unitProp, variantProgressProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';\nimport type { ProgressApi } from './api';\nimport { progressPropsConfig } from './api';\n\nexport class ProgressController extends BaseController<ProgressApi> implements ControllerInterface<ProgressApi> {\n\tprivate interval?: ReturnType<typeof setInterval>;\n\n\tpublic constructor(setState: SetStateFn<ProgressApi>, getState: GetStateFn<ProgressApi>) {\n\t\tsuper(progressPropsConfig, setState, getState);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<ProgressApi>): void {\n\t\tconst { label, max, unit, value, variant } = props;\n\t\tthis.watchLabel(label);\n\t\tthis.watchMax(max);\n\t\tthis.watchUnit(unit);\n\t\tthis.watchValue(value);\n\t\tthis.watchVariant(variant);\n\n\t\tthis.setState('liveValue', this.getRenderProp('value'));\n\t\tthis.startLiveValueInterval();\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n\n\tpublic watchMax(value?: number): void {\n\t\tmaxProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('max', v);\n\t\t\tthis.watchValue(this.getRawProp('value'));\n\t\t});\n\t}\n\n\tpublic watchUnit(value?: string): void {\n\t\tunitProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('unit', v);\n\t\t});\n\t}\n\n\tpublic watchValue(value?: number): void {\n\t\tthis.setRawProp('value', value);\n\t\tclampedNumberValueProp.apply(\n\t\t\tvalue,\n\t\t\t(v) => {\n\t\t\t\tthis.setRenderProp('value', v);\n\t\t\t},\n\t\t\t{ min: 0, max: this.getRenderProp('max') },\n\t\t);\n\t}\n\n\tpublic watchVariant(value?: string): void {\n\t\tvariantProgressProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('variant', v);\n\t\t});\n\t}\n\n\t// a11y: says the value of the component every 5s\n\tprivate startLiveValueInterval(): void {\n\t\tthis.interval = setInterval(() => {\n\t\t\tconst value = this.getRenderProp('value');\n\t\t\tthis.setState('liveValue', value);\n\t\t}, 5000);\n\t}\n\n\tpublic destroy(): void {\n\t\tif (this.interval) {\n\t\t\tclearInterval(this.interval);\n\t\t\tthis.interval = undefined;\n\t\t}\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-progress {\n\t\t&__bar {\n\t\t\tdisplay: grid;\n\t\t\talign-items: center;\n\t\t\tgrid-template-areas:\n\t\t\t\t'LABEL LABEL LABEL'\n\t\t\t\t'BAR VALUE UNIT';\n\t\t\tgrid-template-columns: 1fr auto;\n\n\t\t\t&-label {\n\t\t\t\tgrid-column-end: 2;\n\t\t\t\tgrid-area: LABEL;\n\t\t\t}\n\n\t\t\tsvg {\n\t\t\t\tgrid-area: BAR;\n\t\t\t}\n\n\t\t\t&-value {\n\t\t\t\tgrid-area: VALUE;\n\t\t\t\ttext-align: right;\n\t\t\t}\n\n\t\t\t&-unit {\n\t\t\t\tgrid-area: UNIT;\n\t\t\t}\n\n\t\t\t&-border {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: black;\n\t\t\t}\n\n\t\t\t&-background {\n\t\t\t\tfill: lightgray;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-progress {\n\t\t\t\tfill: #0075ff;\n\t\t\t\tstroke: transparent;\n\n\t\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__cycle {\n\t\t\tdisplay: grid;\n\t\t\talign-content: center;\n\t\t\tjustify-items: center;\n\t\t\tgrid-template-areas: 'ALL';\n\t\t\tgrid-template-columns: auto;\n\n\t\t\t> * {\n\t\t\t\tgrid-area: ALL;\n\t\t\t}\n\n\t\t\t&-text {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: center;\n\n\t\t\t\tfont-size: x-small;\n\t\t\t\ttext-align: center;\n\n\t\t\t\t* {\n\t\t\t\t\tbackground-color: white;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&-background {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: lightgray;\n\t\t\t}\n\n\t\t\t&-border {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: black;\n\t\t\t}\n\n\t\t\t&-whitespace {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-progress {\n\t\t\t\ttransform: rotate(-90deg);\n\t\t\t\ttransform-origin: 50% 50%;\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: #0075ff;\n\n\t\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { ProgressApi } from '../../internal/functional-components/progress/api';\nimport { ProgressFC } from '../../internal/functional-components/progress/component';\nimport { ProgressController } from '../../internal/functional-components/progress/controller';\nimport type { ProgressVariantType } from '../../internal/props';\n\n/**\n * The **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants.\n */\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolProgress extends BaseWebComponent<ProgressApi> implements WebComponentInterface<ProgressApi> {\n\tprivate readonly ctrl = new ProgressController(this.setState, this.getState);\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()\n\tpublic _label?: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Defines the maximum value of the element.\n\t */\n\t@Prop()\n\tpublic _max!: number;\n\n\t@Watch('_max')\n\tpublic watchMax(value?: number): void {\n\t\tthis.ctrl.watchMax(value);\n\t}\n\n\t/**\n\t * Defines the unit of the step values (not shown).\n\t */\n\t@Prop()\n\tpublic _unit?: string;\n\n\t@Watch('_unit')\n\tpublic watchUnit(value?: string): void {\n\t\tthis.ctrl.watchUnit(value);\n\t}\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop()\n\tpublic _value!: number;\n\n\t@Watch('_value')\n\tpublic watchValue(value?: number): void {\n\t\tthis.ctrl.watchValue(value);\n\t}\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop()\n\tpublic _variant?: ProgressVariantType;\n\n\t@Watch('_variant')\n\tpublic watchVariant(value?: ProgressVariantType): void {\n\t\tthis.ctrl.watchVariant(value);\n\t}\n\n\t/**\n\t * A11y: Aria live value\n\t */\n\t@State()\n\tpublic liveValue: number = 0;\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tlabel: this._label,\n\t\t\tmax: this._max,\n\t\t\tunit: this._unit,\n\t\t\tvalue: this._value,\n\t\t\tvariant: this._variant,\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ctrl.destroy();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<ProgressFC\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tmax={this.ctrl.getRenderProp('max')}\n\t\t\t\t\tunit={this.ctrl.getRenderProp('unit')}\n\t\t\t\t\tvalue={this.ctrl.getRenderProp('value')}\n\t\t\t\t\tvariant={this.ctrl.getRenderProp('variant')}\n\t\t\t\t\tliveValue={this.liveValue}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/kol-quote.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,proxyCustomElement,Host}from"@stencil/core/internal/client";import{c as createPropDefinition,n as normalizeString,v as variantQuoteProp,B as BaseController,a as BaseWebComponent}from"./base-web-component.js";import{k as KolLinkTag}from"./component-names.js";import{b as bem}from"./bem-registry.js";import"./common.js";import{l as labelProp}from"./label2.js";const hrefProp=createPropDefinition("href","",normalizeString,e=>"string"==typeof e),quoteProp=createPropDefinition("quote","",normalizeString),quoteBem=bem.forBlock("kol-quote"),BEM_CLASS_QUOTE__BLOCKQUOTE=quoteBem("blockquote"),BEM_CLASS_QUOTE__CITE=quoteBem("cite"),BEM_CLASS_QUOTE__FIGCAPTION=quoteBem("figcaption"),BEM_CLASS_QUOTE__QUOTE=quoteBem("quote"),QuoteFC=e=>{const{href:n,label:t,quote:o,variant:i}=e,a=""===o,l=quoteBem({[i]:!0});return h("figure",{class:l},"block"===i?h("blockquote",{class:BEM_CLASS_QUOTE__BLOCKQUOTE,cite:n},o,h("span",{"aria-hidden":a?void 0:"true",hidden:!a},h("slot",{name:"expert"}))):h("q",{class:BEM_CLASS_QUOTE__QUOTE,cite:n},o,h("span",{"aria-hidden":a?void 0:"true",hidden:!a},h("slot",{name:"expert"}))),"string"==typeof t&&t.length>0&&h("figcaption",{class:BEM_CLASS_QUOTE__FIGCAPTION},h("cite",{class:BEM_CLASS_QUOTE__CITE},h(KolLinkTag,{_href:n,_label:t,_target:"_blank"}))))},quotePropsConfig={optional:[labelProp,variantQuoteProp],required:[hrefProp,quoteProp]};class QuoteController extends BaseController{constructor(e,n){super(quotePropsConfig,e,n)}componentWillLoad(e){const{href:n,label:t,quote:o,variant:i}=e;this.watchHref(n),this.watchLabel(t),this.watchQuote(o),this.watchVariant(i)}watchHref(e){hrefProp.apply(e,e=>{this.setRenderProp("href",e)})}watchLabel(e){labelProp.apply(e,e=>{this.setRenderProp("label",e)})}watchQuote(e){quoteProp.apply(e,e=>{this.setRenderProp("quote",e)})}watchVariant(e){variantQuoteProp.apply(e,e=>{this.setRenderProp("variant",e)})}}const defaultStyleCss="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-quote {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__cite::before {\n    padding-right: 0.5em;\n  }\n  .kol-quote--inline .kol-quote__cite::before {\n    padding: 0.5em;\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}",KolQuote$1=proxyCustomElement(class extends BaseWebComponent{constructor(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow(),this.ctrl=new QuoteController(this.setState,this.getState),this._variant="inline"}watchHref(e){this.ctrl.watchHref(e)}watchLabel(e){this.ctrl.watchLabel(e)}watchQuote(e){this.ctrl.watchQuote(e)}watchVariant(e){this.ctrl.watchVariant(e)}componentWillLoad(){this.ctrl.componentWillLoad({href:this._href,label:this._label,quote:this._quote,variant:this._variant})}render(){return h(Host,{key:"697513371a9f5e241807a6627c420133a8be763b"},h(QuoteFC,{key:"204884cac725647a5bc4b26c8b3278d78f5abd0b",href:this.ctrl.getRenderProp("href"),label:this.ctrl.getRenderProp("label"),quote:this.ctrl.getRenderProp("quote"),variant:this.ctrl.getRenderProp("variant")}))}static get watchers(){return{_href:["watchHref"],_label:["watchLabel"],_quote:["watchQuote"],_variant:["watchVariant"]}}static get style(){return{default:defaultStyleCss}}},[801,"kol-quote",{_href:[1],_label:[1],_quote:[1],_variant:[1]},void 0,{_href:["watchHref"],_label:["watchLabel"],_quote:["watchQuote"],_variant:["watchVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-quote"].forEach(e=>{if("kol-quote"===e)customElements.get(e)||customElements.define(e,KolQuote$1)})}const KolQuote=KolQuote$1,defineCustomElement=defineCustomElement$1;export{KolQuote,defineCustomElement};
+import{h,proxyCustomElement,Host}from"@stencil/core/internal/client";import{v as variantQuoteProp,B as BaseController,a as BaseWebComponent}from"./base-web-component.js";import{k as KolLinkTag}from"./component-names.js";import{b as bem}from"./bem-registry.js";import"./common.js";import{c as createPropDefinition,n as normalizeString}from"./normalizers.js";import{l as labelProp}from"./label2.js";const hrefProp=createPropDefinition("href","",normalizeString,e=>"string"==typeof e),quoteProp=createPropDefinition("quote","",normalizeString),quoteBem=bem.forBlock("kol-quote"),BEM_CLASS_QUOTE__BLOCKQUOTE=quoteBem("blockquote"),BEM_CLASS_QUOTE__CITE=quoteBem("cite"),BEM_CLASS_QUOTE__FIGCAPTION=quoteBem("figcaption"),BEM_CLASS_QUOTE__QUOTE=quoteBem("quote"),QuoteFC=e=>{const{href:n,label:t,quote:o,variant:i}=e,a=""===o,r=quoteBem({[i]:!0});return h("figure",{class:r},"block"===i?h("blockquote",{class:BEM_CLASS_QUOTE__BLOCKQUOTE,cite:n},o,h("span",{"aria-hidden":a?void 0:"true",hidden:!a},h("slot",{name:"expert"}))):h("q",{class:BEM_CLASS_QUOTE__QUOTE,cite:n},o,h("span",{"aria-hidden":a?void 0:"true",hidden:!a},h("slot",{name:"expert"}))),"string"==typeof t&&t.length>0&&h("figcaption",{class:BEM_CLASS_QUOTE__FIGCAPTION},h("cite",{class:BEM_CLASS_QUOTE__CITE},h(KolLinkTag,{_href:n,_label:t,_target:"_blank"}))))},quotePropsConfig={optional:[labelProp,variantQuoteProp],required:[hrefProp,quoteProp]};class QuoteController extends BaseController{constructor(e,n){super(quotePropsConfig,e,n)}componentWillLoad(e){const{href:n,label:t,quote:o,variant:i}=e;this.watchHref(n),this.watchLabel(t),this.watchQuote(o),this.watchVariant(i)}watchHref(e){hrefProp.apply(e,e=>{this.setRenderProp("href",e)})}watchLabel(e){labelProp.apply(e,e=>{this.setRenderProp("label",e)})}watchQuote(e){quoteProp.apply(e,e=>{this.setRenderProp("quote",e)})}watchVariant(e){variantQuoteProp.apply(e,e=>{this.setRenderProp("variant",e)})}}const defaultStyleCss="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-quote {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}",KolQuote$1=proxyCustomElement(class extends BaseWebComponent{constructor(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow(),this.ctrl=new QuoteController(this.setState,this.getState),this._variant="inline"}watchHref(e){this.ctrl.watchHref(e)}watchLabel(e){this.ctrl.watchLabel(e)}watchQuote(e){this.ctrl.watchQuote(e)}watchVariant(e){this.ctrl.watchVariant(e)}componentWillLoad(){this.ctrl.componentWillLoad({href:this._href,label:this._label,quote:this._quote,variant:this._variant})}render(){return h(Host,{key:"f447a4d3e7350d1bef5337fe61c098d0d916c44b"},h(QuoteFC,{key:"3f62e1b79d24030ab8011debe385a2b2c145e578",href:this.ctrl.getRenderProp("href"),label:this.ctrl.getRenderProp("label"),quote:this.ctrl.getRenderProp("quote"),variant:this.ctrl.getRenderProp("variant")}))}static get watchers(){return{_href:["watchHref"],_label:["watchLabel"],_quote:["watchQuote"],_variant:["watchVariant"]}}static get style(){return{default:defaultStyleCss}}},[801,"kol-quote",{_href:[1],_label:[1],_quote:[1],_variant:[1]},void 0,{_href:["watchHref"],_label:["watchLabel"],_quote:["watchQuote"],_variant:["watchVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-quote"].forEach(e=>{if("kol-quote"===e)customElements.get(e)||customElements.define(e,KolQuote$1)})}const KolQuote=KolQuote$1,defineCustomElement=defineCustomElement$1;export{KolQuote,defineCustomElement};

package/dist/components/kol-quote.js.map

@@ -1 +1 @@
-{"file":"kol-quote.js","mappings":"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","names":["KolQuote","__stencil_proxyCustomElement"],"sources":["src/internal/props/href.ts","src/internal/props/quote.ts","src/internal/functional-components/quote/component.tsx","src/internal/functional-components/quote/api.tsx","src/internal/functional-components/quote/controller.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Href prop for links and navigation\n *\n * Description:\n * The href attribute defines the URL target for a link. Using a sentinel value like '#no-href-set'\n * as a default can break expected link behavior and prevent consumers from clearing the href to an empty string.\n *\n * Usage:\n * - Valid URL: href=\"https://example.com\"\n * - Relative path: href=\"/page\"\n * - Fragment: href=\"#section\"\n * - Empty/undefined: href=\"\" (no link target, should prevent navigation)\n *\n * Consumers should check if href is non-empty before rendering clickable links.\n * An empty href means the component should not resolve to a link.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n */\nexport type HrefProp = SimpleProp<'href', string>;\nexport const hrefProp = createPropDefinition<HrefProp>('href', '', normalizeString, (v) => typeof v === 'string');\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Quote prop for cited text content\n *\n * Description:\n * Contains the quoted text to be rendered. The content is displayed within semantically\n * correct HTML quotation elements (<blockquote> or <q>) depending on the variant.\n *\n * Usage (according to W3C HTML specification):\n * - The quote text should be attributed to its source using the cite attribute or a visible citation\n * - Block quotes (<blockquote>) are for extended quotations from an external source\n * - Inline quotes (<q>) are for short inline quotations\n * - Quotation marks are automatically added by the browser for <q> elements\n *\n * Accessibility:\n * - Semantic quotation elements help assistive technologies convey the nature of the content\n * - The structure must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\n *\n * @see https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element\n * @see https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element\n * @see https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html\n */\nexport type QuoteProp = SimpleProp<'quote', string>;\nexport const quoteProp = createPropDefinition<QuoteProp>('quote', '', normalizeString);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport { KolLinkTag } from '../../../core/component-names';\nimport { bem } from '../../../schema/bem-registry';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { QuoteApi } from './api';\n\nconst quoteBem = bem.forBlock('kol-quote');\nconst BEM_CLASS_QUOTE__BLOCKQUOTE = quoteBem('blockquote');\nconst BEM_CLASS_QUOTE__CITE = quoteBem('cite');\nconst BEM_CLASS_QUOTE__FIGCAPTION = quoteBem('figcaption');\nconst BEM_CLASS_QUOTE__QUOTE = quoteBem('quote');\n\nexport const QuoteFC: FC<FunctionalComponentProps<QuoteApi>> = (props) => {\n\tconst { href, label, quote, variant } = props;\n\tconst hasExpertSlot = quote === '';\n\tconst BEM_CLASS_ROOT = quoteBem({ [variant]: true });\n\treturn (\n\t\t<figure class={BEM_CLASS_ROOT}>\n\t\t\t{variant === 'block' ? (\n\t\t\t\t<blockquote class={BEM_CLASS_QUOTE__BLOCKQUOTE} cite={href}>\n\t\t\t\t\t{quote}\n\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t</blockquote>\n\t\t\t) : (\n\t\t\t\t<q class={BEM_CLASS_QUOTE__QUOTE} cite={href}>\n\t\t\t\t\t{quote}\n\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t</q>\n\t\t\t)}\n\t\t\t{typeof label === 'string' && label.length > 0 && (\n\t\t\t\t<figcaption class={BEM_CLASS_QUOTE__FIGCAPTION}>\n\t\t\t\t\t<cite class={BEM_CLASS_QUOTE__CITE}>\n\t\t\t\t\t\t<KolLinkTag _href={href} _label={label} _target=\"_blank\" />\n\t\t\t\t\t</cite>\n\t\t\t\t</figcaption>\n\t\t\t)}\n\t\t</figure>\n\t);\n};\n","import { hrefProp, labelProp, quoteProp, variantQuoteProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const quotePropsConfig = {\n\toptional: [labelProp, variantQuoteProp],\n\trequired: [hrefProp, quoteProp],\n} as const satisfies PropsConfigShape;\n\nexport type QuoteApi = ApiFromConfig<typeof quotePropsConfig>;\n","import { hrefProp, labelProp, quoteProp, variantQuoteProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';\nimport type { QuoteApi } from './api';\nimport { quotePropsConfig } from './api';\n\nexport class QuoteController extends BaseController<QuoteApi> implements ControllerInterface<QuoteApi> {\n\tpublic constructor(setState: SetStateFn<QuoteApi>, getState: GetStateFn<QuoteApi>) {\n\t\tsuper(quotePropsConfig, setState, getState);\n\t}\n\tpublic componentWillLoad(props: ResolvedInputProps<QuoteApi>): void {\n\t\tconst { href, label, quote, variant } = props;\n\t\tthis.watchHref(href);\n\t\tthis.watchLabel(label);\n\t\tthis.watchQuote(quote);\n\t\tthis.watchVariant(variant);\n\t}\n\n\tpublic watchHref(value?: string): void {\n\t\threfProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('href', v);\n\t\t});\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n\n\tpublic watchQuote(value?: string): void {\n\t\tquoteProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('quote', v);\n\t\t});\n\t}\n\n\tpublic watchVariant(value?: string): void {\n\t\tvariantQuoteProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('variant', v);\n\t\t});\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-quote {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.kol-quote__cite {\n\t\t&::before {\n\t\t\tcontent: '—';\n\n\t\t\t.kol-quote--block & {\n\t\t\t\tpadding-right: 0.5em;\n\t\t\t}\n\n\t\t\t.kol-quote--inline & {\n\t\t\t\tpadding: 0.5em;\n\t\t\t}\n\t\t}\n\t}\n\n\t.kol-quote__figcaption {\n\t\t.kol-quote--block & {\n\t\t\tdisplay: inline;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.kol-quote__blockquote {\n\t\t&::before {\n\t\t\tcontent: open-quote;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: close-quote;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { QuoteApi } from '../../internal/functional-components/quote/api';\nimport { QuoteFC } from '../../internal/functional-components/quote/component';\nimport { QuoteController } from '../../internal/functional-components/quote/controller';\nimport type { QuoteVariantType } from '../../internal/props/variant-quote';\n\n/**\n * The **Quote** component has two variants: a short inline (`inline`) and an indented block (`block`) variant. Both variants include a link to the source of the quote.\n */\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote extends BaseWebComponent<QuoteApi> implements WebComponentInterface<QuoteApi> {\n\tprivate readonly ctrl = new QuoteController(this.setState, this.getState);\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop()\n\tpublic _href!: string;\n\n\t@Watch('_href')\n\tpublic watchHref(value?: string): void {\n\t\tthis.ctrl.watchHref(value);\n\t}\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()\n\tpublic _label?: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop()\n\tpublic _quote!: string;\n\n\t@Watch('_quote')\n\tpublic watchQuote(value?: string): void {\n\t\tthis.ctrl.watchQuote(value);\n\t}\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop()\n\tpublic _variant?: QuoteVariantType = 'inline';\n\n\t@Watch('_variant')\n\tpublic watchVariant(value?: QuoteVariantType): void {\n\t\tthis.ctrl.watchVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\thref: this._href,\n\t\t\tlabel: this._label,\n\t\t\tquote: this._quote,\n\t\t\tvariant: this._variant,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<QuoteFC\n\t\t\t\t\thref={this.ctrl.getRenderProp('href')}\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tquote={this.ctrl.getRenderProp('quote')}\n\t\t\t\t\tvariant={this.ctrl.getRenderProp('variant')}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-quote.js","mappings":"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","names":["KolQuote","__stencil_proxyCustomElement"],"sources":["src/internal/props/href.ts","src/internal/props/quote.ts","src/internal/functional-components/quote/component.tsx","src/internal/functional-components/quote/api.tsx","src/internal/functional-components/quote/controller.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Href prop for links and navigation\n *\n * Description:\n * The href attribute defines the URL target for a link. Using a sentinel value like '#no-href-set'\n * as a default can break expected link behavior and prevent consumers from clearing the href to an empty string.\n *\n * Usage:\n * - Valid URL: href=\"https://example.com\"\n * - Relative path: href=\"/page\"\n * - Fragment: href=\"#section\"\n * - Empty/undefined: href=\"\" (no link target, should prevent navigation)\n *\n * Consumers should check if href is non-empty before rendering clickable links.\n * An empty href means the component should not resolve to a link.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n */\nexport type HrefProp = SimpleProp<'href', string>;\nexport const hrefProp = createPropDefinition<HrefProp>('href', '', normalizeString, (v) => typeof v === 'string');\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Quote prop for cited text content\n *\n * Description:\n * Contains the quoted text to be rendered. The content is displayed within semantically\n * correct HTML quotation elements (<blockquote> or <q>) depending on the variant.\n *\n * Usage (according to W3C HTML specification):\n * - The quote text should be attributed to its source using the cite attribute or a visible citation\n * - Block quotes (<blockquote>) are for extended quotations from an external source\n * - Inline quotes (<q>) are for short inline quotations\n * - Quotation marks are automatically added by the browser for <q> elements\n *\n * Accessibility:\n * - Semantic quotation elements help assistive technologies convey the nature of the content\n * - The structure must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\n *\n * @see https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element\n * @see https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element\n * @see https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html\n */\nexport type QuoteProp = SimpleProp<'quote', string>;\nexport const quoteProp = createPropDefinition<QuoteProp>('quote', '', normalizeString);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport { KolLinkTag } from '../../../core/component-names';\nimport { bem } from '../../../schema/bem-registry';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { QuoteApi } from './api';\n\nconst quoteBem = bem.forBlock('kol-quote');\nconst BEM_CLASS_QUOTE__BLOCKQUOTE = quoteBem('blockquote');\nconst BEM_CLASS_QUOTE__CITE = quoteBem('cite');\nconst BEM_CLASS_QUOTE__FIGCAPTION = quoteBem('figcaption');\nconst BEM_CLASS_QUOTE__QUOTE = quoteBem('quote');\n\nexport const QuoteFC: FC<FunctionalComponentProps<QuoteApi>> = (props) => {\n\tconst { href, label, quote, variant } = props;\n\tconst hasExpertSlot = quote === '';\n\tconst BEM_CLASS_ROOT = quoteBem({ [variant]: true });\n\treturn (\n\t\t<figure class={BEM_CLASS_ROOT}>\n\t\t\t{variant === 'block' ? (\n\t\t\t\t<blockquote class={BEM_CLASS_QUOTE__BLOCKQUOTE} cite={href}>\n\t\t\t\t\t{quote}\n\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t</blockquote>\n\t\t\t) : (\n\t\t\t\t<q class={BEM_CLASS_QUOTE__QUOTE} cite={href}>\n\t\t\t\t\t{quote}\n\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t</q>\n\t\t\t)}\n\t\t\t{typeof label === 'string' && label.length > 0 && (\n\t\t\t\t<figcaption class={BEM_CLASS_QUOTE__FIGCAPTION}>\n\t\t\t\t\t<cite class={BEM_CLASS_QUOTE__CITE}>\n\t\t\t\t\t\t<KolLinkTag _href={href} _label={label} _target=\"_blank\" />\n\t\t\t\t\t</cite>\n\t\t\t\t</figcaption>\n\t\t\t)}\n\t\t</figure>\n\t);\n};\n","import { hrefProp, labelProp, quoteProp, variantQuoteProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const quotePropsConfig = {\n\toptional: [labelProp, variantQuoteProp],\n\trequired: [hrefProp, quoteProp],\n} as const satisfies PropsConfigShape;\n\nexport type QuoteApi = ApiFromConfig<typeof quotePropsConfig>;\n","import { hrefProp, labelProp, quoteProp, variantQuoteProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';\nimport type { QuoteApi } from './api';\nimport { quotePropsConfig } from './api';\n\nexport class QuoteController extends BaseController<QuoteApi> implements ControllerInterface<QuoteApi> {\n\tpublic constructor(setState: SetStateFn<QuoteApi>, getState: GetStateFn<QuoteApi>) {\n\t\tsuper(quotePropsConfig, setState, getState);\n\t}\n\tpublic componentWillLoad(props: ResolvedInputProps<QuoteApi>): void {\n\t\tconst { href, label, quote, variant } = props;\n\t\tthis.watchHref(href);\n\t\tthis.watchLabel(label);\n\t\tthis.watchQuote(quote);\n\t\tthis.watchVariant(variant);\n\t}\n\n\tpublic watchHref(value?: string): void {\n\t\threfProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('href', v);\n\t\t});\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n\n\tpublic watchQuote(value?: string): void {\n\t\tquoteProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('quote', v);\n\t\t});\n\t}\n\n\tpublic watchVariant(value?: string): void {\n\t\tvariantQuoteProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('variant', v);\n\t\t});\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-quote {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.kol-quote__cite {\n\t\t&::before {\n\t\t\tcontent: '—';\n\t\t}\n\t}\n\n\t.kol-quote__figcaption {\n\t\t.kol-quote--block & {\n\t\t\tdisplay: inline;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.kol-quote__blockquote {\n\t\t&::before {\n\t\t\tcontent: open-quote;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: close-quote;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { QuoteApi } from '../../internal/functional-components/quote/api';\nimport { QuoteFC } from '../../internal/functional-components/quote/component';\nimport { QuoteController } from '../../internal/functional-components/quote/controller';\nimport type { QuoteVariantType } from '../../internal/props/variant-quote';\n\n/**\n * The **Quote** component has two variants: a short inline (`inline`) and an indented block (`block`) variant. Both variants include a link to the source of the quote.\n */\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote extends BaseWebComponent<QuoteApi> implements WebComponentInterface<QuoteApi> {\n\tprivate readonly ctrl = new QuoteController(this.setState, this.getState);\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop()\n\tpublic _href!: string;\n\n\t@Watch('_href')\n\tpublic watchHref(value?: string): void {\n\t\tthis.ctrl.watchHref(value);\n\t}\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()\n\tpublic _label?: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop()\n\tpublic _quote!: string;\n\n\t@Watch('_quote')\n\tpublic watchQuote(value?: string): void {\n\t\tthis.ctrl.watchQuote(value);\n\t}\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop()\n\tpublic _variant?: QuoteVariantType = 'inline';\n\n\t@Watch('_variant')\n\tpublic watchVariant(value?: QuoteVariantType): void {\n\t\tthis.ctrl.watchVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\thref: this._href,\n\t\t\tlabel: this._label,\n\t\t\tquote: this._quote,\n\t\t\tvariant: this._variant,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<QuoteFC\n\t\t\t\t\thref={this.ctrl.getRenderProp('href')}\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tquote={this.ctrl.getRenderProp('quote')}\n\t\t\t\t\tvariant={this.ctrl.getRenderProp('variant')}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}