@public-ui/components 3.1.5 → 3.1.6-rc.0

package/dist/components/kol-link-wc.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{e as KolIconTag,a as KolTooltipWcTag}from"./component-names.js";import{b as watchValidator,j as watchString,i as setEventTarget,n as devHint}from"./common.js";import{s as showExpertSlot}from"./reuse.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key.js";import{v as validateAriaControls,a as validateAriaDescription,b as validateAriaExpanded,c as validateAlternativeButtonLinkRole,d as validateButtonVariant}from"./button-variant.js";import{v as validateCustomClass}from"./custom-class.js";import{v as validateDisabled}from"./disabled.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateHref}from"./href.js";import{v as validateIcons}from"./icons.js";import{v as validateInline}from"./inline.js";import{a as validateLabelWithExpertSlot}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";import{o as onLocationChange}from"./ariaCurrentService.js";import{c as clsx}from"./clsx.js";import"./Alert.js";import{t as translate}from"./i18n.js";import{K as KolSpanFc}from"./Span.js";const ariaCurrentValuePropTypeOptions=["date","location","page","step","time","true","false"],validateAriaCurrentValue=(t,a)=>{watchValidator(t,"_ariaCurrentValue",t=>"string"==typeof t&&ariaCurrentValuePropTypeOptions.includes(t),new Set([`AriaCurrentValue {${ariaCurrentValuePropTypeOptions.join(", ")}`]),a,{defaultValue:"page"})},validateAriaOwns=(t,a)=>{watchString(t,"_ariaOwns",a,{defaultValue:void 0})},validateDownload=(t,a)=>{watchString(t,"_download",a)},validateLinkCallbacks=(t,a)=>{"object"==typeof a&&"function"==typeof(null==a?void 0:a.onClick)&&(t.state=Object.assign(Object.assign({},t.state),{_on:a}))},validateLinkTarget=(t,a)=>{watchString(t,"_target",a)},KolLinkWc$1=proxyCustomElement(class extends HTMLElement{constructor(t){super(),!1!==t&&this.__registerHost(),this.translateOpenLinkInTab=translate("kol-open-link-in-tab"),this.catchRef=t=>{this.anchorRef=t},this.hideTooltip=()=>{var t;null===(t=this.tooltipRef)||void 0===t||t.hideTooltip()},this.onClick=t=>{var a,e;this.state._hideLabel&&this.hideTooltip(),!0===this.state._disabled?t.preventDefault():("function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(t.preventDefault(),setEventTarget(t,this.anchorRef),null===(e=this.state._on)||void 0===e||e.onClick(t,this.state._href)),this.host&&dispatchDomEvent(this.host,KolEvent.click,this.state._href))},this.getRenderValues=()=>{const t="string"==typeof this.state._target&&"_self"!==this.state._target,a={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0);",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:t?"noopener":void 0,download:"string"==typeof this.state._download?this.state._download:void 0};return!0!==this.state._hideLabel||this.state._label||devHint("[KolLink] An aria-label must be set when _hide-label is set."),{isExternal:t,tagAttrs:a}},this._disabled=!1,this._hideLabel=!1,this._inline=!0,this._tooltipAlign="right",this._buttonVariant="normal",this.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}async focus(){return new Promise(t=>{requestAnimationFrame(()=>{var a;null===(a=this.anchorRef)||void 0===a||a.focus(),t()})})}async kolFocus(){return this.focus()}render(){var t;const{isExternal:a,tagAttrs:e}=this.getRenderValues(),i=showExpertSlot(this.state._label),s=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim();return h(Host,{key:"95cb568bb3eff8d366c9add6680e8ef55ff13b37"},h("a",Object.assign({key:"da620b1a780bf191333ab07aefc79dcb17059279",ref:this.catchRef},e,{accessKey:this.state._accessKey,"aria-current":this.state._ariaCurrent,"aria-controls":this.state._ariaControls,"aria-description":s||void 0,"aria-disabled":this.state._disabled?"true":void 0,"aria-expanded":"boolean"==typeof this.state._ariaExpanded?String(this.state._ariaExpanded):void 0,"aria-owns":this.state._ariaOwns,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?`${this.state._label}${a?` (${this.translateOpenLinkInTab})`:""}`:void 0,"aria-keyshortcuts":this.state._shortKey,class:clsx("kol-link",{"kol-link--disabled":!0===this.state._disabled,"kol-link--external-link":a,"kol-link--hide-label":!0===this.state._hideLabel,[`kol-link--${this.state._buttonVariant}`]:"custom"!==this.state._buttonVariant,"kol-link--inline":!0===this.state._inline,"kol-link--standalone":!1===this.state._inline,[this.state._customClass]:"custom"===this.state._buttonVariant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0})},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick,role:this.state._role,tabIndex:this.state._disabled?-1:this.state._tabIndex}),h(KolSpanFc,{key:"db460a4feeeedc6814f05baa13f9617af4fd7472",class:"kol-link__text",badgeText:this.state._accessKey||this.state._shortKey,icons:this.state._icons,hideLabel:this.state._hideLabel,label:i?"":this.state._label||this.state._href},h("slot",{key:"be6d382efe304b98ab1f0005dd02284db06f0714",name:"expert",slot:"expert"})),a&&h(KolIconTag,{key:"1dc8d91a26164254e0156191568cc227b5852074",class:"kol-link__icon",_label:this.state._hideLabel?"":this.translateOpenLinkInTab,_icons:"codicon codicon-link-external","aria-hidden":this.state._hideLabel})),!0===this.state._hideLabel&&h(KolTooltipWcTag,{key:"5d9c344ad0a30f44c762bf1b3b4ecadab9b66595","aria-hidden":"true",class:"kol-link__tooltip",ref:t=>this.tooltipRef=t,hidden:i,_badgeText:this.state._accessKey||this.state._shortKey,_align:this.state._tooltipAlign,_label:this.state._label||this.state._href}))}validateAccessKey(t){validateAccessKey(this,t),validateAccessAndShortKey(t,this._shortKey)}validateAriaCurrentValue(t){validateAriaCurrentValue(this,t)}validateAriaControls(t){validateAriaControls(this,t)}validateAriaDescription(t){validateAriaDescription(this,t)}validateAriaExpanded(t){validateAriaExpanded(this,t)}validateAriaOwns(t){validateAriaOwns(this,t)}validateCustomClass(t){validateCustomClass(this,t)}validateDisabled(t){validateDisabled(this,t)}validateDownload(t){validateDownload(this,t)}validateHideLabel(t){validateHideLabel(this,t)}validateHref(t){validateHref(this,t,{required:!0})}validateIcons(t){validateIcons(this,t)}validateInline(t){validateInline(this,t,{defaultValue:!0})}validateLabel(t){validateLabelWithExpertSlot(this,t)}validateOn(t){validateLinkCallbacks(this,t)}validateRole(t){validateAlternativeButtonLinkRole(this,t)}validateShortKey(t){validateShortKey(this,t),validateAccessAndShortKey(this._accessKey,t)}validateTabIndex(t){validateTabIndex(this,t)}validateTarget(t){validateLinkTarget(this,t)}validateTooltipAlign(t){validateTooltipAlign(this,t)}validateButtonVariant(t){validateButtonVariant(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateAriaControls(this._ariaControls),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaOwns(this._ariaOwns),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel),this.validateHref(this._href),this.validateIcons(this._icons),this.validateInline(this._inline),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTooltipAlign(this._tooltipAlign),this.validateButtonVariant(this._buttonVariant),this.unsubscribeOnLocationChange=onLocationChange(t=>{this.state._ariaCurrent=t===this.state._href?this.state._ariaCurrentValue:void 0}),validateAccessAndShortKey(this._accessKey,this._shortKey)}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange()}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_inline:["validateInline"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"],_buttonVariant:["validateButtonVariant"]}}},[260,"kol-link-wc",{_accessKey:[1,"_access-key"],_ariaCurrentValue:[1,"_aria-current-value"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaOwns:[1,"_aria-owns"],_customClass:[1,"_custom-class"],_disabled:[4],_download:[1],_hideLabel:[4,"_hide-label"],_href:[1],_icons:[1],_inline:[4],_label:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_tabIndex:[2,"_tab-index"],_target:[1],_tooltipAlign:[1,"_tooltip-align"],_buttonVariant:[1,"_button-variant"],state:[32],focus:[64],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_inline:["validateInline"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"],_buttonVariant:["validateButtonVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-link-wc"].forEach(t=>{if("kol-link-wc"===t)customElements.get(t)||customElements.define(t,KolLinkWc$1)})}const KolLinkWc=KolLinkWc$1,defineCustomElement=defineCustomElement$1;export{KolLinkWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{e as KolIconTag,a as KolTooltipWcTag}from"./component-names.js";import{b as watchValidator,i as watchString,h as setEventTarget,l as devHint}from"./common.js";import{s as showExpertSlot}from"./reuse.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key.js";import{v as validateAriaControls,a as validateAriaDescription,b as validateAriaExpanded,c as validateAlternativeButtonLinkRole,d as validateButtonVariant}from"./button-variant.js";import{v as validateCustomClass}from"./custom-class.js";import{v as validateDisabled}from"./disabled.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateHref}from"./href.js";import{v as validateIcons}from"./icons.js";import{v as validateInline}from"./inline.js";import{a as validateLabelWithExpertSlot}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";import{o as onLocationChange}from"./ariaCurrentService.js";import{c as clsx}from"./clsx.js";import"./Alert.js";import{t as translate}from"./i18n.js";import{K as KolSpanFc}from"./Span.js";const ariaCurrentValuePropTypeOptions=["date","location","page","step","time","true","false"],validateAriaCurrentValue=(t,a)=>{watchValidator(t,"_ariaCurrentValue",t=>"string"==typeof t&&ariaCurrentValuePropTypeOptions.includes(t),new Set([`AriaCurrentValue {${ariaCurrentValuePropTypeOptions.join(", ")}`]),a,{defaultValue:"page"})},validateAriaOwns=(t,a)=>{watchString(t,"_ariaOwns",a,{defaultValue:void 0})},validateDownload=(t,a)=>{watchString(t,"_download",a)},validateLinkCallbacks=(t,a)=>{"object"==typeof a&&"function"==typeof(null==a?void 0:a.onClick)&&(t.state=Object.assign(Object.assign({},t.state),{_on:a}))},validateLinkTarget=(t,a)=>{watchString(t,"_target",a)},KolLinkWc$1=proxyCustomElement(class extends HTMLElement{constructor(t){super(),!1!==t&&this.__registerHost(),this.translateOpenLinkInTab=translate("kol-open-link-in-tab"),this.catchRef=t=>{this.anchorRef=t},this.hideTooltip=()=>{var t;null===(t=this.tooltipRef)||void 0===t||t.hideTooltip()},this.onClick=t=>{var a,e;this.state._hideLabel&&this.hideTooltip(),!0===this.state._disabled?t.preventDefault():("function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(t.preventDefault(),setEventTarget(t,this.anchorRef),null===(e=this.state._on)||void 0===e||e.onClick(t,this.state._href)),this.host&&dispatchDomEvent(this.host,KolEvent.click,this.state._href))},this.getRenderValues=()=>{const t="string"==typeof this.state._target&&"_self"!==this.state._target,a={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0);",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:t?"noopener":void 0,download:"string"==typeof this.state._download?this.state._download:void 0};return!0!==this.state._hideLabel||this.state._label||devHint("[KolLink] An aria-label must be set when _hide-label is set."),{isExternal:t,tagAttrs:a}},this._disabled=!1,this._hideLabel=!1,this._inline=!0,this._tooltipAlign="right",this._buttonVariant="normal",this.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}async focus(){return new Promise(t=>{requestAnimationFrame(()=>{var a;null===(a=this.anchorRef)||void 0===a||a.focus(),t()})})}async kolFocus(){return this.focus()}render(){var t;const{isExternal:a,tagAttrs:e}=this.getRenderValues(),i=showExpertSlot(this.state._label),s=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim();return h(Host,{key:"95cb568bb3eff8d366c9add6680e8ef55ff13b37"},h("a",Object.assign({key:"da620b1a780bf191333ab07aefc79dcb17059279",ref:this.catchRef},e,{accessKey:this.state._accessKey,"aria-current":this.state._ariaCurrent,"aria-controls":this.state._ariaControls,"aria-description":s||void 0,"aria-disabled":this.state._disabled?"true":void 0,"aria-expanded":"boolean"==typeof this.state._ariaExpanded?String(this.state._ariaExpanded):void 0,"aria-owns":this.state._ariaOwns,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?`${this.state._label}${a?` (${this.translateOpenLinkInTab})`:""}`:void 0,"aria-keyshortcuts":this.state._shortKey,class:clsx("kol-link",{"kol-link--disabled":!0===this.state._disabled,"kol-link--external-link":a,"kol-link--hide-label":!0===this.state._hideLabel,[`kol-link--${this.state._buttonVariant}`]:"custom"!==this.state._buttonVariant,"kol-link--inline":!0===this.state._inline,"kol-link--standalone":!1===this.state._inline,[this.state._customClass]:"custom"===this.state._buttonVariant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0})},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick,role:this.state._role,tabIndex:this.state._disabled?-1:this.state._tabIndex}),h(KolSpanFc,{key:"db460a4feeeedc6814f05baa13f9617af4fd7472",class:"kol-link__text",badgeText:this.state._accessKey||this.state._shortKey,icons:this.state._icons,hideLabel:this.state._hideLabel,label:i?"":this.state._label||this.state._href},h("slot",{key:"be6d382efe304b98ab1f0005dd02284db06f0714",name:"expert",slot:"expert"})),a&&h(KolIconTag,{key:"1dc8d91a26164254e0156191568cc227b5852074",class:"kol-link__icon",_label:this.state._hideLabel?"":this.translateOpenLinkInTab,_icons:"codicon codicon-link-external","aria-hidden":this.state._hideLabel})),!0===this.state._hideLabel&&h(KolTooltipWcTag,{key:"5d9c344ad0a30f44c762bf1b3b4ecadab9b66595","aria-hidden":"true",class:"kol-link__tooltip",ref:t=>this.tooltipRef=t,hidden:i,_badgeText:this.state._accessKey||this.state._shortKey,_align:this.state._tooltipAlign,_label:this.state._label||this.state._href}))}validateAccessKey(t){validateAccessKey(this,t),validateAccessAndShortKey(t,this._shortKey)}validateAriaCurrentValue(t){validateAriaCurrentValue(this,t)}validateAriaControls(t){validateAriaControls(this,t)}validateAriaDescription(t){validateAriaDescription(this,t)}validateAriaExpanded(t){validateAriaExpanded(this,t)}validateAriaOwns(t){validateAriaOwns(this,t)}validateCustomClass(t){validateCustomClass(this,t)}validateDisabled(t){validateDisabled(this,t)}validateDownload(t){validateDownload(this,t)}validateHideLabel(t){validateHideLabel(this,t)}validateHref(t){validateHref(this,t,{required:!0})}validateIcons(t){validateIcons(this,t)}validateInline(t){validateInline(this,t,{defaultValue:!0})}validateLabel(t){validateLabelWithExpertSlot(this,t)}validateOn(t){validateLinkCallbacks(this,t)}validateRole(t){validateAlternativeButtonLinkRole(this,t)}validateShortKey(t){validateShortKey(this,t),validateAccessAndShortKey(this._accessKey,t)}validateTabIndex(t){validateTabIndex(this,t)}validateTarget(t){validateLinkTarget(this,t)}validateTooltipAlign(t){validateTooltipAlign(this,t)}validateButtonVariant(t){validateButtonVariant(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateAriaControls(this._ariaControls),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaOwns(this._ariaOwns),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel),this.validateHref(this._href),this.validateIcons(this._icons),this.validateInline(this._inline),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTooltipAlign(this._tooltipAlign),this.validateButtonVariant(this._buttonVariant),this.unsubscribeOnLocationChange=onLocationChange(t=>{this.state._ariaCurrent=t===this.state._href?this.state._ariaCurrentValue:void 0}),validateAccessAndShortKey(this._accessKey,this._shortKey)}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange()}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_inline:["validateInline"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"],_buttonVariant:["validateButtonVariant"]}}},[260,"kol-link-wc",{_accessKey:[1,"_access-key"],_ariaCurrentValue:[1,"_aria-current-value"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaOwns:[1,"_aria-owns"],_customClass:[1,"_custom-class"],_disabled:[4],_download:[1],_hideLabel:[4,"_hide-label"],_href:[1],_icons:[1],_inline:[4],_label:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_tabIndex:[2,"_tab-index"],_target:[1],_tooltipAlign:[1,"_tooltip-align"],_buttonVariant:[1,"_button-variant"],state:[32],focus:[64],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_inline:["validateInline"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"],_buttonVariant:["validateButtonVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-link-wc"].forEach(t=>{if("kol-link-wc"===t)customElements.get(t)||customElements.define(t,KolLinkWc$1)})}const KolLinkWc=KolLinkWc$1,defineCustomElement=defineCustomElement$1;export{KolLinkWc,defineCustomElement};

