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

package/dist/esm/kol-link-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-Bc-dkuUs.js";import{B as BaseWebComponent}from"./variant-quote-DI6q8gPw.js";import{I as IconFC}from"./component-OtHwqg1I.js";import{T as TooltipFC}from"./component-sZ20spQ6.js";import{T as TooltipController}from"./controller-Cf3CGZT-.js";import{b as watchValidator,g as watchString,M as setEventTarget,k as devHint}from"./common-BqV6Zb30.js";import{S as SpanFC,s as showExpertSlot}from"./component-Bn_ahKfK.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key-D2TiPdWw.js";import{v as validateAriaControls,a as validateAriaDescription,b as validateAriaExpanded,c as validateAlternativeButtonLinkRole,d as validateVariantClassName}from"./variant-class-name-BVKxs0G0.js";import{v as validateCustomClass}from"./custom-class-C5Yo1ysl.js";import{v as validateDisabled}from"./disabled-BBn2JEzf.js";import{v as validateHideLabel}from"./hide-label-DQL9J6E_.js";import{v as validateHref}from"./href-COBxk7m0.js";import{v as validateIcons}from"./icons-CqQ9plmY.js";import{v as validateInline}from"./inline-D3xGVsIW.js";import{a as validateLabelWithExpertSlot}from"./label-vxVEH2gH.js";import{v as validateTooltipAlign}from"./tooltip-align-DnbCY1Uu.js";import{s as setClick}from"./element-click-BTxuJDNT.js";import{s as setFocus}from"./element-focus-BKUtVrWY.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-DHTi_wtD.js";import{o as onLocationChange}from"./ariaCurrentService-YoLNpD5S.js";import{t as translate}from"./i18n-BVaUp6qp.js";import{c as clsx}from"./clsx-COFh-Vc8.js";import"./normalizers-C14RETgU.js";import"./_Uint8Array-kJHDjtoP.js";import"./isArray-CcrBs4JM.js";import"./tslib.es6-CxX45GIN.js";import"./bem-registry-Bux_TllX.js";import"./align-floating-elements-58sFZOrL.js";import"./tooltip-open-tracking-D3tCiiGP.js";import"./align-D3Z54kEL.js";import"./label-DK7sT-k5.js";import"./base-controller-CXhqh4cR.js";import"./i18n-B2d_exHc.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=class{constructor(t){registerInstance(this,t),this.tooltipCtrl=new TooltipController(BaseWebComponent.stateLess),this.translateOpenLinkInTab=translate("kol-open-link-in-tab"),this.setAnchorRef=t=>{this.anchorRef=t},this.onClick=t=>{var a,e;this.tooltipCtrl.hideTooltip(),!0===this.state._disabled?t.preventDefault():("function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(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.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}async focus(){return setFocus(this.anchorRef)}async click(){return setClick(this.anchorRef)}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:"83ee231b0f1c8a6e49dcf28b6ba1c2fe536af737"},h("a",Object.assign({key:"f4b6ee34af57406ab21ab11952cd09b6af3d8f8c",ref:this.setAnchorRef},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._variant}`]:void 0!==this.state._variant,"kol-link--inline":!0===this.state._inline,"kol-link--standalone":!1===this.state._inline,[this.state._customClass]:"custom"===this.state._variant&&"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(SpanFC,{key:"a316ae1d0dbab3d03b1daf3fa7fe968b3f7c846e",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:"b4804cf19d328a4816cb85c6758ee33f09901d03",name:"expert",slot:"expert"})),a&&h(IconFC,{key:"c56f4e7a3fde9219204b890b84d427a7ff20e9e7",class:"kol-link__icon",label:this.state._hideLabel?"":this.translateOpenLinkInTab,icons:"kolicon-link-external","aria-hidden":this.state._hideLabel})),!0===this.state._hideLabel&&!i&&h("div",{key:"30c70e38ec77728409240174e7c22937f525c457",class:"kol-link__tooltip"},h(TooltipFC,{key:"8c2cfbd883a7dabacf3e9fe0ca8865a8e2485d40",badgeText:this.state._accessKey||this.state._shortKey||"",label:"string"==typeof this.state._label?this.state._label:"string"==typeof this.state._href?this.state._href:"",id:this.tooltipCtrl.getRenderProp("id"),refFloating:this.tooltipCtrl.setTooltipElementRef})))}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),this.tooltipCtrl.watchLabel("string"==typeof t?t:void 0)}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),this.tooltipCtrl.watchAlign(t)}validateVariantClassName(t){validateVariantClassName(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.validateVariantClassName(this._variant),this.unsubscribeOnLocationChange=onLocationChange(t=>{this.state._ariaCurrent=t===this.state._href?this.state._ariaCurrentValue:void 0}),validateAccessAndShortKey(this._accessKey,this._shortKey),this.tooltipCtrl.componentWillLoad({label:"string"==typeof this.state._label?this.state._label:"string"==typeof this.state._href?this.state._href:"",align:this._tooltipAlign})}componentDidRender(){this.anchorRef&&this.tooltipCtrl.syncListeners(void 0,this.anchorRef,!0)}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange(),this.tooltipCtrl.destroy()}get host(){return getElement(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"],_variant:["validateVariantClassName"]}}};export{KolLinkWc as kol_link_wc};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-CHTqQqxk.js";import{B as BaseWebComponent}from"./variant-quote-DI6q8gPw.js";import{I as IconFC}from"./component-t7JbTUbQ.js";import{T as TooltipFC}from"./component-C-FsocqK.js";import{T as TooltipController}from"./controller-Cf3CGZT-.js";import{b as watchValidator,g as watchString,M as setEventTarget,k as devHint}from"./common-BqV6Zb30.js";import{S as SpanFC,s as showExpertSlot}from"./component-C8-WC5-k.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key-D2TiPdWw.js";import{v as validateAriaControls,a as validateAriaDescription,b as validateAriaExpanded,c as validateAlternativeButtonLinkRole,d as validateVariantClassName}from"./variant-class-name-BVKxs0G0.js";import{v as validateCustomClass}from"./custom-class-C5Yo1ysl.js";import{v as validateDisabled}from"./disabled-BBn2JEzf.js";import{v as validateHideLabel}from"./hide-label-DQL9J6E_.js";import{v as validateHref}from"./href-COBxk7m0.js";import{v as validateIcons}from"./icons-CqQ9plmY.js";import{v as validateInline}from"./inline-D3xGVsIW.js";import{a as validateLabelWithExpertSlot}from"./label-vxVEH2gH.js";import{v as validateTooltipAlign}from"./tooltip-align-DnbCY1Uu.js";import{s as setClick}from"./element-click-BTxuJDNT.js";import{s as setFocus}from"./element-focus-BKUtVrWY.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-DHTi_wtD.js";import{o as onLocationChange}from"./ariaCurrentService-YoLNpD5S.js";import{t as translate}from"./i18n-BVaUp6qp.js";import{c as clsx}from"./clsx-COFh-Vc8.js";import"./normalizers-C14RETgU.js";import"./_Uint8Array-kJHDjtoP.js";import"./isArray-CcrBs4JM.js";import"./tslib.es6-CxX45GIN.js";import"./bem-registry-Bux_TllX.js";import"./align-floating-elements-58sFZOrL.js";import"./tooltip-open-tracking-D3tCiiGP.js";import"./align-D3Z54kEL.js";import"./label-DK7sT-k5.js";import"./base-controller-CXhqh4cR.js";import"./i18n-B2d_exHc.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=class{constructor(t){registerInstance(this,t),this.tooltipCtrl=new TooltipController(BaseWebComponent.stateLess),this.translateOpenLinkInTab=translate("kol-open-link-in-tab"),this.setAnchorRef=t=>{this.anchorRef=t},this.onClick=t=>{var a,e;this.tooltipCtrl.hideTooltip(),!0===this.state._disabled?t.preventDefault():("function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(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.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}async focus(){return setFocus(this.anchorRef)}async click(){return setClick(this.anchorRef)}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:"83ee231b0f1c8a6e49dcf28b6ba1c2fe536af737"},h("a",Object.assign({key:"f4b6ee34af57406ab21ab11952cd09b6af3d8f8c",ref:this.setAnchorRef},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._variant}`]:void 0!==this.state._variant,"kol-link--inline":!0===this.state._inline,"kol-link--standalone":!1===this.state._inline,[this.state._customClass]:"custom"===this.state._variant&&"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(SpanFC,{key:"a316ae1d0dbab3d03b1daf3fa7fe968b3f7c846e",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:"b4804cf19d328a4816cb85c6758ee33f09901d03",name:"expert",slot:"expert"})),a&&h(IconFC,{key:"c56f4e7a3fde9219204b890b84d427a7ff20e9e7",class:"kol-link__icon",label:this.state._hideLabel?"":this.translateOpenLinkInTab,icons:"kolicon-link-external","aria-hidden":this.state._hideLabel})),!0===this.state._hideLabel&&!i&&h("div",{key:"30c70e38ec77728409240174e7c22937f525c457",class:"kol-link__tooltip"},h(TooltipFC,{key:"8c2cfbd883a7dabacf3e9fe0ca8865a8e2485d40",badgeText:this.state._accessKey||this.state._shortKey||"",label:"string"==typeof this.state._label?this.state._label:"string"==typeof this.state._href?this.state._href:"",id:this.tooltipCtrl.getRenderProp("id"),refFloating:this.tooltipCtrl.setTooltipElementRef})))}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),this.tooltipCtrl.watchLabel("string"==typeof t?t:void 0)}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),this.tooltipCtrl.watchAlign(t)}validateVariantClassName(t){validateVariantClassName(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.validateVariantClassName(this._variant),this.unsubscribeOnLocationChange=onLocationChange(t=>{this.state._ariaCurrent=t===this.state._href?this.state._ariaCurrentValue:void 0}),validateAccessAndShortKey(this._accessKey,this._shortKey),this.tooltipCtrl.componentWillLoad({label:"string"==typeof this.state._label?this.state._label:"string"==typeof this.state._href?this.state._href:"",align:this._tooltipAlign})}componentDidRender(){this.anchorRef&&this.tooltipCtrl.syncListeners(void 0,this.anchorRef,!0)}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange(),this.tooltipCtrl.destroy()}get host(){return getElement(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"],_variant:["validateVariantClassName"]}}};export{KolLinkWc as kol_link_wc};

package/dist/esm/kol-link.entry.js

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

package/dist/esm/kol-meter.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,r as registerInstance,H as Host}from"./index-Bc-dkuUs.js";import{B as BaseWebComponent}from"./variant-quote-DI6q8gPw.js";import{t as translate}from"./i18n-BVaUp6qp.js";import"./common-BqV6Zb30.js";import{c as createPropDefinition,b as normalizeNumber,n as normalizeString}from"./normalizers-C14RETgU.js";import{l as labelProp}from"./label-DK7sT-k5.js";import{m as maxProp,u as unitProp,c as clampedNumberValueProp}from"./value-number-clamped-_HbNn448.js";import{B as BaseController}from"./base-controller-CXhqh4cR.js";import"./i18n-B2d_exHc.js";import"./_Uint8Array-kJHDjtoP.js";import"./isArray-CcrBs4JM.js";const highProp=createPropDefinition("high",0,normalizeNumber),lowProp=createPropDefinition("low",0,normalizeNumber),minProp=createPropDefinition("min",0,normalizeNumber),optimumProp=createPropDefinition("optimum",0,normalizeNumber),orientationOptions=["horizontal","vertical"],orientationProp=createPropDefinition("orientation","horizontal",e=>{const t=normalizeString(e);if(orientationOptions.includes(t))return t;throw new Error(`Invalid orientation: ${t}`)}),numberValueProp=createPropDefinition("value",0,normalizeNumber,e=>e>=0);function getMeterState(e,t,n,i,r,o){const a=null!=i?i:t,l=null!=r?r:n;if(void 0===o){return e>=a&&e<=l?"optimum":"suboptimal"}const s=e<a,h=e>l,c=!s&&!h;return o<a?s?"optimum":c?"suboptimal":"critical":o>l?h?"optimum":c?"suboptimal":"critical":c?"optimum":"suboptimal"}const MeterFC=e=>{const{high:t,label:n,low:i,liveValue:r,max:o,min:a,optimum:l,orientation:s,unit:c,value:m}=e,d="vertical"===s,p="%"===c,u=p?Math.round((m-a)/(o-a)*100):m,b=p?`${Math.round((r-a)/(o-a)*100)}`:r,f=`${`${(p?100:o)+1}`.length}ch`,g=Math.min(100,Math.max(0,(m-a)/(o-a)*100)),w=getMeterState(m,a,o,i,t,l),k=void 0!==i||void 0!==t,v=k?translate(`kol-meter-state-${w}`):"",_=p?translate("kol-live-value",{placeholders:{value:String(b),unit:c}}):translate("kol-live-value-bounded",{placeholders:{value:String(b),max:String(o),unit:c}}),y=k?`${_} – ${v}`:_,x={"kol-meter__bar-fill":!0,"kol-meter__bar-fill--optimum":"optimum"===w,"kol-meter__bar-fill--suboptimal":"suboptimal"===w,"kol-meter__bar-fill--critical":"critical"===w};return h("div",{class:{"kol-meter":!0,"kol-meter--vertical":d}},h("div",{"aria-hidden":"true",class:"kol-meter__bar"},h("div",{class:"kol-meter__bar-label"},n,k&&h("span",{class:`kol-meter__bar-state kol-meter__bar-state--${w}`}," – ",v)),d?h("div",{class:"kol-meter__bar-track"},h("div",{class:x,style:{height:`calc((100% - 6px) * ${g/100})`}})):h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},h("rect",{class:"kol-meter__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100%"}),h("rect",{class:"kol-meter__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100%"}),h("rect",{class:x,x:"3",y:"3",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${g}% - 4px)`}})),h("span",{class:"kol-meter__value-unit"},h("span",{class:"kol-meter__value",style:d?{}:{width:f}},u)," ",h("span",{class:"kol-meter__unit"},c))),h("meter",{"aria-label":n,class:"visually-hidden",high:t,low:i,max:o,min:a,optimum:l,value:m}),h("span",{"aria-live":"polite","aria-relevant":"additions text",class:"visually-hidden"},y))},meterPropsConfig={optional:[minProp,orientationProp,unitProp],required:[labelProp,maxProp,numberValueProp]};class MeterController extends BaseController{constructor(e){super(e,meterPropsConfig),this.meterData={high:void 0,low:void 0,optimum:void 0}}componentWillLoad(e){const{high:t,label:n,low:i,max:r,min:o,optimum:a,orientation:l,unit:s,value:h}=e;this.watchHigh(t),this.watchLabel(n),this.watchLow(i),this.watchMax(r),this.watchMin(o),this.watchOptimum(a),this.watchOrientation(l),this.watchUnit(s),this.watchValue(h),this.setState("liveValue",this.getRenderProp("value")),this.startLiveValueInterval()}destroy(){this.interval&&(clearInterval(this.interval),this.interval=void 0)}getMeterData(){return this.meterData}watchHigh(e){void 0===e?this.meterData.high=void 0:highProp.apply(e,e=>{this.meterData.high=e})}watchLabel(e){labelProp.apply(e,e=>{this.setRenderProp("label",e)})}watchLow(e){void 0===e?this.meterData.low=void 0:lowProp.apply(e,e=>{this.meterData.low=e})}watchMax(e){maxProp.apply(e,e=>{this.setRenderProp("max",e),this.watchValue(this.getRawProp("value"))})}watchMin(e){minProp.apply(e,e=>{this.setRenderProp("min",e),this.watchValue(this.getRawProp("value"))})}watchOptimum(e){void 0===e?this.meterData.optimum=void 0:optimumProp.apply(e,e=>{this.meterData.optimum=e})}watchOrientation(e){orientationProp.apply(e,e=>{this.setRenderProp("orientation",e)})}watchUnit(e){unitProp.apply(e,e=>{this.setRenderProp("unit",e)})}watchValue(e){this.setRawProp("value",e),clampedNumberValueProp.apply(e,e=>{this.setRenderProp("value",e)},{min:this.getRenderProp("min"),max:this.getRenderProp("max")})}startLiveValueInterval(){this.interval=setInterval(()=>{const e=this.getRenderProp("value");this.getState("liveValue")!==e&&this.setState("liveValue",e)},5e3)}}const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-meter__bar {\n    display: grid;\n    column-gap: calc(0.8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    grid-template-columns: 1fr auto;\n  }\n  .kol-meter__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-meter__bar svg {\n    grid-area: BAR;\n  }\n  .kol-meter__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-meter__bar-background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .kol-meter__bar-fill {\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-meter__bar-fill {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-meter__bar-fill--optimum {\n    color: #2ea32e;\n    color: #2ea32e;\n    fill: #2ea32e;\n  }\n  .kol-meter__bar-fill--suboptimal {\n    color: #c8a000;\n    color: #c8a000;\n    fill: #c8a000;\n  }\n  .kol-meter__bar-fill--critical {\n    color: #c00;\n    color: #c00;\n    fill: #c00;\n  }\n  .kol-meter__value-unit {\n    display: contents;\n  }\n  .kol-meter__value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-meter__unit {\n    grid-area: UNIT;\n  }\n  .kol-meter--vertical {\n    display: inline-flex;\n  }\n  .kol-meter--vertical .kol-meter__bar {\n    display: flex;\n    min-height: var(--kol-meter-height, calc(128 * 1rem / var(--kolibri-root-font-size, 16)));\n    row-gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-direction: column;\n    align-items: center;\n  }\n  .kol-meter--vertical .kol-meter__bar-label {\n    text-align: center;\n  }\n  .kol-meter--vertical .kol-meter__bar-track {\n    background: lightgray;\n    outline: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) solid black;\n    border-radius: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n    width: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    min-height: 0;\n    overflow: hidden;\n    flex: 1;\n  }\n  .kol-meter--vertical .kol-meter__bar-fill {\n    background: currentColor;\n    border-radius: calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    right: calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    bottom: calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    left: calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-meter--vertical .kol-meter__bar-fill {\n      transition: height 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-meter--vertical .kol-meter__value-unit {\n    display: contents;\n  }\n  .kol-meter--vertical .kol-meter__value {\n    width: auto;\n    text-align: center;\n  }\n  .kol-meter--vertical .kol-meter__unit {\n    text-align: center;\n  }\n}",KolMeter=class extends BaseWebComponent{constructor(e){super(),registerInstance(this,e),this.ctrl=new MeterController(this.stateAccess),this._max=1,this._min=0,this._orientation="horizontal",this._unit="%",this.liveValue=0}watchHigh(e){this.ctrl.watchHigh(e)}watchLabel(e){this.ctrl.watchLabel(e)}watchLow(e){this.ctrl.watchLow(e)}watchMax(e){this.ctrl.watchMax(e)}watchMin(e){this.ctrl.watchMin(e)}watchOptimum(e){this.ctrl.watchOptimum(e)}watchOrientation(e){this.ctrl.watchOrientation(e)}watchUnit(e){this.ctrl.watchUnit(e)}watchValue(e){this.ctrl.watchValue(e)}componentWillLoad(){this.ctrl.componentWillLoad({high:this._high,label:this._label,low:this._low,max:this._max,min:this._min,optimum:this._optimum,orientation:this._orientation,unit:this._unit,value:this._value})}disconnectedCallback(){this.ctrl.destroy()}render(){const{high:e,low:t,optimum:n}=this.ctrl.getMeterData();return h(Host,{key:"f984ca58fde313ec89e7c3706bcc8abc78ccd0c9"},h(MeterFC,{key:"cc748329ed165491feb61315348e0b44c8797197",high:e,label:this.ctrl.getRenderProp("label"),low:t,liveValue:this.liveValue,max:this.ctrl.getRenderProp("max"),min:this.ctrl.getRenderProp("min"),optimum:n,orientation:this.ctrl.getRenderProp("orientation"),unit:this.ctrl.getRenderProp("unit"),value:this.ctrl.getRenderProp("value")}))}static get watchers(){return{_high:["watchHigh"],_label:["watchLabel"],_low:["watchLow"],_max:["watchMax"],_min:["watchMin"],_optimum:["watchOptimum"],_orientation:["watchOrientation"],_unit:["watchUnit"],_value:["watchValue"]}}};KolMeter.style={default:defaultStyleCss};export{KolMeter as kol_meter};
+import{h,r as registerInstance,H as Host}from"./index-CHTqQqxk.js";import{B as BaseWebComponent}from"./variant-quote-DI6q8gPw.js";import{t as translate}from"./i18n-BVaUp6qp.js";import"./common-BqV6Zb30.js";import{c as createPropDefinition,b as normalizeNumber,n as normalizeString}from"./normalizers-C14RETgU.js";import{l as labelProp}from"./label-DK7sT-k5.js";import{m as maxProp,u as unitProp,c as clampedNumberValueProp}from"./value-number-clamped-_HbNn448.js";import{B as BaseController}from"./base-controller-CXhqh4cR.js";import"./i18n-B2d_exHc.js";import"./_Uint8Array-kJHDjtoP.js";import"./isArray-CcrBs4JM.js";const highProp=createPropDefinition("high",0,normalizeNumber),lowProp=createPropDefinition("low",0,normalizeNumber),minProp=createPropDefinition("min",0,normalizeNumber),optimumProp=createPropDefinition("optimum",0,normalizeNumber),orientationOptions=["horizontal","vertical"],orientationProp=createPropDefinition("orientation","horizontal",e=>{const t=normalizeString(e);if(orientationOptions.includes(t))return t;throw new Error(`Invalid orientation: ${t}`)}),numberValueProp=createPropDefinition("value",0,normalizeNumber,e=>e>=0);function getMeterState(e,t,n,i,r,o){const a=null!=i?i:t,l=null!=r?r:n;if(void 0===o){return e>=a&&e<=l?"optimum":"suboptimal"}const s=e<a,h=e>l,c=!s&&!h;return o<a?s?"optimum":c?"suboptimal":"critical":o>l?h?"optimum":c?"suboptimal":"critical":c?"optimum":"suboptimal"}const MeterFC=e=>{const{high:t,label:n,low:i,liveValue:r,max:o,min:a,optimum:l,orientation:s,unit:c,value:m}=e,d="vertical"===s,p="%"===c,u=p?Math.round((m-a)/(o-a)*100):m,b=p?`${Math.round((r-a)/(o-a)*100)}`:r,f=`${`${(p?100:o)+1}`.length}ch`,g=Math.min(100,Math.max(0,(m-a)/(o-a)*100)),w=getMeterState(m,a,o,i,t,l),k=void 0!==i||void 0!==t,v=k?translate(`kol-meter-state-${w}`):"",_=p?translate("kol-live-value",{placeholders:{value:String(b),unit:c}}):translate("kol-live-value-bounded",{placeholders:{value:String(b),max:String(o),unit:c}}),y=k?`${_} – ${v}`:_,x={"kol-meter__bar-fill":!0,"kol-meter__bar-fill--optimum":"optimum"===w,"kol-meter__bar-fill--suboptimal":"suboptimal"===w,"kol-meter__bar-fill--critical":"critical"===w};return h("div",{class:{"kol-meter":!0,"kol-meter--vertical":d}},h("div",{"aria-hidden":"true",class:"kol-meter__bar"},h("div",{class:"kol-meter__bar-label"},n,k&&h("span",{class:`kol-meter__bar-state kol-meter__bar-state--${w}`}," – ",v)),d?h("div",{class:"kol-meter__bar-track"},h("div",{class:x,style:{height:`calc((100% - 6px) * ${g/100})`}})):h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},h("rect",{class:"kol-meter__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100%"}),h("rect",{class:"kol-meter__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100%"}),h("rect",{class:x,x:"3",y:"3",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${g}% - 4px)`}})),h("span",{class:"kol-meter__value-unit"},h("span",{class:"kol-meter__value",style:d?{}:{width:f}},u)," ",h("span",{class:"kol-meter__unit"},c))),h("meter",{"aria-label":n,class:"visually-hidden",high:t,low:i,max:o,min:a,optimum:l,value:m}),h("span",{"aria-live":"polite","aria-relevant":"additions text",class:"visually-hidden"},y))},meterPropsConfig={optional:[minProp,orientationProp,unitProp],required:[labelProp,maxProp,numberValueProp]};class MeterController extends BaseController{constructor(e){super(e,meterPropsConfig),this.meterData={high:void 0,low:void 0,optimum:void 0}}componentWillLoad(e){const{high:t,label:n,low:i,max:r,min:o,optimum:a,orientation:l,unit:s,value:h}=e;this.watchHigh(t),this.watchLabel(n),this.watchLow(i),this.watchMax(r),this.watchMin(o),this.watchOptimum(a),this.watchOrientation(l),this.watchUnit(s),this.watchValue(h),this.setState("liveValue",this.getRenderProp("value")),this.startLiveValueInterval()}destroy(){this.interval&&(clearInterval(this.interval),this.interval=void 0)}getMeterData(){return this.meterData}watchHigh(e){void 0===e?this.meterData.high=void 0:highProp.apply(e,e=>{this.meterData.high=e})}watchLabel(e){labelProp.apply(e,e=>{this.setRenderProp("label",e)})}watchLow(e){void 0===e?this.meterData.low=void 0:lowProp.apply(e,e=>{this.meterData.low=e})}watchMax(e){maxProp.apply(e,e=>{this.setRenderProp("max",e),this.watchValue(this.getRawProp("value"))})}watchMin(e){minProp.apply(e,e=>{this.setRenderProp("min",e),this.watchValue(this.getRawProp("value"))})}watchOptimum(e){void 0===e?this.meterData.optimum=void 0:optimumProp.apply(e,e=>{this.meterData.optimum=e})}watchOrientation(e){orientationProp.apply(e,e=>{this.setRenderProp("orientation",e)})}watchUnit(e){unitProp.apply(e,e=>{this.setRenderProp("unit",e)})}watchValue(e){this.setRawProp("value",e),clampedNumberValueProp.apply(e,e=>{this.setRenderProp("value",e)},{min:this.getRenderProp("min"),max:this.getRenderProp("max")})}startLiveValueInterval(){this.interval=setInterval(()=>{const e=this.getRenderProp("value");this.getState("liveValue")!==e&&this.setState("liveValue",e)},5e3)}}const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-meter__bar {\n    display: grid;\n    column-gap: calc(0.8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    grid-template-columns: 1fr auto;\n  }\n  .kol-meter__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-meter__bar svg {\n    grid-area: BAR;\n  }\n  .kol-meter__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-meter__bar-background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .kol-meter__bar-fill {\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-meter__bar-fill {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-meter__bar-fill--optimum {\n    color: #2ea32e;\n    color: #2ea32e;\n    fill: #2ea32e;\n  }\n  .kol-meter__bar-fill--suboptimal {\n    color: #c8a000;\n    color: #c8a000;\n    fill: #c8a000;\n  }\n  .kol-meter__bar-fill--critical {\n    color: #c00;\n    color: #c00;\n    fill: #c00;\n  }\n  .kol-meter__value-unit {\n    display: contents;\n  }\n  .kol-meter__value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-meter__unit {\n    grid-area: UNIT;\n  }\n  .kol-meter--vertical {\n    display: inline-flex;\n  }\n  .kol-meter--vertical .kol-meter__bar {\n    display: flex;\n    min-height: var(--kol-meter-height, calc(128 * 1rem / var(--kolibri-root-font-size, 16)));\n    row-gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-direction: column;\n    align-items: center;\n  }\n  .kol-meter--vertical .kol-meter__bar-label {\n    text-align: center;\n  }\n  .kol-meter--vertical .kol-meter__bar-track {\n    background: lightgray;\n    outline: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) solid black;\n    border-radius: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n    width: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    min-height: 0;\n    overflow: hidden;\n    flex: 1;\n  }\n  .kol-meter--vertical .kol-meter__bar-fill {\n    background: currentColor;\n    border-radius: calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    right: calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    bottom: calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n    left: calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-meter--vertical .kol-meter__bar-fill {\n      transition: height 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-meter--vertical .kol-meter__value-unit {\n    display: contents;\n  }\n  .kol-meter--vertical .kol-meter__value {\n    width: auto;\n    text-align: center;\n  }\n  .kol-meter--vertical .kol-meter__unit {\n    text-align: center;\n  }\n}",KolMeter=class extends BaseWebComponent{constructor(e){super(),registerInstance(this,e),this.ctrl=new MeterController(this.stateAccess),this._max=1,this._min=0,this._orientation="horizontal",this._unit="%",this.liveValue=0}watchHigh(e){this.ctrl.watchHigh(e)}watchLabel(e){this.ctrl.watchLabel(e)}watchLow(e){this.ctrl.watchLow(e)}watchMax(e){this.ctrl.watchMax(e)}watchMin(e){this.ctrl.watchMin(e)}watchOptimum(e){this.ctrl.watchOptimum(e)}watchOrientation(e){this.ctrl.watchOrientation(e)}watchUnit(e){this.ctrl.watchUnit(e)}watchValue(e){this.ctrl.watchValue(e)}componentWillLoad(){this.ctrl.componentWillLoad({high:this._high,label:this._label,low:this._low,max:this._max,min:this._min,optimum:this._optimum,orientation:this._orientation,unit:this._unit,value:this._value})}disconnectedCallback(){this.ctrl.destroy()}render(){const{high:e,low:t,optimum:n}=this.ctrl.getMeterData();return h(Host,{key:"f984ca58fde313ec89e7c3706bcc8abc78ccd0c9"},h(MeterFC,{key:"cc748329ed165491feb61315348e0b44c8797197",high:e,label:this.ctrl.getRenderProp("label"),low:t,liveValue:this.liveValue,max:this.ctrl.getRenderProp("max"),min:this.ctrl.getRenderProp("min"),optimum:n,orientation:this.ctrl.getRenderProp("orientation"),unit:this.ctrl.getRenderProp("unit"),value:this.ctrl.getRenderProp("value")}))}static get watchers(){return{_high:["watchHigh"],_label:["watchLabel"],_low:["watchLow"],_max:["watchMax"],_min:["watchMin"],_optimum:["watchOptimum"],_orientation:["watchOrientation"],_unit:["watchUnit"],_value:["watchValue"]}}};KolMeter.style={default:defaultStyleCss};export{KolMeter as kol_meter};

package/dist/esm/kol-modal.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h}from"./index-Bc-dkuUs.js";import{e as KolDialogWcTag}from"./component-names-Dy77vq43.js";import"./common-BqV6Zb30.js";const defaultStyleCss='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1777029041506"); /* IE9*/\n  src: url("kolicons.eot?t=1777029041506#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1777029041506") format("woff2"), url("kolicons.woff?t=1777029041506") format("woff"), url("kolicons.ttf?t=1777029041506") format("truetype"), url("kolicons.svg?t=1777029041506#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #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-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n\n.kol-card .kol-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n.kol-card :host {\n  display: inline-block;\n}\n.kol-card .kol-button {\n  display: flex;\n  min-height: var(--a11y-min-size);\n  font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  text-decoration-line: none;\n}\n.kol-card .kol-button::before {\n  /* Render zero-width character as first element to set the baseline correctly. */\n  content: "​";\n}\n.kol-card .kol-button__text {\n  flex: 1 0 100%;\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  display: grid;\n  height: 100%;\n  overflow: visible;\n  grid-template-areas: "header  close" "content content";\n  grid-template-columns: 1fr min-content;\n  grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n  align-self: start;\n  grid-area: header;\n}\n.kol-card__content {\n  align-self: stretch;\n  grid-area: content;\n}\n.kol-card__close-button {\n  grid-area: close;\n}\n\n@layer kol-component {\n  .kol-dialog,\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-dialog::backdrop,\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-dialog__close-button,\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=class{constructor(n){registerInstance(this,n),this.catchRef=n=>{this.dialogRef=n},this._width="100%",this._variant="blank"}async openModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.openModal())}async closeModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.closeModal())}render(){return h(KolDialogWcTag,{key:"bc140a3ec63de554f59a521881bc01539c600fd1",ref:this.catchRef,_label:this._label,_on:this._on,_variant:this._variant,_width:this._width},h("slot",{key:"582fcc2297a61f3e87f655b3d223f7e3020964e4"}))}};KolModal.style={default:defaultStyleCss};export{KolModal as kol_modal};
+import{r as registerInstance,h}from"./index-CHTqQqxk.js";import{e as KolDialogWcTag}from"./component-names-Dy77vq43.js";import"./common-BqV6Zb30.js";const defaultStyleCss='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1777087174897"); /* IE9*/\n  src: url("kolicons.eot?t=1777087174897#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1777087174897") format("woff2"), url("kolicons.woff?t=1777087174897") format("woff"), url("kolicons.ttf?t=1777087174897") format("truetype"), url("kolicons.svg?t=1777087174897#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #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-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n\n.kol-card .kol-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n.kol-card :host {\n  display: inline-block;\n}\n.kol-card .kol-button {\n  display: flex;\n  min-height: var(--a11y-min-size);\n  font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  text-decoration-line: none;\n}\n.kol-card .kol-button::before {\n  /* Render zero-width character as first element to set the baseline correctly. */\n  content: "​";\n}\n.kol-card .kol-button__text {\n  flex: 1 0 100%;\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  display: grid;\n  height: 100%;\n  overflow: visible;\n  grid-template-areas: "header  close" "content content";\n  grid-template-columns: 1fr min-content;\n  grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n  align-self: start;\n  grid-area: header;\n}\n.kol-card__content {\n  align-self: stretch;\n  grid-area: content;\n}\n.kol-card__close-button {\n  grid-area: close;\n}\n\n@layer kol-component {\n  .kol-dialog,\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-dialog::backdrop,\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-dialog__close-button,\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=class{constructor(n){registerInstance(this,n),this.catchRef=n=>{this.dialogRef=n},this._width="100%",this._variant="blank"}async openModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.openModal())}async closeModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.closeModal())}render(){return h(KolDialogWcTag,{key:"bc140a3ec63de554f59a521881bc01539c600fd1",ref:this.catchRef,_label:this._label,_on:this._on,_variant:this._variant,_width:this._width},h("slot",{key:"582fcc2297a61f3e87f655b3d223f7e3020964e4"}))}};KolModal.style={default:defaultStyleCss};export{KolModal as kol_modal};

package/dist/esm/kol-nav.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h}from"./index-Bc-dkuUs.js";import{e as watchBoolean,d as a11yHintLabelingLandmarks,k as devHint}from"./common-BqV6Zb30.js";import{v as validateHideLabel}from"./hide-label-DQL9J6E_.js";import{v as validateLabel}from"./label-vxVEH2gH.js";import{c as KolLinkWcTag,b as KolButtonWcTag}from"./component-names-Dy77vq43.js";import{t as translate}from"./i18n-BVaUp6qp.js";import{c as clsx}from"./clsx-COFh-Vc8.js";import{n as nonce}from"./dev.utils-UUgQWQxj.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels-BIHfxulq.js";import{w as watchNavLinks}from"./validation-JhNRqKy1.js";import"./i18n-B2d_exHc.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    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1777029041506"); /* IE9*/\n  src: url("kolicons.eot?t=1777029041506#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1777029041506") format("woff2"), url("kolicons.woff?t=1777029041506") format("woff"), url("kolicons.ttf?t=1777029041506") format("truetype"), url("kolicons.svg?t=1777029041506#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-nav {\n    display: grid;\n    place-items: center;\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    flex-direction: column;\n    list-style: none;\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=class{constructor(n){registerInstance(this,n),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--vertical":0!==n.deep}),id:n.deep>0?n.id:void 0},n.links.map((e,t)=>this.li(n.collapsible,n.deep,t,e,n.id))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_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||"kolicon-link"),n&&(i.right=e?"kolicon-minus":"kolicon-plus"),i}entry(n,e,t,i,o){var a;const l="string"==typeof t._icons?t._icons:"string"==typeof(null===(a=t._icons)||void 0===a?void 0:a.left)?t._icons.left:void 0,s=this.buildIconObject(n&&e,i,l);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:s,_ariaControls:n&&e&&i?o: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:s,_ariaControls:n&&e&&i?o: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,o){const a=!!i._active,l=Array.isArray(i._children)&&i._children.length>0,s=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":a,"kol-nav__list-item--expanded":s,"kol-nav__list-item--has-children":l}),key:t},this.entry(n,l,i,s,r),s&&h(this.linkList,{collapsible:n,deep:e+1,links:i._children||[],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(){const n=!0===this.state._collapsible;return h("div",{key:"0d0932e622faa91e2aea4d12f183c63988947915",class:clsx("kol-nav",{"kol-nav--is-compact":this.state._hideLabel})},h("nav",{key:"f246c1d4901526e67f8c0f62ceb8384ac45b4643","aria-label":this.state._label,class:"kol-nav__navigation",id:this.navId},h(this.linkList,{key:"03e3601953e721e03c0433abfeec52274994f9a0",collapsible:n,deep:0,links:this.state._links,id:this.listId})),this.state._hasCompactButton&&h("div",{key:"00a4ce69c7f84ad1d9e6bb5622e2ac38cca2a6c0",class:"kol-nav__compact"},h(KolButtonWcTag,{key:"96c1a5c114bbb6f6abbecd70329c5fedd5a080dd",class:"kol-nav__toggle-button",_ariaControls:this.navId,_ariaExpanded:!this.state._hideLabel,_icons:this.state._hideLabel?"kolicon-chevron-right":"kolicon-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()}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.initializeExpandedChildren()}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"]}}};KolNav.style={default:defaultStyleCss};export{KolNav as kol_nav};
+import{r as registerInstance,h}from"./index-CHTqQqxk.js";import{e as watchBoolean,d as a11yHintLabelingLandmarks,k as devHint}from"./common-BqV6Zb30.js";import{v as validateHideLabel}from"./hide-label-DQL9J6E_.js";import{v as validateLabel}from"./label-vxVEH2gH.js";import{c as KolLinkWcTag,b as KolButtonWcTag}from"./component-names-Dy77vq43.js";import{t as translate}from"./i18n-BVaUp6qp.js";import{c as clsx}from"./clsx-COFh-Vc8.js";import{n as nonce}from"./dev.utils-CxpBPLQA.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels-BIHfxulq.js";import{w as watchNavLinks}from"./validation-JhNRqKy1.js";import"./i18n-B2d_exHc.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    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1777087174897"); /* IE9*/\n  src: url("kolicons.eot?t=1777087174897#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1777087174897") format("woff2"), url("kolicons.woff?t=1777087174897") format("woff"), url("kolicons.ttf?t=1777087174897") format("truetype"), url("kolicons.svg?t=1777087174897#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-nav {\n    display: grid;\n    place-items: center;\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    flex-direction: column;\n    list-style: none;\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=class{constructor(n){registerInstance(this,n),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--vertical":0!==n.deep}),id:n.deep>0?n.id:void 0},n.links.map((e,t)=>this.li(n.collapsible,n.deep,t,e,n.id))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_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||"kolicon-link"),n&&(i.right=e?"kolicon-minus":"kolicon-plus"),i}entry(n,e,t,i,o){var a;const l="string"==typeof t._icons?t._icons:"string"==typeof(null===(a=t._icons)||void 0===a?void 0:a.left)?t._icons.left:void 0,s=this.buildIconObject(n&&e,i,l);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:s,_ariaControls:n&&e&&i?o: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:s,_ariaControls:n&&e&&i?o: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,o){const a=!!i._active,l=Array.isArray(i._children)&&i._children.length>0,s=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":a,"kol-nav__list-item--expanded":s,"kol-nav__list-item--has-children":l}),key:t},this.entry(n,l,i,s,r),s&&h(this.linkList,{collapsible:n,deep:e+1,links:i._children||[],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(){const n=!0===this.state._collapsible;return h("div",{key:"0d0932e622faa91e2aea4d12f183c63988947915",class:clsx("kol-nav",{"kol-nav--is-compact":this.state._hideLabel})},h("nav",{key:"f246c1d4901526e67f8c0f62ceb8384ac45b4643","aria-label":this.state._label,class:"kol-nav__navigation",id:this.navId},h(this.linkList,{key:"03e3601953e721e03c0433abfeec52274994f9a0",collapsible:n,deep:0,links:this.state._links,id:this.listId})),this.state._hasCompactButton&&h("div",{key:"00a4ce69c7f84ad1d9e6bb5622e2ac38cca2a6c0",class:"kol-nav__compact"},h(KolButtonWcTag,{key:"96c1a5c114bbb6f6abbecd70329c5fedd5a080dd",class:"kol-nav__toggle-button",_ariaControls:this.navId,_ariaExpanded:!this.state._hideLabel,_icons:this.state._hideLabel?"kolicon-chevron-right":"kolicon-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()}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.initializeExpandedChildren()}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"]}}};KolNav.style={default:defaultStyleCss};export{KolNav as kol_nav};

package/dist/esm/kol-pagination-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-Bc-dkuUs.js";import{N as watchNumber,U as STATE_CHANGE_EVENT,b as watchValidator,G as watchJsonArrayString,p as parseJson}from"./common-BqV6Zb30.js";import{v as validateCustomClass}from"./custom-class-C5Yo1ysl.js";import{v as validateLabel}from"./label-vxVEH2gH.js";import{v as validateTooltipAlign}from"./tooltip-align-DnbCY1Uu.js";import{j as KolSelectWcTag,b as KolButtonWcTag}from"./component-names-Dy77vq43.js";import{t as translate}from"./i18n-BVaUp6qp.js";import{n as nonce}from"./dev.utils-UUgQWQxj.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-DHTi_wtD.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels-BIHfxulq.js";import"./align-D3Z54kEL.js";import"./i18n-B2d_exHc.js";const validateMax=(t,a,e)=>{watchNumber(t,"_max",a,e)},leftDoubleArrowIcon={left:"kolicon-chevron-double-left"},leftSingleArrow={left:"kolicon-chevron-left"},rightSingleArrowIcon={right:"kolicon-chevron-right"},rightDoubleArrowIcon={right:"kolicon-chevron-double-right"};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=class{constructor(t){registerInstance(this,t),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)}}getPageStart(){return(this.state._page-1)*this.state._pageSize+1+""}getPageEnd(){const t=this.state._page*this.state._pageSize;return this.state._max<t?this.state._max.toString():t.toString()}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("span",{role:"status","aria-live":"polite",class:"kol-pagination__entries"},translate("kol-table-visible-range",{placeholders:{start:this.getPageStart(),end:this.getPageEnd(),total:this.state._max.toString()}})),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",_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",_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",_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",_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",_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 kol-pagination__button--numbers",_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 getElement(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"]}}};export{KolPaginationWc as kol_pagination_wc};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-CHTqQqxk.js";import{N as watchNumber,U as STATE_CHANGE_EVENT,b as watchValidator,G as watchJsonArrayString,p as parseJson}from"./common-BqV6Zb30.js";import{v as validateCustomClass}from"./custom-class-C5Yo1ysl.js";import{v as validateLabel}from"./label-vxVEH2gH.js";import{v as validateTooltipAlign}from"./tooltip-align-DnbCY1Uu.js";import{j as KolSelectWcTag,b as KolButtonWcTag}from"./component-names-Dy77vq43.js";import{t as translate}from"./i18n-BVaUp6qp.js";import{n as nonce}from"./dev.utils-CxpBPLQA.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-DHTi_wtD.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels-BIHfxulq.js";import"./align-D3Z54kEL.js";import"./i18n-B2d_exHc.js";const validateMax=(t,a,e)=>{watchNumber(t,"_max",a,e)},leftDoubleArrowIcon={left:"kolicon-chevron-double-left"},leftSingleArrow={left:"kolicon-chevron-left"},rightSingleArrowIcon={right:"kolicon-chevron-right"},rightDoubleArrowIcon={right:"kolicon-chevron-double-right"};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=class{constructor(t){registerInstance(this,t),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)}}getPageStart(){return(this.state._page-1)*this.state._pageSize+1+""}getPageEnd(){const t=this.state._page*this.state._pageSize;return this.state._max<t?this.state._max.toString():t.toString()}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("span",{role:"status","aria-live":"polite",class:"kol-pagination__entries"},translate("kol-table-visible-range",{placeholders:{start:this.getPageStart(),end:this.getPageEnd(),total:this.state._max.toString()}})),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",_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",_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",_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",_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",_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 kol-pagination__button--numbers",_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 getElement(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"]}}};export{KolPaginationWc as kol_pagination_wc};

package/dist/esm/kol-pagination.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h}from"./index-Bc-dkuUs.js";import{g as KolPaginationWcTag}from"./component-names-Dy77vq43.js";import"./common-BqV6Zb30.js";const defaultStyleCss='@charset "UTF-8";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1777029041506"); /* IE9*/\n  src: url("kolicons.eot?t=1777029041506#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1777029041506") format("woff2"), url("kolicons.woff?t=1777029041506") format("woff"), url("kolicons.ttf?t=1777029041506") format("truetype"), url("kolicons.svg?t=1777029041506#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #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  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-tooltip__content .kol-span__label::after {\n    content: "*"/"";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: "✓ ";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    container: paging/inline-size;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: "•••";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\n  }\n  @container paging (width < 600px) {\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n      display: none;\n    }\n  }\n}',KolPagination=class{constructor(n){registerInstance(this,n),this._boundaryCount=1,this._hasButtons=!0,this._pageSize=1,this._pageSizeOptions=[],this._siblingCount=1,this._tooltipAlign="top"}render(){return h(KolPaginationWcTag,{key:"bc90292d4f75a96446852b57fbcae6d90988d553",_boundaryCount:this._boundaryCount,_label:this._label,_customClass:this._customClass,_on:this._on,_hasButtons:this._hasButtons,_page:this._page,_pageSize:this._pageSize,_pageSizeOptions:this._pageSizeOptions,_siblingCount:this._siblingCount,_tooltipAlign:this._tooltipAlign,_max:this._max})}};KolPagination.style={default:defaultStyleCss};export{KolPagination as kol_pagination};
+import{r as registerInstance,h}from"./index-CHTqQqxk.js";import{g as KolPaginationWcTag}from"./component-names-Dy77vq43.js";import"./common-BqV6Zb30.js";const defaultStyleCss='@charset "UTF-8";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1777087174897"); /* IE9*/\n  src: url("kolicons.eot?t=1777087174897#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1777087174897") format("woff2"), url("kolicons.woff?t=1777087174897") format("woff"), url("kolicons.ttf?t=1777087174897") format("truetype"), url("kolicons.svg?t=1777087174897#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #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  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-tooltip__content .kol-span__label::after {\n    content: "*"/"";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: "✓ ";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    container: paging/inline-size;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: "•••";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\n  }\n  @container paging (width < 600px) {\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n      display: none;\n    }\n  }\n}',KolPagination=class{constructor(n){registerInstance(this,n),this._boundaryCount=1,this._hasButtons=!0,this._pageSize=1,this._pageSizeOptions=[],this._siblingCount=1,this._tooltipAlign="top"}render(){return h(KolPaginationWcTag,{key:"bc90292d4f75a96446852b57fbcae6d90988d553",_boundaryCount:this._boundaryCount,_label:this._label,_customClass:this._customClass,_on:this._on,_hasButtons:this._hasButtons,_page:this._page,_pageSize:this._pageSize,_pageSizeOptions:this._pageSizeOptions,_siblingCount:this._siblingCount,_tooltipAlign:this._tooltipAlign,_max:this._max})}};KolPagination.style={default:defaultStyleCss};export{KolPagination as kol_pagination};

package/dist/esm/kol-popover-button-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,r as registerInstance,F as Fragment}from"./index-Bc-dkuUs.js";import{b as KolButtonWcTag}from"./component-names-Dy77vq43.js";import{_ as __rest}from"./tslib.es6-CxX45GIN.js";import{c as clsx}from"./clsx-COFh-Vc8.js";import{a as alignFloatingElements,b as autoUpdate}from"./align-floating-elements-58sFZOrL.js";import"./common-BqV6Zb30.js";import{v as validateInline}from"./inline-D3xGVsIW.js";import{b as validateAlignment}from"./align-D3Z54kEL.js";import{n as nonce}from"./dev.utils-UUgQWQxj.js";import{s as setClick}from"./element-click-BTxuJDNT.js";import{s as setFocus}from"./element-focus-BKUtVrWY.js";const validatePopoverAlign=(e,t)=>{validateAlignment(e,"_popoverAlign",t)},PopoverFC=e=>{const{align:t="bottom",popoverRef:o,arrowRef:i,class:s}=e,n=__rest(e,["align","popoverRef","arrowRef","class"]);return h("div",Object.assign({},n,{class:clsx("kol-popover",s),ref:o,popover:"auto"}),h("div",{class:clsx("kol-popover__arrow",`kol-popover__arrow--${t}`),ref:i}),h("slot",null))};class PopoverController{constructor(){this.show=!1,this.align="bottom",this.setPopoverElementRef=e=>{this.popoverElement=e,this.arrowElement=null==e?void 0:e.querySelector(".kol-popover__arrow")},this.setTriggerElement=e=>{this.triggerElement=e},this.setAlign=e=>{this.align=e},this.alignPopover=async()=>{this.popoverElement&&this.triggerElement&&await alignFloatingElements({align:this.align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement})},this.setupAutoUpdate=()=>{this.popoverElement&&this.triggerElement&&!this.cleanupAutoUpdate&&(this.cleanupAutoUpdate=autoUpdate(this.triggerElement,this.popoverElement,()=>{this.alignPopover()}))}}setShow(e){if(this.show=e,!this.popoverElement)return;const t=()=>{var e;if(!this.popoverElement)return;const t=this.popoverElement.matches(":popover-open");if(this.show){if(!t)try{this.popoverElement.showPopover(),this.setupAutoUpdate(),this.alignPopover()}catch(e){}}else if(t)try{this.popoverElement.hidePopover(),null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.cleanupAutoUpdate=void 0}catch(e){}};this.popoverElement.isConnected?t():requestAnimationFrame(()=>{t()})}destroy(){var e;null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.cleanupAutoUpdate=void 0,this.popoverElement=void 0,this.arrowElement=void 0,this.triggerElement=void 0}}const KolPopoverButtonWc=class{constructor(e){registerInstance(this,e),this.popoverCtrl=new PopoverController,this.popoverId=`popover-${nonce()}`,this.setPopoverElementRef=e=>{this.popoverElement=e,this.popoverCtrl.setPopoverElementRef(e)},this.setButtonElementRef=e=>{this.refButton=e,e&&this.popoverCtrl.setTriggerElement(e)},this.on={onClick:()=>{this.popoverCtrl.setShow(!this.popoverOpen)}},this.state={_label:"",_popoverAlign:"bottom",_inline:!1},this.popoverOpen=!1,this.handleToggle=e=>{this.popoverOpen="open"===e.newState},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){this.popoverCtrl.setShow(!1)}async showPopover(){this.popoverCtrl.setShow(!0)}async focus(){return setFocus(this.refButton)}async click(){return setClick(this.refButton)}render(){return h(Fragment,null,h(KolButtonWcTag,{key:"8cecd7721585386caaa78d5aba1aec45e2f13613",class:clsx("kol-popover-button",{"kol-popover-button--open":this.popoverOpen,"kol-popover-button--inline":!0===this.state._inline,"kol-popover-button--standalone":!1===this.state._inline}),_accessKey:this._accessKey,_ariaControls:this.popoverId,_ariaDescription:this._ariaDescription,_ariaExpanded:this.popoverOpen,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_inline:this._inline,_label:this._label,_name:this._name,_on:this.on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant,ref:this.setButtonElementRef},h("slot",{key:"55fa847ba181d6bff3f707ebc2568ddf39411241",name:"expert",slot:"expert"})),h(PopoverFC,{key:"133bde88cf07b1bbd07195676ca9e4e9218d9ccd",align:this.state._popoverAlign||"bottom",popoverRef:this.setPopoverElementRef,class:"kol-popover-button__popover",id:this.popoverId},h("slot",{key:"11b4154b05f0cb5e9b839d92444b799c2df5bf08"})))}validateInline(e){validateInline(this,e,{defaultValue:!1})}validatePopoverAlign(e){validatePopoverAlign(this,e),e&&this.popoverCtrl.setAlign(e)}componentWillLoad(){this.validateInline(this._inline),this.validatePopoverAlign(this._popoverAlign)}componentDidRender(){this.popoverElement&&this.popoverElement.addEventListener("toggle",this.handleToggle),this.state._popoverAlign&&this.popoverCtrl.setAlign(this.state._popoverAlign)}disconnectedCallback(){this.popoverElement&&this.popoverElement.removeEventListener("toggle",this.handleToggle),this.popoverCtrl.destroy(),this.popoverElement=void 0}static get watchers(){return{_inline:["validateInline"],_popoverAlign:["validatePopoverAlign"]}}};export{KolPopoverButtonWc as kol_popover_button_wc};
+import{h,r as registerInstance,F as Fragment}from"./index-CHTqQqxk.js";import{b as KolButtonWcTag}from"./component-names-Dy77vq43.js";import{_ as __rest}from"./tslib.es6-CxX45GIN.js";import{c as clsx}from"./clsx-COFh-Vc8.js";import{a as alignFloatingElements,b as autoUpdate}from"./align-floating-elements-58sFZOrL.js";import"./common-BqV6Zb30.js";import{v as validateInline}from"./inline-D3xGVsIW.js";import{b as validateAlignment}from"./align-D3Z54kEL.js";import{n as nonce}from"./dev.utils-CxpBPLQA.js";import{s as setClick}from"./element-click-BTxuJDNT.js";import{s as setFocus}from"./element-focus-BKUtVrWY.js";const validatePopoverAlign=(e,t)=>{validateAlignment(e,"_popoverAlign",t)},PopoverFC=e=>{const{align:t="bottom",popoverRef:o,arrowRef:i,class:s}=e,n=__rest(e,["align","popoverRef","arrowRef","class"]);return h("div",Object.assign({},n,{class:clsx("kol-popover",s),ref:o,popover:"auto"}),h("div",{class:clsx("kol-popover__arrow",`kol-popover__arrow--${t}`),ref:i}),h("slot",null))};class PopoverController{constructor(){this.show=!1,this.align="bottom",this.setPopoverElementRef=e=>{this.popoverElement=e,this.arrowElement=null==e?void 0:e.querySelector(".kol-popover__arrow")},this.setTriggerElement=e=>{this.triggerElement=e},this.setAlign=e=>{this.align=e},this.alignPopover=async()=>{this.popoverElement&&this.triggerElement&&await alignFloatingElements({align:this.align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement})},this.setupAutoUpdate=()=>{this.popoverElement&&this.triggerElement&&!this.cleanupAutoUpdate&&(this.cleanupAutoUpdate=autoUpdate(this.triggerElement,this.popoverElement,()=>{this.alignPopover()}))}}setShow(e){if(this.show=e,!this.popoverElement)return;const t=()=>{var e;if(!this.popoverElement)return;const t=this.popoverElement.matches(":popover-open");if(this.show){if(!t)try{this.popoverElement.showPopover(),this.setupAutoUpdate(),this.alignPopover()}catch(e){}}else if(t)try{this.popoverElement.hidePopover(),null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.cleanupAutoUpdate=void 0}catch(e){}};this.popoverElement.isConnected?t():requestAnimationFrame(()=>{t()})}destroy(){var e;null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.cleanupAutoUpdate=void 0,this.popoverElement=void 0,this.arrowElement=void 0,this.triggerElement=void 0}}const KolPopoverButtonWc=class{constructor(e){registerInstance(this,e),this.popoverCtrl=new PopoverController,this.popoverId=`popover-${nonce()}`,this.setPopoverElementRef=e=>{this.popoverElement=e,this.popoverCtrl.setPopoverElementRef(e)},this.setButtonElementRef=e=>{this.refButton=e,e&&this.popoverCtrl.setTriggerElement(e)},this.on={onClick:()=>{this.popoverCtrl.setShow(!this.popoverOpen)}},this.state={_label:"",_popoverAlign:"bottom",_inline:!1},this.popoverOpen=!1,this.handleToggle=e=>{this.popoverOpen="open"===e.newState},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){this.popoverCtrl.setShow(!1)}async showPopover(){this.popoverCtrl.setShow(!0)}async focus(){return setFocus(this.refButton)}async click(){return setClick(this.refButton)}render(){return h(Fragment,null,h(KolButtonWcTag,{key:"8cecd7721585386caaa78d5aba1aec45e2f13613",class:clsx("kol-popover-button",{"kol-popover-button--open":this.popoverOpen,"kol-popover-button--inline":!0===this.state._inline,"kol-popover-button--standalone":!1===this.state._inline}),_accessKey:this._accessKey,_ariaControls:this.popoverId,_ariaDescription:this._ariaDescription,_ariaExpanded:this.popoverOpen,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_inline:this._inline,_label:this._label,_name:this._name,_on:this.on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant,ref:this.setButtonElementRef},h("slot",{key:"55fa847ba181d6bff3f707ebc2568ddf39411241",name:"expert",slot:"expert"})),h(PopoverFC,{key:"133bde88cf07b1bbd07195676ca9e4e9218d9ccd",align:this.state._popoverAlign||"bottom",popoverRef:this.setPopoverElementRef,class:"kol-popover-button__popover",id:this.popoverId},h("slot",{key:"11b4154b05f0cb5e9b839d92444b799c2df5bf08"})))}validateInline(e){validateInline(this,e,{defaultValue:!1})}validatePopoverAlign(e){validatePopoverAlign(this,e),e&&this.popoverCtrl.setAlign(e)}componentWillLoad(){this.validateInline(this._inline),this.validatePopoverAlign(this._popoverAlign)}componentDidRender(){this.popoverElement&&this.popoverElement.addEventListener("toggle",this.handleToggle),this.state._popoverAlign&&this.popoverCtrl.setAlign(this.state._popoverAlign)}disconnectedCallback(){this.popoverElement&&this.popoverElement.removeEventListener("toggle",this.handleToggle),this.popoverCtrl.destroy(),this.popoverElement=void 0}static get watchers(){return{_inline:["validateInline"],_popoverAlign:["validatePopoverAlign"]}}};export{KolPopoverButtonWc as kol_popover_button_wc};