npm - @public-ui/components - Versions diffs - 4.2.0-rc.1 → 4.2.0-rc.2 - Mend

@public-ui/components 4.2.0-rc.1 → 4.2.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (616) hide show

package/dist/cjs/kol-popover-button-wc.cjs.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-C24UiEit.js"),componentNames=require("./component-names-5KS_pYRF.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),clsx=require("./clsx-Bm_HQUnh.js"),alignFloatingElements=require("./align-floating-elements-BkrTeMF3.js");require("./common-DPb6NWR4.js");var inline=require("./inline-D-XZg3UD.js"),align=require("./align-B8NMKvjk.js"),dev_utils=require("./dev.utils-C6aqolAb.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js");const validatePopoverAlign=(e,t)=>{align.validateAlignment(e,"_popoverAlign",t)},PopoverFC=e=>{const{align:t="bottom",popoverRef:o,arrowRef:i,class:s}=e,n=tslib_es6.__rest(e,["align","popoverRef","arrowRef","class"]);return index.h("div",Object.assign({},n,{class:clsx.clsx("kol-popover",s),ref:o,popover:"auto"}),index.h("div",{class:clsx.clsx("kol-popover__arrow",`kol-popover__arrow--${t}`),ref:i}),index.h("slot",null))};class PopoverController{constructor(){this.show=!1,this.align="bottom",this.setPopoverElementRef=e=>{this.popoverElement=e,this.arrowElement=null==e?void 0:e.querySelector(".kol-popover__arrow")},this.setTriggerElement=e=>{this.triggerElement=e},this.setAlign=e=>{this.align=e},this.alignPopover=async()=>{this.popoverElement&&this.triggerElement&&await alignFloatingElements.alignFloatingElements({align:this.align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement})},this.setupAutoUpdate=()=>{this.popoverElement&&this.triggerElement&&!this.cleanupAutoUpdate&&(this.cleanupAutoUpdate=alignFloatingElements.autoUpdate(this.triggerElement,this.popoverElement,()=>{this.alignPopover()}))}}setShow(e){if(this.show=e,!this.popoverElement)return;const t=()=>{var e;if(!this.popoverElement)return;const t=this.popoverElement.matches(":popover-open");if(this.show){if(!t)try{this.popoverElement.showPopover(),this.setupAutoUpdate(),this.alignPopover()}catch(e){}}else if(t)try{this.popoverElement.hidePopover(),null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.cleanupAutoUpdate=void 0}catch(e){}};this.popoverElement.isConnected?t():requestAnimationFrame(()=>{t()})}destroy(){var e;null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.cleanupAutoUpdate=void 0,this.popoverElement=void 0,this.arrowElement=void 0,this.triggerElement=void 0}}const KolPopoverButtonWc=class{constructor(e){index.registerInstance(this,e),this.popoverCtrl=new PopoverController,this.popoverId=`popover-${dev_utils.nonce()}`,this.setPopoverElementRef=e=>{this.popoverElement=e,this.popoverCtrl.setPopoverElementRef(e)},this.setButtonElementRef=e=>{this.refButton=e,e&&this.popoverCtrl.setTriggerElement(e)},this.on={onClick:()=>{this.popoverCtrl.setShow(!this.popoverOpen)}},this.state={_label:"",_popoverAlign:"bottom",_inline:!1},this.popoverOpen=!1,this.handleToggle=e=>{this.popoverOpen="open"===e.newState},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){this.popoverCtrl.setShow(!1)}async showPopover(){this.popoverCtrl.setShow(!0)}async focus(){return elementFocus.setFocus(this.refButton)}async click(){return elementClick.setClick(this.refButton)}render(){return index.h(index.Fragment,null,index.h(componentNames.KolButtonWcTag,{key:"8cecd7721585386caaa78d5aba1aec45e2f13613",class:clsx.clsx("kol-popover-button",{"kol-popover-button--open":this.popoverOpen,"kol-popover-button--inline":!0===this.state._inline,"kol-popover-button--standalone":!1===this.state._inline}),_accessKey:this._accessKey,_ariaControls:this.popoverId,_ariaDescription:this._ariaDescription,_ariaExpanded:this.popoverOpen,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_inline:this._inline,_label:this._label,_name:this._name,_on:this.on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant,ref:this.setButtonElementRef},index.h("slot",{key:"55fa847ba181d6bff3f707ebc2568ddf39411241",name:"expert",slot:"expert"})),index.h(PopoverFC,{key:"133bde88cf07b1bbd07195676ca9e4e9218d9ccd",align:this.state._popoverAlign||"bottom",popoverRef:this.setPopoverElementRef,class:"kol-popover-button__popover",id:this.popoverId},index.h("slot",{key:"11b4154b05f0cb5e9b839d92444b799c2df5bf08"})))}validateInline(e){inline.validateInline(this,e,{defaultValue:!1})}validatePopoverAlign(e){validatePopoverAlign(this,e),e&&this.popoverCtrl.setAlign(e)}componentWillLoad(){this.validateInline(this._inline),this.validatePopoverAlign(this._popoverAlign)}componentDidRender(){this.popoverElement&&this.popoverElement.addEventListener("toggle",this.handleToggle),this.state._popoverAlign&&this.popoverCtrl.setAlign(this.state._popoverAlign)}disconnectedCallback(){this.popoverElement&&this.popoverElement.removeEventListener("toggle",this.handleToggle),this.popoverCtrl.destroy(),this.popoverElement=void 0}static get watchers(){return{_inline:["validateInline"],_popoverAlign:["validatePopoverAlign"]}}};exports.kol_popover_button_wc=KolPopoverButtonWc;
+"use strict";var index=require("./index-DyCCobHQ.js"),componentNames=require("./component-names-5KS_pYRF.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),clsx=require("./clsx-Bm_HQUnh.js"),alignFloatingElements=require("./align-floating-elements-BkrTeMF3.js");require("./common-DPb6NWR4.js");var inline=require("./inline-D-XZg3UD.js"),align=require("./align-B8NMKvjk.js"),dev_utils=require("./dev.utils-DYrlz4G7.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js");const validatePopoverAlign=(e,t)=>{align.validateAlignment(e,"_popoverAlign",t)},PopoverFC=e=>{const{align:t="bottom",popoverRef:o,arrowRef:i,class:s}=e,n=tslib_es6.__rest(e,["align","popoverRef","arrowRef","class"]);return index.h("div",Object.assign({},n,{class:clsx.clsx("kol-popover",s),ref:o,popover:"auto"}),index.h("div",{class:clsx.clsx("kol-popover__arrow",`kol-popover__arrow--${t}`),ref:i}),index.h("slot",null))};class PopoverController{constructor(){this.show=!1,this.align="bottom",this.setPopoverElementRef=e=>{this.popoverElement=e,this.arrowElement=null==e?void 0:e.querySelector(".kol-popover__arrow")},this.setTriggerElement=e=>{this.triggerElement=e},this.setAlign=e=>{this.align=e},this.alignPopover=async()=>{this.popoverElement&&this.triggerElement&&await alignFloatingElements.alignFloatingElements({align:this.align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement})},this.setupAutoUpdate=()=>{this.popoverElement&&this.triggerElement&&!this.cleanupAutoUpdate&&(this.cleanupAutoUpdate=alignFloatingElements.autoUpdate(this.triggerElement,this.popoverElement,()=>{this.alignPopover()}))}}setShow(e){if(this.show=e,!this.popoverElement)return;const t=()=>{var e;if(!this.popoverElement)return;const t=this.popoverElement.matches(":popover-open");if(this.show){if(!t)try{this.popoverElement.showPopover(),this.setupAutoUpdate(),this.alignPopover()}catch(e){}}else if(t)try{this.popoverElement.hidePopover(),null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.cleanupAutoUpdate=void 0}catch(e){}};this.popoverElement.isConnected?t():requestAnimationFrame(()=>{t()})}destroy(){var e;null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.cleanupAutoUpdate=void 0,this.popoverElement=void 0,this.arrowElement=void 0,this.triggerElement=void 0}}const KolPopoverButtonWc=class{constructor(e){index.registerInstance(this,e),this.popoverCtrl=new PopoverController,this.popoverId=dev_utils.createUniqueId("popover"),this.setPopoverElementRef=e=>{this.popoverElement=e,this.popoverCtrl.setPopoverElementRef(e)},this.setButtonElementRef=e=>{this.refButton=e,e&&this.popoverCtrl.setTriggerElement(e)},this.on={onClick:()=>{this.popoverCtrl.setShow(!this.popoverOpen)}},this.state={_label:"",_popoverAlign:"bottom",_inline:!1},this.popoverOpen=!1,this.handleToggle=e=>{this.popoverOpen="open"===e.newState},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){this.popoverCtrl.setShow(!1)}async showPopover(){this.popoverCtrl.setShow(!0)}async focus(){return elementFocus.setFocus(this.refButton)}async click(){return elementClick.setClick(this.refButton)}render(){return index.h(index.Fragment,null,index.h(componentNames.KolButtonWcTag,{key:"9f153addc016b947514afe0a4c6f082808dd8d6c",class:clsx.clsx("kol-popover-button",{"kol-popover-button--open":this.popoverOpen,"kol-popover-button--inline":!0===this.state._inline,"kol-popover-button--standalone":!1===this.state._inline}),_accessKey:this._accessKey,_ariaControls:this.popoverId,_ariaDescription:this._ariaDescription,_ariaExpanded:this.popoverOpen,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_inline:this._inline,_label:this._label,_name:this._name,_on:this.on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant,ref:this.setButtonElementRef},index.h("slot",{key:"c550caca7087c0b5e195ec6264eb9908c1f88e20",name:"expert",slot:"expert"})),index.h(PopoverFC,{key:"73ccff2a9a32ec14819bf14aaf262a1e4ef57c6b",align:this.state._popoverAlign||"bottom",popoverRef:this.setPopoverElementRef,class:"kol-popover-button__popover",id:this.popoverId},index.h("slot",{key:"86d855e0185370bea7caea94602f36169d4c28f8"})))}validateInline(e){inline.validateInline(this,e,{defaultValue:!1})}validatePopoverAlign(e){validatePopoverAlign(this,e),e&&this.popoverCtrl.setAlign(e)}componentWillLoad(){this.validateInline(this._inline),this.validatePopoverAlign(this._popoverAlign)}componentDidRender(){this.popoverElement&&this.popoverElement.addEventListener("toggle",this.handleToggle),this.state._popoverAlign&&this.popoverCtrl.setAlign(this.state._popoverAlign)}disconnectedCallback(){this.popoverElement&&this.popoverElement.removeEventListener("toggle",this.handleToggle),this.popoverCtrl.destroy(),this.popoverElement=void 0}static get watchers(){return{_inline:["validateInline"],_popoverAlign:["validatePopoverAlign"]}}};exports.kol_popover_button_wc=KolPopoverButtonWc;

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

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

package/dist/cjs/kol-popover-button.cjs.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-C24UiEit.js"),componentNames=require("./component-names-5KS_pYRF.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js");require("./common-DPb6NWR4.js");const defaultStyleCss='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: white;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1779456138767"); /* IE9*/\n  src: url("kolicons.eot?t=1779456138767#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1779456138767") format("woff2"), url("kolicons.woff?t=1779456138767") format("woff"), url("kolicons.ttf?t=1779456138767") format("truetype"), url("kolicons.svg?t=1779456138767#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: black;\n    background-color: white;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: black;\n    background-color: white;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-popover {\n    opacity: 0;\n    transition: 0.2s ease-out opacity;\n  }\n  .kol-popover-button--open + .kol-popover {\n    opacity: 1;\n  }\n  .kol-popover-button--open .kol-button__tooltip {\n    display: none;\n  }\n  .kol-popover-button--inline {\n    display: inline-block;\n  }\n  .kol-popover-button--inline .kol-button {\n    min-width: 0;\n    min-height: 1em;\n  }\n}',KolPopoverButton=class{constructor(n){index.registerInstance(this,n),this.setRef=n=>{this.ref=n},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){var n;null===(n=this.ref)||void 0===n||n.hidePopover()}async showPopover(){var n;null===(n=this.ref)||void 0===n||n.showPopover()}async click(){return elementClick.delegateClick(this.host,async()=>elementClick.setClick(this.ref))}async focus(){return elementFocus.delegateFocus(this.host,()=>elementFocus.setFocus(this.ref))}render(){return index.h(componentNames.KolPopoverButtonWcTag,{key:"1a17740aaec4ffc9d3d1c3a812b503e1070cdae5",ref:this.setRef,_accessKey:this._accessKey,_ariaDescription:this._ariaDescription,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_inline:this._inline,_label:this._label,_name:this._name,_popoverAlign:this._popoverAlign,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},index.h("slot",{key:"a63deb9a2a7b6b55343e9f1602402b2bee38f9c2",name:"expert",slot:"expert"}),index.h("slot",{key:"94f552f1ffc042e6e6d218cafce156149279c3ab"}))}get host(){return index.getElement(this)}};KolPopoverButton.style={default:defaultStyleCss},exports.kol_popover_button=KolPopoverButton;
+"use strict";var index=require("./index-DyCCobHQ.js"),componentNames=require("./component-names-5KS_pYRF.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js");require("./common-DPb6NWR4.js");const defaultStyleCss='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: white;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1779833120296"); /* IE9*/\n  src: url("kolicons.eot?t=1779833120296#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1779833120296") format("woff2"), url("kolicons.woff?t=1779833120296") format("woff"), url("kolicons.ttf?t=1779833120296") format("truetype"), url("kolicons.svg?t=1779833120296#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: black;\n    background-color: white;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: black;\n    background-color: white;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-popover {\n    opacity: 0;\n    transition: 0.2s ease-out opacity;\n  }\n  .kol-popover-button--open + .kol-popover {\n    opacity: 1;\n  }\n  .kol-popover-button--open .kol-button__tooltip {\n    display: none;\n  }\n  .kol-popover-button--inline {\n    display: inline-block;\n  }\n  .kol-popover-button--inline .kol-button {\n    min-width: 0;\n    min-height: 1em;\n  }\n}',KolPopoverButton=class{constructor(n){index.registerInstance(this,n),this.setRef=n=>{this.ref=n},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){var n;null===(n=this.ref)||void 0===n||n.hidePopover()}async showPopover(){var n;null===(n=this.ref)||void 0===n||n.showPopover()}async click(){return elementClick.delegateClick(this.host,async()=>elementClick.setClick(this.ref))}async focus(){return elementFocus.delegateFocus(this.host,()=>elementFocus.setFocus(this.ref))}render(){return index.h(componentNames.KolPopoverButtonWcTag,{key:"1a17740aaec4ffc9d3d1c3a812b503e1070cdae5",ref:this.setRef,_accessKey:this._accessKey,_ariaDescription:this._ariaDescription,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_inline:this._inline,_label:this._label,_name:this._name,_popoverAlign:this._popoverAlign,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},index.h("slot",{key:"a63deb9a2a7b6b55343e9f1602402b2bee38f9c2",name:"expert",slot:"expert"}),index.h("slot",{key:"94f552f1ffc042e6e6d218cafce156149279c3ab"}))}get host(){return index.getElement(this)}};KolPopoverButton.style={default:defaultStyleCss},exports.kol_popover_button=KolPopoverButton;

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-C24UiEit.js"),variantQuote=require("./variant-quote-DpNzmCtr.js"),i18n=require("./i18n-Cjy0vgJA.js");require("./common-DPb6NWR4.js");var label=require("./label-DRrPbj-j.js"),valueNumberClamped=require("./value-number-clamped-Ahfs15Fl.js"),normalizers=require("./normalizers-BCLslVaT.js"),baseController=require("./base-controller-DAzsTqX9.js");require("./i18n-CgUN6lev.js"),require("./_Uint8Array-BAQUGozM.js"),require("./isArray-BOIOdEQh.js");const progressVariantOptions=["bar","cycle"],variantProgressProp=normalizers.createPropDefinition("variant","bar",e=>{const n=normalizers.normalizeString(e);if(progressVariantOptions.includes(n))return n;throw new Error(`Invalid progress variant: ${n}`)},()=>!0),FULL_CIRCLE=342,CycleSvg=({max:e,value:n})=>index.h("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},index.h("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),index.h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),index.h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(n/e*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),BarSvg=({max:e,value:n})=>{const r=n/e*100;return index.h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},index.h("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100%"}),index.h("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100%"}),index.h("rect",{class:"kol-progress__bar-progress",x:"3",y:"3",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${r}% - 4px)`}}))},createProgressSVG=(e,n,r)=>{switch(e){case"cycle":return index.h(CycleSvg,{max:n,value:r});case"bar":return index.h(BarSvg,{max:n,value:r});default:throw new Error(`Progress variant ${e} not implemented.`)}},ProgressFC=e=>{const{label:n,max:r,unit:t,value:a,variant:l,liveValue:o}=e,s="%"===t,i=s?`${Math.round(o/r*100)}`:o,c=s?Math.round(a/r*100):a,d=`${`${(s?100:r)+1}`.length}ch`,h=s?i18n.translate("kol-live-value",{placeholders:{value:String(i),unit:t}}):i18n.translate("kol-live-value-bounded",{placeholders:{value:String(i),max:String(r),unit:t}});return index.h("div",{class:"kol-progress"},index.h("div",{"aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===l,"kol-progress__bar":"bar"===l}},"bar"===l&&n&&index.h("div",{class:"kol-progress__bar-label"},n),createProgressSVG(l,r,a),"cycle"===l&&index.h("div",{class:"kol-progress__cycle-text"},n&&index.h("div",{class:"kol-progress__cycle-label"},n),index.h("div",{class:"kol-progress__cycle-value"},`${c} ${t}`)),"bar"===l&&index.h("div",{class:"kol-progress__bar-value",style:{width:d}},c),"bar"===l&&index.h("div",{class:"kol-progress__bar-unit"},t)),index.h("progress",{class:"visually-hidden","aria-busy":a<r?"true":"false",max:r,value:a}),index.h("span",{"aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},h))},progressPropsConfig={optional:[label.labelProp,valueNumberClamped.unitProp,variantProgressProp],required:[valueNumberClamped.maxProp,valueNumberClamped.clampedNumberValueProp]};class ProgressController extends baseController.BaseController{constructor(e){super(e,progressPropsConfig)}componentWillLoad(e){const{label:n,max:r,unit:t,value:a,variant:l}=e;this.watchLabel(n),this.watchMax(r),this.watchUnit(t),this.watchValue(a),this.watchVariant(l),this.setState("liveValue",this.getRenderProp("value")),this.startLiveValueInterval()}watchLabel(e){label.labelProp.apply(e,e=>{this.setRenderProp("label",e)})}watchMax(e){valueNumberClamped.maxProp.apply(e,e=>{this.setRenderProp("max",e),this.watchValue(this.getRawProp("value"))})}watchUnit(e){valueNumberClamped.unitProp.apply(e,e=>{this.setRenderProp("unit",e)})}watchValue(e){this.setRawProp("value",e),valueNumberClamped.clampedNumberValueProp.apply(e,e=>{this.setRenderProp("value",e)},{min:0,max:this.getRenderProp("max")})}watchVariant(e){variantProgressProp.apply(e,e=>{this.setRenderProp("variant",e)})}startLiveValueInterval(){this.interval=setInterval(()=>{const e=this.getRenderProp("value");this.setState("liveValue",e)},5e3)}destroy(){this.interval&&(clearInterval(this.interval),this.interval=void 0)}}const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: white;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-progress {\n    --color-bar: var(--kol-progress-color-bar, #0075ff);\n  }\n  .kol-progress__bar {\n    display: grid;\n    align-items: center;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    grid-template-columns: 1fr auto;\n  }\n  .kol-progress__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-progress__bar svg {\n    grid-area: BAR;\n  }\n  .kol-progress__bar-value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-progress__bar-unit {\n    grid-area: UNIT;\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: white;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: var(--color-bar);\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle {\n    display: grid;\n    align-content: center;\n    justify-items: center;\n    grid-template-areas: \"ALL\";\n    grid-template-columns: auto;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: x-small;\n    text-align: center;\n  }\n  .kol-progress__cycle-text * {\n    background-color: white;\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    transform: rotate(-90deg);\n    transform-origin: 50% 50%;\n    fill: transparent;\n    stroke: var(--color-bar);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",KolProgress=class extends variantQuote.BaseWebComponent{constructor(e){super(),index.registerInstance(this,e),this.ctrl=new ProgressController(this.stateAccess),this.liveValue=0}watchLabel(e){this.ctrl.watchLabel(e)}watchMax(e){this.ctrl.watchMax(e)}watchUnit(e){this.ctrl.watchUnit(e)}watchValue(e){this.ctrl.watchValue(e)}watchVariant(e){this.ctrl.watchVariant(e)}componentWillLoad(){this.ctrl.componentWillLoad({label:this._label,max:this._max,unit:this._unit,value:this._value,variant:this._variant})}disconnectedCallback(){this.ctrl.destroy()}render(){return index.h(index.Host,{key:"875e3cb3b7b18f3a73be1115a577e7681e7f2c6d"},index.h(ProgressFC,{key:"89fc086cc42ec754a47faf0ee6ba99800aac90dd",label:this.ctrl.getRenderProp("label"),max:this.ctrl.getRenderProp("max"),unit:this.ctrl.getRenderProp("unit"),value:this.ctrl.getRenderProp("value"),variant:this.ctrl.getRenderProp("variant"),liveValue:this.liveValue}))}static get watchers(){return{_label:["watchLabel"],_max:["watchMax"],_unit:["watchUnit"],_value:["watchValue"],_variant:["watchVariant"]}}};KolProgress.style={default:defaultStyleCss},exports.kol_progress=KolProgress;
+"use strict";var index=require("./index-DyCCobHQ.js"),variantQuote=require("./variant-quote-DpNzmCtr.js"),i18n=require("./i18n-Cjy0vgJA.js");require("./common-DPb6NWR4.js");var label=require("./label-DRrPbj-j.js"),valueNumberClamped=require("./value-number-clamped-Ahfs15Fl.js"),normalizers=require("./normalizers-BCLslVaT.js"),baseController=require("./base-controller-DAzsTqX9.js");require("./i18n-CgUN6lev.js"),require("./_Uint8Array-BAQUGozM.js"),require("./isArray-BOIOdEQh.js");const progressVariantOptions=["bar","cycle"],variantProgressProp=normalizers.createPropDefinition("variant","bar",e=>{const n=normalizers.normalizeString(e);if(progressVariantOptions.includes(n))return n;throw new Error(`Invalid progress variant: ${n}`)},()=>!0),FULL_CIRCLE=342,CycleSvg=({max:e,value:n})=>index.h("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},index.h("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),index.h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),index.h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(n/e*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),BarSvg=({max:e,value:n})=>{const r=n/e*100;return index.h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},index.h("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100%"}),index.h("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100%"}),index.h("rect",{class:"kol-progress__bar-progress",x:"3",y:"3",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${r}% - 4px)`}}))},createProgressSVG=(e,n,r)=>{switch(e){case"cycle":return index.h(CycleSvg,{max:n,value:r});case"bar":return index.h(BarSvg,{max:n,value:r});default:throw new Error(`Progress variant ${e} not implemented.`)}},ProgressFC=e=>{const{label:n,max:r,unit:t,value:a,variant:l,liveValue:o}=e,s="%"===t,i=s?`${Math.round(o/r*100)}`:o,c=s?Math.round(a/r*100):a,d=`${`${(s?100:r)+1}`.length}ch`,h=s?i18n.translate("kol-live-value",{placeholders:{value:String(i),unit:t}}):i18n.translate("kol-live-value-bounded",{placeholders:{value:String(i),max:String(r),unit:t}});return index.h("div",{class:"kol-progress"},index.h("div",{"aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===l,"kol-progress__bar":"bar"===l}},"bar"===l&&n&&index.h("div",{class:"kol-progress__bar-label"},n),createProgressSVG(l,r,a),"cycle"===l&&index.h("div",{class:"kol-progress__cycle-text"},n&&index.h("div",{class:"kol-progress__cycle-label"},n),index.h("div",{class:"kol-progress__cycle-value"},`${c} ${t}`)),"bar"===l&&index.h("div",{class:"kol-progress__bar-value",style:{width:d}},c),"bar"===l&&index.h("div",{class:"kol-progress__bar-unit"},t)),index.h("progress",{class:"visually-hidden","aria-busy":a<r?"true":"false",max:r,value:a}),index.h("span",{"aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},h))},progressPropsConfig={optional:[label.labelProp,valueNumberClamped.unitProp,variantProgressProp],required:[valueNumberClamped.maxProp,valueNumberClamped.clampedNumberValueProp]};class ProgressController extends baseController.BaseController{constructor(e){super(e,progressPropsConfig)}componentWillLoad(e){const{label:n,max:r,unit:t,value:a,variant:l}=e;this.watchLabel(n),this.watchMax(r),this.watchUnit(t),this.watchValue(a),this.watchVariant(l),this.setState("liveValue",this.getRenderProp("value")),this.startLiveValueInterval()}watchLabel(e){label.labelProp.apply(e,e=>{this.setRenderProp("label",e)})}watchMax(e){valueNumberClamped.maxProp.apply(e,e=>{this.setRenderProp("max",e),this.watchValue(this.getRawProp("value"))})}watchUnit(e){valueNumberClamped.unitProp.apply(e,e=>{this.setRenderProp("unit",e)})}watchValue(e){this.setRawProp("value",e),valueNumberClamped.clampedNumberValueProp.apply(e,e=>{this.setRenderProp("value",e)},{min:0,max:this.getRenderProp("max")})}watchVariant(e){variantProgressProp.apply(e,e=>{this.setRenderProp("variant",e)})}startLiveValueInterval(){this.interval=setInterval(()=>{const e=this.getRenderProp("value");this.setState("liveValue",e)},5e3)}destroy(){this.interval&&(clearInterval(this.interval),this.interval=void 0)}}const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: white;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-progress {\n    --color-bar: var(--kol-progress-color-bar, #0075ff);\n  }\n  .kol-progress__bar {\n    display: grid;\n    align-items: center;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    grid-template-columns: 1fr auto;\n  }\n  .kol-progress__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-progress__bar svg {\n    grid-area: BAR;\n  }\n  .kol-progress__bar-value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-progress__bar-unit {\n    grid-area: UNIT;\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: white;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: var(--color-bar);\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle {\n    display: grid;\n    align-content: center;\n    justify-items: center;\n    grid-template-areas: \"ALL\";\n    grid-template-columns: auto;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: x-small;\n    text-align: center;\n  }\n  .kol-progress__cycle-text * {\n    background-color: white;\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    transform: rotate(-90deg);\n    transform-origin: 50% 50%;\n    fill: transparent;\n    stroke: var(--color-bar);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",KolProgress=class extends variantQuote.BaseWebComponent{constructor(e){super(),index.registerInstance(this,e),this.ctrl=new ProgressController(this.stateAccess),this.liveValue=0}watchLabel(e){this.ctrl.watchLabel(e)}watchMax(e){this.ctrl.watchMax(e)}watchUnit(e){this.ctrl.watchUnit(e)}watchValue(e){this.ctrl.watchValue(e)}watchVariant(e){this.ctrl.watchVariant(e)}componentWillLoad(){this.ctrl.componentWillLoad({label:this._label,max:this._max,unit:this._unit,value:this._value,variant:this._variant})}disconnectedCallback(){this.ctrl.destroy()}render(){return index.h(index.Host,{key:"875e3cb3b7b18f3a73be1115a577e7681e7f2c6d"},index.h(ProgressFC,{key:"89fc086cc42ec754a47faf0ee6ba99800aac90dd",label:this.ctrl.getRenderProp("label"),max:this.ctrl.getRenderProp("max"),unit:this.ctrl.getRenderProp("unit"),value:this.ctrl.getRenderProp("value"),variant:this.ctrl.getRenderProp("variant"),liveValue:this.liveValue}))}static get watchers(){return{_label:["watchLabel"],_max:["watchMax"],_unit:["watchUnit"],_value:["watchValue"],_variant:["watchVariant"]}}};KolProgress.style={default:defaultStyleCss},exports.kol_progress=KolProgress;

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-C24UiEit.js"),variantQuote=require("./variant-quote-DpNzmCtr.js"),componentNames=require("./component-names-5KS_pYRF.js"),bemRegistry=require("./bem-registry-CRVGjDoN.js");require("./common-DPb6NWR4.js");var normalizers=require("./normalizers-BCLslVaT.js"),label=require("./label-DRrPbj-j.js"),baseController=require("./base-controller-DAzsTqX9.js");require("./_Uint8Array-BAQUGozM.js"),require("./isArray-BOIOdEQh.js");const hrefProp=normalizers.createPropDefinition("href","",normalizers.normalizeString,e=>"string"==typeof e),quoteProp=normalizers.createPropDefinition("quote","",normalizers.normalizeString),quoteBem=bemRegistry.bem.forBlock("kol-quote"),BEM_CLASS_QUOTE__BLOCKQUOTE=quoteBem("blockquote"),BEM_CLASS_QUOTE__CITE=quoteBem("cite"),BEM_CLASS_QUOTE__FIGCAPTION=quoteBem("figcaption"),BEM_CLASS_QUOTE__QUOTE=quoteBem("quote"),QuoteFC=e=>{const{href:n,label:t,quote:o,variant:i}=e,r=""===o,a=quoteBem({[i]:!0});return index.h("figure",{class:a},"block"===i?index.h("blockquote",{class:BEM_CLASS_QUOTE__BLOCKQUOTE,cite:n},o,index.h("span",{"aria-hidden":r?void 0:"true",hidden:!r},index.h("slot",{name:"expert"}))):index.h("q",{class:BEM_CLASS_QUOTE__QUOTE,cite:n},o,index.h("span",{"aria-hidden":r?void 0:"true",hidden:!r},index.h("slot",{name:"expert"}))),"string"==typeof t&&t.length>0&&index.h("figcaption",{class:BEM_CLASS_QUOTE__FIGCAPTION},index.h("cite",{class:BEM_CLASS_QUOTE__CITE},index.h(componentNames.KolLinkTag,{_href:n,_label:t,_target:"_blank"}))))},quotePropsConfig={optional:[label.labelProp,variantQuote.variantQuoteProp],required:[hrefProp,quoteProp]};class QuoteController extends baseController.BaseController{constructor(e){super(e,quotePropsConfig)}componentWillLoad(e){const{href:n,label:t,quote:o,variant:i}=e;this.watchHref(n),this.watchLabel(t),this.watchQuote(o),this.watchVariant(i)}watchHref(e){hrefProp.apply(e,e=>{this.setRenderProp("href",e)})}watchLabel(e){label.labelProp.apply(e,e=>{this.setRenderProp("label",e)})}watchQuote(e){quoteProp.apply(e,e=>{this.setRenderProp("quote",e)})}watchVariant(e){variantQuote.variantQuoteProp.apply(e,e=>{this.setRenderProp("variant",e)})}}const defaultStyleCss="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: white;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-quote {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}",KolQuote=class{constructor(e){index.registerInstance(this,e),this.ctrl=new QuoteController(variantQuote.BaseWebComponent.stateLess),this._variant="inline"}watchHref(e){this.ctrl.watchHref(e)}watchLabel(e){this.ctrl.watchLabel(e)}watchQuote(e){this.ctrl.watchQuote(e)}watchVariant(e){this.ctrl.watchVariant(e)}componentWillLoad(){this.ctrl.componentWillLoad({href:this._href,label:this._label,quote:this._quote,variant:this._variant})}render(){return index.h(index.Host,{key:"6dbdd16912a99997f52326f7cca426f704a7357b"},index.h(QuoteFC,{key:"a523fb0f75067faad16629169193f76e9e879ace",href:this.ctrl.getRenderProp("href"),label:this.ctrl.getRenderProp("label"),quote:this.ctrl.getRenderProp("quote"),variant:this.ctrl.getRenderProp("variant")}))}static get watchers(){return{_href:["watchHref"],_label:["watchLabel"],_quote:["watchQuote"],_variant:["watchVariant"]}}};KolQuote.style={default:defaultStyleCss},exports.kol_quote=KolQuote;
+"use strict";var index=require("./index-DyCCobHQ.js"),variantQuote=require("./variant-quote-DpNzmCtr.js"),componentNames=require("./component-names-5KS_pYRF.js"),bemRegistry=require("./bem-registry-CRVGjDoN.js");require("./common-DPb6NWR4.js");var normalizers=require("./normalizers-BCLslVaT.js"),label=require("./label-DRrPbj-j.js"),baseController=require("./base-controller-DAzsTqX9.js");require("./_Uint8Array-BAQUGozM.js"),require("./isArray-BOIOdEQh.js");const hrefProp=normalizers.createPropDefinition("href","",normalizers.normalizeString,e=>"string"==typeof e),quoteProp=normalizers.createPropDefinition("quote","",normalizers.normalizeString),quoteBem=bemRegistry.bem.forBlock("kol-quote"),BEM_CLASS_QUOTE__BLOCKQUOTE=quoteBem("blockquote"),BEM_CLASS_QUOTE__CITE=quoteBem("cite"),BEM_CLASS_QUOTE__FIGCAPTION=quoteBem("figcaption"),BEM_CLASS_QUOTE__QUOTE=quoteBem("quote"),QuoteFC=e=>{const{href:n,label:t,quote:o,variant:i}=e,r=""===o,a=quoteBem({[i]:!0});return index.h("figure",{class:a},"block"===i?index.h("blockquote",{class:BEM_CLASS_QUOTE__BLOCKQUOTE,cite:n},o,index.h("span",{"aria-hidden":r?void 0:"true",hidden:!r},index.h("slot",{name:"expert"}))):index.h("q",{class:BEM_CLASS_QUOTE__QUOTE,cite:n},o,index.h("span",{"aria-hidden":r?void 0:"true",hidden:!r},index.h("slot",{name:"expert"}))),"string"==typeof t&&t.length>0&&index.h("figcaption",{class:BEM_CLASS_QUOTE__FIGCAPTION},index.h("cite",{class:BEM_CLASS_QUOTE__CITE},index.h(componentNames.KolLinkTag,{_href:n,_label:t,_target:"_blank"}))))},quotePropsConfig={optional:[label.labelProp,variantQuote.variantQuoteProp],required:[hrefProp,quoteProp]};class QuoteController extends baseController.BaseController{constructor(e){super(e,quotePropsConfig)}componentWillLoad(e){const{href:n,label:t,quote:o,variant:i}=e;this.watchHref(n),this.watchLabel(t),this.watchQuote(o),this.watchVariant(i)}watchHref(e){hrefProp.apply(e,e=>{this.setRenderProp("href",e)})}watchLabel(e){label.labelProp.apply(e,e=>{this.setRenderProp("label",e)})}watchQuote(e){quoteProp.apply(e,e=>{this.setRenderProp("quote",e)})}watchVariant(e){variantQuote.variantQuoteProp.apply(e,e=>{this.setRenderProp("variant",e)})}}const defaultStyleCss="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: white;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-quote {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}",KolQuote=class{constructor(e){index.registerInstance(this,e),this.ctrl=new QuoteController(variantQuote.BaseWebComponent.stateLess),this._variant="inline"}watchHref(e){this.ctrl.watchHref(e)}watchLabel(e){this.ctrl.watchLabel(e)}watchQuote(e){this.ctrl.watchQuote(e)}watchVariant(e){this.ctrl.watchVariant(e)}componentWillLoad(){this.ctrl.componentWillLoad({href:this._href,label:this._label,quote:this._quote,variant:this._variant})}render(){return index.h(index.Host,{key:"6dbdd16912a99997f52326f7cca426f704a7357b"},index.h(QuoteFC,{key:"a523fb0f75067faad16629169193f76e9e879ace",href:this.ctrl.getRenderProp("href"),label:this.ctrl.getRenderProp("label"),quote:this.ctrl.getRenderProp("quote"),variant:this.ctrl.getRenderProp("variant")}))}static get watchers(){return{_href:["watchHref"],_label:["watchLabel"],_quote:["watchQuote"],_variant:["watchVariant"]}}};KolQuote.style={default:defaultStyleCss},exports.kol_quote=KolQuote;

package/dist/cjs/kol-select-wc.cjs.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-C24UiEit.js"),clsx=require("./clsx-Bm_HQUnh.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-D7N3J8IX.js"),controllerIcon=require("./controller-icon-DiMYMQNu.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),common=require("./common-DPb6NWR4.js"),dev_utils=require("./dev.utils-C6aqolAb.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js"),controller$1=require("./controller-BMDxsRHs.js"),multiple=require("./multiple-BEGQDyov.js"),controller=require("./controller-C9wc4ULR.js"),required=require("./required-DriHzqmx.js"),rows=require("./rows-DS0wBUTI.js");require("./access-and-short-key-CspEpGOV.js"),require("./disabled-GY6LfYNH.js"),require("./hide-label-BnMTmbm4.js"),require("./label-8vcJJEVI.js"),require("./tooltip-align-BeYhiCq6.js"),require("./align-B8NMKvjk.js"),require("./events-Jc2wxPjR.js"),require("./associated.controller-DLy6rpeW.js"),require("./bootstrap-ByVQ9oF5.js"),require("./component-names-5KS_pYRF.js"),require("./i18n-CgUN6lev.js"),require("./_Uint8Array-BAQUGozM.js"),require("./isArray-BOIOdEQh.js"),require("./variant-quote-DpNzmCtr.js"),require("./normalizers-BCLslVaT.js"),require("./component-P70qtkzX.js"),require("./component-CY3ki2XC.js"),require("./bem-registry-CRVGjDoN.js"),require("./component-BcNeqWH3.js"),require("./controller-DiB9pVnb.js"),require("./align-floating-elements-BkrTeMF3.js"),require("./tooltip-open-tracking-Ba0udJRU.js"),require("./label-DRrPbj-j.js"),require("./base-controller-DAzsTqX9.js"),require("./i18n-Cjy0vgJA.js"),require("./Alert-CZFEnpQp.js"),require("./Heading-C8dFS1jN.js"),require("./icons-C4O3H4TU.js"),require("./orientation-CZeybVrr.js");const NativeOptionFc=e=>{var{baseClassName:t="kol-select",class:i,index:s,selectedValue:l,selected:a,value:r,label:o,disabled:n}=e,c=tslib_es6.__rest(e,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);void 0===l?l=[]:Array.isArray(l)||(l=[l]);const d=a||l.includes(r);return index.h("option",Object.assign({class:clsx.clsx(`${t}__option`,{[`${t}__option--selected`]:d,[`${t}__option--disabled`]:n},i),selected:d,disabled:n,value:s},c),o)},NativeOptionListFc=({baseClassName:e,preKey:t,options:i,disabled:s,value:l,OptionProps:a={},OptionGroupProps:r={}})=>(null==i?void 0:i.length)?index.h(index.Fragment,null,i.map((o,n)=>{const c=[t,`-${n}`].join("");if("options"in o){if(!i.length)return null;const{label:t}=o,n=tslib_es6.__rest(o,["label"]);return index.h("optgroup",Object.assign({class:clsx.clsx(`${e}__optgroup`,{[`${e}__optgroup--disabled`]:s}),key:c},r,{label:null==t?void 0:t.toString(),disabled:s}),index.h(NativeOptionListFc,Object.assign({baseClassName:e,OptionGroupProps:r,OptionProps:a,value:l,preKey:c},n)))}return"value"in o?index.h(NativeOptionFc,Object.assign({key:c,baseClassName:e},a,{index:c,selectedValue:l},o)):null})):null,NativeSelectFc=e=>{const{class:t,msg:i,touched:s,disabled:l,required:a,options:r,value:o,OptionProps:n,OptionGroupProps:c,ariaDescribedBy:d,hideLabel:u,label:h}=e,p=tslib_es6.__rest(e,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),v={"kol-select--disabled":Boolean(l),"kol-select--required":Boolean(a),"kol-select--touched":Boolean(s),[`kol-select--${FormFieldStateWrapper.getMsgType(i)}`]:FormFieldStateWrapper.isMsgDefinedAndInputTouched(i,s)},_=Object.assign(Object.assign({class:clsx.clsx("kol-select",v,t),required:a,disabled:l},FormFieldStateWrapper.getDefaultProps({ariaDescribedBy:d,hideLabel:u,label:h})),p);return index.h("select",Object.assign({},_),index.h(NativeOptionListFc,{baseClassName:"kol-select",options:r,value:o,OptionGroupProps:c,OptionProps:n}))};function getSelectProps(e){const{ariaDescribedBy:t}=FormFieldStateWrapper.getRenderStates(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,options:e._options,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,size:e._rows,multiple:e._multiple,required:e._required,touched:e._touched,msg:e._msg};return"_shortKey"in e&&(i["aria-keyshortcuts"]=e._shortKey),i}const SelectStateWrapper=e=>{var{state:t}=e,i=tslib_es6.__rest(e,["state"]);return index.h(NativeSelectFc,Object.assign({},getSelectProps(t),i))};class SelectController extends controllerIcon.InputIconController{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find(t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options)),this.filterValuesInOptions=(e,t)=>e.filter(e=>void 0!==this.isValueInOptions(e,t)),this.afterPatchOptions=(e,t,i,s)=>{"_value"===s&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const i=t.get("_value");void 0===i||Array.isArray(i)||t.set("_value",[i]);const s=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(s)&&s.length>0){this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,s);const e=t.has("_value")?t.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],s);!1===this.component._multiple&&0===i.length?t.set("_value",[s[0].value]):Array.isArray(e)&&i.length<e.length&&t.set("_value",i)}},this.component=e}validateOptions(e){controller.validateOptionsWithOptgroup(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){this.assertComponentValueMatchesMultiplicity(!0===e),multiple.validateMultiple(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){required.validateRequired(this.component,e)}validateRows(e){rows.validateRows(this.component,e)}validateValue(e){this.assertValueMatchesMultiplicity(e),common.watchJsonArrayString(this.component,"_value",()=>!0,void 0===e?[]:Array.isArray(e)?e:[e],void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}assertValueMatchesMultiplicity(e){const t=Array.isArray(e);if(!0===this.component._multiple){if(void 0!==e&&!t)throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (received = ${JSON.stringify(e)})`)}else if(t)throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (received = ${JSON.stringify(e)})`)}assertComponentValueMatchesMultiplicity(e){const t=this.component._value;if(e){if(void 0!==t&&!Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (current = ${JSON.stringify(t)})`)}else if(Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (current = ${JSON.stringify(t)})`)}}const KolSelectWc=class{async getValue(){return this._multiple?this.state._value:Array.isArray(this.state._value)&&this.state._value.length>0?this.state._value[0]:this.state._value}async focus(){return elementFocus.setFocus(this.selectRef)}async click(){return elementClick.setClick(this.selectRef)}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-form-field-select",{"kol-form-field--has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.setSelectRef,state:this.state},this.controller.onFacade),{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"a2705d92334c4a485a1f48b73873786465fea32e"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"fc76f86f45b8e8b466d1cefb0fba223e46b5f200",state:this.state},index.h("form",{key:"66fad795ed01667adf23869dad137edc9b94e027",onSubmit:e=>{e.preventDefault(),controller$1.propagateSubmitEventToForm({form:this.host})}},index.h("input",{key:"8f0ed39c5c4f9caf3ff105d3b495cab7139e05a3",type:"submit",hidden:!0}),index.h(SelectStateWrapper,Object.assign({key:"64f1936bade207e9d2277fea8b6fac8081355375"},this.getSelectProps())))))}constructor(e){index.registerInstance(this,e),this.setSelectRef=e=>{this.selectRef=e},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new SelectController(this,"select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}onInput(e){var t;const i=Array.from((null===(t=this.selectRef)||void 0===t?void 0:t.options)||[]).filter(e=>e.selected).map(e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value});if(this._multiple)this._value=i,this.controller.onFacade.onInput(e,!0,i);else{const t=i.length>0?i[0]:void 0;this._value=t,this.controller.onFacade.onInput(e,!0,t)}}onChange(e){this._multiple,this.controller.onFacade.onChange(e,this._value)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};exports.kol_select_wc=KolSelectWc;
+"use strict";var index=require("./index-DyCCobHQ.js"),clsx=require("./clsx-Bm_HQUnh.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-ByL7oRBI.js"),controllerIcon=require("./controller-icon-BoWIawkU.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),common=require("./common-DPb6NWR4.js"),dev_utils=require("./dev.utils-DYrlz4G7.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js"),controller$1=require("./controller-BMDxsRHs.js"),multiple=require("./multiple-BEGQDyov.js"),controller=require("./controller-BBKSlFz4.js"),required=require("./required-DriHzqmx.js"),rows=require("./rows-DS0wBUTI.js");require("./access-and-short-key-CspEpGOV.js"),require("./disabled-GY6LfYNH.js"),require("./hide-label-BnMTmbm4.js"),require("./label-8vcJJEVI.js"),require("./tooltip-align-BeYhiCq6.js"),require("./align-B8NMKvjk.js"),require("./variant-class-name-BCWuCRd0.js"),require("./events-Jc2wxPjR.js"),require("./associated.controller-DLy6rpeW.js"),require("./bootstrap-ByVQ9oF5.js"),require("./component-names-5KS_pYRF.js"),require("./i18n-CgUN6lev.js"),require("./_Uint8Array-BAQUGozM.js"),require("./isArray-BOIOdEQh.js"),require("./variant-quote-DpNzmCtr.js"),require("./normalizers-BCLslVaT.js"),require("./component-lBaUur7X.js"),require("./component--8i7E4CQ.js"),require("./bem-registry-CRVGjDoN.js"),require("./component-bCqns4_n.js"),require("./controller-DiB9pVnb.js"),require("./align-floating-elements-BkrTeMF3.js"),require("./tooltip-open-tracking-Ba0udJRU.js"),require("./label-DRrPbj-j.js"),require("./base-controller-DAzsTqX9.js"),require("./i18n-Cjy0vgJA.js"),require("./Alert-CCe9pvqX.js"),require("./Heading-C-7wIlLu.js"),require("./icons-C4O3H4TU.js"),require("./orientation-CZeybVrr.js");const NativeOptionFc=e=>{var{baseClassName:t="kol-select",class:i,index:s,selectedValue:a,selected:l,value:r,label:o,disabled:n}=e,c=tslib_es6.__rest(e,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);void 0===a?a=[]:Array.isArray(a)||(a=[a]);const d=l||a.includes(r);return index.h("option",Object.assign({class:clsx.clsx(`${t}__option`,{[`${t}__option--selected`]:d,[`${t}__option--disabled`]:n},i),selected:d,disabled:n,value:s},c),o)},NativeOptionListFc=({baseClassName:e,preKey:t,options:i,disabled:s,value:a,OptionProps:l={},OptionGroupProps:r={}})=>(null==i?void 0:i.length)?index.h(index.Fragment,null,i.map((o,n)=>{const c=[t,`-${n}`].join("");if("options"in o){if(!i.length)return null;const{label:t}=o,n=tslib_es6.__rest(o,["label"]);return index.h("optgroup",Object.assign({class:clsx.clsx(`${e}__optgroup`,{[`${e}__optgroup--disabled`]:s}),key:c},r,{label:null==t?void 0:t.toString(),disabled:s}),index.h(NativeOptionListFc,Object.assign({baseClassName:e,OptionGroupProps:r,OptionProps:l,value:a,preKey:c},n)))}return"value"in o?index.h(NativeOptionFc,Object.assign({key:c,baseClassName:e},l,{index:c,selectedValue:a},o)):null})):null,NativeSelectFc=e=>{const{class:t,msg:i,touched:s,disabled:a,required:l,options:r,value:o,OptionProps:n,OptionGroupProps:c,ariaDescribedBy:d,hideLabel:u,label:h}=e,p=tslib_es6.__rest(e,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),v={"kol-select--disabled":Boolean(a),"kol-select--required":Boolean(l),"kol-select--touched":Boolean(s),[`kol-select--${FormFieldStateWrapper.getMsgType(i)}`]:FormFieldStateWrapper.isMsgDefinedAndInputTouched(i,s)},_=Object.assign(Object.assign({class:clsx.clsx("kol-select",v,t),required:l,disabled:a},FormFieldStateWrapper.getDefaultProps({ariaDescribedBy:d,hideLabel:u,label:h})),p);return index.h("select",Object.assign({},_),index.h(NativeOptionListFc,{baseClassName:"kol-select",options:r,value:o,OptionGroupProps:c,OptionProps:n}))};function getSelectProps(e){const{ariaDescribedBy:t}=FormFieldStateWrapper.getRenderStates(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,options:e._options,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,size:e._rows,multiple:e._multiple,required:e._required,touched:e._touched,msg:e._msg};return"_shortKey"in e&&(i["aria-keyshortcuts"]=e._shortKey),i}const SelectStateWrapper=e=>{var{state:t}=e,i=tslib_es6.__rest(e,["state"]);return index.h(NativeSelectFc,Object.assign({},getSelectProps(t),i))};class SelectController extends controllerIcon.InputIconController{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find(t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options)),this.filterValuesInOptions=(e,t)=>e.filter(e=>void 0!==this.isValueInOptions(e,t)),this.afterPatchOptions=(e,t,i,s)=>{"_value"===s&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const i=t.get("_value");void 0===i||Array.isArray(i)||t.set("_value",[i]);const s=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(s)&&s.length>0){this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,s);const e=t.has("_value")?t.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],s);!1===this.component._multiple&&0===i.length?t.set("_value",[s[0].value]):Array.isArray(e)&&i.length<e.length&&t.set("_value",i)}},this.component=e}validateOptions(e){controller.validateOptionsWithOptgroup(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){this.assertComponentValueMatchesMultiplicity(!0===e),multiple.validateMultiple(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){required.validateRequired(this.component,e)}validateRows(e){rows.validateRows(this.component,e)}validateValue(e){this.assertValueMatchesMultiplicity(e),common.watchJsonArrayString(this.component,"_value",()=>!0,void 0===e?[]:Array.isArray(e)?e:[e],void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}assertValueMatchesMultiplicity(e){const t=Array.isArray(e);if(!0===this.component._multiple){if(void 0!==e&&!t)throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (received = ${JSON.stringify(e)})`)}else if(t)throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (received = ${JSON.stringify(e)})`)}assertComponentValueMatchesMultiplicity(e){const t=this.component._value;if(e){if(void 0!==t&&!Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (current = ${JSON.stringify(t)})`)}else if(Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (current = ${JSON.stringify(t)})`)}}const KolSelectWc=class{async getValue(){return this._multiple?this.state._value:Array.isArray(this.state._value)&&this.state._value.length>0?this.state._value[0]:this.state._value}async focus(){return elementFocus.setFocus(this.selectRef)}async click(){return elementClick.setClick(this.selectRef)}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-form-field-select",{"kol-form-field--has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.setSelectRef,state:this.state},this.controller.onFacade),{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"60f51e216d21f55157236da1bd470c5c268e309d"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"a8315ebd61bcc55a34bad70a0ed6446854ab25d8",state:this.state},index.h("form",{key:"b7cc837d4772c08cb72af8a5fe9f99c26b5c5252",onSubmit:e=>{e.preventDefault(),controller$1.propagateSubmitEventToForm({form:this.host})}},index.h("input",{key:"cb1ff08c7e77ad96bbb733c541ffd823d7263848",type:"submit",hidden:!0}),index.h(SelectStateWrapper,Object.assign({key:"9b39ce787c7b33354265a859c7a0032aee862972"},this.getSelectProps())))))}constructor(e){index.registerInstance(this,e),this.setSelectRef=e=>{this.selectRef=e},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideMsg:!1,_id:dev_utils.createUniqueId("select"),_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new SelectController(this,"select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}validateVariant(e){this.controller.validateVariant(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}onInput(e){var t;const i=Array.from((null===(t=this.selectRef)||void 0===t?void 0:t.options)||[]).filter(e=>e.selected).map(e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value});if(this._multiple)this._value=i,this.controller.onFacade.onInput(e,!0,i);else{const t=i.length>0?i[0]:void 0;this._value=t,this.controller.onFacade.onInput(e,!0,t)}}onChange(e){this._multiple,this.controller.onFacade.onChange(e,this._value)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"],_variant:["validateVariant"]}}};exports.kol_select_wc=KolSelectWc;