package/dist/components/kol-modal.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{g as KolCardWcTag}from"./component-names.js";import{j as watchString,b as watchValidator,s as setState}from"./common.js";import{v as validateLabel}from"./label.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";import{h as handleCancelOverlay}from"./tooltip-open-tracking.js";const validateWidth=(n,t,e)=>{watchString(n,"_width",t,Object.assign({defaultValue:"100%"},e))},ModalVariantPropTypeOptions=["blank","card"],validateModalVariant=(n,t)=>{watchValidator(n,"_variant",n=>"string"==typeof n&&ModalVariantPropTypeOptions.includes(n),new Set(ModalVariantPropTypeOptions),t)},defaultStyleCss="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  position: relative;\n  height: 100%;\n}\n.kol-card__close-button {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\n@layer kol-component {\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}",KolModal$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.on={onClose:async()=>{await this.closeModal()}},this._width="100%",this._variant="blank",this.state={_label:"",_width:"100%"}}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var n,t;null===(t=null===(n=this.state._on)||void 0===n?void 0:n.onClose)||void 0===t||t.call(n),this.host&&dispatchDomEvent(this.host,KolEvent.close)}async openModal(){var n;null===(n=this.refDialog)||void 0===n||n.showModal()}async closeModal(){var n,t;null===(t=null===(n=this.refDialog)||void 0===n?void 0:n.close)||void 0===t||t.call(n)}render(){return h("dialog",{key:"744120eb8c740eb454350d4a5cfebc6ca0db9def","aria-label":this.state._label,class:clsx("kol-modal",{"kol-modal__blank":"blank"===this.state._variant,"kol-modal__card":"card"===this.state._variant}),onCancel:handleCancelOverlay,onClose:this.handleNativeCloseEvent.bind(this),ref:n=>{this.refDialog=n},style:{width:this.state._width}},"blank"===this.state._variant&&h("slot",{key:"ed6110b0ddd43e0d544c3420965e93253b4c37db"}),"card"===this.state._variant&&h(KolCardWcTag,{key:"8d041e7c444343a6d5fe9fe7dffc08837bfbefb6",_label:this.state._label,_hasCloser:!0,_on:this.on},h("slot",{key:"804e674e6376a29f6c2e357a70a5603f3ce777c1"})))}validateLabel(n){validateLabel(this,n,{required:!0})}validateOn(n){if("object"==typeof n&&null!==n){const t={};"function"!=typeof n.onClose&&!0!==n.onClose||(t.onClose=n.onClose),setState(this,"_on",t)}}validateWidth(n){validateWidth(this,n)}validateVariant(n){validateModalVariant(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width),this.validateVariant(this._variant)}get host(){return this}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-modal",{_label:[1],_on:[16],_width:[1],_variant:[1],state:[32],openModal:[64],closeModal:[64]},void 0,{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-modal"].forEach(n=>{if("kol-modal"===n)customElements.get(n)||customElements.define(n,KolModal$1)})}const KolModal=KolModal$1,defineCustomElement=defineCustomElement$1;export{KolModal,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{g as KolCardWcTag}from"./component-names.js";import{i as watchString,b as watchValidator,s as setState}from"./common.js";import{v as validateLabel}from"./label.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";import{h as handleCancelOverlay}from"./tooltip-open-tracking.js";const validateWidth=(n,t,e)=>{watchString(n,"_width",t,Object.assign({defaultValue:"100%"},e))},ModalVariantPropTypeOptions=["blank","card"],validateModalVariant=(n,t)=>{watchValidator(n,"_variant",n=>"string"==typeof n&&ModalVariantPropTypeOptions.includes(n),new Set(ModalVariantPropTypeOptions),t)},defaultStyleCss="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  position: relative;\n  height: 100%;\n}\n.kol-card__close-button {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\n@layer kol-component {\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}",KolModal$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.on={onClose:async()=>{await this.closeModal()}},this._width="100%",this._variant="blank",this.state={_label:"",_width:"100%"}}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var n,t;null===(t=null===(n=this.state._on)||void 0===n?void 0:n.onClose)||void 0===t||t.call(n),this.host&&dispatchDomEvent(this.host,KolEvent.close)}async openModal(){var n;null===(n=this.refDialog)||void 0===n||n.showModal()}async closeModal(){var n,t;null===(t=null===(n=this.refDialog)||void 0===n?void 0:n.close)||void 0===t||t.call(n)}render(){return h("dialog",{key:"744120eb8c740eb454350d4a5cfebc6ca0db9def","aria-label":this.state._label,class:clsx("kol-modal",{"kol-modal__blank":"blank"===this.state._variant,"kol-modal__card":"card"===this.state._variant}),onCancel:handleCancelOverlay,onClose:this.handleNativeCloseEvent.bind(this),ref:n=>{this.refDialog=n},style:{width:this.state._width}},"blank"===this.state._variant&&h("slot",{key:"ed6110b0ddd43e0d544c3420965e93253b4c37db"}),"card"===this.state._variant&&h(KolCardWcTag,{key:"8d041e7c444343a6d5fe9fe7dffc08837bfbefb6",_label:this.state._label,_hasCloser:!0,_on:this.on},h("slot",{key:"804e674e6376a29f6c2e357a70a5603f3ce777c1"})))}validateLabel(n){validateLabel(this,n,{required:!0})}validateOn(n){if("object"==typeof n&&null!==n){const t={};"function"!=typeof n.onClose&&!0!==n.onClose||(t.onClose=n.onClose),setState(this,"_on",t)}}validateWidth(n){validateWidth(this,n)}validateVariant(n){validateModalVariant(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width),this.validateVariant(this._variant)}get host(){return this}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-modal",{_label:[1],_on:[16],_width:[1],_variant:[1],state:[32],openModal:[64],closeModal:[64]},void 0,{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-modal"].forEach(n=>{if("kol-modal"===n)customElements.get(n)||customElements.define(n,KolModal$1)})}const KolModal=KolModal$1,defineCustomElement=defineCustomElement$1;export{KolModal,defineCustomElement};

