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

package/dist/cjs/kol-popover-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"kol-popover-button.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,i2LAAi2L,CAAC;AAC13L,sCAAe,eAAe;;MC8BjB,gBAAgB;;;;;;;;yBAwES,KAAK;0BAOJ,KAAK;;;;;;6BA8BW,QAAQ;;;;;6BA0BR,KAAK;qBAKf,QAAQ;;wBAUF,QAAQ;;IA9InD,MAAM,WAAW;;QACvB,MAAK,MAAA,IAAI,CAAC,GAAG,0CAAE,WAAW,EAAE,CAAA,CAAC;KAC7B;IAEM,MAAM;QACZ,QACCA,QAACC,oCAAqB,qDACrB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,EACtC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,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,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,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,IAEvBD,mEAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,EACzCA,oEAAQ,CACe,EACvB;KACF;;;;;;;;","names":["h","KolPopoverButtonWcTag"],"sources":["src/components/popover-button/style.scss?tag=kol-popover-button&mode=default&encapsulation=shadow","src/components/popover-button/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../@shared/kol-button-mixin' as *;\n@use '../@shared/kol-popover-button-mixin' as *;\n@use '../tooltip/style' as *;\n\n@include kol-button-styles('kol-button');\n@include kol-popover-button-styles;\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\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\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={(element) => (this.ref = element)}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaSelected={this._ariaSelected}\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_id={this._id}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_popoverAlign={this._popoverAlign}\n\t\t\t\t_role={this._role}\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 which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\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 */\n\t@Prop() public _id?: string;\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 the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\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 * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\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 that the button emits on click.\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.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,k8LAAk8L;;MC+B78L,gBAAgB,GAAA,MAAA;AAP7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AA+EgB,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAO3B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AA8B5B,QAAA,IAAa,CAAA,aAAA,GAA0B,QAAQ;AA0B/C,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAK5C,QAAA,IAAK,CAAA,KAAA,GAAwB,QAAQ;AAUrC,QAAA,IAAQ,CAAA,QAAA,GAA2B,QAAQ;AAC1D;AA/IO,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;;IAGtB,MAAM,GAAA;AACZ,QAAA,QACCA,OAAA,CAACC,oCAAqB,EAAA,EAAA,GAAA,EAAA,0CAAA,EACrB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,EACtC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,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,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,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,EAEvBD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzCA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACe;;;;;;;;;","names":["h","KolPopoverButtonWcTag"],"sources":["src/components/popover-button/style.scss?tag=kol-popover-button&mode=default&encapsulation=shadow","src/components/popover-button/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../@shared/kol-button-mixin' as *;\n@use '../@shared/kol-popover-button-mixin' as *;\n@use '../tooltip/style' as *;\n\n@include kol-button-styles('kol-button');\n@include kol-popover-button-styles;\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\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\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={(element) => (this.ref = element)}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaSelected={this._ariaSelected}\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_id={this._id}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_popoverAlign={this._popoverAlign}\n\t\t\t\t_role={this._role}\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 which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\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 */\n\t@Prop() public _id?: string;\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 the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\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 * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\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 that the button emits on click.\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/cjs/kol-popover-button.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kol-popover-button.entry.cjs.js","sources":["src/components/popover-button/style.scss?tag=kol-popover-button&mode=default&encapsulation=shadow","src/components/popover-button/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../@shared/kol-button-mixin' as *;\n@use '../@shared/kol-popover-button-mixin' as *;\n@use '../tooltip/style' as *;\n\n@include kol-button-styles('kol-button');\n@include kol-popover-button-styles;\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\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\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={(element) => (this.ref = element)}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaSelected={this._ariaSelected}\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_id={this._id}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_popoverAlign={this._popoverAlign}\n\t\t\t\t_role={this._role}\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 which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\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 */\n\t@Prop() public _id?: string;\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 the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\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 * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\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 that the button emits on click.\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"],"names":["h","KolPopoverButtonWcTag"],"mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,k8LAAk8L;;MC+B78L,gBAAgB,GAAA,MAAA;AAP7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AA+EgB,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAO3B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AA8B5B,QAAA,IAAa,CAAA,aAAA,GAA0B,QAAQ;AA0B/C,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAK5C,QAAA,IAAK,CAAA,KAAA,GAAwB,QAAQ;AAUrC,QAAA,IAAQ,CAAA,QAAA,GAA2B,QAAQ;AAC1D;AA/IO,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;;IAGtB,MAAM,GAAA;AACZ,QAAA,QACCA,OAAA,CAACC,oCAAqB,EAAA,EAAA,GAAA,EAAA,0CAAA,EACrB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,EACtC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,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,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,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,EAEvBD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzCA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACe;;;;;;;;;"}

package/dist/cjs/kol-popover-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index$1=require("./index-b7655f44.js"),index=require("./index-94c17ce6.js"),alignFloatingElements=require("./align-floating-elements-8ddb8593.js"),clsx=require("./clsx-dd4d6dd1.js"),events=require("./events-df7aa71f.js"),align=require("./align-6dbf7621.js"),show=require("./show-0449c2d9.js"),validatePopoverCallbacks=(e,t)=>{index.watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)},KolPopover=class{constructor(e){index$1.registerInstance(this,e),this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover(e)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this._on=void 0,this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}async showPopover(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(await alignFloatingElements.alignFloatingElements({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))}hidePopover(e){var t,i,s;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody(),null===(s=null===(i=this.state._on)||void 0===i?void 0:i.onClose)||void 0===s||s.call(i,e),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.close)}addListenersToBody(){var e;const t=index.getDocument().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const t=index.getDocument().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return index$1.h(index$1.Host,{key:"53179ace5c0dfabbe1dd00ba8ddfe453ef55ccd5",ref:this.catchHostAndTriggerElement,class:"kol-popover"},index$1.h("div",{key:"f42aafe81aaa0a09526b4e9923a96133ee81c5d2",class:clsx.clsx("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,hidden:!this.state._show},index$1.h("div",{key:"25719436c820c214a2e3c0fac47449f842c4f68c",class:clsx.clsx("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),index$1.h("slot",{key:"fff04758761fb36389c6698b17730b604981ca66"})))}validateAlign(e){align.validateAlign(this,e)}validateOn(e){validatePopoverCallbacks(this,e)}validateShow(e){show.validateShow(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}};exports.kol_popover_wc=KolPopover;
+"use strict";var index=require("./index-CWdhxV5q.js"),progress=require("./progress-Dys184zO.js"),align=require("./align-BO18xcUR.js"),show=require("./show-PxpThNY_.js"),alignFloatingElements=require("./align-floating-elements-DZR8PUzH.js"),clsx=require("./clsx-CkZlkaek.js"),events=require("./events-DDhO-Ns8.js");const validatePopoverCallbacks=(e,t)=>{progress.watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)},KolPopover=class{constructor(e){index.registerInstance(this,e),this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover(e)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}async showPopover(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(await alignFloatingElements.alignFloatingElements({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))}hidePopover(e){var t,s,i;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody(),null===(i=null===(s=this.state._on)||void 0===s?void 0:s.onClose)||void 0===i||i.call(s,e),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.close)}addListenersToBody(){var e;const t=progress.getDocument().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const t=progress.getDocument().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return index.h(index.Host,{key:"53179ace5c0dfabbe1dd00ba8ddfe453ef55ccd5",ref:this.catchHostAndTriggerElement,class:"kol-popover"},index.h("div",{key:"f42aafe81aaa0a09526b4e9923a96133ee81c5d2",class:clsx.clsx("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,hidden:!this.state._show},index.h("div",{key:"25719436c820c214a2e3c0fac47449f842c4f68c",class:clsx.clsx("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),index.h("slot",{key:"fff04758761fb36389c6698b17730b604981ca66"})))}validateAlign(e){align.validateAlign(this,e)}validateOn(e){validatePopoverCallbacks(this,e)}validateShow(e){show.validateShow(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}};exports.kol_popover_wc=KolPopover;

package/dist/cjs/kol-popover-wc.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"kol-popover-wc.entry.cjs.js","mappings":"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","names":["watchValidator","alignFloatingElements","dispatchDomEvent","KolEvent","getDocument","h","Host","clsx","validateAlign","validateShow"],"sources":["src/schema/props/popover-callbacks.ts","src/components/popover/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Callback } from '../enums';\nimport type { EventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type PopoverCallbacksPropType = {\n\t[Callback.onClose]?: EventCallback<MouseEvent | KeyboardEvent>;\n};\n\n/**\n * Defines the callback functions for popover events.\n */\nexport type PropPopoverCallbacks = {\n\ton: PopoverCallbacksPropType;\n};\n\n/* validator */\nexport const validatePopoverCallbacks = (component: Generic.Element.Component, value?: PopoverCallbacksPropType): void => {\n\twatchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['PopoverCallbacksPropType {Events.onClose}']), value);\n};\n","import type { AlignPropType, PopoverAPI, PopoverCallbacksPropType, PopoverStates, ShowPropType } from '../../schema';\nimport { getDocument, validateAlign, validatePopoverCallbacks, validateShow } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { alignFloatingElements } from '../../utils/align-floating-elements';\nimport clsx from 'clsx';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * @internal\n * @slot - The popover content.\n */\n@Component({\n\ttag: 'kol-popover-wc',\n\tshadow: false,\n})\nexport class KolPopover implements PopoverAPI {\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement | null;\n\tprivate host?: HTMLElement;\n\n\tprivate async showPopover(): Promise<void> {\n\t\tthis.addListenersToBody();\n\n\t\tif (this.triggerElement && this.popoverElement) {\n\t\t\tawait alignFloatingElements({\n\t\t\t\talign: this._align,\n\t\t\t\treferenceElement: this.triggerElement,\n\t\t\t\tarrowElement: this.arrowElement,\n\t\t\t\tfloatingElement: this.popoverElement,\n\t\t\t});\n\t\t\tthis.state = { ...this.state, _visible: true };\n\t\t}\n\t}\n\tprivate hidePopover(event: MouseEvent | KeyboardEvent): void {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_visible: false,\n\t\t};\n\t\tthis._show = false;\n\t\tthis.triggerElement?.focus();\n\t\tthis.removeListenersToBody();\n\n\t\tthis.state._on?.onClose?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover(event);\n\t};\n\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover(event);\n\t\t}\n\t};\n\n\t/* EventListener functions */\n\tprivate addListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.addEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.addEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.addEventListener(\n\t\t\t'scroll',\n\t\t\t() => {\n\t\t\t\tvoid this.showPopover();\n\t\t\t},\n\t\t\t{ passive: true },\n\t\t);\n\t}\n\tprivate removeListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.removeEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.removeEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.removeEventListener('scroll', () => {\n\t\t\tvoid this.showPopover();\n\t\t});\n\t}\n\n\t/* catchElement functions */\n\tprivate catchHostAndTriggerElement = (element: HTMLElement | null): void => {\n\t\tif (element) {\n\t\t\tthis.host = element;\n\t\t\tthis.triggerElement = element.previousElementSibling as HTMLElement | null;\n\t\t}\n\t};\n\tprivate catchPopoverElement = (element?: HTMLDivElement): void => {\n\t\tthis.popoverElement = element;\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostAndTriggerElement} class=\"kol-popover\">\n\t\t\t\t<div\n\t\t\t\t\tclass={clsx('kol-popover__content', { 'kol-popover__content--visible': this.state._visible })}\n\t\t\t\t\tref={this.catchPopoverElement}\n\t\t\t\t\thidden={!this.state._show}\n\t\t\t\t>\n\t\t\t\t\t<div class={clsx('kol-popover__arrow', `kol-popover__arrow--${this.state._align}`)} ref={this.catchArrowElement} />\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the alignment of the tooltip, popover or tabs in relation to the element.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines the callback functions for popover events.\n\t */\n\t@Prop() public _on?: PopoverCallbacksPropType;\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: PopoverStates = {\n\t\t_align: 'top',\n\t\t_on: {},\n\t\t_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: PopoverCallbacksPropType): void {\n\t\tvalidatePopoverCallbacks(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) void this.showPopover();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"version":3}
+{"file":"kol-popover-wc.entry.cjs.js","mappings":"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","names":["watchValidator","alignFloatingElements","dispatchDomEvent","KolEvent","getDocument","h","Host","clsx","validateAlign","validateShow"],"sources":["src/schema/props/popover-callbacks.ts","src/components/popover/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Callback } from '../enums';\nimport type { EventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type PopoverCallbacksPropType = {\n\t[Callback.onClose]?: EventCallback<MouseEvent | KeyboardEvent>;\n};\n\n/**\n * Defines the callback functions for popover events.\n */\nexport type PropPopoverCallbacks = {\n\ton: PopoverCallbacksPropType;\n};\n\n/* validator */\nexport const validatePopoverCallbacks = (component: Generic.Element.Component, value?: PopoverCallbacksPropType): void => {\n\twatchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['PopoverCallbacksPropType {Events.onClose}']), value);\n};\n","import type { AlignPropType, PopoverAPI, PopoverCallbacksPropType, PopoverStates, ShowPropType } from '../../schema';\nimport { getDocument, validateAlign, validatePopoverCallbacks, validateShow } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { alignFloatingElements } from '../../utils/align-floating-elements';\nimport clsx from 'clsx';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * @internal\n * @slot - The popover content.\n */\n@Component({\n\ttag: 'kol-popover-wc',\n\tshadow: false,\n})\nexport class KolPopover implements PopoverAPI {\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement | null;\n\tprivate host?: HTMLElement;\n\n\tprivate async showPopover(): Promise<void> {\n\t\tthis.addListenersToBody();\n\n\t\tif (this.triggerElement && this.popoverElement) {\n\t\t\tawait alignFloatingElements({\n\t\t\t\talign: this._align,\n\t\t\t\treferenceElement: this.triggerElement,\n\t\t\t\tarrowElement: this.arrowElement,\n\t\t\t\tfloatingElement: this.popoverElement,\n\t\t\t});\n\t\t\tthis.state = { ...this.state, _visible: true };\n\t\t}\n\t}\n\tprivate hidePopover(event: MouseEvent | KeyboardEvent): void {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_visible: false,\n\t\t};\n\t\tthis._show = false;\n\t\tthis.triggerElement?.focus();\n\t\tthis.removeListenersToBody();\n\n\t\tthis.state._on?.onClose?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover(event);\n\t};\n\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover(event);\n\t\t}\n\t};\n\n\t/* EventListener functions */\n\tprivate addListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.addEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.addEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.addEventListener(\n\t\t\t'scroll',\n\t\t\t() => {\n\t\t\t\tvoid this.showPopover();\n\t\t\t},\n\t\t\t{ passive: true },\n\t\t);\n\t}\n\tprivate removeListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.removeEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.removeEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.removeEventListener('scroll', () => {\n\t\t\tvoid this.showPopover();\n\t\t});\n\t}\n\n\t/* catchElement functions */\n\tprivate catchHostAndTriggerElement = (element: HTMLElement | null): void => {\n\t\tif (element) {\n\t\t\tthis.host = element;\n\t\t\tthis.triggerElement = element.previousElementSibling as HTMLElement | null;\n\t\t}\n\t};\n\tprivate catchPopoverElement = (element?: HTMLDivElement): void => {\n\t\tthis.popoverElement = element;\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostAndTriggerElement} class=\"kol-popover\">\n\t\t\t\t<div\n\t\t\t\t\tclass={clsx('kol-popover__content', { 'kol-popover__content--visible': this.state._visible })}\n\t\t\t\t\tref={this.catchPopoverElement}\n\t\t\t\t\thidden={!this.state._show}\n\t\t\t\t>\n\t\t\t\t\t<div class={clsx('kol-popover__arrow', `kol-popover__arrow--${this.state._align}`)} ref={this.catchArrowElement} />\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the alignment of the tooltip, popover or tabs in relation to the element.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines the callback functions for popover events.\n\t */\n\t@Prop() public _on?: PopoverCallbacksPropType;\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: PopoverStates = {\n\t\t_align: 'top',\n\t\t_on: {},\n\t\t_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: PopoverCallbacksPropType): void {\n\t\tvalidatePopoverCallbacks(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) void this.showPopover();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"version":3}

package/dist/cjs/kol-popover-wc.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kol-popover-wc.entry.cjs.js","sources":["src/schema/props/popover-callbacks.ts","src/components/popover/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Callback } from '../enums';\nimport type { EventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type PopoverCallbacksPropType = {\n\t[Callback.onClose]?: EventCallback<MouseEvent | KeyboardEvent>;\n};\n\n/**\n * Defines the callback functions for popover events.\n */\nexport type PropPopoverCallbacks = {\n\ton: PopoverCallbacksPropType;\n};\n\n/* validator */\nexport const validatePopoverCallbacks = (component: Generic.Element.Component, value?: PopoverCallbacksPropType): void => {\n\twatchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['PopoverCallbacksPropType {Events.onClose}']), value);\n};\n","import type { AlignPropType, PopoverAPI, PopoverCallbacksPropType, PopoverStates, ShowPropType } from '../../schema';\nimport { getDocument, validateAlign, validatePopoverCallbacks, validateShow } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { alignFloatingElements } from '../../utils/align-floating-elements';\nimport clsx from 'clsx';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * @internal\n * @slot - The popover content.\n */\n@Component({\n\ttag: 'kol-popover-wc',\n\tshadow: false,\n})\nexport class KolPopover implements PopoverAPI {\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement | null;\n\tprivate host?: HTMLElement;\n\n\tprivate async showPopover(): Promise<void> {\n\t\tthis.addListenersToBody();\n\n\t\tif (this.triggerElement && this.popoverElement) {\n\t\t\tawait alignFloatingElements({\n\t\t\t\talign: this._align,\n\t\t\t\treferenceElement: this.triggerElement,\n\t\t\t\tarrowElement: this.arrowElement,\n\t\t\t\tfloatingElement: this.popoverElement,\n\t\t\t});\n\t\t\tthis.state = { ...this.state, _visible: true };\n\t\t}\n\t}\n\tprivate hidePopover(event: MouseEvent | KeyboardEvent): void {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_visible: false,\n\t\t};\n\t\tthis._show = false;\n\t\tthis.triggerElement?.focus();\n\t\tthis.removeListenersToBody();\n\n\t\tthis.state._on?.onClose?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover(event);\n\t};\n\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover(event);\n\t\t}\n\t};\n\n\t/* EventListener functions */\n\tprivate addListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.addEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.addEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.addEventListener(\n\t\t\t'scroll',\n\t\t\t() => {\n\t\t\t\tvoid this.showPopover();\n\t\t\t},\n\t\t\t{ passive: true },\n\t\t);\n\t}\n\tprivate removeListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.removeEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.removeEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.removeEventListener('scroll', () => {\n\t\t\tvoid this.showPopover();\n\t\t});\n\t}\n\n\t/* catchElement functions */\n\tprivate catchHostAndTriggerElement = (element: HTMLElement | null): void => {\n\t\tif (element) {\n\t\t\tthis.host = element;\n\t\t\tthis.triggerElement = element.previousElementSibling as HTMLElement | null;\n\t\t}\n\t};\n\tprivate catchPopoverElement = (element?: HTMLDivElement): void => {\n\t\tthis.popoverElement = element;\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostAndTriggerElement} class=\"kol-popover\">\n\t\t\t\t<div\n\t\t\t\t\tclass={clsx('kol-popover__content', { 'kol-popover__content--visible': this.state._visible })}\n\t\t\t\t\tref={this.catchPopoverElement}\n\t\t\t\t\thidden={!this.state._show}\n\t\t\t\t>\n\t\t\t\t\t<div class={clsx('kol-popover__arrow', `kol-popover__arrow--${this.state._align}`)} ref={this.catchArrowElement} />\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the alignment of the tooltip, popover or tabs in relation to the element.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines the callback functions for popover events.\n\t */\n\t@Prop() public _on?: PopoverCallbacksPropType;\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: PopoverStates = {\n\t\t_align: 'top',\n\t\t_on: {},\n\t\t_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: PopoverCallbacksPropType): void {\n\t\tvalidatePopoverCallbacks(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) void this.showPopover();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"names":["watchValidator","alignFloatingElements","dispatchDomEvent","KolEvent","getDocument","h","Host","clsx","validateAlign","validateShow"],"mappings":"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"}

