@public-ui/components 3.0.3-rc.0 → 3.0.3-rc.1

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolPopoverButton","constructor","hostRef","this","_disabled","_hideLabel","_popoverAlign","_tooltipAlign","_type","_variant","hidePopover","_a","ref","render","h","KolPopoverButtonWcTag","key","element","_accessKey","_ariaControls","_ariaDescription","_ariaSelected","_customClass","_icons","_id","_label","_name","_on","_role","_shortKey","_syncValueBySelector","_tabIndex","_value","name","slot"],"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"],"mappings":";;;8HAAA,MAAMA,EAAkB,w9L,MC+BXC,EAAgB,MAP7B,WAAAC,CAAAC,G,UA+EgBC,KAASC,UAAa,MAOtBD,KAAUE,WAAa,MA8BvBF,KAAaG,cAA0B,SA0BvCH,KAAaI,cAA0B,MAKvCJ,KAAKK,MAAwB,SAU7BL,KAAQM,SAA2B,QAClD,CA/IO,iBAAMC,G,YACPC,EAAAR,KAAKS,OAAK,MAAAD,SAAA,SAAAA,EAAAD,c,CAGT,MAAAG,GACN,OACCC,EAACC,EAAqB,CAAAC,IAAA,2CACrBJ,IAAMK,GAAad,KAAKS,IAAMK,EAC9BC,WAAYf,KAAKe,WACjBC,cAAehB,KAAKgB,cACpBC,iBAAkBjB,KAAKiB,iBACvBC,cAAelB,KAAKkB,cACpBC,aAAcnB,KAAKmB,aACnBlB,UAAWD,KAAKC,UAChBC,WAAYF,KAAKE,WACjBkB,OAAQpB,KAAKoB,OACbC,IAAKrB,KAAKqB,IACVC,OAAQtB,KAAKsB,OACbC,MAAOvB,KAAKuB,MACZC,IAAKxB,KAAKwB,IACVrB,cAAeH,KAAKG,cACpBsB,MAAOzB,KAAKyB,MACZC,UAAW1B,KAAK0B,UAChBC,qBAAsB3B,KAAK2B,qBAC3BC,UAAW5B,KAAK4B,UAChBxB,cAAeJ,KAAKI,cACpBC,MAAOL,KAAKK,MACZwB,OAAQ7B,KAAK6B,OACbvB,SAAUN,KAAKM,UAEfK,EAAA,QAAAE,IAAA,2CAAMiB,KAAK,SAASC,KAAK,WACzBpB,EAAQ,QAAAE,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolPopoverButton","constructor","hostRef","this","_disabled","_hideLabel","_popoverAlign","_tooltipAlign","_type","_variant","hidePopover","_a","ref","render","h","KolPopoverButtonWcTag","key","element","_accessKey","_ariaControls","_ariaDescription","_ariaSelected","_customClass","_icons","_id","_label","_name","_on","_role","_shortKey","_syncValueBySelector","_tabIndex","_value","name","slot"],"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"],"mappings":";;;8HAAA,MAAMA,EAAkB,spM,MC+BXC,EAAgB,MAP7B,WAAAC,CAAAC,G,UA+EgBC,KAASC,UAAa,MAOtBD,KAAUE,WAAa,MA8BvBF,KAAaG,cAA0B,SA0BvCH,KAAaI,cAA0B,MAKvCJ,KAAKK,MAAwB,SAU7BL,KAAQM,SAA2B,QAClD,CA/IO,iBAAMC,G,YACPC,EAAAR,KAAKS,OAAK,MAAAD,SAAA,SAAAA,EAAAD,c,CAGT,MAAAG,GACN,OACCC,EAACC,EAAqB,CAAAC,IAAA,2CACrBJ,IAAMK,GAAad,KAAKS,IAAMK,EAC9BC,WAAYf,KAAKe,WACjBC,cAAehB,KAAKgB,cACpBC,iBAAkBjB,KAAKiB,iBACvBC,cAAelB,KAAKkB,cACpBC,aAAcnB,KAAKmB,aACnBlB,UAAWD,KAAKC,UAChBC,WAAYF,KAAKE,WACjBkB,OAAQpB,KAAKoB,OACbC,IAAKrB,KAAKqB,IACVC,OAAQtB,KAAKsB,OACbC,MAAOvB,KAAKuB,MACZC,IAAKxB,KAAKwB,IACVrB,cAAeH,KAAKG,cACpBsB,MAAOzB,KAAKyB,MACZC,UAAW1B,KAAK0B,UAChBC,qBAAsB3B,KAAK2B,qBAC3BC,UAAW5B,KAAK4B,UAChBxB,cAAeJ,KAAKI,cACpBC,MAAOL,KAAKK,MACZwB,OAAQ7B,KAAK6B,OACbvB,SAAUN,KAAKM,UAEfK,EAAA,QAAAE,IAAA,2CAAMiB,KAAK,SAASC,KAAK,WACzBpB,EAAQ,QAAAE,IAAA,6C","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as s,H as t}from"./index-CGVuC_LX.js";import{w as o,A as e}from"./common-CveT8b8y.js";import{v as a}from"./align-DrcZAyfz.js";import{v as h}from"./show-DtTxuK2_.js";import{a as l}from"./align-floating-elements-CS5tDVty.js";import{c as r}from"./clsx-eK3rPvPS.js";import{d as n,K as c}from"./events-CoPFQEiC.js";const v=(e,t)=>{o(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)},d=class{constructor(e){i(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 l({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,o;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===(o=null===(s=this.state._on)||void 0===s?void 0:s.onClose)||void 0===o||o.call(s,e),this.host&&n(this.host,c.close)}addListenersToBody(){var t;const s=e().body;s.addEventListener("keyup",this.hidePopoverByEscape),s.addEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var t;const s=e().body;s.removeEventListener("keyup",this.hidePopoverByEscape),s.removeEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return s(t,{key:"53179ace5c0dfabbe1dd00ba8ddfe453ef55ccd5",ref:this.catchHostAndTriggerElement,class:"kol-popover"},s("div",{key:"f42aafe81aaa0a09526b4e9923a96133ee81c5d2",class:r("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,hidden:!this.state._show},s("div",{key:"25719436c820c214a2e3c0fac47449f842c4f68c",class:r("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),s("slot",{key:"fff04758761fb36389c6698b17730b604981ca66"})))}validateAlign(e){a(this,e)}validateOn(e){v(this,e)}validateShow(e){h(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}};export{d as kol_popover_wc};
+import{r as i,h as s,H as t}from"./index-DCfrKP1A.js";import{w as o,A as e}from"./common-CveT8b8y.js";import{v as a}from"./align-DrcZAyfz.js";import{v as h}from"./show-DtTxuK2_.js";import{a as l}from"./align-floating-elements-CS5tDVty.js";import{c as r}from"./clsx-eK3rPvPS.js";import{d as n,K as c}from"./events-CoPFQEiC.js";const v=(e,t)=>{o(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)},d=class{constructor(e){i(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 l({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,o;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===(o=null===(s=this.state._on)||void 0===s?void 0:s.onClose)||void 0===o||o.call(s,e),this.host&&n(this.host,c.close)}addListenersToBody(){var t;const s=e().body;s.addEventListener("keyup",this.hidePopoverByEscape),s.addEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var t;const s=e().body;s.removeEventListener("keyup",this.hidePopoverByEscape),s.removeEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return s(t,{key:"53179ace5c0dfabbe1dd00ba8ddfe453ef55ccd5",ref:this.catchHostAndTriggerElement,class:"kol-popover"},s("div",{key:"f42aafe81aaa0a09526b4e9923a96133ee81c5d2",class:r("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,hidden:!this.state._show},s("div",{key:"25719436c820c214a2e3c0fac47449f842c4f68c",class:r("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),s("slot",{key:"fff04758761fb36389c6698b17730b604981ca66"})))}validateAlign(e){a(this,e)}validateOn(e){v(this,e)}validateShow(e){h(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}};export{d as kol_popover_wc};

package/dist/kolibri/kol-progress.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-progress.entry.esm.js","sources":["src/schema/props/unit.ts","src/schema/props/variant-progress.ts","src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchString } from '../utils';\n\n/* types */\nexport type UnitPropType = string;\n\n/**\n * Defines the unit of the step values (not shown).\n */\nexport type PropUnit = {\n\tunit: UnitPropType;\n};\n\n/* validator */\nexport const validateUnit = (component: Generic.Element.Component, value?: UnitPropType): void => {\n\twatchString(component, '_unit', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../utils';\n\nexport const progressVariantOptions = ['bar', 'cycle'] as const;\nexport type ProgressVariantPropType = (typeof progressVariantOptions)[number];\n\n/**\n * Defines the variant for displaying the progress component.\n */\nexport type PropVariantProgress = {\n\tvariant: ProgressVariantPropType;\n};\n\nconst isProgressVariantPropType = (value: unknown): value is ProgressVariantPropType => {\n\treturn typeof value === 'string' && progressVariantOptions.includes(value as ProgressVariantPropType);\n};\n\nexport const validateVariantProgress = (component: Generic.Element.Component, value?: ProgressVariantPropType): void => {\n\twatchValidator(component, '_variant', isProgressVariantPropType, new Set(progressVariantOptions), value);\n};\n","@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 { LabelPropType, ProgressAPI, ProgressStates, ProgressVariantPropType } from '../../schema';\nimport { validateLabel, validateUnit, validateVariantProgress, watchNumber } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\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?: ProgressVariantPropType;\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\tvalidateUnit(this, 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?: ProgressVariantPropType): void {\n\t\tvalidateVariantProgress(this, 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":[],"mappings":"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"}
+{"version":3,"file":"kol-progress.entry.esm.js","sources":["src/schema/props/unit.ts","src/schema/props/variant-progress.ts","src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchString } from '../utils';\n\n/* types */\nexport type UnitPropType = string;\n\n/**\n * Defines the unit of the step values (not shown).\n */\nexport type PropUnit = {\n\tunit: UnitPropType;\n};\n\n/* validator */\nexport const validateUnit = (component: Generic.Element.Component, value?: UnitPropType): void => {\n\twatchString(component, '_unit', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../utils';\n\nexport const progressVariantOptions = ['bar', 'cycle'] as const;\nexport type ProgressVariantPropType = (typeof progressVariantOptions)[number];\n\n/**\n * Defines the variant for displaying the progress component.\n */\nexport type PropVariantProgress = {\n\tvariant: ProgressVariantPropType;\n};\n\nconst isProgressVariantPropType = (value: unknown): value is ProgressVariantPropType => {\n\treturn typeof value === 'string' && progressVariantOptions.includes(value as ProgressVariantPropType);\n};\n\nexport const validateVariantProgress = (component: Generic.Element.Component, value?: ProgressVariantPropType): void => {\n\twatchValidator(component, '_variant', isProgressVariantPropType, new Set(progressVariantOptions), value);\n};\n","@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 { LabelPropType, ProgressAPI, ProgressStates, ProgressVariantPropType } from '../../schema';\nimport { validateLabel, validateUnit, validateVariantProgress, watchNumber } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\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?: ProgressVariantPropType;\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\tvalidateUnit(this, 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?: ProgressVariantPropType): void {\n\t\tvalidateVariantProgress(this, 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":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as n}from"./index-CGVuC_LX.js";import{e as t,w as r,J as s}from"./common-CveT8b8y.js";import{v as o}from"./label-CyF697aK.js";const i=(e,n)=>{t(e,"_unit",n)},a=["bar","cycle"],l=e=>"string"==typeof e&&a.includes(e),c=(e,t)=>{r(e,"_variant",l,new Set(a),t)},d="/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(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  * 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}",h=({state:e})=>n("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},n("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),n("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),n("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("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"})),p=({state:e})=>{const t=e._value/e._max*100;return n("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},n("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100%"}),n("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100%"}),n("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)`}}))},b=e=>{switch(e._variant){case"cycle":return n(h,{state:e});case"bar":return n(p,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}},u=class{constructor(t){e(this,t),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,r=e?Math.round(this.state._value/this.state._max*100):this.state._value;return n("div",{key:"30c2914505a2921a767ffb7b9e8e120bf2c0f371",class:"kol-progress"},n("div",{key:"b78153292354cb734b5ce72cb024b7b05ff65ecb","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&&n("div",{key:"d19dd3020c5e756eee36d11ed3f108d74ae2ad3b",class:"kol-progress__bar-label"},this.state._label),b(this.state),"cycle"===this.state._variant&&n("div",{key:"412a00560e3d04e9eaba630bc18b1b0911a1739e",class:"kol-progress__cycle-text"},this.state._label&&n("div",{key:"6c95c1357dfbfb5e9659081753c19c977ec1d307",class:"kol-progress__cycle-label"},this.state._label),n("div",{key:"654bb1038ac1202cec59740dcfb781a83e7f3b0e",class:"kol-progress__cycle-value"},`${r} ${this.state._unit}`)),"bar"===this.state._variant&&n("div",{key:"79f03f81f500e7806c470f7e862e84d923ca019a",class:"kol-progress__bar-value",style:{width:`${`${(e?100:this.state._max)+1}`.length}ch`}},r),"bar"===this.state._variant&&n("div",{key:"91e7c2d27ad4734119d125b7839d8c64ac67b089",class:"kol-progress__bar-unit"},this.state._unit)),n("progress",{key:"036f25010c9d5581020aa33c8dd2c2e562a421be",class:"visually-hidden","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),n("span",{key:"9704c069d644b44000003e1147395f930e634dd7","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},e?`${t} %`:`${t} von ${this.state._max} ${this.state._unit}`))}validateLabel(e){o(this,e)}validateMax(e){"number"!=typeof e&&(e=100),s(this,"_max",e,{required:!0})}validateUnit(e){i(this,e)}validateValue(e){"number"!=typeof e&&(e=0),s(this,"_value",e,{required:!0})}validateVariant(e){c(this,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"]}}};u.style={default:d};export{u as kol_progress};
+import{r as e,h as n}from"./index-DCfrKP1A.js";import{e as t,w as r,J as s}from"./common-CveT8b8y.js";import{v as o}from"./label-CyF697aK.js";const i=(e,n)=>{t(e,"_unit",n)},a=["bar","cycle"],l=e=>"string"==typeof e&&a.includes(e),c=(e,n)=>{r(e,"_variant",l,new Set(a),n)},d="/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(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     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    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}",h=({state:e})=>n("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},n("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),n("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),n("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),n("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"})),p=({state:e})=>{const t=e._value/e._max*100;return n("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},n("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100%"}),n("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100%"}),n("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)`}}))},b=e=>{switch(e._variant){case"cycle":return n(h,{state:e});case"bar":return n(p,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}},u=class{constructor(n){e(this,n),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,r=e?Math.round(this.state._value/this.state._max*100):this.state._value;return n("div",{key:"30c2914505a2921a767ffb7b9e8e120bf2c0f371",class:"kol-progress"},n("div",{key:"b78153292354cb734b5ce72cb024b7b05ff65ecb","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&&n("div",{key:"d19dd3020c5e756eee36d11ed3f108d74ae2ad3b",class:"kol-progress__bar-label"},this.state._label),b(this.state),"cycle"===this.state._variant&&n("div",{key:"412a00560e3d04e9eaba630bc18b1b0911a1739e",class:"kol-progress__cycle-text"},this.state._label&&n("div",{key:"6c95c1357dfbfb5e9659081753c19c977ec1d307",class:"kol-progress__cycle-label"},this.state._label),n("div",{key:"654bb1038ac1202cec59740dcfb781a83e7f3b0e",class:"kol-progress__cycle-value"},`${r} ${this.state._unit}`)),"bar"===this.state._variant&&n("div",{key:"79f03f81f500e7806c470f7e862e84d923ca019a",class:"kol-progress__bar-value",style:{width:`${`${(e?100:this.state._max)+1}`.length}ch`}},r),"bar"===this.state._variant&&n("div",{key:"91e7c2d27ad4734119d125b7839d8c64ac67b089",class:"kol-progress__bar-unit"},this.state._unit)),n("progress",{key:"036f25010c9d5581020aa33c8dd2c2e562a421be",class:"visually-hidden","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),n("span",{key:"9704c069d644b44000003e1147395f930e634dd7","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},e?`${t} %`:`${t} von ${this.state._max} ${this.state._unit}`))}validateLabel(e){o(this,e)}validateMax(e){"number"!=typeof e&&(e=100),s(this,"_max",e,{required:!0})}validateUnit(e){i(this,e)}validateValue(e){"number"!=typeof e&&(e=0),s(this,"_value",e,{required:!0})}validateVariant(e){c(this,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"]}}};u.style={default:d};export{u as kol_progress};

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

@@ -1 +1 @@
-{"version":3,"names":["validateUnit","component","value","watchString","progressVariantOptions","isProgressVariantPropType","includes","validateVariantProgress","watchValidator","Set","defaultStyleCss","CycleSvg","state","fullCircle","h","width","viewBox","xmlns","class","cx","cy","r","fill","stroke","Math","round","_value","_max","BarSvg","percentage","height","overflow","x","y","rx","style","createProgressSVG","_variant","Error","KolProgress","constructor","hostRef","this","_unit","_liveValue","render","isPercentage","liveProgressValue","displayValue","key","_label","length","max","validateLabel","validateMax","watchNumber","required","validateValue","validateVariant","componentWillLoad","Object","assign","interval","setInterval","disconnectedCallback","clearInterval"],"sources":["src/schema/props/unit.ts","src/schema/props/variant-progress.ts","src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchString } from '../utils';\n\n/* types */\nexport type UnitPropType = string;\n\n/**\n * Defines the unit of the step values (not shown).\n */\nexport type PropUnit = {\n\tunit: UnitPropType;\n};\n\n/* validator */\nexport const validateUnit = (component: Generic.Element.Component, value?: UnitPropType): void => {\n\twatchString(component, '_unit', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../utils';\n\nexport const progressVariantOptions = ['bar', 'cycle'] as const;\nexport type ProgressVariantPropType = (typeof progressVariantOptions)[number];\n\n/**\n * Defines the variant for displaying the progress component.\n */\nexport type PropVariantProgress = {\n\tvariant: ProgressVariantPropType;\n};\n\nconst isProgressVariantPropType = (value: unknown): value is ProgressVariantPropType => {\n\treturn typeof value === 'string' && progressVariantOptions.includes(value as ProgressVariantPropType);\n};\n\nexport const validateVariantProgress = (component: Generic.Element.Component, value?: ProgressVariantPropType): void => {\n\twatchValidator(component, '_variant', isProgressVariantPropType, new Set(progressVariantOptions), value);\n};\n","@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 { LabelPropType, ProgressAPI, ProgressStates, ProgressVariantPropType } from '../../schema';\nimport { validateLabel, validateUnit, validateVariantProgress, watchNumber } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\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?: ProgressVariantPropType;\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\tvalidateUnit(this, 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?: ProgressVariantPropType): void {\n\t\tvalidateVariantProgress(this, 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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["validateUnit","component","value","watchString","progressVariantOptions","isProgressVariantPropType","includes","validateVariantProgress","watchValidator","Set","defaultStyleCss","CycleSvg","state","fullCircle","h","width","viewBox","xmlns","class","cx","cy","r","fill","stroke","Math","round","_value","_max","BarSvg","percentage","height","overflow","x","y","rx","style","createProgressSVG","_variant","Error","KolProgress","constructor","hostRef","this","_unit","_liveValue","render","isPercentage","liveProgressValue","displayValue","key","_label","length","max","validateLabel","validateMax","watchNumber","required","validateValue","validateVariant","componentWillLoad","Object","assign","interval","setInterval","disconnectedCallback","clearInterval"],"sources":["src/schema/props/unit.ts","src/schema/props/variant-progress.ts","src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchString } from '../utils';\n\n/* types */\nexport type UnitPropType = string;\n\n/**\n * Defines the unit of the step values (not shown).\n */\nexport type PropUnit = {\n\tunit: UnitPropType;\n};\n\n/* validator */\nexport const validateUnit = (component: Generic.Element.Component, value?: UnitPropType): void => {\n\twatchString(component, '_unit', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../utils';\n\nexport const progressVariantOptions = ['bar', 'cycle'] as const;\nexport type ProgressVariantPropType = (typeof progressVariantOptions)[number];\n\n/**\n * Defines the variant for displaying the progress component.\n */\nexport type PropVariantProgress = {\n\tvariant: ProgressVariantPropType;\n};\n\nconst isProgressVariantPropType = (value: unknown): value is ProgressVariantPropType => {\n\treturn typeof value === 'string' && progressVariantOptions.includes(value as ProgressVariantPropType);\n};\n\nexport const validateVariantProgress = (component: Generic.Element.Component, value?: ProgressVariantPropType): void => {\n\twatchValidator(component, '_variant', isProgressVariantPropType, new Set(progressVariantOptions), value);\n};\n","@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 { LabelPropType, ProgressAPI, ProgressStates, ProgressVariantPropType } from '../../schema';\nimport { validateLabel, validateUnit, validateVariantProgress, watchNumber } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\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?: ProgressVariantPropType;\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\tvalidateUnit(this, 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?: ProgressVariantPropType): void {\n\t\tvalidateVariantProgress(this, 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"],"mappings":"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","ignoreList":[]}

package/dist/kolibri/kol-quote.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-quote.entry.esm.js","sources":["src/schema/props/quote.ts","src/schema/props/variant-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 { watchString } from '../utils';\n\nexport type QuotePropType = string;\n\n/**\n * Defines the text of the quote.\n */\nexport type PropQuote = {\n\tquote: QuotePropType;\n};\n\nexport const validateQuote = (component: Generic.Element.Component, value?: QuotePropType): void => {\n\twatchString(component, '_quote', value, {\n\t\trequired: true,\n\t});\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../utils';\n\nexport const quoteVariantOptions = ['block', 'inline'] as const;\nexport type QuoteVariantPropType = (typeof quoteVariantOptions)[number];\n\n/**\n * Defines the variant for presenting quotes.\n */\nexport type PropVariantQuote = {\n\tvariant: QuoteVariantPropType;\n};\n\nconst isQuoteVariantPropType = (value: unknown): value is QuoteVariantPropType => {\n\treturn typeof value === 'string' && quoteVariantOptions.includes(value as QuoteVariantPropType);\n};\n\nexport const validateVariantQuote = (component: Generic.Element.Component, value?: QuoteVariantPropType): void => {\n\twatchValidator(component, '_variant', isQuoteVariantPropType, new Set(quoteVariantOptions), value);\n};\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, LabelPropType, QuoteAPI, QuotePropType, QuoteStates, QuoteVariantPropType } from '../../schema';\nimport { showExpertSlot, validateLabel, validateQuote, validateVariantQuote, watchString } 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?: QuoteVariantPropType = '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?: QuotePropType): void {\n\t\tvalidateQuote(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: QuoteVariantPropType): void {\n\t\tvalidateVariantQuote(this, value);\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":[],"mappings":"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"}
+{"version":3,"file":"kol-quote.entry.esm.js","sources":["src/schema/props/quote.ts","src/schema/props/variant-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 { watchString } from '../utils';\n\nexport type QuotePropType = string;\n\n/**\n * Defines the text of the quote.\n */\nexport type PropQuote = {\n\tquote: QuotePropType;\n};\n\nexport const validateQuote = (component: Generic.Element.Component, value?: QuotePropType): void => {\n\twatchString(component, '_quote', value, {\n\t\trequired: true,\n\t});\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../utils';\n\nexport const quoteVariantOptions = ['block', 'inline'] as const;\nexport type QuoteVariantPropType = (typeof quoteVariantOptions)[number];\n\n/**\n * Defines the variant for presenting quotes.\n */\nexport type PropVariantQuote = {\n\tvariant: QuoteVariantPropType;\n};\n\nconst isQuoteVariantPropType = (value: unknown): value is QuoteVariantPropType => {\n\treturn typeof value === 'string' && quoteVariantOptions.includes(value as QuoteVariantPropType);\n};\n\nexport const validateVariantQuote = (component: Generic.Element.Component, value?: QuoteVariantPropType): void => {\n\twatchValidator(component, '_variant', isQuoteVariantPropType, new Set(quoteVariantOptions), value);\n};\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, LabelPropType, QuoteAPI, QuotePropType, QuoteStates, QuoteVariantPropType } from '../../schema';\nimport { showExpertSlot, validateLabel, validateQuote, validateVariantQuote, watchString } 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?: QuoteVariantPropType = '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?: QuotePropType): void {\n\t\tvalidateQuote(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: QuoteVariantPropType): void {\n\t\tvalidateVariantQuote(this, value);\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":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-CGVuC_LX.js";import{e as t,w as i,l as o}from"./common-CveT8b8y.js";import{v as a}from"./label-CyF697aK.js";import{k as l}from"./component-names-CkE54Ym7.js";import{c as s}from"./clsx-eK3rPvPS.js";const r=(e,n)=>{t(e,"_quote",n,{required:!0})},d=["block","inline"],h=e=>"string"==typeof e&&d.includes(e),c=(e,n)=>{i(e,"_variant",h,new Set(d),n)},u="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(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  * 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}",b=class{constructor(e){n(this,e),this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){a(this,e)}validateHref(e){t(this,"_href",e,{required:!0})}validateQuote(e){r(this,e)}validateVariant(e){c(this,e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const n=o(this.state._quote);return e("figure",{key:"3577d4eb15e4d4fb90bb23b73b070b84af133407",class:s("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?e("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,e("span",{"aria-hidden":n?void 0:"true",hidden:!n},e("slot",{name:"expert"}))):e("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,e("span",{"aria-hidden":n?void 0:"true",hidden:!n},e("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&e("figcaption",{key:"1b5f3dd6c8b687afdc02679fb0d4a2ec978c2adf",class:"kol-quote__figcaption"},e("cite",{key:"bfe86e4a9b0e10a45973d76f68c699771f59b4be",class:"kol-quote__cite"},e(l,{key:"146d5d83a83a8b8a5688be828a605c65c0d703dd",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};b.style={default:u};export{b as kol_quote};
+import{r as n,h as e}from"./index-DCfrKP1A.js";import{e as t,w as i,l as o}from"./common-CveT8b8y.js";import{v as a}from"./label-CyF697aK.js";import{k as l}from"./component-names-CkE54Ym7.js";import{c as s}from"./clsx-eK3rPvPS.js";const r=(n,e)=>{t(n,"_quote",e,{required:!0})},d=["block","inline"],h=n=>"string"==typeof n&&d.includes(n),c=(n,e)=>{i(n,"_variant",h,new Set(d),e)},u="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(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     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    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}",b=class{constructor(e){n(this,e),this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(n){a(this,n)}validateHref(n){t(this,"_href",n,{required:!0})}validateQuote(n){r(this,n)}validateVariant(n){c(this,n)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const n=o(this.state._quote);return e("figure",{key:"3577d4eb15e4d4fb90bb23b73b070b84af133407",class:s("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?e("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,e("span",{"aria-hidden":n?void 0:"true",hidden:!n},e("slot",{name:"expert"}))):e("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,e("span",{"aria-hidden":n?void 0:"true",hidden:!n},e("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&e("figcaption",{key:"1b5f3dd6c8b687afdc02679fb0d4a2ec978c2adf",class:"kol-quote__figcaption"},e("cite",{key:"bfe86e4a9b0e10a45973d76f68c699771f59b4be",class:"kol-quote__cite"},e(l,{key:"146d5d83a83a8b8a5688be828a605c65c0d703dd",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};b.style={default:u};export{b as kol_quote};

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

@@ -1 +1 @@
-{"version":3,"names":["validateQuote","component","value","watchString","required","quoteVariantOptions","isQuoteVariantPropType","includes","validateVariantQuote","watchValidator","Set","defaultStyleCss","KolQuote","constructor","hostRef","this","_variant","state","_href","_quote","validateLabel","validateHref","validateVariant","componentWillLoad","_label","render","hasExpertSlot","showExpertSlot","h","key","class","clsx","cite","undefined","hidden","name","length","KolLinkTag","_target"],"sources":["src/schema/props/quote.ts","src/schema/props/variant-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 { watchString } from '../utils';\n\nexport type QuotePropType = string;\n\n/**\n * Defines the text of the quote.\n */\nexport type PropQuote = {\n\tquote: QuotePropType;\n};\n\nexport const validateQuote = (component: Generic.Element.Component, value?: QuotePropType): void => {\n\twatchString(component, '_quote', value, {\n\t\trequired: true,\n\t});\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../utils';\n\nexport const quoteVariantOptions = ['block', 'inline'] as const;\nexport type QuoteVariantPropType = (typeof quoteVariantOptions)[number];\n\n/**\n * Defines the variant for presenting quotes.\n */\nexport type PropVariantQuote = {\n\tvariant: QuoteVariantPropType;\n};\n\nconst isQuoteVariantPropType = (value: unknown): value is QuoteVariantPropType => {\n\treturn typeof value === 'string' && quoteVariantOptions.includes(value as QuoteVariantPropType);\n};\n\nexport const validateVariantQuote = (component: Generic.Element.Component, value?: QuoteVariantPropType): void => {\n\twatchValidator(component, '_variant', isQuoteVariantPropType, new Set(quoteVariantOptions), value);\n};\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, LabelPropType, QuoteAPI, QuotePropType, QuoteStates, QuoteVariantPropType } from '../../schema';\nimport { showExpertSlot, validateLabel, validateQuote, validateVariantQuote, watchString } 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?: QuoteVariantPropType = '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?: QuotePropType): void {\n\t\tvalidateQuote(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: QuoteVariantPropType): void {\n\t\tvalidateVariantQuote(this, value);\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"],"mappings":";;;uOAaO,MAAMA,EAAgB,CAACC,EAAsCC,KACnEC,EAAYF,EAAW,SAAUC,EAAO,CACvCE,SAAU,MACT,ECZI,MAAMC,EAAsB,CAAC,QAAS,UAU7C,MAAMC,EAA0BJ,UACjBA,IAAU,UAAYG,EAAoBE,SAASL,GAG3D,MAAMM,EAAuB,CAACP,EAAsCC,KAC1EO,EAAeR,EAAW,WAAYK,EAAwB,IAAII,IAAIL,GAAsBH,EAAM,ECnBnG,MAAMS,EAAkB,qwJ,MCcXC,EAAQ,MAPrB,WAAAC,CAAAC,G,UA0BgBC,KAAQC,SAA0B,SAEjCD,KAAAE,MAAqB,CACpCC,MAAO,GACPC,OAAQ,GACRH,SAAU,SA6DX,CAzDO,aAAAI,CAAclB,GACpBkB,EAAcL,KAAMb,E,CAId,YAAAmB,CAAanB,GACnBC,EAAYY,KAAM,QAASb,EAAO,CACjCE,SAAU,M,CAKL,aAAAJ,CAAcE,GACpBF,EAAce,KAAMb,E,CAId,eAAAoB,CAAgBpB,GACtBM,EAAqBO,KAAMb,E,CAGrB,iBAAAqB,GACNR,KAAKM,aAAaN,KAAKG,OACvBH,KAAKK,cAAcL,KAAKS,QACxBT,KAAKf,cAAce,KAAKI,QACxBJ,KAAKO,gBAAgBP,KAAKC,S,CAGpB,MAAAS,GACN,MAAMC,EAAgBC,EAAeZ,KAAKE,MAAME,QAChD,OACCS,EAAA,UAAAC,IAAA,2CAAQC,MAAOC,EAAK,YAAa,cAAchB,KAAKE,MAAMD,aACxDD,KAAKE,MAAMD,WAAa,QACxBY,EAAA,cAAYE,MAAM,wBAAwBE,KAAMjB,KAAKE,MAAMC,OACzDH,KAAKE,MAAME,OACZS,EAAA,uBAAoBF,EAAgB,OAASO,UAAWC,QAASR,GAChEE,EAAM,QAAAO,KAAK,aAIbP,EAAA,KAAGE,MAAM,mBAAmBE,KAAMjB,KAAKE,MAAMC,OAC3CH,KAAKE,MAAME,OACZS,EAAA,uBAAoBF,EAAgB,OAASO,UAAWC,QAASR,GAChEE,EAAA,QAAMO,KAAK,oBAINpB,KAAKE,MAAMO,SAAW,UAAYT,KAAKE,MAAMO,OAAOY,OAAS,GACpER,EAAA,cAAAC,IAAA,2CAAYC,MAAM,yBACjBF,EAAM,QAAAC,IAAA,2CAAAC,MAAM,mBACXF,EAACS,EAAW,CAAAR,IAAA,2CAAAX,MAAOH,KAAKE,MAAMC,MAAOM,OAAQT,KAAKE,MAAMO,OAAQc,QAAQ,a","ignoreList":[]}
+{"version":3,"names":["validateQuote","component","value","watchString","required","quoteVariantOptions","isQuoteVariantPropType","includes","validateVariantQuote","watchValidator","Set","defaultStyleCss","KolQuote","constructor","hostRef","this","_variant","state","_href","_quote","validateLabel","validateHref","validateVariant","componentWillLoad","_label","render","hasExpertSlot","showExpertSlot","h","key","class","clsx","cite","undefined","hidden","name","length","KolLinkTag","_target"],"sources":["src/schema/props/quote.ts","src/schema/props/variant-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 { watchString } from '../utils';\n\nexport type QuotePropType = string;\n\n/**\n * Defines the text of the quote.\n */\nexport type PropQuote = {\n\tquote: QuotePropType;\n};\n\nexport const validateQuote = (component: Generic.Element.Component, value?: QuotePropType): void => {\n\twatchString(component, '_quote', value, {\n\t\trequired: true,\n\t});\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../utils';\n\nexport const quoteVariantOptions = ['block', 'inline'] as const;\nexport type QuoteVariantPropType = (typeof quoteVariantOptions)[number];\n\n/**\n * Defines the variant for presenting quotes.\n */\nexport type PropVariantQuote = {\n\tvariant: QuoteVariantPropType;\n};\n\nconst isQuoteVariantPropType = (value: unknown): value is QuoteVariantPropType => {\n\treturn typeof value === 'string' && quoteVariantOptions.includes(value as QuoteVariantPropType);\n};\n\nexport const validateVariantQuote = (component: Generic.Element.Component, value?: QuoteVariantPropType): void => {\n\twatchValidator(component, '_variant', isQuoteVariantPropType, new Set(quoteVariantOptions), value);\n};\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, LabelPropType, QuoteAPI, QuotePropType, QuoteStates, QuoteVariantPropType } from '../../schema';\nimport { showExpertSlot, validateLabel, validateQuote, validateVariantQuote, watchString } 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?: QuoteVariantPropType = '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?: QuotePropType): void {\n\t\tvalidateQuote(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: QuoteVariantPropType): void {\n\t\tvalidateVariantQuote(this, value);\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"],"mappings":";;;uOAaO,MAAMA,EAAgB,CAACC,EAAsCC,KACnEC,EAAYF,EAAW,SAAUC,EAAO,CACvCE,SAAU,MACT,ECZI,MAAMC,EAAsB,CAAC,QAAS,UAU7C,MAAMC,EAA0BJ,UACjBA,IAAU,UAAYG,EAAoBE,SAASL,GAG3D,MAAMM,EAAuB,CAACP,EAAsCC,KAC1EO,EAAeR,EAAW,WAAYK,EAAwB,IAAII,IAAIL,GAAsBH,EAAM,ECnBnG,MAAMS,EAAkB,m8J,MCcXC,EAAQ,MAPrB,WAAAC,CAAAC,G,UA0BgBC,KAAQC,SAA0B,SAEjCD,KAAAE,MAAqB,CACpCC,MAAO,GACPC,OAAQ,GACRH,SAAU,SA6DX,CAzDO,aAAAI,CAAclB,GACpBkB,EAAcL,KAAMb,E,CAId,YAAAmB,CAAanB,GACnBC,EAAYY,KAAM,QAASb,EAAO,CACjCE,SAAU,M,CAKL,aAAAJ,CAAcE,GACpBF,EAAce,KAAMb,E,CAId,eAAAoB,CAAgBpB,GACtBM,EAAqBO,KAAMb,E,CAGrB,iBAAAqB,GACNR,KAAKM,aAAaN,KAAKG,OACvBH,KAAKK,cAAcL,KAAKS,QACxBT,KAAKf,cAAce,KAAKI,QACxBJ,KAAKO,gBAAgBP,KAAKC,S,CAGpB,MAAAS,GACN,MAAMC,EAAgBC,EAAeZ,KAAKE,MAAME,QAChD,OACCS,EAAA,UAAAC,IAAA,2CAAQC,MAAOC,EAAK,YAAa,cAAchB,KAAKE,MAAMD,aACxDD,KAAKE,MAAMD,WAAa,QACxBY,EAAA,cAAYE,MAAM,wBAAwBE,KAAMjB,KAAKE,MAAMC,OACzDH,KAAKE,MAAME,OACZS,EAAA,uBAAoBF,EAAgB,OAASO,UAAWC,QAASR,GAChEE,EAAM,QAAAO,KAAK,aAIbP,EAAA,KAAGE,MAAM,mBAAmBE,KAAMjB,KAAKE,MAAMC,OAC3CH,KAAKE,MAAME,OACZS,EAAA,uBAAoBF,EAAgB,OAASO,UAAWC,QAASR,GAChEE,EAAA,QAAMO,KAAK,oBAINpB,KAAKE,MAAMO,SAAW,UAAYT,KAAKE,MAAMO,OAAOY,OAAS,GACpER,EAAA,cAAAC,IAAA,2CAAYC,MAAM,yBACjBF,EAAM,QAAAC,IAAA,2CAAAC,MAAM,mBACXF,EAACS,EAAW,CAAAR,IAAA,2CAAAX,MAAOH,KAAKE,MAAMC,MAAOM,OAAQT,KAAKE,MAAMO,OAAQc,QAAQ,a","ignoreList":[]}