package/dist/components/kol-nav.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{d as watchBoolean,Q as devWarning,e as a11yHintLabelingLandmarks,n as devHint,b as watchValidator}from"./common.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateLabel}from"./label.js";import{c as clsx}from"./clsx.js";import{f as KolLinkWcTag,d as KolButtonWcTag}from"./component-names.js";import{t as translate}from"./i18n.js";import{n as nonce}from"./dev.utils.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";const validateCollapsible=(n,e)=>{watchBoolean(n,"_collapsible",e)},validateHasCompactButton=(n,e)=>{watchBoolean(n,"_hasCompactButton",e)},validateHasIconsWhenExpanded=(n,e)=>{watchBoolean(n,"_hasIconsWhenExpanded",e)},defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-nav {\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav--horizontal {\n    width: 100%;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__navigation .kol-span {\n    width: 100%;\n    justify-content: flex-start;\n  }\n  .kol-nav__navigation .kol-span__container {\n    width: 100%;\n  }\n  .kol-nav__navigation .kol-span__container .kol-span__label {\n    flex: 1;\n  }\n  .kol-nav__list {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list--horizontal {\n    flex-wrap: wrap;\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-button {\n    text-align: left;\n  }\n}",entryIsLink=n=>"string"==typeof n._href,entryIsButton=n=>{var e;return void 0===n._href&&"function"==typeof(null===(e=n._on)||void 0===e?void 0:e.onClick)},KolNav$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.navId="kol-nav-"+nonce(),this.listId=this.navId+"-list",this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>h("ul",{class:clsx("kol-nav__list",{"kol-nav__list--nested":n.deep>0,"kol-nav__list--horizontal":0===n.deep&&"horizontal"===n.orientation,"kol-nav__list--vertical":0!==n.deep||"vertical"===n.orientation}),id:n.deep>0?n.id:void 0},n.links.map((e,t)=>this.li(n.collapsible,n.deep,t,e,n.orientation,n.id))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_expandedChildren:[]}}expandChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,n]})}collapseChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter(e=>e!==n)})}buildIconObject(n,e,t){const i={left:"",right:""};return this.state._hasIconsWhenExpanded&&t&&(i.left=t),this.state._hideLabel&&(i.left=t||"codicon codicon-symbol-method"),n&&(i.right=e?"codicon codicon-remove":"codicon codicon-add"),i}entry(n,e,t,i,a){var o;const l=this.buildIconObject(n&&e,i,null===(o=t._icons)||void 0===o?void 0:o.toString());return h("div",{class:"kol-nav__entry-wrapper"},entryIsLink(t)?h(KolLinkWcTag,Object.assign({class:clsx("kol-nav__entry kol-nav__entry--link",{"kol-nav__entry--collapsible":n})},t,{_hideLabel:this.state._hideLabel,_icons:l,_ariaControls:n&&e&&i?a:void 0,_ariaExpanded:n&&e?i:void 0})):h(KolButtonWcTag,{class:clsx("kol-nav__entry kol-nav__entry--button",{"kol-nav__entry--collapsible":n}),_label:t._label,_hideLabel:this.state._hideLabel,_icons:l,_ariaControls:n&&e&&i?a:void 0,_ariaExpanded:n&&e?i:void 0,_on:{onClick:(n,e)=>{entryIsButton(t)&&"function"==typeof t._on.onClick&&t._on.onClick(n,e),this.handleToggleExpansionClick(t._children)}}}))}li(n,e,t,i,a,o){const l=!!i._active,s=Array.isArray(i._children)&&i._children.length>0,d=Boolean(i._children&&this.state._expandedChildren.includes(i._children)),r=o+"_"+e+"_"+t;return h("li",{class:clsx("kol-nav__list-item",{"kol-nav__list-item--active":l,"kol-nav__list-item--expanded":d,"kol-nav__list-item--has-children":s}),key:t},this.entry(n,s,i,d,r),d&&h(this.linkList,{collapsible:n,deep:e+1,links:i._children||[],orientation:a,id:r}))}initializeExpandedChildren(){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[]});const n=e=>{if(e._active)return e._children&&this.expandChildren(e._children),!0;if(e._children)for(const t of e._children)if(n(t))return this.expandChildren(e._children),!0;return!1};this.state._links.forEach(n)}render(){let n=this.state._hasCompactButton;return"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,devWarning("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.")),h("div",{key:"b8db85b304f436fa5882f487f6b83a74f833c943",class:clsx("kol-nav",`kol-nav--${this.state._orientation}`,{"kol-nav--is-compact":this.state._hideLabel})},h("nav",{key:"e10d8ebdf16027383e98ea463f20b5ee7a30617d","aria-label":this.state._label,class:"kol-nav__navigation",id:this.navId},h(this.linkList,{key:"88b5acc16bcebe287533a7f0ed06a2a3d6994a6d",collapsible:this.state._collapsible,deep:0,links:this.state._links,orientation:this.state._orientation,id:this.listId})),n&&h("div",{key:"e7f4432560e5315178f182b7197da9d66f1ee901",class:"kol-nav__compact"},h(KolButtonWcTag,{key:"23b584805e69dc1cb20204a77adae0aefb313b21",class:"kol-nav__toggle-button",_ariaControls:this.navId,_ariaExpanded:!this.state._hideLabel,_icons:this.state._hideLabel?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:translate(this.state._hideLabel?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!this.state._hideLabel})}},_tooltipAlign:"right"})))}validateCollapsible(n){validateCollapsible(this,n)}validateHasCompactButton(n){validateHasCompactButton(this,n)}validateHasIconsWhenExpanded(n){validateHasIconsWhenExpanded(this,n)}validateHideLabel(n){validateHideLabel(this,n)}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),a11yHintLabelingLandmarks(n),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolNav",this,n),devHint("[KolNav] The navigation structure is not yet validated recursively."),this.initializeExpandedChildren()}validateOrientation(n){"vertical"!==n&&devWarning("[KolNav] Die Eigenschaft _orientation ist veraltet, wird im nächsten Major Release entfernt und sollte nicht mehr auf horizontale Navigation gesetzt werden. Die Navigation ist standardmäßig vertikal."),watchValidator(this,"_orientation",n=>"horizontal"===n||"vertical"===n,new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-nav",{_collapsible:[4],_hasCompactButton:[4,"_has-compact-button"],_hasIconsWhenExpanded:[4,"_has-icons-when-expanded"],_hideLabel:[4,"_hide-label"],_label:[1],_links:[1],_orientation:[1],state:[32]},void 0,{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-nav"].forEach(n=>{if("kol-nav"===n)customElements.get(n)||customElements.define(n,KolNav$1)})}const KolNav=KolNav$1,defineCustomElement=defineCustomElement$1;export{KolNav,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as watchBoolean,P as devWarning,e as a11yHintLabelingLandmarks,l as devHint,b as watchValidator}from"./common.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateLabel}from"./label.js";import{c as clsx}from"./clsx.js";import{f as KolLinkWcTag,d as KolButtonWcTag}from"./component-names.js";import{t as translate}from"./i18n.js";import{n as nonce}from"./dev.utils.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";const validateCollapsible=(n,e)=>{watchBoolean(n,"_collapsible",e)},validateHasCompactButton=(n,e)=>{watchBoolean(n,"_hasCompactButton",e)},validateHasIconsWhenExpanded=(n,e)=>{watchBoolean(n,"_hasIconsWhenExpanded",e)},defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-nav {\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav--horizontal {\n    width: 100%;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__navigation .kol-span {\n    width: 100%;\n    justify-content: flex-start;\n  }\n  .kol-nav__navigation .kol-span__container {\n    width: 100%;\n  }\n  .kol-nav__navigation .kol-span__container .kol-span__label {\n    flex: 1;\n  }\n  .kol-nav__list {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list--horizontal {\n    flex-wrap: wrap;\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-button {\n    text-align: left;\n  }\n}",entryIsLink=n=>"string"==typeof n._href,entryIsButton=n=>{var e;return void 0===n._href&&"function"==typeof(null===(e=n._on)||void 0===e?void 0:e.onClick)},KolNav$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.navId="kol-nav-"+nonce(),this.listId=this.navId+"-list",this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>h("ul",{class:clsx("kol-nav__list",{"kol-nav__list--nested":n.deep>0,"kol-nav__list--horizontal":0===n.deep&&"horizontal"===n.orientation,"kol-nav__list--vertical":0!==n.deep||"vertical"===n.orientation}),id:n.deep>0?n.id:void 0},n.links.map((e,t)=>this.li(n.collapsible,n.deep,t,e,n.orientation,n.id))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_expandedChildren:[]}}expandChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,n]})}collapseChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter(e=>e!==n)})}buildIconObject(n,e,t){const i={left:"",right:""};return this.state._hasIconsWhenExpanded&&t&&(i.left=t),this.state._hideLabel&&(i.left=t||"codicon codicon-symbol-method"),n&&(i.right=e?"codicon codicon-remove":"codicon codicon-add"),i}entry(n,e,t,i,a){var o;const l=this.buildIconObject(n&&e,i,null===(o=t._icons)||void 0===o?void 0:o.toString());return h("div",{class:"kol-nav__entry-wrapper"},entryIsLink(t)?h(KolLinkWcTag,Object.assign({class:clsx("kol-nav__entry kol-nav__entry--link",{"kol-nav__entry--collapsible":n})},t,{_hideLabel:this.state._hideLabel,_icons:l,_ariaControls:n&&e&&i?a:void 0,_ariaExpanded:n&&e?i:void 0})):h(KolButtonWcTag,{class:clsx("kol-nav__entry kol-nav__entry--button",{"kol-nav__entry--collapsible":n}),_label:t._label,_hideLabel:this.state._hideLabel,_icons:l,_ariaControls:n&&e&&i?a:void 0,_ariaExpanded:n&&e?i:void 0,_on:{onClick:(n,e)=>{entryIsButton(t)&&"function"==typeof t._on.onClick&&t._on.onClick(n,e),this.handleToggleExpansionClick(t._children)}}}))}li(n,e,t,i,a,o){const l=!!i._active,s=Array.isArray(i._children)&&i._children.length>0,d=Boolean(i._children&&this.state._expandedChildren.includes(i._children)),r=o+"_"+e+"_"+t;return h("li",{class:clsx("kol-nav__list-item",{"kol-nav__list-item--active":l,"kol-nav__list-item--expanded":d,"kol-nav__list-item--has-children":s}),key:t},this.entry(n,s,i,d,r),d&&h(this.linkList,{collapsible:n,deep:e+1,links:i._children||[],orientation:a,id:r}))}initializeExpandedChildren(){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[]});const n=e=>{if(e._active)return e._children&&this.expandChildren(e._children),!0;if(e._children)for(const t of e._children)if(n(t))return this.expandChildren(e._children),!0;return!1};this.state._links.forEach(n)}render(){let n=this.state._hasCompactButton;return"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,devWarning("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.")),h("div",{key:"b8db85b304f436fa5882f487f6b83a74f833c943",class:clsx("kol-nav",`kol-nav--${this.state._orientation}`,{"kol-nav--is-compact":this.state._hideLabel})},h("nav",{key:"e10d8ebdf16027383e98ea463f20b5ee7a30617d","aria-label":this.state._label,class:"kol-nav__navigation",id:this.navId},h(this.linkList,{key:"88b5acc16bcebe287533a7f0ed06a2a3d6994a6d",collapsible:this.state._collapsible,deep:0,links:this.state._links,orientation:this.state._orientation,id:this.listId})),n&&h("div",{key:"e7f4432560e5315178f182b7197da9d66f1ee901",class:"kol-nav__compact"},h(KolButtonWcTag,{key:"23b584805e69dc1cb20204a77adae0aefb313b21",class:"kol-nav__toggle-button",_ariaControls:this.navId,_ariaExpanded:!this.state._hideLabel,_icons:this.state._hideLabel?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:translate(this.state._hideLabel?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!this.state._hideLabel})}},_tooltipAlign:"right"})))}validateCollapsible(n){validateCollapsible(this,n)}validateHasCompactButton(n){validateHasCompactButton(this,n)}validateHasIconsWhenExpanded(n){validateHasIconsWhenExpanded(this,n)}validateHideLabel(n){validateHideLabel(this,n)}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),a11yHintLabelingLandmarks(n),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolNav",this,n),devHint("[KolNav] The navigation structure is not yet validated recursively."),this.initializeExpandedChildren()}validateOrientation(n){"vertical"!==n&&devWarning("[KolNav] Die Eigenschaft _orientation ist veraltet, wird im nächsten Major Release entfernt und sollte nicht mehr auf horizontale Navigation gesetzt werden. Die Navigation ist standardmäßig vertikal."),watchValidator(this,"_orientation",n=>"horizontal"===n||"vertical"===n,new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-nav",{_collapsible:[4],_hasCompactButton:[4,"_has-compact-button"],_hasIconsWhenExpanded:[4,"_has-icons-when-expanded"],_hideLabel:[4,"_hide-label"],_label:[1],_links:[1],_orientation:[1],state:[32]},void 0,{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-nav"].forEach(n=>{if("kol-nav"===n)customElements.get(n)||customElements.define(n,KolNav$1)})}const KolNav=KolNav$1,defineCustomElement=defineCustomElement$1;export{KolNav,defineCustomElement};