package/dist/cjs/kol-progress.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b7655f44.js"),index$1=require("./index-94c17ce6.js"),label=require("./label-7b22af75.js"),defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: 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    place-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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-progress__bar {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    align-items: center;\n    column-gap: 0.05rem;\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    grid-template-columns: auto;\n    grid-template-areas: \"ALL\";\n    justify-items: center;\n    align-content: center;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    text-align: center;\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    font-size: x-small;\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    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",KolProgressDefaultStyle0=defaultStyleCss,VALID_VARIANTS=Object.keys(index$1.KoliBriProgressVariantEnum),CycleSvg=({state:e})=>index.h("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},index.h("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),index.h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),index.h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),BarSvg=({state:e})=>{const t=e._value/e._max*100;return index.h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},index.h("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100%"}),index.h("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100%"}),index.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=>{switch(e._variant){case"cycle":return index.h(CycleSvg,{state:e});case"bar":return index.h(BarSvg,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}},KolProgress=class{constructor(e){index.registerInstance(this,e),this._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){const e="%"===this.state._unit,t=e?`${Math.round(this.state._liveValue/this.state._max*100)}`:this.state._liveValue,n=e?Math.round(this.state._value/this.state._max*100):this.state._value;return index.h("div",{key:"821bf1d4fece816591e8b567cf2026b44eb4b278",class:"kol-progress"},index.h("div",{key:"59bcae97c107e7b369ceb28a96b70215cfff498b","aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===this.state._variant,"kol-progress__bar":"bar"===this.state._variant}},"bar"===this.state._variant&&this.state._label&&index.h("div",{key:"72598c6fb849503f400b75fdb3789673c580886e",class:"kol-progress__bar-label"},this.state._label),createProgressSVG(this.state),"cycle"===this.state._variant&&index.h("div",{key:"18c2541fe253d1c823734d845122827e2953a04e",class:"kol-progress__cycle-text"},this.state._label&&index.h("div",{key:"74c81b2090e32b4d9eaa16636cb9c5c5114c46ad",class:"kol-progress__cycle-label"},this.state._label),index.h("div",{key:"3a32c98fca4adc2658c36ec72249f297dc1175c3",class:"kol-progress__cycle-value"},`${n} ${this.state._unit}`)),"bar"===this.state._variant&&index.h("div",{key:"4fc52d6d486fc97becfb8d1a45a1ba98975abafd",class:"kol-progress__bar-value",style:{width:`${`${(e?100:this.state._max)+1}`.length}ch`}},n),"bar"===this.state._variant&&index.h("div",{key:"a21584bb20a71bc0931a08e7d98ed358748c4685",class:"kol-progress__bar-unit"},this.state._unit)),index.h("progress",{key:"de96c7da155a8b40d393601abfd8854c4b195a68",class:"visually-hidden","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),index.h("span",{key:"85870eee4599c14b3124f211539fecbdfa605dab","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},e?`${t} %`:`${t} von ${this.state._max} ${this.state._unit}`))}validateLabel(e){label.validateLabel(this,e)}validateMax(e){"number"!=typeof e&&(e=100),index$1.watchNumber(this,"_max",e,{required:!0})}validateUnit(e){index$1.watchString(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),index$1.watchNumber(this,"_value",e,{required:!0})}validateVariant(e){index$1.watchValidator(this,"_variant",(e=>"string"==typeof e&&VALID_VARIANTS.includes(e)),new Set(VALID_VARIANTS),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};KolProgress.style={default:KolProgressDefaultStyle0},exports.kol_progress=KolProgress;
+"use strict";var index=require("./index-CWdhxV5q.js"),progress=require("./progress-Dys184zO.js"),label=require("./label-DB9qL3Jc.js");const defaultStyleCss="/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: 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    place-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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-progress__bar {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    align-items: center;\n    column-gap: 0.05rem;\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    grid-template-columns: auto;\n    grid-template-areas: \"ALL\";\n    justify-items: center;\n    align-content: center;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    text-align: center;\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    font-size: x-small;\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    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",VALID_VARIANTS=Object.keys(progress.KoliBriProgressVariantEnum),CycleSvg=({state:e})=>index.h("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},index.h("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),index.h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),index.h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),BarSvg=({state:e})=>{const t=e._value/e._max*100;return index.h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},index.h("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100%"}),index.h("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100%"}),index.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=>{switch(e._variant){case"cycle":return index.h(CycleSvg,{state:e});case"bar":return index.h(BarSvg,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}},KolProgress=class{constructor(e){index.registerInstance(this,e),this._unit="%",this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){const e="%"===this.state._unit,t=e?`${Math.round(this.state._liveValue/this.state._max*100)}`:this.state._liveValue,n=e?Math.round(this.state._value/this.state._max*100):this.state._value;return index.h("div",{key:"821bf1d4fece816591e8b567cf2026b44eb4b278",class:"kol-progress"},index.h("div",{key:"59bcae97c107e7b369ceb28a96b70215cfff498b","aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===this.state._variant,"kol-progress__bar":"bar"===this.state._variant}},"bar"===this.state._variant&&this.state._label&&index.h("div",{key:"72598c6fb849503f400b75fdb3789673c580886e",class:"kol-progress__bar-label"},this.state._label),createProgressSVG(this.state),"cycle"===this.state._variant&&index.h("div",{key:"18c2541fe253d1c823734d845122827e2953a04e",class:"kol-progress__cycle-text"},this.state._label&&index.h("div",{key:"74c81b2090e32b4d9eaa16636cb9c5c5114c46ad",class:"kol-progress__cycle-label"},this.state._label),index.h("div",{key:"3a32c98fca4adc2658c36ec72249f297dc1175c3",class:"kol-progress__cycle-value"},`${n} ${this.state._unit}`)),"bar"===this.state._variant&&index.h("div",{key:"4fc52d6d486fc97becfb8d1a45a1ba98975abafd",class:"kol-progress__bar-value",style:{width:`${`${(e?100:this.state._max)+1}`.length}ch`}},n),"bar"===this.state._variant&&index.h("div",{key:"a21584bb20a71bc0931a08e7d98ed358748c4685",class:"kol-progress__bar-unit"},this.state._unit)),index.h("progress",{key:"de96c7da155a8b40d393601abfd8854c4b195a68",class:"visually-hidden","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),index.h("span",{key:"85870eee4599c14b3124f211539fecbdfa605dab","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},e?`${t} %`:`${t} von ${this.state._max} ${this.state._unit}`))}validateLabel(e){label.validateLabel(this,e)}validateMax(e){"number"!=typeof e&&(e=100),progress.watchNumber(this,"_max",e,{required:!0})}validateUnit(e){progress.watchString(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),progress.watchNumber(this,"_value",e,{required:!0})}validateVariant(e){progress.watchValidator(this,"_variant",(e=>"string"==typeof e&&VALID_VARIANTS.includes(e)),new Set(VALID_VARIANTS),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};KolProgress.style={default:defaultStyleCss},exports.kol_progress=KolProgress;

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

@@ -1 +1 @@
-{"file":"kol-progress.entry.cjs.js","mappings":"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","names":["KoliBriProgressVariantEnum","h","validateLabel","watchNumber","watchString","watchValidator"],"sources":["src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-progress {\n\t\t&__bar {\n\t\t\tdisplay: grid;\n\t\t\tgrid-template-columns: 1fr auto;\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\talign-items: center;\n\t\t\tcolumn-gap: 0.05rem;\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\tgrid-template-columns: auto;\n\t\t\tgrid-template-areas: 'ALL';\n\t\t\tjustify-items: center;\n\t\t\talign-content: center;\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\ttext-align: center;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex-direction: column;\n\n\t\t\t\tfont-size: x-small;\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\tfill: transparent;\n\t\t\t\tstroke: #0075ff;\n\t\t\t\ttransform-origin: 50% 50%;\n\t\t\t\ttransform: rotate(-90deg);\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 { KoliBriProgressVariantType, LabelPropType, ProgressAPI, ProgressStates } from '../../schema';\nimport { KoliBriProgressVariantEnum, validateLabel, watchNumber, watchString, watchValidator } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\nconst CycleSvg = ({ state }: { state: ProgressStates }) => {\n\tconst fullCircle = 342;\n\n\treturn (\n\t\t<svg width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\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\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\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\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\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\t<circle\n\t\t\t\tclass=\"kol-progress__cycle-progress\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`}\n\t\t\t\tstroke-width=\"6\"\n\t\t\t\tcx=\"60\"\n\t\t\t\tcy=\"60\"\n\t\t\t\tr=\"54.5\"\n\t\t\t></circle>\n\t\t</svg>\n\t);\n};\n\nconst BarSvg = ({ state }: { state: ProgressStates }) => {\n\tconst percentage = 100 * (state._value / state._max);\n\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 = (state: ProgressStates): JSX.Element => {\n\tswitch (state._variant) {\n\t\tcase 'cycle':\n\t\t\treturn <CycleSvg state={state} />;\n\t\tcase 'bar':\n\t\t\treturn <BarSvg state={state} />;\n\t\tdefault:\n\t\t\tthrow new Error(`Progress variant ${state._variant} not implemented.`);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolProgress implements ProgressAPI {\n\tprivate interval?: number;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\tconst isPercentage = this.state._unit === '%';\n\t\tconst liveProgressValue = isPercentage ? `${Math.round((this.state._liveValue / this.state._max) * 100)}` : this.state._liveValue;\n\t\tconst displayValue = isPercentage ? Math.round((this.state._value / this.state._max) * 100) : this.state._value;\n\t\treturn (\n\t\t\t<div class=\"kol-progress\">\n\t\t\t\t<div\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'kol-progress__cycle': this.state._variant === 'cycle',\n\t\t\t\t\t\t'kol-progress__bar': this.state._variant === 'bar',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'bar' && this.state._label && <div class=\"kol-progress__bar-label\">{this.state._label}</div>}\n\t\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t\t{this.state._variant === 'cycle' && (\n\t\t\t\t\t\t<div class=\"kol-progress__cycle-text\">\n\t\t\t\t\t\t\t{this.state._label && <div class=\"kol-progress__cycle-label\">{this.state._label}</div>}\n\t\t\t\t\t\t\t<div class=\"kol-progress__cycle-value\">{`${displayValue} ${this.state._unit}`}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._variant === 'bar' && (\n\t\t\t\t\t\t<div class=\"kol-progress__bar-value\" style={{ width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` }}>\n\t\t\t\t\t\t\t{displayValue}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._variant === 'bar' && <div class=\"kol-progress__bar-unit\">{this.state._unit}</div>}\n\t\t\t\t</div>\n\n\t\t\t\t{/* https://css-tricks.com/html5-progress-element/ */}\n\t\t\t\t<progress\n\t\t\t\t\tclass=\"visually-hidden\"\n\t\t\t\t\taria-busy={this.state._value < this.state._max ? 'true' : 'false'}\n\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden\">\n\t\t\t\t\t{isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${this.state._max} ${this.state._unit}`}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t);\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() public _label?: LabelPropType;\n\n\t/**\n\t * Defines at which value the progress display is completed.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Defines the unit of the step values (not shown).\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Defines the progress.\n\t */\n\t@Prop() public _value!: number;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriProgressVariantType;\n\n\t@State() public state: ProgressStates = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressVariantType): void {\n\t\twatchValidator(this, '_variant', (value) => typeof value === 'string' && VALID_VARIANTS.includes(value), new Set(VALID_VARIANTS), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_liveValue: this.state._value,\n\t\t};\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000) as unknown as number;\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"version":3}
+{"file":"kol-progress.entry.cjs.js","mappings":"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","names":["KoliBriProgressVariantEnum","h","validateLabel","watchNumber","watchString","watchValidator"],"sources":["src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-progress {\n\t\t&__bar {\n\t\t\tdisplay: grid;\n\t\t\tgrid-template-columns: 1fr auto;\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\talign-items: center;\n\t\t\tcolumn-gap: 0.05rem;\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\tgrid-template-columns: auto;\n\t\t\tgrid-template-areas: 'ALL';\n\t\t\tjustify-items: center;\n\t\t\talign-content: center;\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\ttext-align: center;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex-direction: column;\n\n\t\t\t\tfont-size: x-small;\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\tfill: transparent;\n\t\t\t\tstroke: #0075ff;\n\t\t\t\ttransform-origin: 50% 50%;\n\t\t\t\ttransform: rotate(-90deg);\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 { KoliBriProgressVariantType, LabelPropType, ProgressAPI, ProgressStates } from '../../schema';\nimport { KoliBriProgressVariantEnum, validateLabel, watchNumber, watchString, watchValidator } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\nconst CycleSvg = ({ state }: { state: ProgressStates }) => {\n\tconst fullCircle = 342;\n\n\treturn (\n\t\t<svg width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\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\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\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\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\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\t<circle\n\t\t\t\tclass=\"kol-progress__cycle-progress\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`}\n\t\t\t\tstroke-width=\"6\"\n\t\t\t\tcx=\"60\"\n\t\t\t\tcy=\"60\"\n\t\t\t\tr=\"54.5\"\n\t\t\t></circle>\n\t\t</svg>\n\t);\n};\n\nconst BarSvg = ({ state }: { state: ProgressStates }) => {\n\tconst percentage = 100 * (state._value / state._max);\n\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 = (state: ProgressStates): JSX.Element => {\n\tswitch (state._variant) {\n\t\tcase 'cycle':\n\t\t\treturn <CycleSvg state={state} />;\n\t\tcase 'bar':\n\t\t\treturn <BarSvg state={state} />;\n\t\tdefault:\n\t\t\tthrow new Error(`Progress variant ${state._variant} not implemented.`);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolProgress implements ProgressAPI {\n\tprivate interval?: number;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\tconst isPercentage = this.state._unit === '%';\n\t\tconst liveProgressValue = isPercentage ? `${Math.round((this.state._liveValue / this.state._max) * 100)}` : this.state._liveValue;\n\t\tconst displayValue = isPercentage ? Math.round((this.state._value / this.state._max) * 100) : this.state._value;\n\t\treturn (\n\t\t\t<div class=\"kol-progress\">\n\t\t\t\t<div\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'kol-progress__cycle': this.state._variant === 'cycle',\n\t\t\t\t\t\t'kol-progress__bar': this.state._variant === 'bar',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'bar' && this.state._label && <div class=\"kol-progress__bar-label\">{this.state._label}</div>}\n\t\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t\t{this.state._variant === 'cycle' && (\n\t\t\t\t\t\t<div class=\"kol-progress__cycle-text\">\n\t\t\t\t\t\t\t{this.state._label && <div class=\"kol-progress__cycle-label\">{this.state._label}</div>}\n\t\t\t\t\t\t\t<div class=\"kol-progress__cycle-value\">{`${displayValue} ${this.state._unit}`}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._variant === 'bar' && (\n\t\t\t\t\t\t<div class=\"kol-progress__bar-value\" style={{ width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` }}>\n\t\t\t\t\t\t\t{displayValue}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._variant === 'bar' && <div class=\"kol-progress__bar-unit\">{this.state._unit}</div>}\n\t\t\t\t</div>\n\n\t\t\t\t{/* https://css-tricks.com/html5-progress-element/ */}\n\t\t\t\t<progress\n\t\t\t\t\tclass=\"visually-hidden\"\n\t\t\t\t\taria-busy={this.state._value < this.state._max ? 'true' : 'false'}\n\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden\">\n\t\t\t\t\t{isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${this.state._max} ${this.state._unit}`}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t);\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() public _label?: LabelPropType;\n\n\t/**\n\t * Defines at which value the progress display is completed.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Defines the unit of the step values (not shown).\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Defines the progress.\n\t */\n\t@Prop() public _value!: number;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriProgressVariantType;\n\n\t@State() public state: ProgressStates = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressVariantType): void {\n\t\twatchValidator(this, '_variant', (value) => typeof value === 'string' && VALID_VARIANTS.includes(value), new Set(VALID_VARIANTS), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_liveValue: this.state._value,\n\t\t};\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000) as unknown as number;\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"version":3}

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

@@ -0,0 +1 @@
+{"version":3,"file":"kol-progress.entry.cjs.js","sources":["src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-progress {\n\t\t&__bar {\n\t\t\tdisplay: grid;\n\t\t\tgrid-template-columns: 1fr auto;\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\talign-items: center;\n\t\t\tcolumn-gap: 0.05rem;\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\tgrid-template-columns: auto;\n\t\t\tgrid-template-areas: 'ALL';\n\t\t\tjustify-items: center;\n\t\t\talign-content: center;\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\ttext-align: center;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex-direction: column;\n\n\t\t\t\tfont-size: x-small;\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\tfill: transparent;\n\t\t\t\tstroke: #0075ff;\n\t\t\t\ttransform-origin: 50% 50%;\n\t\t\t\ttransform: rotate(-90deg);\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 { KoliBriProgressVariantType, LabelPropType, ProgressAPI, ProgressStates } from '../../schema';\nimport { KoliBriProgressVariantEnum, validateLabel, watchNumber, watchString, watchValidator } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\nconst CycleSvg = ({ state }: { state: ProgressStates }) => {\n\tconst fullCircle = 342;\n\n\treturn (\n\t\t<svg width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\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\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\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\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\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\t<circle\n\t\t\t\tclass=\"kol-progress__cycle-progress\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`}\n\t\t\t\tstroke-width=\"6\"\n\t\t\t\tcx=\"60\"\n\t\t\t\tcy=\"60\"\n\t\t\t\tr=\"54.5\"\n\t\t\t></circle>\n\t\t</svg>\n\t);\n};\n\nconst BarSvg = ({ state }: { state: ProgressStates }) => {\n\tconst percentage = 100 * (state._value / state._max);\n\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 = (state: ProgressStates): JSX.Element => {\n\tswitch (state._variant) {\n\t\tcase 'cycle':\n\t\t\treturn <CycleSvg state={state} />;\n\t\tcase 'bar':\n\t\t\treturn <BarSvg state={state} />;\n\t\tdefault:\n\t\t\tthrow new Error(`Progress variant ${state._variant} not implemented.`);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolProgress implements ProgressAPI {\n\tprivate interval?: number;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\tconst isPercentage = this.state._unit === '%';\n\t\tconst liveProgressValue = isPercentage ? `${Math.round((this.state._liveValue / this.state._max) * 100)}` : this.state._liveValue;\n\t\tconst displayValue = isPercentage ? Math.round((this.state._value / this.state._max) * 100) : this.state._value;\n\t\treturn (\n\t\t\t<div class=\"kol-progress\">\n\t\t\t\t<div\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'kol-progress__cycle': this.state._variant === 'cycle',\n\t\t\t\t\t\t'kol-progress__bar': this.state._variant === 'bar',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'bar' && this.state._label && <div class=\"kol-progress__bar-label\">{this.state._label}</div>}\n\t\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t\t{this.state._variant === 'cycle' && (\n\t\t\t\t\t\t<div class=\"kol-progress__cycle-text\">\n\t\t\t\t\t\t\t{this.state._label && <div class=\"kol-progress__cycle-label\">{this.state._label}</div>}\n\t\t\t\t\t\t\t<div class=\"kol-progress__cycle-value\">{`${displayValue} ${this.state._unit}`}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._variant === 'bar' && (\n\t\t\t\t\t\t<div class=\"kol-progress__bar-value\" style={{ width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` }}>\n\t\t\t\t\t\t\t{displayValue}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._variant === 'bar' && <div class=\"kol-progress__bar-unit\">{this.state._unit}</div>}\n\t\t\t\t</div>\n\n\t\t\t\t{/* https://css-tricks.com/html5-progress-element/ */}\n\t\t\t\t<progress\n\t\t\t\t\tclass=\"visually-hidden\"\n\t\t\t\t\taria-busy={this.state._value < this.state._max ? 'true' : 'false'}\n\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden\">\n\t\t\t\t\t{isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${this.state._max} ${this.state._unit}`}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t);\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() public _label?: LabelPropType;\n\n\t/**\n\t * Defines at which value the progress display is completed.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Defines the unit of the step values (not shown).\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Defines the progress.\n\t */\n\t@Prop() public _value!: number;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriProgressVariantType;\n\n\t@State() public state: ProgressStates = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressVariantType): void {\n\t\twatchValidator(this, '_variant', (value) => typeof value === 'string' && VALID_VARIANTS.includes(value), new Set(VALID_VARIANTS), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_liveValue: this.state._value,\n\t\t};\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000) as unknown as number;\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"names":["KoliBriProgressVariantEnum","h","validateLabel","watchNumber","watchString","watchValidator"],"mappings":"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"}

package/dist/cjs/kol-quote.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-b7655f44.js"),index$1=require("./index-94c17ce6.js"),componentNames=require("./component-names-1cb5b7ce.js"),clsx=require("./clsx-dd4d6dd1.js"),label=require("./label-7b22af75.js"),koliBriQuoteVariantOptions=["block","inline"],defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: rem(16);\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: 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    place-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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !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}",KolQuoteDefaultStyle0=defaultStyleCss,KolQuote=class{constructor(e){index.registerInstance(this,e),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){label.validateLabel(this,e)}validateHref(e){index$1.watchString(this,"_href",e,{required:!0})}validateQuote(e){index$1.watchString(this,"_quote",e,{required:!0})}validateVariant(e){index$1.watchValidator(this,"_variant",(e=>"string"==typeof e&&koliBriQuoteVariantOptions.includes(e)),new Set(koliBriQuoteVariantOptions),e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=index$1.showExpertSlot(this.state._quote);return index.h("figure",{key:"e68968696617503220e774f6b0a11c6c7f256582",class:clsx.clsx("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?index.h("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?void 0:"true",hidden:!e},index.h("slot",{name:"expert"}))):index.h("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?void 0:"true",hidden:!e},index.h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&index.h("figcaption",{key:"918f5c9884c03b3275473276624f4585490a2069",class:"kol-quote__figcaption"},index.h("cite",{key:"609c527c94b38135a0fb2af474f39b61ce69bc74",class:"kol-quote__cite"},index.h(componentNames.KolLinkTag,{key:"ade63d54115b41bfaa130c054023b0004e49dda5",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};KolQuote.style={default:KolQuoteDefaultStyle0},exports.kol_quote=KolQuote;
+"use strict";var index=require("./index-CWdhxV5q.js"),progress=require("./progress-Dys184zO.js"),label=require("./label-DB9qL3Jc.js"),componentNames=require("./component-names-D7MwtuB7.js"),clsx=require("./clsx-CkZlkaek.js");const koliBriQuoteVariantOptions=["block","inline"],defaultStyleCss="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: 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    place-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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !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=class{constructor(e){index.registerInstance(this,e),this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){label.validateLabel(this,e)}validateHref(e){progress.watchString(this,"_href",e,{required:!0})}validateQuote(e){progress.watchString(this,"_quote",e,{required:!0})}validateVariant(e){progress.watchValidator(this,"_variant",(e=>"string"==typeof e&&koliBriQuoteVariantOptions.includes(e)),new Set(koliBriQuoteVariantOptions),e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=progress.showExpertSlot(this.state._quote);return index.h("figure",{key:"e68968696617503220e774f6b0a11c6c7f256582",class:clsx.clsx("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?index.h("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?void 0:"true",hidden:!e},index.h("slot",{name:"expert"}))):index.h("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?void 0:"true",hidden:!e},index.h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&index.h("figcaption",{key:"918f5c9884c03b3275473276624f4585490a2069",class:"kol-quote__figcaption"},index.h("cite",{key:"609c527c94b38135a0fb2af474f39b61ce69bc74",class:"kol-quote__cite"},index.h(componentNames.KolLinkTag,{key:"ade63d54115b41bfaa130c054023b0004e49dda5",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};KolQuote.style={default:defaultStyleCss},exports.kol_quote=KolQuote;

package/dist/cjs/kol-quote.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"kol-quote.entry.cjs.js","mappings":";;;;;;;;;;;;;AAIO,MAAM,0BAA0B,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU;;ACJtE,MAAM,eAAe,GAAG,oqJAAoqJ,CAAC;AAC7rJ,8BAAe,eAAe;;MCajB,QAAQ;;;;;;wBAmB4B,QAAQ;qBAEnB;YACpC,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,QAAQ;SAClB;;IAGM,aAAa,CAAC,KAAqB;QACzCA,mBAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC3B;IAGM,YAAY,CAAC,KAAoB;QACvCC,mBAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;YACjC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,aAAa,CAAC,KAAc;QAClCA,mBAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;YAClC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAA2B;QACjDC,sBAAc,CACb,IAAI,EACJ,UAAU,EACV,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,0BAA0B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAClF,IAAI,GAAG,CAAC,0BAA0B,CAAC,EACnC,KAAK,CACL,CAAC;KACF;IAEM,iBAAiB;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;IAEM,MAAM;QACZ,MAAM,aAAa,GAAGC,sBAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxD,QACCC,qEAAQ,KAAK,EAAEC,SAAI,CAAC,WAAW,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,IACnE,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,OAAO,IAC/BD,wBAAY,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAC9D,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACK,KAEbA,eAAG,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAChD,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACJ,CACJ,EACA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,KACrEA,yEAAY,KAAK,EAAC,uBAAuB,IACxCA,mEAAM,KAAK,EAAC,iBAAiB,IAC5BA,QAACE,yBAAU,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAC,QAAQ,GAAG,CAC7E,CACK,CACb,CACO,EACR;KACF;;;;;;;;;;;;;;","names":["validateLabel","watchString","watchValidator","showExpertSlot","h","clsx","KolLinkTag"],"sources":["src/schema/components/quote.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { PropHref, PropLabel } from '../props';\n\nexport const koliBriQuoteVariantOptions = ['block', 'inline'] as const;\nexport type KoliBriQuoteVariant = (typeof koliBriQuoteVariantOptions)[number];\n\ntype RequiredProps = {\n\tquote: string;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalProps = {\n\tvariant: KoliBriQuoteVariant;\n} & PropLabel;\n\ntype RequiredStates = {\n\tquote: string;\n\tvariant: KoliBriQuoteVariant;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalStates = PropLabel;\n\nexport type QuoteProps = Generic.Element.Members<RequiredProps, OptionalProps>;\nexport type QuoteStates = Generic.Element.Members<RequiredStates, OptionalStates>;\nexport type QuoteAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-quote {\n\t\t$root: &;\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&__cite {\n\t\t\t&::before {\n\t\t\t\tcontent: '—';\n\n\t\t\t\t@at-root #{$root}--block & {\n\t\t\t\t\tpadding-right: 0.5em;\n\t\t\t\t}\n\n\t\t\t\t@at-root #{$root}--inline & {\n\t\t\t\t\tpadding: 0.5em;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__figcaption {\n\t\t\t@at-root #{$root}--block & {\n\t\t\t\tdisplay: inline;\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t}\n\n\t\t&__blockquote {\n\t\t\t&::before {\n\t\t\t\tcontent: open-quote;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: close-quote;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { HrefPropType, KoliBriQuoteVariant, LabelPropType, QuoteAPI, QuoteStates } from '../../schema';\nimport { koliBriQuoteVariantOptions, showExpertSlot, validateLabel, watchString, watchValidator } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkTag } from '../../core/component-names';\nimport clsx from 'clsx';\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements QuoteAPI {\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: QuoteStates = {\n\t\t_href: '', // ⚠ required\n\t\t_quote: '', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value),\n\t\t\tnew Set(koliBriQuoteVariantOptions),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\n\t\treturn (\n\t\t\t<figure class={clsx('kol-quote', `kol-quote--${this.state._variant}`)}>\n\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t<blockquote class=\"kol-quote__blockquote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</blockquote>\n\t\t\t\t) : (\n\t\t\t\t\t<q class=\"kol-quote__quote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</q>\n\t\t\t\t)}\n\t\t\t\t{typeof this.state._label === 'string' && this.state._label.length > 0 && (\n\t\t\t\t\t<figcaption class=\"kol-quote__figcaption\">\n\t\t\t\t\t\t<cite class=\"kol-quote__cite\">\n\t\t\t\t\t\t\t<KolLinkTag _href={this.state._href} _label={this.state._label} _target=\"_blank\" />\n\t\t\t\t\t\t</cite>\n\t\t\t\t\t</figcaption>\n\t\t\t\t)}\n\t\t\t</figure>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-quote.entry.cjs.js","mappings":"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","names":["validateLabel","watchString","watchValidator","showExpertSlot","h","clsx","KolLinkTag"],"sources":["src/schema/components/quote.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { PropHref, PropLabel } from '../props';\n\nexport const koliBriQuoteVariantOptions = ['block', 'inline'] as const;\nexport type KoliBriQuoteVariant = (typeof koliBriQuoteVariantOptions)[number];\n\ntype RequiredProps = {\n\tquote: string;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalProps = {\n\tvariant: KoliBriQuoteVariant;\n} & PropLabel;\n\ntype RequiredStates = {\n\tquote: string;\n\tvariant: KoliBriQuoteVariant;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalStates = PropLabel;\n\nexport type QuoteProps = Generic.Element.Members<RequiredProps, OptionalProps>;\nexport type QuoteStates = Generic.Element.Members<RequiredStates, OptionalStates>;\nexport type QuoteAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-quote {\n\t\t$root: &;\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&__cite {\n\t\t\t&::before {\n\t\t\t\tcontent: '—';\n\n\t\t\t\t@at-root #{$root}--block & {\n\t\t\t\t\tpadding-right: 0.5em;\n\t\t\t\t}\n\n\t\t\t\t@at-root #{$root}--inline & {\n\t\t\t\t\tpadding: 0.5em;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__figcaption {\n\t\t\t@at-root #{$root}--block & {\n\t\t\t\tdisplay: inline;\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t}\n\n\t\t&__blockquote {\n\t\t\t&::before {\n\t\t\t\tcontent: open-quote;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: close-quote;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { HrefPropType, KoliBriQuoteVariant, LabelPropType, QuoteAPI, QuoteStates } from '../../schema';\nimport { koliBriQuoteVariantOptions, showExpertSlot, validateLabel, watchString, watchValidator } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkTag } from '../../core/component-names';\nimport clsx from 'clsx';\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements QuoteAPI {\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: QuoteStates = {\n\t\t_href: '', // ⚠ required\n\t\t_quote: '', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value),\n\t\t\tnew Set(koliBriQuoteVariantOptions),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\n\t\treturn (\n\t\t\t<figure class={clsx('kol-quote', `kol-quote--${this.state._variant}`)}>\n\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t<blockquote class=\"kol-quote__blockquote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</blockquote>\n\t\t\t\t) : (\n\t\t\t\t\t<q class=\"kol-quote__quote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</q>\n\t\t\t\t)}\n\t\t\t\t{typeof this.state._label === 'string' && this.state._label.length > 0 && (\n\t\t\t\t\t<figcaption class=\"kol-quote__figcaption\">\n\t\t\t\t\t\t<cite class=\"kol-quote__cite\">\n\t\t\t\t\t\t\t<KolLinkTag _href={this.state._href} _label={this.state._label} _target=\"_blank\" />\n\t\t\t\t\t\t</cite>\n\t\t\t\t\t</figcaption>\n\t\t\t\t)}\n\t\t\t</figure>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/cjs/kol-quote.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kol-quote.entry.cjs.js","sources":["src/schema/components/quote.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { PropHref, PropLabel } from '../props';\n\nexport const koliBriQuoteVariantOptions = ['block', 'inline'] as const;\nexport type KoliBriQuoteVariant = (typeof koliBriQuoteVariantOptions)[number];\n\ntype RequiredProps = {\n\tquote: string;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalProps = {\n\tvariant: KoliBriQuoteVariant;\n} & PropLabel;\n\ntype RequiredStates = {\n\tquote: string;\n\tvariant: KoliBriQuoteVariant;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalStates = PropLabel;\n\nexport type QuoteProps = Generic.Element.Members<RequiredProps, OptionalProps>;\nexport type QuoteStates = Generic.Element.Members<RequiredStates, OptionalStates>;\nexport type QuoteAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-quote {\n\t\t$root: &;\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&__cite {\n\t\t\t&::before {\n\t\t\t\tcontent: '—';\n\n\t\t\t\t@at-root #{$root}--block & {\n\t\t\t\t\tpadding-right: 0.5em;\n\t\t\t\t}\n\n\t\t\t\t@at-root #{$root}--inline & {\n\t\t\t\t\tpadding: 0.5em;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__figcaption {\n\t\t\t@at-root #{$root}--block & {\n\t\t\t\tdisplay: inline;\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t}\n\n\t\t&__blockquote {\n\t\t\t&::before {\n\t\t\t\tcontent: open-quote;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: close-quote;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { HrefPropType, KoliBriQuoteVariant, LabelPropType, QuoteAPI, QuoteStates } from '../../schema';\nimport { koliBriQuoteVariantOptions, showExpertSlot, validateLabel, watchString, watchValidator } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkTag } from '../../core/component-names';\nimport clsx from 'clsx';\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements QuoteAPI {\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: QuoteStates = {\n\t\t_href: '', // ⚠ required\n\t\t_quote: '', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value),\n\t\t\tnew Set(koliBriQuoteVariantOptions),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\n\t\treturn (\n\t\t\t<figure class={clsx('kol-quote', `kol-quote--${this.state._variant}`)}>\n\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t<blockquote class=\"kol-quote__blockquote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</blockquote>\n\t\t\t\t) : (\n\t\t\t\t\t<q class=\"kol-quote__quote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</q>\n\t\t\t\t)}\n\t\t\t\t{typeof this.state._label === 'string' && this.state._label.length > 0 && (\n\t\t\t\t\t<figcaption class=\"kol-quote__figcaption\">\n\t\t\t\t\t\t<cite class=\"kol-quote__cite\">\n\t\t\t\t\t\t\t<KolLinkTag _href={this.state._href} _label={this.state._label} _target=\"_blank\" />\n\t\t\t\t\t\t</cite>\n\t\t\t\t\t</figcaption>\n\t\t\t\t)}\n\t\t\t</figure>\n\t\t);\n\t}\n}\n"],"names":["validateLabel","watchString","watchValidator","showExpertSlot","h","clsx","KolLinkTag"],"mappings":"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"}