@public-ui/components 4.0.1-rc.0 → 4.0.1-rc.2

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as s,g as e}from"./index-CuUGQ2WZ.js";import{M as a,S as o,w as n,G as l,p as h}from"./common-BXXICkFX.js";import{v as r}from"./custom-class-B6h_ZSR7.js";import{v as _}from"./label-Dkj9sxQK.js";import{v as p}from"./tooltip-align-P-7pyT1i.js";import{m as u,d as c}from"./component-names-B_kYyA8u.js";import{t as g}from"./i18n-CvQhdUrE.js";import{n as f}from"./dev.utils-DmS6gtOI.js";import{d,K as b}from"./events-DHTi_wtD.js";import{r as m,a as v}from"./unique-nav-labels-B6560U3V.js";import"./align-C_bkzA-y.js";import"./i18n-B0tfVPMa.js";const k=(t,s,e)=>{a(t,"_max",s,e)},y={left:"kolicon-chevron-double-left"},C={left:"kolicon-chevron-left"},S={right:"kolicon-chevron-right"},z={right:"kolicon-chevron-double-right"};function x(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}const j=x(),B=new Intl.NumberFormat(j,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),P=class{constructor(a){t(this,a),this.nonce=f(),this.translatePageFirst=g("kol-page-first"),this.translatePageBack=g("kol-page-back"),this.translatePageNext=g("kol-page-next"),this.translatePageLast=g("kol-page-last"),this.translateEntriesPerSite=g("kol-entries-per-site"),this.translatePage=g("kol-page"),this.translatePagination=g("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&&d(this.host,b.click,a),this.onChangePage(t,a)},this.onChangePage=(t,a)=>{const s=setTimeout(()=>{clearTimeout(s),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,a),this.host&&d(this.host,b.changePage,a)})},this.onChangePageSize=(t,a)=>{if("number"==typeof(a=parseInt(a))&&a>0&&this._pageSize!==a){this._pageSize=a;const s=setTimeout(()=>{clearTimeout(s),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize),this.host&&d(this.host,b.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 s=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize;const e=a.has("_pageSizeOptions")?a.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(e)&&e.length>0){const t=e.find(t=>t.value===s);s=void 0===t?e[0].value:t.value,a.set("_pageSize",s)}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,s,e)=>{if(e>0){const i=this.calcCount(e,s);i>0&&(a>i?(t.set("_page",i),this.onChangePage(o,i)):a<1&&(t.set("_page",1),this.onChangePage(o,1)))}},this.beforePageSizeOptions=(t,a)=>{const s=[];if(Array.isArray(t))for(const a of t)"number"==typeof a&&s.push({label:`${a}`,value:a});a.set("_pageSizeOptions",s),this.beforePageSize(s,a)}}getPageStart(){return(this.state._page-1)*this.state._pageSize+1+""}getPageEnd(){return this.state._page*this.state._pageSize+""}render(){var t;let a=!1;const e=this.getCount(),o=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,i("li",{key:f()},i("span",{class:"kol-pagination__separator","aria-hidden":"true"}))):null);return i(s,{class:"kol-pagination"},i("span",{role:"status","aria-live":"polite"},g("kol-table-visible-range",{placeholders:{start:this.getPageStart(),end:this.getPageEnd(),total:this.state._max.toString()}})),i("nav",{class:"kol-pagination__navigation","aria-label":this.state._label},i("ul",{class:"kol-pagination__navigation-list"},this.state._hasButtons.first&&i("li",null,i(c,{class:"kol-pagination__button kol-pagination__button--first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:y,_hideLabel:!0,_label:this.translatePageFirst,_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&i("li",null,i(c,{class:"kol-pagination__button kol-pagination__button--previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:C,_hideLabel:!0,_label:this.translatePageBack,_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),o,this.state._hasButtons.next&&i("li",null,i(c,{class:"kol-pagination__button kol-pagination__button--next",exportparts:"icon",_customClass:this.state._customClass,_disabled:e<=this.state._page,_icons:S,_hideLabel:!0,_label:this.translatePageNext,_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&i("li",null,i(c,{class:"kol-pagination__button kol-pagination__button--last",exportparts:"icon",_customClass:this.state._customClass,_disabled:e<=this.state._page,_icons:z,_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&&i("div",{class:"page-size"},i(u,{class:"kol-pagination__page-size-select",_id:`pagination-size-${this.nonce}`,_label:this.translateEntriesPerSite,_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:this.state._pageSize})))}getUnselectedPageButton(t){const a=B.format(t),s=`${this.translatePage} ${a}`;return i("li",{key:f()},i(c,{class:"kol-pagination__button",_ariaDescription:s,_customClass:this.state._customClass,_label:a,_on:{onClick:a=>{this.onClick(a,t)}}}))}getSelectedPageButton(t){const a=B.format(t),s=`${this.translatePage} ${a}`;return i("li",{key:f()},i(c,{"aria-current":"page",class:"kol-pagination__button kol-pagination__button--selected selected",_ariaDescription:s,_customClass:this.state._customClass,_disabled:!0,_label:a}))}validateBoundaryCount(t){a(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){r(this,t)}validateLabel(t,a,s=!1){s||m(this.state._label),_(this,t),v(this.state._label)}validateHasButtons(t){n(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=h(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){a(this,"_page",t,{hooks:{beforePatch:(t,a)=>{const s=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize,e=a.has("_max")?a.get("_max"):this.state._max;this.syncPage(a,t,s,e)}}})}validatePageSize(t){a(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){l(this,"_pageSizeOptions",t=>"number"==typeof t,t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){a(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){k(this,t,{hooks:{beforePatch:(t,a)=>{const s=a.has("_page")?a.get("_page"):this.state._page,e=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize;this.syncPage(a,s,e,t)}}})}validateTooltipAlign(t){p(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(){m(this.state._label)}get host(){return e(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{P as kol_pagination_wc};
+import{r as t,h as i,H as s,g as e}from"./index-Zs2j78jP.js";import{M as a,S as o,w as n,G as l,p as h}from"./common-BXXICkFX.js";import{v as r}from"./custom-class-B6h_ZSR7.js";import{v as _}from"./label-Dkj9sxQK.js";import{v as p}from"./tooltip-align-P-7pyT1i.js";import{m as u,d as c}from"./component-names-B_kYyA8u.js";import{t as g}from"./i18n-CvQhdUrE.js";import{n as f}from"./dev.utils-DIHEE-25.js";import{d,K as b}from"./events-DHTi_wtD.js";import{r as m,a as v}from"./unique-nav-labels-B6560U3V.js";import"./align-C_bkzA-y.js";import"./i18n-B0tfVPMa.js";const k=(t,s,e)=>{a(t,"_max",s,e)},y={left:"kolicon-chevron-double-left"},C={left:"kolicon-chevron-left"},S={right:"kolicon-chevron-right"},z={right:"kolicon-chevron-double-right"};function j(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}const x=j(),B=new Intl.NumberFormat(x,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),P=class{constructor(a){t(this,a),this.nonce=f(),this.translatePageFirst=g("kol-page-first"),this.translatePageBack=g("kol-page-back"),this.translatePageNext=g("kol-page-next"),this.translatePageLast=g("kol-page-last"),this.translateEntriesPerSite=g("kol-entries-per-site"),this.translatePage=g("kol-page"),this.translatePagination=g("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&&d(this.host,b.click,a),this.onChangePage(t,a)},this.onChangePage=(t,a)=>{const s=setTimeout(()=>{clearTimeout(s),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,a),this.host&&d(this.host,b.changePage,a)})},this.onChangePageSize=(t,a)=>{if("number"==typeof(a=parseInt(a))&&a>0&&this._pageSize!==a){this._pageSize=a;const s=setTimeout(()=>{clearTimeout(s),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize),this.host&&d(this.host,b.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 s=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize;const e=a.has("_pageSizeOptions")?a.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(e)&&e.length>0){const t=e.find(t=>t.value===s);s=void 0===t?e[0].value:t.value,a.set("_pageSize",s)}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,s,e)=>{if(e>0){const i=this.calcCount(e,s);i>0&&(a>i?(t.set("_page",i),this.onChangePage(o,i)):a<1&&(t.set("_page",1),this.onChangePage(o,1)))}},this.beforePageSizeOptions=(t,a)=>{const s=[];if(Array.isArray(t))for(const a of t)"number"==typeof a&&s.push({label:`${a}`,value:a});a.set("_pageSizeOptions",s),this.beforePageSize(s,a)}}getPageStart(){return(this.state._page-1)*this.state._pageSize+1+""}getPageEnd(){return this.state._page*this.state._pageSize+""}render(){var t;let a=!1;const e=this.getCount(),o=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,i("li",{key:f()},i("span",{class:"kol-pagination__separator","aria-hidden":"true"}))):null);return i(s,{class:"kol-pagination"},i("span",{role:"status","aria-live":"polite"},g("kol-table-visible-range",{placeholders:{start:this.getPageStart(),end:this.getPageEnd(),total:this.state._max.toString()}})),i("nav",{class:"kol-pagination__navigation","aria-label":this.state._label},i("ul",{class:"kol-pagination__navigation-list"},this.state._hasButtons.first&&i("li",null,i(c,{class:"kol-pagination__button kol-pagination__button--first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:y,_hideLabel:!0,_label:this.translatePageFirst,_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&i("li",null,i(c,{class:"kol-pagination__button kol-pagination__button--previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:C,_hideLabel:!0,_label:this.translatePageBack,_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),o,this.state._hasButtons.next&&i("li",null,i(c,{class:"kol-pagination__button kol-pagination__button--next",exportparts:"icon",_customClass:this.state._customClass,_disabled:e<=this.state._page,_icons:S,_hideLabel:!0,_label:this.translatePageNext,_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&i("li",null,i(c,{class:"kol-pagination__button kol-pagination__button--last",exportparts:"icon",_customClass:this.state._customClass,_disabled:e<=this.state._page,_icons:z,_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&&i("div",{class:"page-size"},i(u,{class:"kol-pagination__page-size-select",_id:`pagination-size-${this.nonce}`,_label:this.translateEntriesPerSite,_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:this.state._pageSize})))}getUnselectedPageButton(t){const a=B.format(t),s=`${this.translatePage} ${a}`;return i("li",{key:f()},i(c,{class:"kol-pagination__button",_ariaDescription:s,_customClass:this.state._customClass,_label:a,_on:{onClick:a=>{this.onClick(a,t)}}}))}getSelectedPageButton(t){const a=B.format(t),s=`${this.translatePage} ${a}`;return i("li",{key:f()},i(c,{"aria-current":"page",class:"kol-pagination__button kol-pagination__button--selected selected",_ariaDescription:s,_customClass:this.state._customClass,_disabled:!0,_label:a}))}validateBoundaryCount(t){a(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){r(this,t)}validateLabel(t,a,s=!1){s||m(this.state._label),_(this,t),v(this.state._label)}validateHasButtons(t){n(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=h(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){a(this,"_page",t,{hooks:{beforePatch:(t,a)=>{const s=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize,e=a.has("_max")?a.get("_max"):this.state._max;this.syncPage(a,t,s,e)}}})}validatePageSize(t){a(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){l(this,"_pageSizeOptions",t=>"number"==typeof t,t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){a(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){k(this,t,{hooks:{beforePatch:(t,a)=>{const s=a.has("_page")?a.get("_page"):this.state._page,e=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize;this.syncPage(a,s,e,t)}}})}validateTooltipAlign(t){p(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(){m(this.state._label)}get host(){return e(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{P as kol_pagination_wc};

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

@@ -1 +1 @@
-{"version":3,"file":"kol-pagination.entry.esm.js","sources":["src/components/pagination/style.scss?tag=kol-pagination&mode=default&encapsulation=shadow","src/components/pagination/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n@use '../@shared/kol-pagination-mixin' as *;\n\n@layer kol-component {\n\t@include kol-pagination-styles;\n}\n","import type {\n\tCustomClassPropType,\n\tKoliBriPaginationButtonCallbacks,\n\tLabelPropType,\n\tMaxPropType,\n\tPaginationHasButton,\n\tPaginationProps,\n\tStringified,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\n\nimport { KolPaginationWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements PaginationProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPaginationWcTag\n\t\t\t\t_boundaryCount={this._boundaryCount}\n\t\t\t\t_label={this._label}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_on={this._on}\n\t\t\t\t_hasButtons={this._hasButtons}\n\t\t\t\t_page={this._page}\n\t\t\t\t_pageSize={this._pageSize}\n\t\t\t\t_pageSizeOptions={this._pageSizeOptions}\n\t\t\t\t_siblingCount={this._siblingCount}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_max={this._max}\n\t\t\t></KolPaginationWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the amount of pages to show next to the outer arrow buttons.\n\t */\n\t@Prop() public _boundaryCount?: number = 1;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which navigation buttons to render (first, last, next, previous buttons).\n\t */\n\t@Prop() public _hasButtons?: boolean | Stringified<PaginationHasButton> = true;\n\n\t/**\n\t * Defines the current page.\n\t */\n\t@Prop() public _page!: number;\n\n\t/**\n\t * Defines the amount of entries to show per page.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _pageSize = 1;\n\n\t/**\n\t * Defines the options for the page-size-select.\n\t */\n\t@Prop() public _pageSizeOptions: Stringified<number[]> = [];\n\n\t/**\n\t * Gibt an, auf welche Callback-Events reagiert werden.\n\t */\n\t@Prop() public _on!: KoliBriPaginationButtonCallbacks;\n\n\t/**\n\t * Defines the amount of pages to show next to the current page.\n\t */\n\t@Prop() public _siblingCount?: number = 1;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines the maximum value of the element.\n\t */\n\t@Prop() public _max!: MaxPropType;\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,i2TAAi2T;;MCuB52T,aAAa,GAAA,MAAA;AAP1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AA6BgB,QAAA,IAAc,CAAA,cAAA,GAAY,CAAC;AAe3B,QAAA,IAAW,CAAA,WAAA,GAAgD,IAAI;AAU9B,QAAA,IAAS,CAAA,SAAA,GAAG,CAAC;AAK9C,QAAA,IAAgB,CAAA,gBAAA,GAA0B,EAAE;AAU5C,QAAA,IAAa,CAAA,aAAA,GAAY,CAAC;AAK1B,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAM3D;IAxEO,MAAM,GAAA;AACZ,QAAA,QACC,CAAA,CAAC,kBAAkB,EAAA,EAAA,GAAA,EAAA,0CAAA,EAClB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CACM;;;;;;;;;"}
+{"version":3,"file":"kol-pagination.entry.esm.js","sources":["src/components/pagination/style.scss?tag=kol-pagination&mode=default&encapsulation=shadow","src/components/pagination/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../tooltip/style.scss' as *;\n@use '../@shared/kol-pagination-mixin' as *;\n\n@layer kol-component {\n\t@include kol-pagination-styles;\n}\n","import type {\n\tCustomClassPropType,\n\tKoliBriPaginationButtonCallbacks,\n\tLabelPropType,\n\tMaxPropType,\n\tPaginationHasButton,\n\tPaginationProps,\n\tStringified,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\n\nimport { KolPaginationWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements PaginationProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPaginationWcTag\n\t\t\t\t_boundaryCount={this._boundaryCount}\n\t\t\t\t_label={this._label}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_on={this._on}\n\t\t\t\t_hasButtons={this._hasButtons}\n\t\t\t\t_page={this._page}\n\t\t\t\t_pageSize={this._pageSize}\n\t\t\t\t_pageSizeOptions={this._pageSizeOptions}\n\t\t\t\t_siblingCount={this._siblingCount}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_max={this._max}\n\t\t\t></KolPaginationWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the amount of pages to show next to the outer arrow buttons.\n\t */\n\t@Prop() public _boundaryCount?: number = 1;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which navigation buttons to render (first, last, next, previous buttons).\n\t */\n\t@Prop() public _hasButtons?: boolean | Stringified<PaginationHasButton> = true;\n\n\t/**\n\t * Defines the current page.\n\t */\n\t@Prop() public _page!: number;\n\n\t/**\n\t * Defines the amount of entries to show per page.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _pageSize = 1;\n\n\t/**\n\t * Defines the options for the page-size-select.\n\t */\n\t@Prop() public _pageSizeOptions: Stringified<number[]> = [];\n\n\t/**\n\t * Gibt an, auf welche Callback-Events reagiert werden.\n\t */\n\t@Prop() public _on!: KoliBriPaginationButtonCallbacks;\n\n\t/**\n\t * Defines the amount of pages to show next to the current page.\n\t */\n\t@Prop() public _siblingCount?: number = 1;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines the maximum value of the element.\n\t */\n\t@Prop() public _max!: MaxPropType;\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,q1TAAq1T;;MCuBh2T,aAAa,GAAA,MAAA;AAP1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AA6BgB,QAAA,IAAc,CAAA,cAAA,GAAY,CAAC;AAe3B,QAAA,IAAW,CAAA,WAAA,GAAgD,IAAI;AAU9B,QAAA,IAAS,CAAA,SAAA,GAAG,CAAC;AAK9C,QAAA,IAAgB,CAAA,gBAAA,GAA0B,EAAE;AAU5C,QAAA,IAAa,CAAA,aAAA,GAAY,CAAC;AAK1B,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAM3D;IAxEO,MAAM,GAAA;AACZ,QAAA,QACC,CAAA,CAAC,kBAAkB,EAAA,EAAA,GAAA,EAAA,0CAAA,EAClB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CACM;;;;;;;;;"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-CuUGQ2WZ.js";import{j as t}from"./component-names-B_kYyA8u.js";import"./common-BXXICkFX.js";const o='@charset "UTF-8";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-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 {\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--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .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:not(:empty)) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\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    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-pagination {\n    display: flex;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\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}',i=class{constructor(e){n(this,e),this._boundaryCount=1,this._hasButtons=!0,this._pageSize=1,this._pageSizeOptions=[],this._siblingCount=1,this._tooltipAlign="top"}render(){return e(t,{key:"1676901a636d4529bff96b9b85e49977f93beaad",_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})}};i.style={default:o};export{i as kol_pagination};
+import{r as n,h as e}from"./index-Zs2j78jP.js";import{j as t}from"./component-names-B_kYyA8u.js";import"./common-BXXICkFX.js";const o='@charset "UTF-8";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-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 {\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--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\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:not(:empty)) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\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    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-pagination {\n    display: flex;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\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}',i=class{constructor(e){n(this,e),this._boundaryCount=1,this._hasButtons=!0,this._pageSize=1,this._pageSizeOptions=[],this._siblingCount=1,this._tooltipAlign="top"}render(){return e(t,{key:"1676901a636d4529bff96b9b85e49977f93beaad",_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})}};i.style={default:o};export{i as kol_pagination};

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

@@ -1 +1 @@
-{"version":3,"names":["registerInstance","h","KolPaginationWcTag","defaultStyleCss","KolPagination","constructor","hostRef","this","_boundaryCount","_hasButtons","_pageSize","_pageSizeOptions","_siblingCount","_tooltipAlign","render","key","_label","_customClass","_on","_page","_max","style","default"],"sources":["0"],"mappings":";;;YAGcA,OAAkBC,MAAS,kCAC3BC,MAA0B,sCACjC,uBAEP,MAAMC,EAAkB,21TAExB,MAAMC,EAAgB,MAClB,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GACvBC,KAAKC,eAAiB,EACtBD,KAAKE,YAAc,KACnBF,KAAKG,UAAY,EACjBH,KAAKI,iBAAmB,GACxBJ,KAAKK,cAAgB,EACrBL,KAAKM,cAAgB,KACzB,CACA,MAAAC,GACI,OAAQb,EAAEC,EAAoB,CAAEa,IAAK,2CAA4CP,eAAgBD,KAAKC,eAAgBQ,OAAQT,KAAKS,OAAQC,aAAcV,KAAKU,aAAcC,IAAKX,KAAKW,IAAKT,YAAaF,KAAKE,YAAaU,MAAOZ,KAAKY,MAAOT,UAAWH,KAAKG,UAAWC,iBAAkBJ,KAAKI,iBAAkBC,cAAeL,KAAKK,cAAeC,cAAeN,KAAKM,cAAeO,KAAMb,KAAKa,MACtY,GAEJhB,EAAciB,MAAQ,CAClBC,QAASnB,UAGJC","ignoreList":[]}
+{"version":3,"names":["registerInstance","h","KolPaginationWcTag","defaultStyleCss","KolPagination","constructor","hostRef","this","_boundaryCount","_hasButtons","_pageSize","_pageSizeOptions","_siblingCount","_tooltipAlign","render","key","_label","_customClass","_on","_page","_max","style","default"],"sources":["0"],"mappings":";;;YAGcA,OAAkBC,MAAS,kCAC3BC,MAA0B,sCACjC,uBAEP,MAAMC,EAAkB,m1TAExB,MAAMC,EAAgB,MAClB,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GACvBC,KAAKC,eAAiB,EACtBD,KAAKE,YAAc,KACnBF,KAAKG,UAAY,EACjBH,KAAKI,iBAAmB,GACxBJ,KAAKK,cAAgB,EACrBL,KAAKM,cAAgB,KACzB,CACA,MAAAC,GACI,OAAQb,EAAEC,EAAoB,CAAEa,IAAK,2CAA4CP,eAAgBD,KAAKC,eAAgBQ,OAAQT,KAAKS,OAAQC,aAAcV,KAAKU,aAAcC,IAAKX,KAAKW,IAAKT,YAAaF,KAAKE,YAAaU,MAAOZ,KAAKY,MAAOT,UAAWH,KAAKG,UAAWC,iBAAkBJ,KAAKI,iBAAkBC,cAAeL,KAAKK,cAAeC,cAAeN,KAAKM,cAAeO,KAAMb,KAAKa,MACtY,GAEJhB,EAAciB,MAAQ,CAClBC,QAASnB,UAGJC","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i}from"./index-CuUGQ2WZ.js";import{a as e,b as o}from"./align-floating-elements-BmMJhjF1.js";import{c as s}from"./clsx-eK3rPvPS.js";import{d as l}from"./component-names-B_kYyA8u.js";import"./common-BXXICkFX.js";import{v as a}from"./inline-eBYBtb1X.js";import{a as n}from"./align-C_bkzA-y.js";const h=(e,o)=>{n(e,"_popoverAlign",o)},r=class{constructor(e){t(this,e),this.on={onClick:this.handleButtonClick.bind(this)},this.state={_label:"",_popoverAlign:"bottom"},this.justClosed=!1,this.popoverOpen=!1,this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){var e;null===(e=this.refPopover)||void 0===e||e.hidePopover()}async showPopover(){var e;null===(e=this.refPopover)||void 0===e||e.showPopover()}async focus(){var e;return Promise.resolve(null===(e=this.refButton)||void 0===e?void 0:e.focus())}handleBeforeToggle(e){"closed"===e.newState?(this.justClosed=!0,setTimeout(()=>{this.justClosed=!1},10)):this.refPopover&&(this.refPopover.style.visibility="hidden")}alignPopover(){this.refPopover&&this.refButton&&e({align:this.state._popoverAlign,floatingElement:this.refPopover,referenceElement:this.refButton})}handleToggle(e){this.popoverOpen="open"===e.newState,this.popoverOpen?this.refPopover&&this.refButton&&(this.cleanupAutoPositioning=o(this.refButton,this.refPopover,()=>{this.alignPopover()})):this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)}handleButtonClick(){var e;this.justClosed||null===(e=this.refPopover)||void 0===e||e.togglePopover()}componentDidRender(){var e,o;null===(e=this.refPopover)||void 0===e||e.addEventListener("toggle",this.handleToggle.bind(this)),null===(o=this.refPopover)||void 0===o||o.addEventListener("beforetoggle",this.handleBeforeToggle.bind(this))}disconnectedCallback(){var e,o,t;null===(e=this.refPopover)||void 0===e||e.removeEventListener("toggle",this.handleToggle.bind(this)),null===(o=this.refPopover)||void 0===o||o.removeEventListener("beforetoggle",this.handleBeforeToggle.bind(this)),null===(t=this.cleanupAutoPositioning)||void 0===t||t.call(this)}render(){return i("div",{key:"05eb5491e975895b8f80ebcf9b079efc6a3ad442",class:s("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})},i(l,{key:"7e53bed4c4d0dbdeaf3cb335d91c44e4ffcbd882",_accessKey:this._accessKey,"_aria-controls":"popover",_ariaDescription:this._ariaDescription,_ariaExpanded:this.popoverOpen,_ariaHasPopup:"dialog",_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,_buttonVariant:this._variant,"data-testid":"popover-button",class:"kol-popover-button__button",ref:e=>this.refButton=e},i("slot",{key:"0d82bdca912994fa708ce548f36fd041ca620bbb",name:"expert",slot:"expert"})),i("div",{key:"aeb5ed2632a1136020e2397bdaacfe5178364608",ref:e=>this.refPopover=e,"data-testid":"popover-content",popover:"auto",id:"popover",class:"kol-popover-button__popover"},i("slot",{key:"a2e4cb60931f24e3f67a0ee39bedc921605ef55f"})))}validateInline(e){a(this,e,{defaultValue:!1})}validatePopoverAlign(e){h(this,e)}componentWillLoad(){this.validateInline(this._inline),this.validatePopoverAlign(this._popoverAlign)}static get watchers(){return{_inline:["validateInline"],_popoverAlign:["validatePopoverAlign"]}}};export{r as kol_popover_button_wc};
+import{r as t,h as i}from"./index-Zs2j78jP.js";import{a as e,b as o}from"./align-floating-elements-BmMJhjF1.js";import{c as s}from"./clsx-eK3rPvPS.js";import{d as l}from"./component-names-B_kYyA8u.js";import"./common-BXXICkFX.js";import{v as a}from"./inline-eBYBtb1X.js";import{a as n}from"./align-C_bkzA-y.js";const h=(e,o)=>{n(e,"_popoverAlign",o)},r=class{constructor(e){t(this,e),this.on={onClick:this.handleButtonClick.bind(this)},this.state={_label:"",_popoverAlign:"bottom"},this.justClosed=!1,this.popoverOpen=!1,this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){var e;null===(e=this.refPopover)||void 0===e||e.hidePopover()}async showPopover(){var e;null===(e=this.refPopover)||void 0===e||e.showPopover()}async focus(){var e;return Promise.resolve(null===(e=this.refButton)||void 0===e?void 0:e.focus())}handleBeforeToggle(e){"closed"===e.newState?(this.justClosed=!0,setTimeout(()=>{this.justClosed=!1},10)):this.refPopover&&(this.refPopover.style.visibility="hidden")}alignPopover(){this.refPopover&&this.refButton&&e({align:this.state._popoverAlign,floatingElement:this.refPopover,referenceElement:this.refButton})}handleToggle(e){this.popoverOpen="open"===e.newState,this.popoverOpen?this.refPopover&&this.refButton&&(this.cleanupAutoPositioning=o(this.refButton,this.refPopover,()=>{this.alignPopover()})):this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)}handleButtonClick(){var e;this.justClosed||null===(e=this.refPopover)||void 0===e||e.togglePopover()}componentDidRender(){var e,o;null===(e=this.refPopover)||void 0===e||e.addEventListener("toggle",this.handleToggle.bind(this)),null===(o=this.refPopover)||void 0===o||o.addEventListener("beforetoggle",this.handleBeforeToggle.bind(this))}disconnectedCallback(){var e,o,t;null===(e=this.refPopover)||void 0===e||e.removeEventListener("toggle",this.handleToggle.bind(this)),null===(o=this.refPopover)||void 0===o||o.removeEventListener("beforetoggle",this.handleBeforeToggle.bind(this)),null===(t=this.cleanupAutoPositioning)||void 0===t||t.call(this)}render(){return i("div",{key:"05eb5491e975895b8f80ebcf9b079efc6a3ad442",class:s("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})},i(l,{key:"7e53bed4c4d0dbdeaf3cb335d91c44e4ffcbd882",_accessKey:this._accessKey,"_aria-controls":"popover",_ariaDescription:this._ariaDescription,_ariaExpanded:this.popoverOpen,_ariaHasPopup:"dialog",_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,_buttonVariant:this._variant,"data-testid":"popover-button",class:"kol-popover-button__button",ref:e=>this.refButton=e},i("slot",{key:"0d82bdca912994fa708ce548f36fd041ca620bbb",name:"expert",slot:"expert"})),i("div",{key:"aeb5ed2632a1136020e2397bdaacfe5178364608",ref:e=>this.refPopover=e,"data-testid":"popover-content",popover:"auto",id:"popover",class:"kol-popover-button__popover"},i("slot",{key:"a2e4cb60931f24e3f67a0ee39bedc921605ef55f"})))}validateInline(e){a(this,e,{defaultValue:!1})}validatePopoverAlign(e){h(this,e)}componentWillLoad(){this.validateInline(this._inline),this.validatePopoverAlign(this._popoverAlign)}static get watchers(){return{_inline:["validateInline"],_popoverAlign:["validatePopoverAlign"]}}};export{r as kol_popover_button_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-CuUGQ2WZ.js";import{k as t}from"./component-names-B_kYyA8u.js";import"./common-BXXICkFX.js";const o="@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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-popover-button--open .kol-button__tooltip {\n    display: none;\n  }\n  .kol-popover-button--inline .kol-button {\n    min-width: 0;\n    min-height: 1em;\n  }\n}",i=class{constructor(e){n(this,e),this.catchRef=n=>{this.ref=n},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){var n;null===(n=this.ref)||void 0===n||n.hidePopover()}async showPopover(){var n;null===(n=this.ref)||void 0===n||n.showPopover()}async focus(){var n;return Promise.resolve(null===(n=this.ref)||void 0===n?void 0:n.focus())}render(){return e(t,{key:"8f5494e308245dc5cf00f3c44e76954dc1ccb8ba",ref:this.catchRef,_accessKey:this._accessKey,_ariaDescription:this._ariaDescription,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_inline:this._inline,_label:this._label,_name:this._name,_popoverAlign:this._popoverAlign,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},e("slot",{key:"945bd61cfb5ba388bf76a9aaa44c4640cac733c6",name:"expert",slot:"expert"}),e("slot",{key:"349bf90ff34df330916d1aad0a40c79cce1c32bc"}))}};i.style={default:o};export{i as kol_popover_button};
+import{r as n,h as e}from"./index-Zs2j78jP.js";import{k as t}from"./component-names-B_kYyA8u.js";import"./common-BXXICkFX.js";const o="@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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-popover-button--open .kol-button__tooltip {\n    display: none;\n  }\n  .kol-popover-button--inline .kol-button {\n    min-width: 0;\n    min-height: 1em;\n  }\n}",i=class{constructor(e){n(this,e),this.catchRef=n=>{this.ref=n},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){var n;null===(n=this.ref)||void 0===n||n.hidePopover()}async showPopover(){var n;null===(n=this.ref)||void 0===n||n.showPopover()}async focus(){var n;return Promise.resolve(null===(n=this.ref)||void 0===n?void 0:n.focus())}render(){return e(t,{key:"8f5494e308245dc5cf00f3c44e76954dc1ccb8ba",ref:this.catchRef,_accessKey:this._accessKey,_ariaDescription:this._ariaDescription,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_inline:this._inline,_label:this._label,_name:this._name,_popoverAlign:this._popoverAlign,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},e("slot",{key:"945bd61cfb5ba388bf76a9aaa44c4640cac733c6",name:"expert",slot:"expert"}),e("slot",{key:"349bf90ff34df330916d1aad0a40c79cce1c32bc"}))}};i.style={default:o};export{i as kol_popover_button};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as s}from"./index-CuUGQ2WZ.js";import{a as o,b as e}from"./align-floating-elements-BmMJhjF1.js";import{w as h,r as l}from"./common-BXXICkFX.js";import{v as r}from"./align-C_bkzA-y.js";import{v as n}from"./show-DVtFSh7x.js";import{c as a}from"./clsx-eK3rPvPS.js";import{d,K as c}from"./events-DHTi_wtD.js";const v=(e,t)=>{h(e,"_on",e=>"object"==typeof e&&null!==e,new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)},f=class{constructor(t){i(this,t),this.alignPopover=async()=>{this.popoverElement&&(this.triggerElement&&await o({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.popoverElement.style.removeProperty("visibility"))},this.handleBeforeToggle=e=>{"open"===e.newState&&this.popoverElement&&(this.popoverElement.style.visibility="hidden")},this.handleToggle=t=>{var o,i,s,l,n,r;const h=t,a="open"===h.newState;if(this.state=Object.assign(Object.assign({},this.state),{_show:a,_visible:a}),a)null===(o=this.cleanupAutoUpdate)||void 0===o||o.call(this),this.triggerElement&&this.popoverElement&&(this.cleanupAutoUpdate=e(this.triggerElement,this.popoverElement,()=>{this.alignPopover()})),this.addListenersToBody(),this.alignPopover();else{null===(i=this.cleanupAutoUpdate)||void 0===i||i.call(this),this.cleanupAutoUpdate=void 0,this.removeListenersFromBody();const e=null!==(s=this.lastCloseEvent)&&void 0!==s?s:h;this.lastCloseEvent=void 0,null===(l=this.triggerElement)||void 0===l||l.focus(),null===(r=null===(n=this.state._on)||void 0===n?void 0:n.onClose)||void 0===r||r.call(n,e),this.host&&d(this.host,c.close)}this._show!==a&&(this._show=a)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement&&(this.popoverElement.removeEventListener("beforetoggle",this.handleBeforeToggle),this.popoverElement.removeEventListener("toggle",this.handleToggle)),this.popoverElement=e,this.popoverElement&&(this.popoverElement.addEventListener("beforetoggle",this.handleBeforeToggle),this.popoverElement.addEventListener("toggle",this.handleToggle),this.syncPopoverVisibility())},this.catchArrowElement=e=>{this.arrowElement=e},this.requestHide=e=>{var t;this.lastCloseEvent=e,null===(t=this.popoverElement)||void 0===t||t.hidePopover()},this.handleEscape=e=>{"Escape"===e.key&&this.requestHide(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.requestHide(e)},this.handleScroll=()=>{this.alignPopover()},this._align="top",this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}addListenersToBody(){var e;const t=l(),o=t.body;o.addEventListener("keyup",this.handleEscape,{capture:!0}),o.addEventListener("click",this.hidePopoverByClickOutside,{capture:!0}),null===(e=t.scrollingElement)||void 0===e||e.addEventListener("scroll",this.handleScroll,{passive:!0})}removeListenersFromBody(){var e;const t=l(),o=t.body;o.removeEventListener("keyup",this.handleEscape,{capture:!0}),o.removeEventListener("click",this.hidePopoverByClickOutside,{capture:!0}),null===(e=t.scrollingElement)||void 0===e||e.removeEventListener("scroll",this.handleScroll)}syncPopoverVisibility(){if(!this.popoverElement)return;const e=()=>{if(!this.popoverElement)return;const e=this.popoverElement.matches(":popover-open");this._show?e||this.popoverElement.showPopover():e&&this.popoverElement.hidePopover()};this.popoverElement.isConnected?e():requestAnimationFrame(()=>{e()})}render(){return t(s,{key:"2f8909c00120d1d00d56f0a891bf137e968b482f",ref:this.catchHostAndTriggerElement,class:"kol-popover"},t("div",{key:"d04819e7919b23042debe87158f189889c95e9ca",class:a("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,popover:"auto"},t("div",{key:"e5a08ef22c2ee7c3dc8f1ca25a9b34a14f6076b9",class:a("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),t("slot",{key:"e7d525b678723312037a84233c3d810663c8d4cd"})))}validateAlign(e){r(this,e),this.alignPopover()}validateOn(e){v(this,e)}validateShow(e){if(n(this,e),this.popoverElement){const t=this.popoverElement.matches(":popover-open");if(e){if(!t)try{this.popoverElement.showPopover()}catch(e){}}else if(t)try{this.popoverElement.hidePopover()}catch(e){}}}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}disconnectedCallback(){var e,t,o;null===(e=this.popoverElement)||void 0===e||e.removeEventListener("beforetoggle",this.handleBeforeToggle),null===(t=this.popoverElement)||void 0===t||t.removeEventListener("toggle",this.handleToggle),null===(o=this.cleanupAutoUpdate)||void 0===o||o.call(this),this.cleanupAutoUpdate=void 0,this.removeListenersFromBody()}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}};export{f as kol_popover_wc};
+import{r as i,h as t,H as s}from"./index-Zs2j78jP.js";import{a as o,b as e}from"./align-floating-elements-BmMJhjF1.js";import{w as h,r as l}from"./common-BXXICkFX.js";import{v as r}from"./align-C_bkzA-y.js";import{v as n}from"./show-DVtFSh7x.js";import{c as a}from"./clsx-eK3rPvPS.js";import{d,K as c}from"./events-DHTi_wtD.js";const v=(e,t)=>{h(e,"_on",e=>"object"==typeof e&&null!==e,new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)},f=class{constructor(t){i(this,t),this.alignPopover=async()=>{this.popoverElement&&(this.triggerElement&&await o({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.popoverElement.style.removeProperty("visibility"))},this.handleBeforeToggle=e=>{"open"===e.newState&&this.popoverElement&&(this.popoverElement.style.visibility="hidden")},this.handleToggle=t=>{var o,i,s,l,n,r;const h=t,a="open"===h.newState;if(this.state=Object.assign(Object.assign({},this.state),{_show:a,_visible:a}),a)null===(o=this.cleanupAutoUpdate)||void 0===o||o.call(this),this.triggerElement&&this.popoverElement&&(this.cleanupAutoUpdate=e(this.triggerElement,this.popoverElement,()=>{this.alignPopover()})),this.addListenersToBody(),this.alignPopover();else{null===(i=this.cleanupAutoUpdate)||void 0===i||i.call(this),this.cleanupAutoUpdate=void 0,this.removeListenersFromBody();const e=null!==(s=this.lastCloseEvent)&&void 0!==s?s:h;this.lastCloseEvent=void 0,null===(l=this.triggerElement)||void 0===l||l.focus(),null===(r=null===(n=this.state._on)||void 0===n?void 0:n.onClose)||void 0===r||r.call(n,e),this.host&&d(this.host,c.close)}this._show!==a&&(this._show=a)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement&&(this.popoverElement.removeEventListener("beforetoggle",this.handleBeforeToggle),this.popoverElement.removeEventListener("toggle",this.handleToggle)),this.popoverElement=e,this.popoverElement&&(this.popoverElement.addEventListener("beforetoggle",this.handleBeforeToggle),this.popoverElement.addEventListener("toggle",this.handleToggle),this.syncPopoverVisibility())},this.catchArrowElement=e=>{this.arrowElement=e},this.requestHide=e=>{var t;this.lastCloseEvent=e,null===(t=this.popoverElement)||void 0===t||t.hidePopover()},this.handleEscape=e=>{"Escape"===e.key&&this.requestHide(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.requestHide(e)},this.handleScroll=()=>{this.alignPopover()},this._align="top",this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}addListenersToBody(){var e;const t=l(),o=t.body;o.addEventListener("keyup",this.handleEscape,{capture:!0}),o.addEventListener("click",this.hidePopoverByClickOutside,{capture:!0}),null===(e=t.scrollingElement)||void 0===e||e.addEventListener("scroll",this.handleScroll,{passive:!0})}removeListenersFromBody(){var e;const t=l(),o=t.body;o.removeEventListener("keyup",this.handleEscape,{capture:!0}),o.removeEventListener("click",this.hidePopoverByClickOutside,{capture:!0}),null===(e=t.scrollingElement)||void 0===e||e.removeEventListener("scroll",this.handleScroll)}syncPopoverVisibility(){if(!this.popoverElement)return;const e=()=>{if(!this.popoverElement)return;const e=this.popoverElement.matches(":popover-open");this._show?e||this.popoverElement.showPopover():e&&this.popoverElement.hidePopover()};this.popoverElement.isConnected?e():requestAnimationFrame(()=>{e()})}render(){return t(s,{key:"2f8909c00120d1d00d56f0a891bf137e968b482f",ref:this.catchHostAndTriggerElement,class:"kol-popover"},t("div",{key:"d04819e7919b23042debe87158f189889c95e9ca",class:a("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,popover:"auto"},t("div",{key:"e5a08ef22c2ee7c3dc8f1ca25a9b34a14f6076b9",class:a("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),t("slot",{key:"e7d525b678723312037a84233c3d810663c8d4cd"})))}validateAlign(e){r(this,e),this.alignPopover()}validateOn(e){v(this,e)}validateShow(e){if(n(this,e),this.popoverElement){const t=this.popoverElement.matches(":popover-open");if(e){if(!t)try{this.popoverElement.showPopover()}catch(e){}}else if(t)try{this.popoverElement.hidePopover()}catch(e){}}}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}disconnectedCallback(){var e,t,o;null===(e=this.popoverElement)||void 0===e||e.removeEventListener("beforetoggle",this.handleBeforeToggle),null===(t=this.popoverElement)||void 0===t||t.removeEventListener("toggle",this.handleToggle),null===(o=this.cleanupAutoUpdate)||void 0===o||o.call(this),this.cleanupAutoUpdate=void 0,this.removeListenersFromBody()}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}};export{f as kol_popover_wc};

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

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

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

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

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as e,F as t,r as s,g as i}from"./index-CuUGQ2WZ.js";import{c as a}from"./clsx-eK3rPvPS.js";import{d as l,g as o,i as r,a as n,F as d}from"./FormFieldStateWrapper-MGp6AfXi.js";import{I as h,a as c}from"./controller-icon-CGtdyUoC.js";import{_ as u}from"./tslib.es6-CxX45GIN.js";import{G as p}from"./common-BXXICkFX.js";import{n as v}from"./dev.utils-DmS6gtOI.js";import{p as f}from"./controller-D-keynM4.js";import{v as m}from"./multiple-BYEUdjyO.js";import{f as b,v as y}from"./controller-w_F_JaXN.js";import{v as _}from"./required-IJ-wNQGn.js";import{v as j}from"./rows-CaNxvJ4Y.js";import"./access-and-short-key-BlB0ZAri.js";import"./disabled-D0wfAqak.js";import"./hide-label-90DGA8H4.js";import"./label-Dkj9sxQK.js";import"./tooltip-align-P-7pyT1i.js";import"./align-C_bkzA-y.js";import"./events-DHTi_wtD.js";import"./associated.controller-ByKVIoVY.js";import"./bootstrap-bsjlQuLF.js";import"./component-names-B_kYyA8u.js";import"./i18n-B0tfVPMa.js";import"./isObject-DvSELytj.js";import"./reuse-CX4AQDkS.js";import"./i18n-CvQhdUrE.js";import"./InternalUnderlinedBadgeText-DzxAa9aS.js";import"./Alert-DPypTbnj.js";import"./bem-De7JANRY.js";import"./browser-DaourpHc.js";import"./Heading-Cv4P3nNi.js";import"./Icon-CyIigrVK.js";import"./icons-DpMX_jnF.js";import"./orientation-uIK98CL3.js";const g=t=>{var{baseClassName:i="kol-select",class:s,index:o,selectedValue:l,selected:r,value:n,label:d,disabled:c}=t,h=u(t,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);void 0===l?l=[]:Array.isArray(l)||(l=[l]);const p=r||l.includes(n);return e("option",Object.assign({class:a(`${i}__option`,{[`${i}__option--selected`]:p,[`${i}__option--disabled`]:c},s),selected:p,disabled:c,value:o},h),d)},O=({baseClassName:i,preKey:s,options:o,disabled:l,value:r,OptionProps:n={},OptionGroupProps:d={}})=>(null==o?void 0:o.length)?e(t,null,o.map((t,c)=>{const h=[s,`-${c}`].join("");if("options"in t){if(!o.length)return null;const{label:s}=t,c=u(t,["label"]);return e("optgroup",Object.assign({class:a(`${i}__optgroup`,{[`${i}__optgroup--disabled`]:l}),key:h},d,{label:null==s?void 0:s.toString(),disabled:l}),e(O,Object.assign({baseClassName:i,OptionGroupProps:d,OptionProps:n,value:r,preKey:h},c)))}return"value"in t?e(g,Object.assign({key:h,baseClassName:i},n,{index:h,selectedValue:r},t)):null})):null,k=t=>{const{class:i,msg:s,touched:n,disabled:d,required:c,options:h,value:p,OptionProps:v,OptionGroupProps:m,ariaDescribedBy:_,hideLabel:b,label:y}=t,f=u(t,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),g={"kol-select--disabled":Boolean(d),"kol-select--required":Boolean(c),"kol-select--touched":Boolean(n),[`kol-select--${o(s)}`]:r(s,n)},j=Object.assign(Object.assign({class:a("kol-select",g,i),required:c,disabled:d},l({ariaDescribedBy:_,hideLabel:b,label:y})),f);return e("select",Object.assign({},j),e(O,{baseClassName:"kol-select",options:h,value:p,OptionGroupProps:m,OptionProps:v}))};function w(e){const{ariaDescribedBy:t}=n(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,options:e._options,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,size:e._rows,multiple:e._multiple,required:e._required,touched:e._touched,msg:e._msg};return"_shortKey"in e&&(i["aria-keyshortcuts"]=e._shortKey),i}const A=t=>{var{state:i}=t,a=u(t,["state"]);return e(k,Object.assign({},w(i),a))};class P extends h{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find(t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options)),this.filterValuesInOptions=(e,t)=>e.filter(e=>void 0!==this.isValueInOptions(e,t)),this.afterPatchOptions=(e,t,i,a)=>{"_value"===a&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const i=t.get("_value");void 0===i||Array.isArray(i)||t.set("_value",[i]);const a=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(a)&&a.length>0){this.keyOptionMap.clear(),b(this.keyOptionMap,a);const e=t.has("_value")?t.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],a);!1===this.component._multiple&&0===i.length?t.set("_value",[a[0].value]):Array.isArray(e)&&i.length<e.length&&t.set("_value",i)}},this.component=e}validateOptions(e){y(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){this.assertComponentValueMatchesMultiplicity(!0===e),m(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){_(this.component,e)}validateRows(e){j(this.component,e)}validateValue(e){this.assertValueMatchesMultiplicity(e),p(this.component,"_value",()=>!0,void 0===e?[]:Array.isArray(e)?e:[e],void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}assertValueMatchesMultiplicity(e){const t=Array.isArray(e);if(!0===this.component._multiple){if(void 0!==e&&!t)throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (received = ${JSON.stringify(e)})`)}else if(t)throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (received = ${JSON.stringify(e)})`)}assertComponentValueMatchesMultiplicity(e){const t=this.component._value;if(e){if(void 0!==t&&!Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (current = ${JSON.stringify(t)})`)}else if(Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (current = ${JSON.stringify(t)})`)}}const C=class{async getValue(){return this._multiple?this.state._value:Array.isArray(this.state._value)&&this.state._value.length>0?this.state._value[0]:this.state._value}async focus(){var e;return Promise.resolve(null===(e=this.selectRef)||void 0===e?void 0:e.focus())}getFormFieldProps(){return{state:this.state,class:a("kol-form-field-select",{"kol-form-field--has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return e(d,Object.assign({key:"0dae16977914072f768715d0724d104681423011"},this.getFormFieldProps()),e(c,{key:"f861a46e09370d1d9b0988583f21f3e7cb0ac95c",state:this.state},e("form",{key:"4018d6786323c59fc03a1e1808f2c294f538fd03",onSubmit:e=>{e.preventDefault(),f({form:this.host})}},e("input",{key:"4cf5976ab6f9e5936df90835f38d90075b47e0c6",type:"submit",hidden:!0}),e(A,Object.assign({key:"8f9f45475b6ea1c0c1e852896c4bc025bc0e5a4e"},this.getSelectProps())))))}constructor(e){s(this,e),this.catchRef=e=>{this.selectRef=e},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${v()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new P(this,"select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}onInput(e){var t;const i=Array.from((null===(t=this.selectRef)||void 0===t?void 0:t.options)||[]).filter(e=>e.selected).map(e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value});if(this._multiple)this._value=i,this.controller.onFacade.onInput(e,!0,i);else{const t=i.length>0?i[0]:void 0;this._value=t,this.controller.onFacade.onInput(e,!0,t)}}onChange(e){this._multiple,this.controller.onFacade.onChange(e,this._value)}get host(){return i(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};export{C as kol_select_wc};
+import{h as e,F as t,r as s,g as i}from"./index-Zs2j78jP.js";import{c as a}from"./clsx-eK3rPvPS.js";import{d as l,g as o,i as r,a as n,F as d}from"./FormFieldStateWrapper-D_aUwxXi.js";import{I as h,a as c}from"./controller-icon-BIEa5J_H.js";import{_ as u}from"./tslib.es6-CxX45GIN.js";import{G as p}from"./common-BXXICkFX.js";import{n as v}from"./dev.utils-DIHEE-25.js";import{p as f}from"./controller-D-keynM4.js";import{v as m}from"./multiple-BYEUdjyO.js";import{f as b,v as _}from"./controller-CIYXgLCU.js";import{v as y}from"./required-IJ-wNQGn.js";import{v as j}from"./rows-CaNxvJ4Y.js";import"./access-and-short-key-BlB0ZAri.js";import"./disabled-D0wfAqak.js";import"./hide-label-90DGA8H4.js";import"./label-Dkj9sxQK.js";import"./tooltip-align-P-7pyT1i.js";import"./align-C_bkzA-y.js";import"./events-DHTi_wtD.js";import"./associated.controller-ByKVIoVY.js";import"./bootstrap-bsjlQuLF.js";import"./component-names-B_kYyA8u.js";import"./i18n-B0tfVPMa.js";import"./isObject-DvSELytj.js";import"./reuse-CX4AQDkS.js";import"./i18n-CvQhdUrE.js";import"./InternalUnderlinedBadgeText-D3cO4EMH.js";import"./Alert-CQ_GJc9Z.js";import"./bem-De7JANRY.js";import"./browser-DaourpHc.js";import"./Heading-DZVP6zXi.js";import"./Icon-BSA26eyB.js";import"./icons-DpMX_jnF.js";import"./orientation-uIK98CL3.js";const g=t=>{var{baseClassName:i="kol-select",class:s,index:o,selectedValue:l,selected:r,value:n,label:d,disabled:c}=t,h=u(t,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);void 0===l?l=[]:Array.isArray(l)||(l=[l]);const p=r||l.includes(n);return e("option",Object.assign({class:a(`${i}__option`,{[`${i}__option--selected`]:p,[`${i}__option--disabled`]:c},s),selected:p,disabled:c,value:o},h),d)},O=({baseClassName:i,preKey:s,options:o,disabled:l,value:r,OptionProps:n={},OptionGroupProps:d={}})=>(null==o?void 0:o.length)?e(t,null,o.map((t,c)=>{const h=[s,`-${c}`].join("");if("options"in t){if(!o.length)return null;const{label:s}=t,c=u(t,["label"]);return e("optgroup",Object.assign({class:a(`${i}__optgroup`,{[`${i}__optgroup--disabled`]:l}),key:h},d,{label:null==s?void 0:s.toString(),disabled:l}),e(O,Object.assign({baseClassName:i,OptionGroupProps:d,OptionProps:n,value:r,preKey:h},c)))}return"value"in t?e(g,Object.assign({key:h,baseClassName:i},n,{index:h,selectedValue:r},t)):null})):null,k=t=>{const{class:i,msg:s,touched:n,disabled:d,required:c,options:h,value:p,OptionProps:v,OptionGroupProps:m,ariaDescribedBy:_,hideLabel:b,label:y}=t,f=u(t,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),g={"kol-select--disabled":Boolean(d),"kol-select--required":Boolean(c),"kol-select--touched":Boolean(n),[`kol-select--${o(s)}`]:r(s,n)},j=Object.assign(Object.assign({class:a("kol-select",g,i),required:c,disabled:d},l({ariaDescribedBy:_,hideLabel:b,label:y})),f);return e("select",Object.assign({},j),e(O,{baseClassName:"kol-select",options:h,value:p,OptionGroupProps:m,OptionProps:v}))};function w(e){const{ariaDescribedBy:t}=n(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,options:e._options,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,size:e._rows,multiple:e._multiple,required:e._required,touched:e._touched,msg:e._msg};return"_shortKey"in e&&(i["aria-keyshortcuts"]=e._shortKey),i}const A=t=>{var{state:i}=t,s=u(t,["state"]);return e(k,Object.assign({},w(i),s))};class P extends h{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find(t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options)),this.filterValuesInOptions=(e,t)=>e.filter(e=>void 0!==this.isValueInOptions(e,t)),this.afterPatchOptions=(e,t,i,s)=>{"_value"===s&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const i=t.get("_value");void 0===i||Array.isArray(i)||t.set("_value",[i]);const s=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(s)&&s.length>0){this.keyOptionMap.clear(),b(this.keyOptionMap,s);const e=t.has("_value")?t.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],s);!1===this.component._multiple&&0===i.length?t.set("_value",[s[0].value]):Array.isArray(e)&&i.length<e.length&&t.set("_value",i)}},this.component=e}validateOptions(e){_(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){this.assertComponentValueMatchesMultiplicity(!0===e),m(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){y(this.component,e)}validateRows(e){j(this.component,e)}validateValue(e){this.assertValueMatchesMultiplicity(e),p(this.component,"_value",()=>!0,void 0===e?[]:Array.isArray(e)?e:[e],void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}assertValueMatchesMultiplicity(e){const t=Array.isArray(e);if(!0===this.component._multiple){if(void 0!==e&&!t)throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (received = ${JSON.stringify(e)})`)}else if(t)throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (received = ${JSON.stringify(e)})`)}assertComponentValueMatchesMultiplicity(e){const t=this.component._value;if(e){if(void 0!==t&&!Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (current = ${JSON.stringify(t)})`)}else if(Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (current = ${JSON.stringify(t)})`)}}const B=class{async getValue(){return this._multiple?this.state._value:Array.isArray(this.state._value)&&this.state._value.length>0?this.state._value[0]:this.state._value}async focus(){var e;return Promise.resolve(null===(e=this.selectRef)||void 0===e?void 0:e.focus())}getFormFieldProps(){return{state:this.state,class:a("kol-form-field-select",{"kol-form-field--has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return e(d,Object.assign({key:"0dae16977914072f768715d0724d104681423011"},this.getFormFieldProps()),e(c,{key:"f861a46e09370d1d9b0988583f21f3e7cb0ac95c",state:this.state},e("form",{key:"4018d6786323c59fc03a1e1808f2c294f538fd03",onSubmit:e=>{e.preventDefault(),f({form:this.host})}},e("input",{key:"4cf5976ab6f9e5936df90835f38d90075b47e0c6",type:"submit",hidden:!0}),e(A,Object.assign({key:"8f9f45475b6ea1c0c1e852896c4bc025bc0e5a4e"},this.getSelectProps())))))}constructor(e){s(this,e),this.catchRef=e=>{this.selectRef=e},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${v()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new P(this,"select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}onInput(e){var t;const i=Array.from((null===(t=this.selectRef)||void 0===t?void 0:t.options)||[]).filter(e=>e.selected).map(e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value});if(this._multiple)this._value=i,this.controller.onFacade.onInput(e,!0,i);else{const t=i.length>0?i[0]:void 0;this._value=t,this.controller.onFacade.onInput(e,!0,t)}}onChange(e){this._multiple,this.controller.onFacade.onChange(e,this._value)}get host(){return i(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};export{B as kol_select_wc};

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

@@ -1 +1 @@
-{"version":3,"file":"kol-select.entry.esm.js","sources":["src/components/select/style.scss?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/shadow.tsx"],"sourcesContent":["@use '../@shared/kol-select-mixin' as *;\n\n@layer kol-component {\n\t@include kol-select;\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, Prop } from '@stencil/core';\n\nimport type {\n\tFocusableElement,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectProps,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport { KolSelectWcTag } from '../../core/component-names';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements SelectProps, FocusableElement {\n\tprivate selectWcRef?: HTMLKolSelectWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolSelectWcElement) => {\n\t\tthis.selectWcRef = ref;\n\t};\n\n\t/**\n\t * Returns the selected values.\n\t */\n\t@Method()\n\tpublic async getValue(): Promise<StencilUnknown[] | StencilUnknown> {\n\t\treturn this.selectWcRef?.getValue();\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\treturn Promise.resolve(this.selectWcRef?.focus());\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-select\">\n\t\t\t\t<KolSelectWcTag\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_hint={this._hint}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_msg={this._msg}\n\t\t\t\t\t_multiple={this._multiple}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_options={this._options}\n\t\t\t\t\t_required={this._required}\n\t\t\t\t\t_rows={this._rows}\n\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this._touched}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolSelectWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t * @deprecated Will be removed in the next major version.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Makes the input accept multiple inputs.\n\t * @TODO: Change type back to `MultiplePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options!: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Maximum number of visible rows of the element.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>;\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,wrSAAwrS;;MCiCnsS,SAAS,GAAA,MAAA;AAPtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUkB,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,GAA4B,KAAI;AAC5D,YAAA,IAAI,CAAC,WAAW,GAAG,GAAG;AACvB,SAAC;AA2Dc,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAM3B,QAAA,IAAQ,CAAA,QAAA,GAAa,KAAK;AAO1B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AAK5B,QAAA,IAAK,CAAA,KAAA,GAAY,EAAE;AA2BnB,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAqB3B,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AA0B3B,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAMZ,QAAA,IAAQ,CAAA,QAAA,GAAa,KAAK;AAMzE;AA7JO,IAAA,MAAM,QAAQ,GAAA;;QACpB,OAAO,MAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE;;AAO7B,IAAA,MAAM,KAAK,GAAA;;AACjB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE,CAAC;;IAG3C,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACvB,CAAA,CAAC,cAAc,EAAA,EAAA,GAAA,EAAA,0CAAA,EACd,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EAEnB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,CACzB,CACX;;;;;;;;;"}
+{"version":3,"file":"kol-select.entry.esm.js","sources":["src/components/select/style.scss?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/shadow.tsx"],"sourcesContent":["@use '../@shared/kol-select-mixin' as *;\n\n@layer kol-component {\n\t@include kol-select;\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, Prop } from '@stencil/core';\n\nimport type {\n\tFocusableElement,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectProps,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport { KolSelectWcTag } from '../../core/component-names';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements SelectProps, FocusableElement {\n\tprivate selectWcRef?: HTMLKolSelectWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolSelectWcElement) => {\n\t\tthis.selectWcRef = ref;\n\t};\n\n\t/**\n\t * Returns the selected values.\n\t */\n\t@Method()\n\tpublic async getValue(): Promise<StencilUnknown[] | StencilUnknown> {\n\t\treturn this.selectWcRef?.getValue();\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\treturn Promise.resolve(this.selectWcRef?.focus());\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-select\">\n\t\t\t\t<KolSelectWcTag\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_hint={this._hint}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_msg={this._msg}\n\t\t\t\t\t_multiple={this._multiple}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_options={this._options}\n\t\t\t\t\t_required={this._required}\n\t\t\t\t\t_rows={this._rows}\n\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this._touched}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolSelectWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t * @deprecated Will be removed in the next major version.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Makes the input accept multiple inputs.\n\t * @TODO: Change type back to `MultiplePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options!: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Maximum number of visible rows of the element.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>;\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,4qSAA4qS;;MCiCvrS,SAAS,GAAA,MAAA;AAPtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUkB,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,GAA4B,KAAI;AAC5D,YAAA,IAAI,CAAC,WAAW,GAAG,GAAG;AACvB,SAAC;AA2Dc,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAM3B,QAAA,IAAQ,CAAA,QAAA,GAAa,KAAK;AAO1B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AAK5B,QAAA,IAAK,CAAA,KAAA,GAAY,EAAE;AA2BnB,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAqB3B,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AA0B3B,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAMZ,QAAA,IAAQ,CAAA,QAAA,GAAa,KAAK;AAMzE;AA7JO,IAAA,MAAM,QAAQ,GAAA;;QACpB,OAAO,MAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE;;AAO7B,IAAA,MAAM,KAAK,GAAA;;AACjB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE,CAAC;;IAG3C,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACvB,CAAA,CAAC,cAAc,EAAA,EAAA,GAAA,EAAA,0CAAA,EACd,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EAEnB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,CACzB,CACX;;;;;;;;;"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-CuUGQ2WZ.js";import{m as o}from"./component-names-B_kYyA8u.js";import"./common-BXXICkFX.js";const i='@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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-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--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .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:not(:empty)) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\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    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}',l=class{constructor(e){n(this,e),this.catchRef=n=>{this.selectWcRef=n},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1}async getValue(){var n;return null===(n=this.selectWcRef)||void 0===n?void 0:n.getValue()}async focus(){var n;return Promise.resolve(null===(n=this.selectWcRef)||void 0===n?void 0:n.focus())}render(){return e(t,{key:"a926c7058a8e4d63d2eac02fa4cfb0cc72613117",class:"kol-select"},e(o,{key:"ecd27ebee8519a944361c7a0184f413f99d3c3ad",ref:this.catchRef,_accessKey:this._accessKey,_disabled:this._disabled,_hideLabel:this._hideLabel,_hint:this._hint,_icons:this._icons,_id:this._id,_label:this._label,_msg:this._msg,_multiple:this._multiple,_name:this._name,_on:this._on,_options:this._options,_required:this._required,_rows:this._rows,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_touched:this._touched,_value:this._value},e("slot",{key:"eb93d88c9ed9dc97d1d14caac719a4760d7a6571",name:"expert",slot:"expert"})))}};l.style={default:i};export{l as kol_select};
+import{r as n,h as e,H as t}from"./index-Zs2j78jP.js";import{m as o}from"./component-names-B_kYyA8u.js";import"./common-BXXICkFX.js";const i='@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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-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--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\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:not(:empty)) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\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    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}',l=class{constructor(e){n(this,e),this.catchRef=n=>{this.selectWcRef=n},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1}async getValue(){var n;return null===(n=this.selectWcRef)||void 0===n?void 0:n.getValue()}async focus(){var n;return Promise.resolve(null===(n=this.selectWcRef)||void 0===n?void 0:n.focus())}render(){return e(t,{key:"a926c7058a8e4d63d2eac02fa4cfb0cc72613117",class:"kol-select"},e(o,{key:"ecd27ebee8519a944361c7a0184f413f99d3c3ad",ref:this.catchRef,_accessKey:this._accessKey,_disabled:this._disabled,_hideLabel:this._hideLabel,_hint:this._hint,_icons:this._icons,_id:this._id,_label:this._label,_msg:this._msg,_multiple:this._multiple,_name:this._name,_on:this._on,_options:this._options,_required:this._required,_rows:this._rows,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_touched:this._touched,_value:this._value},e("slot",{key:"eb93d88c9ed9dc97d1d14caac719a4760d7a6571",name:"expert",slot:"expert"})))}};l.style={default:i};export{l as kol_select};

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

@@ -1 +1 @@
-{"version":3,"names":["registerInstance","h","Host","KolSelectWcTag","defaultStyleCss","KolSelect","constructor","hostRef","this","catchRef","ref","selectWcRef","_disabled","_hideMsg","_hideLabel","_hint","_multiple","_required","_tooltipAlign","_touched","getValue","_a","focus","Promise","resolve","render","key","class","_accessKey","_icons","_id","_label","_msg","_name","_on","_options","_rows","_shortKey","_syncValueBySelector","_tabIndex","_value","name","slot","style","default"],"sources":["0"],"mappings":";;;YAGcA,OAAkBC,OAAQC,MAAY,kCACtCC,MAAsB,sCAC7B,uBAEP,MAAMC,EAAkB,orSAExB,MAAMC,EAAY,MACd,WAAAC,CAAYC,GACRP,EAAiBQ,KAAMD,GACvBC,KAAKC,SAAYC,IACbF,KAAKG,YAAcD,CAAG,EAE1BF,KAAKI,UAAY,MACjBJ,KAAKK,SAAW,MAChBL,KAAKM,WAAa,MAClBN,KAAKO,MAAQ,GACbP,KAAKQ,UAAY,MACjBR,KAAKS,UAAY,MACjBT,KAAKU,cAAgB,MACrBV,KAAKW,SAAW,KACpB,CACA,cAAMC,GACF,IAAIC,EACJ,OAAQA,EAAKb,KAAKG,eAAiB,MAAQU,SAAY,OAAS,EAAIA,EAAGD,UAC3E,CACA,WAAME,GACF,IAAID,EACJ,OAAOE,QAAQC,SAASH,EAAKb,KAAKG,eAAiB,MAAQU,SAAY,OAAS,EAAIA,EAAGC,QAC3F,CACA,MAAAG,GACI,OAAQxB,EAAEC,EAAM,CAAEwB,IAAK,2CAA4CC,MAAO,cAAgB1B,EAAEE,EAAgB,CAAEuB,IAAK,2CAA4ChB,IAAKF,KAAKC,SAAUmB,WAAYpB,KAAKoB,WAAYhB,UAAWJ,KAAKI,UAAWE,WAAYN,KAAKM,WAAYC,MAAOP,KAAKO,MAAOc,OAAQrB,KAAKqB,OAAQC,IAAKtB,KAAKsB,IAAKC,OAAQvB,KAAKuB,OAAQC,KAAMxB,KAAKwB,KAAMhB,UAAWR,KAAKQ,UAAWiB,MAAOzB,KAAKyB,MAAOC,IAAK1B,KAAK0B,IAAKC,SAAU3B,KAAK2B,SAAUlB,UAAWT,KAAKS,UAAWmB,MAAO5B,KAAK4B,MAAOC,UAAW7B,KAAK6B,UAAWC,qBAAsB9B,KAAK8B,qBAAsBC,UAAW/B,KAAK+B,UAAWrB,cAAeV,KAAKU,cAAeC,SAAUX,KAAKW,SAAUqB,OAAQhC,KAAKgC,QAAUvC,EAAE,OAAQ,CAAEyB,IAAK,2CAA4Ce,KAAM,SAAUC,KAAM,YAC1vB,GAEJrC,EAAUsC,MAAQ,CACdC,QAASxC,UAGJC","ignoreList":[]}
+{"version":3,"names":["registerInstance","h","Host","KolSelectWcTag","defaultStyleCss","KolSelect","constructor","hostRef","this","catchRef","ref","selectWcRef","_disabled","_hideMsg","_hideLabel","_hint","_multiple","_required","_tooltipAlign","_touched","getValue","_a","focus","Promise","resolve","render","key","class","_accessKey","_icons","_id","_label","_msg","_name","_on","_options","_rows","_shortKey","_syncValueBySelector","_tabIndex","_value","name","slot","style","default"],"sources":["0"],"mappings":";;;YAGcA,OAAkBC,OAAQC,MAAY,kCACtCC,MAAsB,sCAC7B,uBAEP,MAAMC,EAAkB,4qSAExB,MAAMC,EAAY,MACd,WAAAC,CAAYC,GACRP,EAAiBQ,KAAMD,GACvBC,KAAKC,SAAYC,IACbF,KAAKG,YAAcD,CAAG,EAE1BF,KAAKI,UAAY,MACjBJ,KAAKK,SAAW,MAChBL,KAAKM,WAAa,MAClBN,KAAKO,MAAQ,GACbP,KAAKQ,UAAY,MACjBR,KAAKS,UAAY,MACjBT,KAAKU,cAAgB,MACrBV,KAAKW,SAAW,KACpB,CACA,cAAMC,GACF,IAAIC,EACJ,OAAQA,EAAKb,KAAKG,eAAiB,MAAQU,SAAY,OAAS,EAAIA,EAAGD,UAC3E,CACA,WAAME,GACF,IAAID,EACJ,OAAOE,QAAQC,SAASH,EAAKb,KAAKG,eAAiB,MAAQU,SAAY,OAAS,EAAIA,EAAGC,QAC3F,CACA,MAAAG,GACI,OAAQxB,EAAEC,EAAM,CAAEwB,IAAK,2CAA4CC,MAAO,cAAgB1B,EAAEE,EAAgB,CAAEuB,IAAK,2CAA4ChB,IAAKF,KAAKC,SAAUmB,WAAYpB,KAAKoB,WAAYhB,UAAWJ,KAAKI,UAAWE,WAAYN,KAAKM,WAAYC,MAAOP,KAAKO,MAAOc,OAAQrB,KAAKqB,OAAQC,IAAKtB,KAAKsB,IAAKC,OAAQvB,KAAKuB,OAAQC,KAAMxB,KAAKwB,KAAMhB,UAAWR,KAAKQ,UAAWiB,MAAOzB,KAAKyB,MAAOC,IAAK1B,KAAK0B,IAAKC,SAAU3B,KAAK2B,SAAUlB,UAAWT,KAAKS,UAAWmB,MAAO5B,KAAK4B,MAAOC,UAAW7B,KAAK6B,UAAWC,qBAAsB9B,KAAK8B,qBAAsBC,UAAW/B,KAAK+B,UAAWrB,cAAeV,KAAKU,cAAeC,SAAUX,KAAKW,SAAUqB,OAAQhC,KAAKgC,QAAUvC,EAAE,OAAQ,CAAEyB,IAAK,2CAA4Ce,KAAM,SAAUC,KAAM,YAC1vB,GAEJrC,EAAUsC,MAAQ,CACdC,QAASxC,UAGJC","ignoreList":[]}