package/dist/components/kol-pagination-wc.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{O as watchNumber,S as STATE_CHANGE_EVENT,b as watchValidator,q as watchJsonArrayString,p as parseJson}from"./common.js";import{v as validateCustomClass}from"./custom-class.js";import{v as validateLabel}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";import{d as KolButtonWcTag,j as KolSelectWcTag}from"./component-names.js";import{t as translate}from"./i18n.js";import{n as nonce}from"./dev.utils.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";const validateMax=(t,a,e)=>{watchNumber(t,"_max",a,e)},leftDoubleArrowIcon={left:"codicon codicon-debug-reverse-continue"},leftSingleArrow={left:"codicon codicon-chevron-left"},rightSingleArrowIcon={right:"codicon codicon-chevron-right"},rightDoubleArrowIcon={right:"codicon codicon-debug-continue"};function getUserLanguage(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}const userLanguage=getUserLanguage(),NUMBER_FORMATTER=new Intl.NumberFormat(userLanguage,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),KolPaginationWc$1=proxyCustomElement(class extends HTMLElement{constructor(t){super(),!1!==t&&this.__registerHost(),this.nonce=nonce(),this.translatePageFirst=translate("kol-page-first"),this.translatePageBack=translate("kol-page-back"),this.translatePageNext=translate("kol-page-next"),this.translatePageLast=translate("kol-page-last"),this.translateEntriesPerSite=translate("kol-entries-per-site"),this.translatePage=translate("kol-page"),this.translatePagination=translate("kol-pagination"),this.calcCount=(t,a=1)=>Math.ceil(t/a),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this._boundaryCount=1,this._hasButtons=!0,this._pageSize=1,this._pageSizeOptions=[],this._siblingCount=1,this._tooltipAlign="top",this.state={_boundaryCount:1,_label:this.translatePagination,_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0},this.onClick=(t,a)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,a),this.host&&dispatchDomEvent(this.host,KolEvent.click,a),this.onChangePage(t,a)},this.onChangePage=(t,a)=>{const e=setTimeout(()=>{clearTimeout(e),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,a),this.host&&dispatchDomEvent(this.host,KolEvent.changePage,a)})},this.onChangePageSize=(t,a)=>{if("number"==typeof(a=parseInt(a))&&a>0&&this._pageSize!==a){this._pageSize=a;const e=setTimeout(()=>{clearTimeout(e),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize),this.host&&dispatchDomEvent(this.host,KolEvent.changePageSize,this._pageSize)})}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,a)=>{let e=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize;const s=a.has("_pageSizeOptions")?a.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(s)&&s.length>0){const t=s.find(t=>t.value===e);e=void 0===t?s[0].value:t.value,a.set("_pageSize",e)}const i=a.has("_page")?a.get("_page"):this.state._page,o=a.has("_max")?a.get("_max"):this.state._max;this.syncPage(a,i,a.get("_pageSize"),o)},this.syncPage=(t,a,e,s)=>{if(s>0){const i=this.calcCount(s,e);i>0&&(a>i?(t.set("_page",i),this.onChangePage(STATE_CHANGE_EVENT,i)):a<1&&(t.set("_page",1),this.onChangePage(STATE_CHANGE_EVENT,1)))}},this.beforePageSizeOptions=(t,a)=>{const e=[];if(Array.isArray(t))for(const a of t)"number"==typeof a&&e.push({label:`${a}`,value:a});a.set("_pageSizeOptions",e),this.beforePageSize(e,a)}}render(){var t;let a=!1;const e=this.getCount(),s=Array.from(Array(e).keys()).map(t=>t+1).map(t=>t<=this.state._boundaryCount||t>e-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(a=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===a?(a=!1,h("li",{key:nonce()},h("span",{class:"kol-pagination__separator","aria-hidden":"true"}))):null);return h(Host,{class:"kol-pagination"},h("nav",{class:"kol-pagination__navigation","aria-label":this.state._label},h("ul",{class:"kol-pagination__navigation-list"},this.state._hasButtons.first&&h("li",null,h(KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:leftDoubleArrowIcon,_hideLabel:!0,_label:this.translatePageFirst,_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&h("li",null,h(KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:leftSingleArrow,_hideLabel:!0,_label:this.translatePageBack,_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),s,this.state._hasButtons.next&&h("li",null,h(KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--next",exportparts:"icon",_customClass:this.state._customClass,_disabled:e<=this.state._page,_icons:rightSingleArrowIcon,_hideLabel:!0,_label:this.translatePageNext,_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&h("li",null,h(KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--last",exportparts:"icon",_customClass:this.state._customClass,_disabled:e<=this.state._page,_icons:rightDoubleArrowIcon,_hideLabel:!0,_label:this.translatePageLast,_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&h("div",{class:"page-size"},h(KolSelectWcTag,{class:"kol-pagination__page-size-select",_id:`pagination-size-${this.nonce}`,_label:this.translateEntriesPerSite,_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:this.state._pageSize})))}getUnselectedPageButton(t){const a=NUMBER_FORMATTER.format(t),e=`${this.translatePage} ${a}`;return h("li",{key:nonce()},h(KolButtonWcTag,{class:"kol-pagination__button",_ariaDescription:e,_customClass:this.state._customClass,_label:a,_on:{onClick:a=>{this.onClick(a,t)}}}))}getSelectedPageButton(t){const a=NUMBER_FORMATTER.format(t),e=`${this.translatePage} ${a}`;return h("li",{key:nonce()},h(KolButtonWcTag,{"aria-current":"page",class:"kol-pagination__button kol-pagination__button--selected selected",_ariaDescription:e,_customClass:this.state._customClass,_disabled:!0,_label:a}))}validateBoundaryCount(t){watchNumber(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){validateCustomClass(this,t)}validateLabel(t,a,e=!1){e||removeNavLabel(this.state._label),validateLabel(this,t),addNavLabel(this.state._label)}validateHasButtons(t){watchValidator(this,"_hasButtons",t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t,new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,a)=>{if("boolean"==typeof t)a.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=parseJson(t)}catch(t){a.delete("_hasButtons")}"object"==typeof t&&null!==t&&a.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){watchNumber(this,"_page",t,{hooks:{beforePatch:(t,a)=>{const e=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize,s=a.has("_max")?a.get("_max"):this.state._max;this.syncPage(a,t,e,s)}}})}validatePageSize(t){watchNumber(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){watchJsonArrayString(this,"_pageSizeOptions",t=>"number"==typeof t,t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){watchNumber(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){validateMax(this,t,{hooks:{beforePatch:(t,a)=>{const e=a.has("_page")?a.get("_page"):this.state._page,s=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize;this.syncPage(a,e,s,t)}}})}validateTooltipAlign(t){validateTooltipAlign(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){removeNavLabel(this.state._label)}get host(){return this}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}},[256,"kol-pagination-wc",{_boundaryCount:[2,"_boundary-count"],_customClass:[1,"_custom-class"],_label:[1],_hasButtons:[8,"_has-buttons"],_page:[2],_pageSize:[1026,"_page-size"],_pageSizeOptions:[1,"_page-size-options"],_on:[16],_siblingCount:[2,"_sibling-count"],_tooltipAlign:[1,"_tooltip-align"],_max:[2],state:[32]},void 0,{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-pagination-wc"].forEach(t=>{if("kol-pagination-wc"===t)customElements.get(t)||customElements.define(t,KolPaginationWc$1)})}const KolPaginationWc=KolPaginationWc$1,defineCustomElement=defineCustomElement$1;export{KolPaginationWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{N as watchNumber,S as STATE_CHANGE_EVENT,b as watchValidator,n as watchJsonArrayString,p as parseJson}from"./common.js";import{v as validateCustomClass}from"./custom-class.js";import{v as validateLabel}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";import{d as KolButtonWcTag,j as KolSelectWcTag}from"./component-names.js";import{t as translate}from"./i18n.js";import{n as nonce}from"./dev.utils.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";const validateMax=(t,a,e)=>{watchNumber(t,"_max",a,e)},leftDoubleArrowIcon={left:"codicon codicon-debug-reverse-continue"},leftSingleArrow={left:"codicon codicon-chevron-left"},rightSingleArrowIcon={right:"codicon codicon-chevron-right"},rightDoubleArrowIcon={right:"codicon codicon-debug-continue"};function getUserLanguage(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}const userLanguage=getUserLanguage(),NUMBER_FORMATTER=new Intl.NumberFormat(userLanguage,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),KolPaginationWc$1=proxyCustomElement(class extends HTMLElement{constructor(t){super(),!1!==t&&this.__registerHost(),this.nonce=nonce(),this.translatePageFirst=translate("kol-page-first"),this.translatePageBack=translate("kol-page-back"),this.translatePageNext=translate("kol-page-next"),this.translatePageLast=translate("kol-page-last"),this.translateEntriesPerSite=translate("kol-entries-per-site"),this.translatePage=translate("kol-page"),this.translatePagination=translate("kol-pagination"),this.calcCount=(t,a=1)=>Math.ceil(t/a),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this._boundaryCount=1,this._hasButtons=!0,this._pageSize=1,this._pageSizeOptions=[],this._siblingCount=1,this._tooltipAlign="top",this.state={_boundaryCount:1,_label:this.translatePagination,_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0},this.onClick=(t,a)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,a),this.host&&dispatchDomEvent(this.host,KolEvent.click,a),this.onChangePage(t,a)},this.onChangePage=(t,a)=>{const e=setTimeout(()=>{clearTimeout(e),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,a),this.host&&dispatchDomEvent(this.host,KolEvent.changePage,a)})},this.onChangePageSize=(t,a)=>{if("number"==typeof(a=parseInt(a))&&a>0&&this._pageSize!==a){this._pageSize=a;const e=setTimeout(()=>{clearTimeout(e),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize),this.host&&dispatchDomEvent(this.host,KolEvent.changePageSize,this._pageSize)})}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,a)=>{let e=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize;const s=a.has("_pageSizeOptions")?a.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(s)&&s.length>0){const t=s.find(t=>t.value===e);e=void 0===t?s[0].value:t.value,a.set("_pageSize",e)}const i=a.has("_page")?a.get("_page"):this.state._page,o=a.has("_max")?a.get("_max"):this.state._max;this.syncPage(a,i,a.get("_pageSize"),o)},this.syncPage=(t,a,e,s)=>{if(s>0){const i=this.calcCount(s,e);i>0&&(a>i?(t.set("_page",i),this.onChangePage(STATE_CHANGE_EVENT,i)):a<1&&(t.set("_page",1),this.onChangePage(STATE_CHANGE_EVENT,1)))}},this.beforePageSizeOptions=(t,a)=>{const e=[];if(Array.isArray(t))for(const a of t)"number"==typeof a&&e.push({label:`${a}`,value:a});a.set("_pageSizeOptions",e),this.beforePageSize(e,a)}}render(){var t;let a=!1;const e=this.getCount(),s=Array.from(Array(e).keys()).map(t=>t+1).map(t=>t<=this.state._boundaryCount||t>e-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(a=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===a?(a=!1,h("li",{key:nonce()},h("span",{class:"kol-pagination__separator","aria-hidden":"true"}))):null);return h(Host,{class:"kol-pagination"},h("nav",{class:"kol-pagination__navigation","aria-label":this.state._label},h("ul",{class:"kol-pagination__navigation-list"},this.state._hasButtons.first&&h("li",null,h(KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:leftDoubleArrowIcon,_hideLabel:!0,_label:this.translatePageFirst,_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&h("li",null,h(KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:leftSingleArrow,_hideLabel:!0,_label:this.translatePageBack,_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),s,this.state._hasButtons.next&&h("li",null,h(KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--next",exportparts:"icon",_customClass:this.state._customClass,_disabled:e<=this.state._page,_icons:rightSingleArrowIcon,_hideLabel:!0,_label:this.translatePageNext,_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&h("li",null,h(KolButtonWcTag,{class:"kol-pagination__button kol-pagination__button--last",exportparts:"icon",_customClass:this.state._customClass,_disabled:e<=this.state._page,_icons:rightDoubleArrowIcon,_hideLabel:!0,_label:this.translatePageLast,_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&h("div",{class:"page-size"},h(KolSelectWcTag,{class:"kol-pagination__page-size-select",_id:`pagination-size-${this.nonce}`,_label:this.translateEntriesPerSite,_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:this.state._pageSize})))}getUnselectedPageButton(t){const a=NUMBER_FORMATTER.format(t),e=`${this.translatePage} ${a}`;return h("li",{key:nonce()},h(KolButtonWcTag,{class:"kol-pagination__button",_ariaDescription:e,_customClass:this.state._customClass,_label:a,_on:{onClick:a=>{this.onClick(a,t)}}}))}getSelectedPageButton(t){const a=NUMBER_FORMATTER.format(t),e=`${this.translatePage} ${a}`;return h("li",{key:nonce()},h(KolButtonWcTag,{"aria-current":"page",class:"kol-pagination__button kol-pagination__button--selected selected",_ariaDescription:e,_customClass:this.state._customClass,_disabled:!0,_label:a}))}validateBoundaryCount(t){watchNumber(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){validateCustomClass(this,t)}validateLabel(t,a,e=!1){e||removeNavLabel(this.state._label),validateLabel(this,t),addNavLabel(this.state._label)}validateHasButtons(t){watchValidator(this,"_hasButtons",t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t,new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,a)=>{if("boolean"==typeof t)a.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=parseJson(t)}catch(t){a.delete("_hasButtons")}"object"==typeof t&&null!==t&&a.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){watchNumber(this,"_page",t,{hooks:{beforePatch:(t,a)=>{const e=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize,s=a.has("_max")?a.get("_max"):this.state._max;this.syncPage(a,t,e,s)}}})}validatePageSize(t){watchNumber(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){watchJsonArrayString(this,"_pageSizeOptions",t=>"number"==typeof t,t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){watchNumber(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){validateMax(this,t,{hooks:{beforePatch:(t,a)=>{const e=a.has("_page")?a.get("_page"):this.state._page,s=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize;this.syncPage(a,e,s,t)}}})}validateTooltipAlign(t){validateTooltipAlign(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){removeNavLabel(this.state._label)}get host(){return this}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}},[256,"kol-pagination-wc",{_boundaryCount:[2,"_boundary-count"],_customClass:[1,"_custom-class"],_label:[1],_hasButtons:[8,"_has-buttons"],_page:[2],_pageSize:[1026,"_page-size"],_pageSizeOptions:[1,"_page-size-options"],_on:[16],_siblingCount:[2,"_sibling-count"],_tooltipAlign:[1,"_tooltip-align"],_max:[2],state:[32]},void 0,{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-pagination-wc"].forEach(t=>{if("kol-pagination-wc"===t)customElements.get(t)||customElements.define(t,KolPaginationWc$1)})}const KolPaginationWc=KolPaginationWc$1,defineCustomElement=defineCustomElement$1;export{KolPaginationWc,defineCustomElement};

package/dist/components/kol-progress.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{j as watchString,b as watchValidator,O as watchNumber}from"./common.js";import{v as validateLabel}from"./label.js";const validateUnit=(e,t)=>{watchString(e,"_unit",t)},progressVariantOptions=["bar","cycle"],isProgressVariantPropType=e=>"string"==typeof e&&progressVariantOptions.includes(e),validateVariantProgress=(e,t)=>{watchValidator(e,"_variant",isProgressVariantPropType,new Set(progressVariantOptions),t)},defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-progress__bar {\n    display: grid;\n    column-gap: 0.05rem;\n    align-items: center;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    grid-template-columns: 1fr auto;\n  }\n  .kol-progress__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-progress__bar svg {\n    grid-area: BAR;\n  }\n  .kol-progress__bar-value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-progress__bar-unit {\n    grid-area: UNIT;\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: #0075ff;\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle {\n    display: grid;\n    align-content: center;\n    justify-items: center;\n    grid-template-areas: \"ALL\";\n    grid-template-columns: auto;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: x-small;\n    text-align: center;\n  }\n  .kol-progress__cycle-text * {\n    background-color: white;\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    transform: rotate(-90deg);\n    transform-origin: 50% 50%;\n    fill: transparent;\n    stroke: #0075ff;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",CycleSvg=({state:e})=>h("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},h("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),BarSvg=({state:e})=>{const t=e._value/e._max*100;return h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},h("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100%"}),h("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100%"}),h("rect",{class:"kol-progress__bar-progress",x:"3",y:"3",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${t}% - 4px)`}}))},createProgressSVG=e=>{switch(e._variant){case"cycle":return h(CycleSvg,{state:e});case"bar":return h(BarSvg,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}},KolProgress$1=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this._unit="%",this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){const e="%"===this.state._unit,t=e?`${Math.round(this.state._liveValue/this.state._max*100)}`:this.state._liveValue,n=e?Math.round(this.state._value/this.state._max*100):this.state._value;return h("div",{key:"b1972a1f3e31e795bc69c2d3f3ec40a675207ed6",class:"kol-progress"},h("div",{key:"16f007501abd696c037252c6859107e287f3b323","aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===this.state._variant,"kol-progress__bar":"bar"===this.state._variant}},"bar"===this.state._variant&&this.state._label&&h("div",{key:"fc6e4caa57a138aec5c1a163380d837c55578ce3",class:"kol-progress__bar-label"},this.state._label),createProgressSVG(this.state),"cycle"===this.state._variant&&h("div",{key:"d4c7dfa11c5a7141954014bce607c021276d16ac",class:"kol-progress__cycle-text"},this.state._label&&h("div",{key:"7f7980a4820a42e9c95b741319633cd7c97a6b4c",class:"kol-progress__cycle-label"},this.state._label),h("div",{key:"dfae6fd05088f3da93aa44ec2516e0ac6fff29b6",class:"kol-progress__cycle-value"},`${n} ${this.state._unit}`)),"bar"===this.state._variant&&h("div",{key:"2010ca985fef768303f361d1cb5a9da25141bec3",class:"kol-progress__bar-value",style:{width:`${`${(e?100:this.state._max)+1}`.length}ch`}},n),"bar"===this.state._variant&&h("div",{key:"3bc913bfd72367132e30868b86aec18a0e68aa0e",class:"kol-progress__bar-unit"},this.state._unit)),h("progress",{key:"84ad52188c5b1f837fa97dac41c0c1a1eb290128",class:"visually-hidden","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),h("span",{key:"439f75d5cc12f095579359231a9668bc55b44f29","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},e?`${t} %`:`${t} von ${this.state._max} ${this.state._unit}`))}validateLabel(e){validateLabel(this,e)}validateMax(e){"number"!=typeof e&&(e=100),watchNumber(this,"_max",e,{required:!0})}validateUnit(e){validateUnit(this,e)}validateValue(e){"number"!=typeof e&&(e=0),watchNumber(this,"_value",e,{required:!0})}validateVariant(e){validateVariantProgress(this,e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}),this.interval=setInterval(()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))},5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-progress",{_label:[1],_max:[2],_unit:[1],_value:[2],_variant:[1],state:[32]},void 0,{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-progress"].forEach(e=>{if("kol-progress"===e)customElements.get(e)||customElements.define(e,KolProgress$1)})}const KolProgress=KolProgress$1,defineCustomElement=defineCustomElement$1;export{KolProgress,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{i as watchString,b as watchValidator,N as watchNumber}from"./common.js";import{v as validateLabel}from"./label.js";const validateUnit=(e,t)=>{watchString(e,"_unit",t)},progressVariantOptions=["bar","cycle"],isProgressVariantPropType=e=>"string"==typeof e&&progressVariantOptions.includes(e),validateVariantProgress=(e,t)=>{watchValidator(e,"_variant",isProgressVariantPropType,new Set(progressVariantOptions),t)},defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-progress__bar {\n    display: grid;\n    column-gap: 0.05rem;\n    align-items: center;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    grid-template-columns: 1fr auto;\n  }\n  .kol-progress__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-progress__bar svg {\n    grid-area: BAR;\n  }\n  .kol-progress__bar-value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-progress__bar-unit {\n    grid-area: UNIT;\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: #0075ff;\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle {\n    display: grid;\n    align-content: center;\n    justify-items: center;\n    grid-template-areas: \"ALL\";\n    grid-template-columns: auto;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: x-small;\n    text-align: center;\n  }\n  .kol-progress__cycle-text * {\n    background-color: white;\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    transform: rotate(-90deg);\n    transform-origin: 50% 50%;\n    fill: transparent;\n    stroke: #0075ff;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",CycleSvg=({state:e})=>h("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},h("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),h("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),BarSvg=({state:e})=>{const t=e._value/e._max*100;return h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},h("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100%"}),h("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100%"}),h("rect",{class:"kol-progress__bar-progress",x:"3",y:"3",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${t}% - 4px)`}}))},createProgressSVG=e=>{switch(e._variant){case"cycle":return h(CycleSvg,{state:e});case"bar":return h(BarSvg,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}},KolProgress$1=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this._unit="%",this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){const e="%"===this.state._unit,t=e?`${Math.round(this.state._liveValue/this.state._max*100)}`:this.state._liveValue,n=e?Math.round(this.state._value/this.state._max*100):this.state._value;return h("div",{key:"b1972a1f3e31e795bc69c2d3f3ec40a675207ed6",class:"kol-progress"},h("div",{key:"16f007501abd696c037252c6859107e287f3b323","aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===this.state._variant,"kol-progress__bar":"bar"===this.state._variant}},"bar"===this.state._variant&&this.state._label&&h("div",{key:"fc6e4caa57a138aec5c1a163380d837c55578ce3",class:"kol-progress__bar-label"},this.state._label),createProgressSVG(this.state),"cycle"===this.state._variant&&h("div",{key:"d4c7dfa11c5a7141954014bce607c021276d16ac",class:"kol-progress__cycle-text"},this.state._label&&h("div",{key:"7f7980a4820a42e9c95b741319633cd7c97a6b4c",class:"kol-progress__cycle-label"},this.state._label),h("div",{key:"dfae6fd05088f3da93aa44ec2516e0ac6fff29b6",class:"kol-progress__cycle-value"},`${n} ${this.state._unit}`)),"bar"===this.state._variant&&h("div",{key:"2010ca985fef768303f361d1cb5a9da25141bec3",class:"kol-progress__bar-value",style:{width:`${`${(e?100:this.state._max)+1}`.length}ch`}},n),"bar"===this.state._variant&&h("div",{key:"3bc913bfd72367132e30868b86aec18a0e68aa0e",class:"kol-progress__bar-unit"},this.state._unit)),h("progress",{key:"84ad52188c5b1f837fa97dac41c0c1a1eb290128",class:"visually-hidden","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),h("span",{key:"439f75d5cc12f095579359231a9668bc55b44f29","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},e?`${t} %`:`${t} von ${this.state._max} ${this.state._unit}`))}validateLabel(e){validateLabel(this,e)}validateMax(e){"number"!=typeof e&&(e=100),watchNumber(this,"_max",e,{required:!0})}validateUnit(e){validateUnit(this,e)}validateValue(e){"number"!=typeof e&&(e=0),watchNumber(this,"_value",e,{required:!0})}validateVariant(e){validateVariantProgress(this,e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}),this.interval=setInterval(()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))},5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-progress",{_label:[1],_max:[2],_unit:[1],_value:[2],_variant:[1],state:[32]},void 0,{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-progress"].forEach(e=>{if("kol-progress"===e)customElements.get(e)||customElements.define(e,KolProgress$1)})}const KolProgress=KolProgress$1,defineCustomElement=defineCustomElement$1;export{KolProgress,defineCustomElement};

package/dist/components/kol-quote.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{j as watchString,b as watchValidator}from"./common.js";import{s as showExpertSlot}from"./reuse.js";import{v as validateLabel}from"./label.js";import{c as clsx}from"./clsx.js";import{l as KolLinkTag}from"./component-names.js";const validateQuote=(e,n)=>{watchString(e,"_quote",n,{required:!0})},quoteVariantOptions=["block","inline"],isQuoteVariantPropType=e=>"string"==typeof e&&quoteVariantOptions.includes(e),validateVariantQuote=(e,n)=>{watchValidator(e,"_variant",isQuoteVariantPropType,new Set(quoteVariantOptions),n)},defaultStyleCss="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-quote {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote--block .kol-quote__cite::before {\n    padding-right: 0.5em;\n  }\n  .kol-quote--inline .kol-quote__cite::before {\n    padding: 0.5em;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}",KolQuote$1=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){validateLabel(this,e)}validateHref(e){watchString(this,"_href",e,{required:!0})}validateQuote(e){validateQuote(this,e)}validateVariant(e){validateVariantQuote(this,e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=showExpertSlot(this.state._quote);return h("figure",{key:"89eb937438883d4e402ad9d4285e03716e94eae3",class:clsx("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?h("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,h("span",{"aria-hidden":e?void 0:"true",hidden:!e},h("slot",{name:"expert"}))):h("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,h("span",{"aria-hidden":e?void 0:"true",hidden:!e},h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&h("figcaption",{key:"5aacc4b9762041d369fa2431a7627f3ab2570be2",class:"kol-quote__figcaption"},h("cite",{key:"db499caec22dad59a4bae43358e67db193f03901",class:"kol-quote__cite"},h(KolLinkTag,{key:"d399ff2f85058372a152b9020835d491fa0c4e59",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-quote",{_label:[1],_href:[1],_quote:[1],_variant:[1],state:[32]},void 0,{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-quote"].forEach(e=>{if("kol-quote"===e)customElements.get(e)||customElements.define(e,KolQuote$1)})}const KolQuote=KolQuote$1,defineCustomElement=defineCustomElement$1;export{KolQuote,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{i as watchString,b as watchValidator}from"./common.js";import{s as showExpertSlot}from"./reuse.js";import{v as validateLabel}from"./label.js";import{c as clsx}from"./clsx.js";import{l as KolLinkTag}from"./component-names.js";const validateQuote=(e,n)=>{watchString(e,"_quote",n,{required:!0})},quoteVariantOptions=["block","inline"],isQuoteVariantPropType=e=>"string"==typeof e&&quoteVariantOptions.includes(e),validateVariantQuote=(e,n)=>{watchValidator(e,"_variant",isQuoteVariantPropType,new Set(quoteVariantOptions),n)},defaultStyleCss="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-quote {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote--block .kol-quote__cite::before {\n    padding-right: 0.5em;\n  }\n  .kol-quote--inline .kol-quote__cite::before {\n    padding: 0.5em;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}",KolQuote$1=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){validateLabel(this,e)}validateHref(e){watchString(this,"_href",e,{required:!0})}validateQuote(e){validateQuote(this,e)}validateVariant(e){validateVariantQuote(this,e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=showExpertSlot(this.state._quote);return h("figure",{key:"89eb937438883d4e402ad9d4285e03716e94eae3",class:clsx("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?h("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,h("span",{"aria-hidden":e?void 0:"true",hidden:!e},h("slot",{name:"expert"}))):h("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,h("span",{"aria-hidden":e?void 0:"true",hidden:!e},h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&h("figcaption",{key:"5aacc4b9762041d369fa2431a7627f3ab2570be2",class:"kol-quote__figcaption"},h("cite",{key:"db499caec22dad59a4bae43358e67db193f03901",class:"kol-quote__cite"},h(KolLinkTag,{key:"d399ff2f85058372a152b9020835d491fa0c4e59",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-quote",{_label:[1],_href:[1],_quote:[1],_variant:[1],state:[32]},void 0,{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-quote"].forEach(e=>{if("kol-quote"===e)customElements.get(e)||customElements.define(e,KolQuote$1)})}const KolQuote=KolQuote$1,defineCustomElement=defineCustomElement$1;export{KolQuote,defineCustomElement};

package/dist/components/kol-select-wc.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,Fragment,proxyCustomElement,HTMLElement}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{c as checkHasMsg,d as getDefaultProps,g as getRenderStates,F as FormFieldStateWrapper}from"./controller2.js";import{I as InputIconController,a as InputContainerStateWrapperFc}from"./controller-icon.js";import{_ as __rest}from"./tslib.es6.js";import{q as watchJsonArrayString}from"./common.js";import{n as nonce}from"./dev.utils.js";import{p as propagateSubmitEventToForm}from"./controller.js";import{v as validateMultiple}from"./multiple.js";import{f as fillKeyOptionMap,v as validateOptionsWithOptgroup}from"./controller3.js";import{v as validateRequired}from"./required.js";import{v as validateRows}from"./rows.js";const NativeOptionFc=e=>{var{baseClassName:t="kol-select",class:a,index:i,selectedValue:l,selected:s,value:o,label:r,disabled:n}=e,c=__rest(e,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);void 0===l?l=[]:Array.isArray(l)||(l=[l]);const d=s||l.includes(o);return h("option",Object.assign({class:clsx(`${t}__option`,{[`${t}__option--selected`]:d,[`${t}__option--disabled`]:n},a),selected:d,disabled:n,value:i},c),r)},NativeOptionListFc=({baseClassName:e,preKey:t,options:a,disabled:i,value:l,OptionProps:s={},OptionGroupProps:o={}})=>(null==a?void 0:a.length)?h(Fragment,null,a.map((r,n)=>{const c=[t,`-${n}`].join("");if("options"in r){if(!a.length)return null;const{label:t}=r,n=__rest(r,["label"]);return h("optgroup",Object.assign({class:clsx(`${e}__optgroup`,{[`${e}__optgroup--disabled`]:i}),key:c},o,{label:null==t?void 0:t.toString(),disabled:i}),h(NativeOptionListFc,Object.assign({baseClassName:e,OptionGroupProps:o,OptionProps:s,value:l,preKey:c},n)))}return"value"in r?h(NativeOptionFc,Object.assign({key:c,baseClassName:e},s,{index:c,selectedValue:l},r)):null})):null,NativeSelectFc=e=>{const{class:t,msg:a,touched:i,disabled:l,required:s,options:o,value:r,OptionProps:n,OptionGroupProps:c,ariaDescribedBy:d,hideLabel:u,label:p}=e,v=__rest(e,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),_=checkHasMsg(a,i),m="string"==typeof a?"error":null==a?void 0:a._type,b={"kol-select--disabled":Boolean(l),"kol-select--required":Boolean(s),"kol-select--touched":Boolean(i),[`kol-select--${m||"error"}`]:_},y=Object.assign(Object.assign({class:clsx("kol-select",b,t),required:s,disabled:l},getDefaultProps({ariaDescribedBy:d,hideLabel:u,label:p})),v);return h("select",Object.assign({},y),h(NativeOptionListFc,{baseClassName:"kol-select",options:o,value:r,OptionGroupProps:c,OptionProps:n}))};function getSelectProps(e){const{ariaDescribedBy:t}=getRenderStates(e),a={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&&(a["aria-keyshortcuts"]=e._shortKey),a}const SelectStateWrapper=e=>{var{state:t}=e,a=__rest(e,["state"]);return h(NativeSelectFc,Object.assign({},getSelectProps(t),a))};class SelectController extends InputIconController{constructor(e,t,a){super(e,t,a),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,a,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const a=t.get("_value");void 0===a||Array.isArray(a)||t.set("_value",[a]);const i=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),fillKeyOptionMap(this.keyOptionMap,i);const e=t.has("_value")?t.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],i);!1===this.component._multiple&&0===a.length?t.set("_value",[i[0].value]):Array.isArray(e)&&a.length<e.length&&t.set("_value",a)}},this.component=e}validateOptions(e){validateOptionsWithOptgroup(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){this.assertComponentValueMatchesMultiplicity(!0===e),validateMultiple(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){validateRequired(this.component,e)}validateRows(e){validateRows(this.component,e)}validateValue(e){this.assertValueMatchesMultiplicity(e),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$1=proxyCustomElement(class extends HTMLElement{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 new Promise(e=>{requestAnimationFrame(()=>{var t;null===(t=this.selectRef)||void 0===t||t.focus(),e()})})}async kolFocus(){return this.focus()}getFormFieldProps(){return{state:this.state,class: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.catchRef,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 h(FormFieldStateWrapper,Object.assign({key:"6035493b06940cc2dd07937fb3a3723184397c0d"},this.getFormFieldProps()),h(InputContainerStateWrapperFc,{key:"c3e3301e5e3c2ee55b2fb6d8c18dea1028a48f52",state:this.state},h("form",{key:"9db82379bd81278b03baaba699316631b8374ff4",onSubmit:e=>{e.preventDefault(),propagateSubmitEventToForm({form:this.host})}},h("input",{key:"fb33e29c11e295241f99bacebcbe94c1275f5c5f",type:"submit",hidden:!0}),h(SelectStateWrapper,Object.assign({key:"1dc3a556b861525d96b38eaefc1643d6cc7c80a1"},this.getSelectProps())))))}constructor(e){super(),!1!==e&&this.__registerHost(),this.catchRef=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-${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)}validateId(e){this.controller.validateId(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 a=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=a,this.controller.onFacade.onInput(e,!0,a);else{const t=a.length>0?a[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 this}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_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"]}}},[256,"kol-select-wc",{_accessKey:[1,"_access-key"],_disabled:[4],_hideMsg:[4,"_hide-msg"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_msg:[1],_multiple:[4],_name:[1],_on:[16],_options:[1],_required:[4],_shortKey:[1,"_short-key"],_rows:[2],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1544],state:[32],inputHasFocus:[32],getValue:[64],focus:[64],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_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"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-select-wc"].forEach(e=>{if("kol-select-wc"===e)customElements.get(e)||customElements.define(e,KolSelectWc$1)})}const KolSelectWc=KolSelectWc$1,defineCustomElement=defineCustomElement$1;export{KolSelectWc,defineCustomElement};
+import{h,Fragment,proxyCustomElement,HTMLElement}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{c as checkHasMsg,d as getDefaultProps,g as getRenderStates,F as FormFieldStateWrapper}from"./controller2.js";import{I as InputIconController,a as InputContainerStateWrapperFc}from"./controller-icon.js";import{_ as __rest}from"./tslib.es6.js";import{n as watchJsonArrayString}from"./common.js";import{n as nonce}from"./dev.utils.js";import{p as propagateSubmitEventToForm}from"./controller.js";import{v as validateMultiple}from"./multiple.js";import{f as fillKeyOptionMap,v as validateOptionsWithOptgroup}from"./controller3.js";import{v as validateRequired}from"./required.js";import{v as validateRows}from"./rows.js";const NativeOptionFc=e=>{var{baseClassName:t="kol-select",class:a,index:i,selectedValue:l,selected:s,value:o,label:r,disabled:n}=e,c=__rest(e,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);void 0===l?l=[]:Array.isArray(l)||(l=[l]);const d=s||l.includes(o);return h("option",Object.assign({class:clsx(`${t}__option`,{[`${t}__option--selected`]:d,[`${t}__option--disabled`]:n},a),selected:d,disabled:n,value:i},c),r)},NativeOptionListFc=({baseClassName:e,preKey:t,options:a,disabled:i,value:l,OptionProps:s={},OptionGroupProps:o={}})=>(null==a?void 0:a.length)?h(Fragment,null,a.map((r,n)=>{const c=[t,`-${n}`].join("");if("options"in r){if(!a.length)return null;const{label:t}=r,n=__rest(r,["label"]);return h("optgroup",Object.assign({class:clsx(`${e}__optgroup`,{[`${e}__optgroup--disabled`]:i}),key:c},o,{label:null==t?void 0:t.toString(),disabled:i}),h(NativeOptionListFc,Object.assign({baseClassName:e,OptionGroupProps:o,OptionProps:s,value:l,preKey:c},n)))}return"value"in r?h(NativeOptionFc,Object.assign({key:c,baseClassName:e},s,{index:c,selectedValue:l},r)):null})):null,NativeSelectFc=e=>{const{class:t,msg:a,touched:i,disabled:l,required:s,options:o,value:r,OptionProps:n,OptionGroupProps:c,ariaDescribedBy:d,hideLabel:u,label:p}=e,v=__rest(e,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),_=checkHasMsg(a,i),m="string"==typeof a?"error":null==a?void 0:a._type,b={"kol-select--disabled":Boolean(l),"kol-select--required":Boolean(s),"kol-select--touched":Boolean(i),[`kol-select--${m||"error"}`]:_},y=Object.assign(Object.assign({class:clsx("kol-select",b,t),required:s,disabled:l},getDefaultProps({ariaDescribedBy:d,hideLabel:u,label:p})),v);return h("select",Object.assign({},y),h(NativeOptionListFc,{baseClassName:"kol-select",options:o,value:r,OptionGroupProps:c,OptionProps:n}))};function getSelectProps(e){const{ariaDescribedBy:t}=getRenderStates(e),a={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&&(a["aria-keyshortcuts"]=e._shortKey),a}const SelectStateWrapper=e=>{var{state:t}=e,a=__rest(e,["state"]);return h(NativeSelectFc,Object.assign({},getSelectProps(t),a))};class SelectController extends InputIconController{constructor(e,t,a){super(e,t,a),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,a,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const a=t.get("_value");void 0===a||Array.isArray(a)||t.set("_value",[a]);const i=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),fillKeyOptionMap(this.keyOptionMap,i);const e=t.has("_value")?t.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],i);!1===this.component._multiple&&0===a.length?t.set("_value",[i[0].value]):Array.isArray(e)&&a.length<e.length&&t.set("_value",a)}},this.component=e}validateOptions(e){validateOptionsWithOptgroup(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){this.assertComponentValueMatchesMultiplicity(!0===e),validateMultiple(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){validateRequired(this.component,e)}validateRows(e){validateRows(this.component,e)}validateValue(e){this.assertValueMatchesMultiplicity(e),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$1=proxyCustomElement(class extends HTMLElement{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 new Promise(e=>{requestAnimationFrame(()=>{var t;null===(t=this.selectRef)||void 0===t||t.focus(),e()})})}async kolFocus(){return this.focus()}getFormFieldProps(){return{state:this.state,class: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.catchRef,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 h(FormFieldStateWrapper,Object.assign({key:"6035493b06940cc2dd07937fb3a3723184397c0d"},this.getFormFieldProps()),h(InputContainerStateWrapperFc,{key:"c3e3301e5e3c2ee55b2fb6d8c18dea1028a48f52",state:this.state},h("form",{key:"9db82379bd81278b03baaba699316631b8374ff4",onSubmit:e=>{e.preventDefault(),propagateSubmitEventToForm({form:this.host})}},h("input",{key:"fb33e29c11e295241f99bacebcbe94c1275f5c5f",type:"submit",hidden:!0}),h(SelectStateWrapper,Object.assign({key:"1dc3a556b861525d96b38eaefc1643d6cc7c80a1"},this.getSelectProps())))))}constructor(e){super(),!1!==e&&this.__registerHost(),this.catchRef=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-${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)}validateId(e){this.controller.validateId(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 a=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=a,this.controller.onFacade.onInput(e,!0,a);else{const t=a.length>0?a[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 this}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_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"]}}},[256,"kol-select-wc",{_accessKey:[1,"_access-key"],_disabled:[4],_hideMsg:[4,"_hide-msg"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_msg:[1],_multiple:[4],_name:[1],_on:[16],_options:[1],_required:[4],_shortKey:[1,"_short-key"],_rows:[2],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1544],state:[32],inputHasFocus:[32],getValue:[64],focus:[64],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_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"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-select-wc"].forEach(e=>{if("kol-select-wc"===e)customElements.get(e)||customElements.define(e,KolSelectWc$1)})}const KolSelectWc=KolSelectWc$1,defineCustomElement=defineCustomElement$1;export{KolSelectWc,defineCustomElement};