@public-ui/components 1.6.0-rc.2 → 1.6.0-rc.4

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as s}from"./index-34c3d6f8.js";import{w as e}from"./button-link-283b2d32.js";import{n as o}from"./dev.utils-157f0499.js";import{e as a,w as n,a as l,d as h,p as r}from"./prop.validators-f81af56e.js";import{w as p}from"./controller-ec771280.js";import{S as c}from"./reuse-3a02afb9.js";import{a as u}from"./i18n-87a7ecb7.js";import"./a11y.tipps-2e27f8e6.js";import"./index-ff788b4b.js";import"./index-bacdc4cb.js";const _=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.separator:before{content:'•••'}",d={left:"codicon codicon-debug-reverse-continue"},f={left:"codicon codicon-chevron-left"},g={right:"codicon codicon-chevron-right"},b={right:"codicon codicon-debug-continue"},v=class{constructor(a){t(this,a),this.nonce=o(),this.calcCount=(t,a=1)=>Math.ceil(t/a),this.getCount=()=>this.calcCount(this.state._total,this.state._pageSize),this.onClick=(t,a)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,a),this.onChangePage(t,a)},this.onChangePage=(t,a)=>{const e=setTimeout((()=>{clearTimeout(e),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,a)}))},this.onChangePageSize=(t,a)=>{if("number"==typeof(a=parseInt(a[0]))&&a>0&&this._pageSize!==a){this._pageSize=a;const e=setTimeout((()=>{clearTimeout(e),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize)}))}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,a)=>{let e=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize;const s=a.has("_pageSizeOptions")?a.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(s)&&s.length>0){const t=s.find((t=>t.value===e));e=void 0===t?s[0].value:t.value,a.set("_pageSize",e)}const i=a.has("_page")?a.get("_page"):this.state._page,o=a.has("_total")?a.get("_total"):this.state._total;this.syncPage(a,i,a.get("_pageSize"),o)},this.syncPage=(t,a,e,s)=>{if(s>0){const i=this.calcCount(s,e);i>0&&(a>i?(t.set("_page",i),this.onChangePage(c,i)):a<1&&(t.set("_page",1),this.onChangePage(c,1)))}},this.beforePageSizeOptions=(t,a)=>{const e=[];if(Array.isArray(t))for(const a of t)"number"==typeof a&&e.push({label:u("kol-page-per-site",{placeholders:{entries:`${a}`}}),value:a});a.set("_pageSizeOptions",e),this.beforePageSize(e,a)},this._boundaryCount=1,this._customClass=void 0,this._hasButtons=!0,this._page=void 0,this._pageSize=1,this._pageSizeOptions=[],this._on=void 0,this._siblingCount=1,this._tooltipAlign="top",this._total=void 0,this._variant="normal",this.state={_boundaryCount:1,_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_total:0,_variant:"normal"}}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("span",{class:"separator",key:`${this.nonce}-el-${t}`})):null));return i(s,null,i("div",null,this.state._hasButtons.first&&i("kol-button",{class:"first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icon:d,_iconOnly:!0,_label:u("kol-page-first"),_on:this.onGoToFirst,_variant:this.state._variant,_tooltipAlign:this.state._tooltipAlign}),this.state._hasButtons.previous&&i("kol-button",{class:"previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icon:f,_iconOnly:!0,_label:u("kol-page-back"),_on:this.onGoBackward,_variant:this.state._variant,_tooltipAlign:this.state._tooltipAlign}),o,this.state._hasButtons.next&&i("kol-button",{class:"next",exportparts:"icon",_customClass:this.state._customClass,_disabled:e<=this.state._page,_icon:g,_iconOnly:!0,_label:u("kol-page-next"),_on:this.onGoForward,_variant:this.state._variant,_tooltipAlign:this.state._tooltipAlign}),this.state._hasButtons.last&&i("kol-button",{class:"last",exportparts:"icon",_customClass:this.state._customClass,_disabled:e<=this.state._page,_icon:b,_iconOnly:!0,_label:u("kol-page-last"),_on:this.onGoToEnd,_variant:this.state._variant,_tooltipAlign:this.state._tooltipAlign})),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&i("kol-select",{_hideLabel:!0,_id:"pagination-size",_label:u("kol-entries-per-site"),_list:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return i("kol-button",{exportparts:"icon",key:`${this.nonce}-${t}`,_customClass:this.state._customClass,_ariaLabel:u("kol-page-current",{placeholders:{page:t.toFixed(0)}}),_label:`${t}`,_on:{onClick:a=>{this.onClick(a,t)}},_variant:this.state._variant})}getSelectedPageButton(t){return i("kol-button-wc",{class:"selected",key:`${this.nonce}-selected`,_customClass:this.state._customClass,_disabled:!0,_ariaCurrent:!0,_ariaLabel:u("kol-page-selected",{placeholders:{page:t.toFixed(0)}}),_label:`${t}`,_variant:this.state._variant})}validateBoundaryCount(t){a(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){n(this,"_customClass",t,{defaultValue:void 0})}validateHasButtons(t){l(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=r(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 e=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize,s=a.has("_total")?a.get("_total"):this.state._total;this.syncPage(a,t,e,s)}}})}validatePageSize(t){a(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){h(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))}validateTotal(t){a(this,"_total",t,{hooks:{beforePatch:(t,a)=>{const e=a.has("_page")?a.get("_page"):this.state._page,s=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize;this.syncPage(a,e,s,t)}}})}validateTooltipAlign(t){e(this,"_tooltipAlign",t)}validateVariant(t){p(this,"_variant",t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),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.validateTotal(this._total),this.validateVariant(this._variant),this.validatePage(this._page)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_total:["validateTotal"],_tooltipAlign:["validateTooltipAlign"],_variant:["validateVariant"]}}};v.style={default:_};export{v as kol_pagination};
+import{r as t,h as i,H as e}from"./index-6ad587d0.js";import{w as s}from"./button-link-283b2d32.js";import{n as o}from"./dev.utils-157f0499.js";import{e as a,w as n,a as l,d as h,p as r}from"./prop.validators-f81af56e.js";import{w as p}from"./controller-ec771280.js";import{S as u}from"./reuse-3a02afb9.js";import{a as c}from"./i18n-3ed8125e.js";import"./a11y.tipps-2e27f8e6.js";import"./index-ff788b4b.js";import"./index-ebb14eab.js";const d=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.separator:before{content:'•••'}",_={left:"codicon codicon-debug-reverse-continue"},f={left:"codicon codicon-chevron-left"},b={right:"codicon codicon-chevron-right"},g={right:"codicon codicon-debug-continue"},v=class{constructor(e){t(this,e),this.nonce=o(),this.calcCount=(t,e=1)=>Math.ceil(t/e),this.getCount=()=>this.calcCount(this.state._total,this.state._pageSize),this.onClick=(t,e)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,e),this.onChangePage(t,e)},this.onChangePage=(t,e)=>{const a=setTimeout((()=>{clearTimeout(a),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,e)}))},this.onChangePageSize=(t,e)=>{if("number"==typeof(e=parseInt(e[0]))&&e>0&&this._pageSize!==e){this._pageSize=e;const a=setTimeout((()=>{clearTimeout(a),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,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,e)=>{let a=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;const s=e.has("_pageSizeOptions")?e.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(s)&&s.length>0){const t=s.find((t=>t.value===a));a=void 0===t?s[0].value:t.value,e.set("_pageSize",a)}const i=e.has("_page")?e.get("_page"):this.state._page,o=e.has("_total")?e.get("_total"):this.state._total;this.syncPage(e,i,e.get("_pageSize"),o)},this.syncPage=(t,e,a,s)=>{if(s>0){const i=this.calcCount(s,a);i>0&&(e>i?(t.set("_page",i),this.onChangePage(u,i)):e<1&&(t.set("_page",1),this.onChangePage(u,1)))}},this.beforePageSizeOptions=(t,e)=>{const a=[];if(Array.isArray(t))for(const e of t)"number"==typeof e&&a.push({label:c("kol-page-per-site",{placeholders:{entries:`${e}`}}),value:e});e.set("_pageSizeOptions",a),this.beforePageSize(a,e)},this._boundaryCount=1,this._customClass=void 0,this._hasButtons=!0,this._page=void 0,this._pageSize=1,this._pageSizeOptions=[],this._on=void 0,this._siblingCount=1,this._tooltipAlign="top",this._total=void 0,this._variant="normal",this.state={_boundaryCount:1,_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_total:0,_variant:"normal"}}render(){var t;let a=!1;const s=this.getCount(),o=Array.from(Array(s).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>s-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("span",{class:"separator",key:`${this.nonce}-el-${t}`})):null));return i(e,null,i("div",null,this.state._hasButtons.first&&i("kol-button",{class:"first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icon:_,_hideLabel:!0,_label:c("kol-page-first"),_on:this.onGoToFirst,_variant:this.state._variant,_tooltipAlign:this.state._tooltipAlign}),this.state._hasButtons.previous&&i("kol-button",{class:"previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icon:f,_hideLabel:!0,_label:c("kol-page-back"),_on:this.onGoBackward,_variant:this.state._variant,_tooltipAlign:this.state._tooltipAlign}),o,this.state._hasButtons.next&&i("kol-button",{class:"next",exportparts:"icon",_customClass:this.state._customClass,_disabled:s<=this.state._page,_icon:b,_hideLabel:!0,_label:c("kol-page-next"),_on:this.onGoForward,_variant:this.state._variant,_tooltipAlign:this.state._tooltipAlign}),this.state._hasButtons.last&&i("kol-button",{class:"last",exportparts:"icon",_customClass:this.state._customClass,_disabled:s<=this.state._page,_icon:g,_hideLabel:!0,_label:c("kol-page-last"),_on:this.onGoToEnd,_variant:this.state._variant,_tooltipAlign:this.state._tooltipAlign})),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&i("kol-select",{_hideLabel:!0,_id:"pagination-size",_label:c("kol-entries-per-site"),_list:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return i("kol-button",{exportparts:"icon",key:`${this.nonce}-${t}`,_customClass:this.state._customClass,_ariaLabel:c("kol-page-current",{placeholders:{page:t.toFixed(0)}}),_label:`${t}`,_on:{onClick:e=>{this.onClick(e,t)}},_variant:this.state._variant})}getSelectedPageButton(t){return i("kol-button-wc",{class:"selected",key:`${this.nonce}-selected`,_customClass:this.state._customClass,_disabled:!0,_ariaCurrent:!0,_ariaLabel:c("kol-page-selected",{placeholders:{page:t.toFixed(0)}}),_label:`${t}`,_variant:this.state._variant})}validateBoundaryCount(t){a(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){n(this,"_customClass",t,{defaultValue:void 0})}validateHasButtons(t){l(this,"_hasButtons",(t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,e)=>{if("boolean"==typeof t)e.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=r(t)}catch(t){e.delete("_hasButtons")}"object"==typeof t&&null!==t&&e.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,e)=>{const a=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize,s=e.has("_total")?e.get("_total"):this.state._total;this.syncPage(e,t,a,s)}}})}validatePageSize(t){a(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){h(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))}validateTotal(t){a(this,"_total",t,{hooks:{beforePatch:(t,e)=>{const a=e.has("_page")?e.get("_page"):this.state._page,s=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;this.syncPage(e,a,s,t)}}})}validateTooltipAlign(t){s(this,"_tooltipAlign",t)}validateVariant(t){p(this,"_variant",t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),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.validateTotal(this._total),this.validateVariant(this._variant),this.validatePage(this._page)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_total:["validateTotal"],_tooltipAlign:["validateTooltipAlign"],_variant:["validateVariant"]}}};v.style={default:d};export{v as kol_pagination};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","leftDoubleArrowIcon","left","leftSingleArrow","rightSingleArrowIcon","right","rightDoubleArrowIcon","KolPagination","this","nonce","calcCount","total","pageSize","Math","ceil","getCount","state","_total","_pageSize","onClick","event","page","_on","onChangePage","timeout","setTimeout","clearTimeout","onChangePageSize","value","parseInt","onGoToFirst","onGoToEnd","onGoBackward","_page","onGoForward","beforePageSize","_nextValue","nextState","has","get","pageSizeOptions","_pageSizeOptions","Array","isArray","length","find","option","undefined","set","syncPage","count","STATE_CHANGE_EVENT","beforePageSizeOptions","nextValue","options","push","label","translate","placeholders","entries","_boundaryCount","_hasButtons","first","last","next","previous","_siblingCount","_variant","render","ellipsis","pageButtons","from","keys","map","index","getSelectedPageButton","getUnselectedPageButton","h","class","key","Host","exportparts","_customClass","_disabled","_icon","_iconOnly","_label","_tooltipAlign","_a","_hideLabel","_id","_list","onChange","_value","_ariaLabel","toFixed","_ariaCurrent","validateBoundaryCount","watchNumber","max","validateCustomClass","watchString","defaultValue","validateHasButtons","watchValidator","Set","hooks","beforePatch","parseJson","e","delete","Object","assign","validateOn","validatePage","validatePageSize","validatePageSizeOptions","watchJsonArrayString","validateSiblingCount","validateTotal","validateTooltipAlign","watchTooltipAlignment","validateVariant","watchButtonVariant","componentWillLoad"],"sources":["./src/components/pagination/style.css?tag=kol-pagination&mode=default&encapsulation=shadow","./src/components/pagination/component.tsx"],"sourcesContent":["@import url(../style.css);\n.separator:before {\n\tcontent: '•••';\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { KoliBriButtonVariant, KoliBriButtonVariantPropState, KoliBriButtonCustomClassPropState, watchTooltipAlignment } from '../../types/button-link';\nimport { nonce } from '../../utils/dev.utils';\nimport { parseJson, watchJsonArrayString, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchButtonVariant } from '../button/controller';\nimport { Align } from '../../types/props';\nimport { KoliBriPaginationButtonCallbacks } from './types';\nimport { Stringified } from '../../types/common';\nimport { Option } from '../../types/input/types';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { translate } from '../../i18n';\n\n/**\n * Der HasButton-Typ definiert die Einstellungsmöglichkeiten der speziellen\n * Sprung-Schalter der Pagination.\n */\nexport type PaginationHasButton = {\n\t/**\n\t * Der First-Button ist der Schalter, um direkt auf die erste Seite zu gelangen.\n\t */\n\tfirst: boolean;\n\t/**\n\t * Der Last-Button ist der Schalter, um direkt auf die letzte Seite zu gelangen.\n\t */\n\tlast: boolean;\n\t/**\n\t * Der Next-Button ist der Schalter, um direkt auf die nächste Seite zu gelangen.\n\t */\n\tnext: boolean;\n\t/**\n\t * Der Previous-Button ist der Schalter, um direkt auf die vorherige Seite zu gelangen.\n\t */\n\tprevious: boolean;\n};\n\nexport type RequiredProps = {\n\ton: KoliBriPaginationButtonCallbacks;\n\tpage: number;\n\ttotal: number;\n};\nexport type OptionalProps = KoliBriButtonCustomClassPropState &\n\tKoliBriButtonVariantPropState & {\n\t\tboundaryCount: number;\n\t\thasButtons: boolean | Stringified<PaginationHasButton>;\n\t\tpageSize: number;\n\t\tpageSizeOptions: Stringified<number[]>;\n\t\tsiblingCount: number;\n\t\ttooltipAlign: Align;\n\t};\n// export type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = KoliBriButtonVariantPropState & {\n\tboundaryCount: number;\n\thasButtons: PaginationHasButton;\n\tpage: number;\n\tpageSize: number;\n\tpageSizeOptions: Option<number>[];\n\ton: KoliBriPaginationButtonCallbacks;\n\tsiblingCount: number;\n\ttotal: number;\n};\ntype OptionalStates = KoliBriButtonCustomClassPropState & {\n\ttooltipAlign: Align;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst leftDoubleArrowIcon = {\n\tleft: 'codicon codicon-debug-reverse-continue',\n};\nconst leftSingleArrow = {\n\tleft: 'codicon codicon-chevron-left',\n};\nconst rightSingleArrowIcon = {\n\tright: 'codicon codicon-chevron-right',\n};\nconst rightDoubleArrowIcon = {\n\tright: 'codicon codicon-debug-continue',\n};\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly nonce = nonce();\n\n\tprivate readonly calcCount = (total: number, pageSize = 1): number => Math.ceil(total / pageSize);\n\n\tprivate readonly getCount = (): number => this.calcCount(this.state._total, this.state._pageSize);\n\n\tpublic render(): JSX.Element {\n\t\tlet ellipsis = false;\n\t\tconst count = this.getCount();\n\t\tconst pageButtons = Array.from(Array(count).keys())\n\t\t\t.map((index: number) => index + 1)\n\t\t\t.map((page: number) => {\n\t\t\t\tif (\n\t\t\t\t\tpage <= this.state._boundaryCount ||\n\t\t\t\t\tpage > count - this.state._boundaryCount ||\n\t\t\t\t\t(page >= this.state._page - this.state._siblingCount && page <= this.state._page + this.state._siblingCount)\n\t\t\t\t) {\n\t\t\t\t\tellipsis = true;\n\t\t\t\t\tif (this.state._page === page) {\n\t\t\t\t\t\treturn this.getSelectedPageButton(page);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn this.getUnselectedPageButton(page);\n\t\t\t\t\t}\n\t\t\t\t} else if (ellipsis === true) {\n\t\t\t\t\tellipsis = false;\n\t\t\t\t\treturn <span class=\"separator\" key={`${this.nonce}-el-${page}`}></span>;\n\t\t\t\t} else {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t});\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t{this.state._hasButtons.first && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\tclass=\"first\"\n\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t_icon={leftDoubleArrowIcon}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label={translate('kol-page-first')}\n\t\t\t\t\t\t\t_on={this.onGoToFirst}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._hasButtons.previous && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\tclass=\"previous\"\n\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t_icon={leftSingleArrow}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label={translate('kol-page-back')}\n\t\t\t\t\t\t\t_on={this.onGoBackward}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t\t{pageButtons}\n\t\t\t\t\t{this.state._hasButtons.next && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\tclass=\"next\"\n\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t_icon={rightSingleArrowIcon}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label={translate('kol-page-next')}\n\t\t\t\t\t\t\t_on={this.onGoForward}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._hasButtons.last && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\tclass=\"last\"\n\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t_icon={rightDoubleArrowIcon}\n\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t_label={translate('kol-page-last')}\n\t\t\t\t\t\t\t_on={this.onGoToEnd}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{this.state._pageSizeOptions?.length > 0 && (\n\t\t\t\t\t<kol-select\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_id=\"pagination-size\"\n\t\t\t\t\t\t_label={translate('kol-entries-per-site')}\n\t\t\t\t\t\t_list={this.state._pageSizeOptions}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonChange: this.onChangePageSize,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_value={[this.state._pageSize]}\n\t\t\t\t\t></kol-select>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, wie viele Seiten neben den am Rand liegenden Pfeil-Schaltern angezeigt werden sollen.\n\t */\n\t@Prop() public _boundaryCount?: number = 1;\n\n\t/**\n\t * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t */\n\t@Prop() public _customClass?: string;\n\n\t/**\n\t * Setzt die Sichtbarkeit der Anfang/zurück/weiter/Ende-Schaltflächen.\n\t */\n\t@Prop() public _hasButtons?: boolean | Stringified<PaginationHasButton> = true;\n\n\t/**\n\t * Gibt an, welche Seite aktuell ausgewählt ist.\n\t */\n\t@Prop() public _page!: number;\n\n\t/**\n\t * Gibt an, wie viele Einträge pro Seite angezeigt werden.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _pageSize = 1;\n\n\t/**\n\t * Setzt die Optionen für das Seitenlängenselect.\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 * Gibt an, wie viele Seiten neben der aktuell Ausgewählten angezeigt werden.\n\t */\n\t@Prop() public _siblingCount?: number = 1;\n\n\t/**\n\t * Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/**\n\t * Setzt die Gesamtanzahl der Seiten.\n\t */\n\t@Prop() public _total!: number;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n\n\t@State() public state: States = {\n\t\t_boundaryCount: 1,\n\t\t_hasButtons: {\n\t\t\tfirst: true,\n\t\t\tlast: true,\n\t\t\tnext: true,\n\t\t\tprevious: true,\n\t\t},\n\t\t_on: {\n\t\t\tonClick: () => null,\n\t\t},\n\t\t_page: 0,\n\t\t_pageSize: 1,\n\t\t_pageSizeOptions: [],\n\t\t_siblingCount: 1,\n\t\t_total: 0,\n\t\t_variant: 'normal',\n\t};\n\n\tprivate onClick = (event: Event, page: number) => {\n\t\tif (typeof this.state._on.onClick === 'function') {\n\t\t\tthis.state._on.onClick(event, page);\n\t\t}\n\t\tthis.onChangePage(event, page);\n\t};\n\n\tprivate onChangePage = (event: Event, page: number) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tif (typeof this.state._on.onChangePage === 'function') {\n\t\t\t\tthis.state._on.onChangePage(event, page);\n\t\t\t}\n\t\t});\n\t};\n\n\tprivate onChangePageSize = (event: Event, value: unknown) => {\n\t\tvalue = parseInt((value as string[])[0]);\n\t\tif (typeof value === 'number' && value > 0 && this._pageSize !== value) {\n\t\t\tthis._pageSize = value;\n\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t\tif (typeof this.state._on.onChangePageSize === 'function') {\n\t\t\t\t\tthis.state._on.onChangePageSize(event, this._pageSize);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate readonly onGoToFirst = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, 1);\n\t\t},\n\t};\n\tprivate readonly onGoToEnd = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.getCount());\n\t\t},\n\t};\n\tprivate readonly onGoBackward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page - 1);\n\t\t},\n\t};\n\tprivate readonly onGoForward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page + 1);\n\t\t},\n\t};\n\n\tprivate getUnselectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<kol-button\n\t\t\t\texportparts=\"icon\"\n\t\t\t\tkey={`${this.nonce}-${page}`}\n\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t_ariaLabel={translate('kol-page-current', { placeholders: { page: page.toFixed(0) } })}\n\t\t\t\t_label={`${page}`}\n\t\t\t\t_on={{\n\t\t\t\t\tonClick: (event: Event) => {\n\t\t\t\t\t\tthis.onClick(event, page);\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t\t_variant={this.state._variant}\n\t\t\t></kol-button>\n\t\t);\n\t}\n\n\tprivate getSelectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<kol-button-wc\n\t\t\t\tclass=\"selected\"\n\t\t\t\tkey={`${this.nonce}-selected`}\n\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t_disabled={true}\n\t\t\t\t_ariaCurrent={true}\n\t\t\t\t_ariaLabel={translate('kol-page-selected', { placeholders: { page: page.toFixed(0) } })}\n\t\t\t\t_label={`${page}`}\n\t\t\t\t_variant={this.state._variant}\n\t\t\t/>\n\t\t);\n\t}\n\n\t@Watch('_boundaryCount')\n\tpublic validateBoundaryCount(value?: number): void {\n\t\twatchNumber(this, '_boundaryCount', Math.max(0, value ?? 1));\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: string): void {\n\t\twatchString(this, '_customClass', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\t@Watch('_hasButtons')\n\tpublic validateHasButtons(value?: string | boolean | Stringified<PaginationHasButton>): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_hasButtons',\n\t\t\t(value) => typeof value === 'boolean' || typeof value === 'string' || (typeof value === 'object' && value !== null),\n\t\t\tnew Set(['Boolean', 'PaginationHasButton']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: (nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\t\tif (typeof nextValue === 'boolean') {\n\t\t\t\t\t\t\tnextState.set('_hasButtons', {\n\t\t\t\t\t\t\t\tfirst: nextValue,\n\t\t\t\t\t\t\t\tlast: nextValue,\n\t\t\t\t\t\t\t\tnext: nextValue,\n\t\t\t\t\t\t\t\tprevious: nextValue,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tif (typeof nextValue === 'string') {\n\t\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\t\tnextValue = parseJson<PaginationHasButton>(nextValue);\n\t\t\t\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\t\t\t\tnextState.delete('_hasButtons');\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (typeof nextValue === 'object' && nextValue !== null) {\n\t\t\t\t\t\t\t\tnextState.set('_hasButtons', {\n\t\t\t\t\t\t\t\t\t...this.state._hasButtons,\n\t\t\t\t\t\t\t\t\tfirst:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).first === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).first === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.first,\n\t\t\t\t\t\t\t\t\tlast:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).last === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).last === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.last,\n\t\t\t\t\t\t\t\t\tnext:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).next === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).next === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.next,\n\t\t\t\t\t\t\t\t\tprevious:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).previous === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).previous === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.previous,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriPaginationButtonCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_page')\n\tpublic validatePage(value?: number): void {\n\t\twatchNumber(this, '_page', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\tconst pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\t\t\t\tconst total = nextState.has('_total') ? (nextState.get('_total') as number) : this.state._total;\n\t\t\t\t\tthis.syncPage(nextState, _nextValue as number, pageSize, total);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tprivate beforePageSize = (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\tlet pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\tconst pageSizeOptions = nextState.has('_pageSizeOptions') ? (nextState.get('_pageSizeOptions') as Option<number>[]) : this.state._pageSizeOptions;\n\t\tif (Array.isArray(pageSizeOptions) && pageSizeOptions.length > 0) {\n\t\t\tconst find = pageSizeOptions.find((option) => option.value === pageSize);\n\t\t\tif (find === undefined) {\n\t\t\t\tpageSize = pageSizeOptions[0].value;\n\t\t\t} else {\n\t\t\t\tpageSize = find.value;\n\t\t\t}\n\t\t\tnextState.set('_pageSize', pageSize);\n\t\t}\n\t\tconst page = nextState.has('_page') ? (nextState.get('_page') as number) : this.state._page;\n\t\tconst total = nextState.has('_total') ? (nextState.get('_total') as number) : this.state._total;\n\t\tthis.syncPage(nextState, page, nextState.get('_pageSize') as number, total);\n\t};\n\n\tprivate syncPage = (nextState: Map<string, unknown>, page: number, pageSize: number, total: number) => {\n\t\t// count === 0 means no data\n\t\tif (total > 0) {\n\t\t\tconst count = this.calcCount(total, pageSize);\n\t\t\tif (count > 0) {\n\t\t\t\tif (page > count) {\n\t\t\t\t\tnextState.set('_page', count);\n\t\t\t\t\tthis.onChangePage(STATE_CHANGE_EVENT, count);\n\t\t\t\t} else if (page < 1) {\n\t\t\t\t\tnextState.set('_page', 1);\n\t\t\t\t\tthis.onChangePage(STATE_CHANGE_EVENT, 1);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate beforePageSizeOptions = (nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\tconst options: Option<number>[] = [];\n\t\tif (Array.isArray(nextValue)) {\n\t\t\tfor (const value of nextValue) {\n\t\t\t\tif (typeof value === 'number') {\n\t\t\t\t\toptions.push({\n\t\t\t\t\t\tlabel: translate('kol-page-per-site', { placeholders: { entries: `${value}` } }),\n\t\t\t\t\t\tvalue: value,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tnextState.set('_pageSizeOptions', options);\n\t\tthis.beforePageSize(options, nextState);\n\t};\n\n\t@Watch('_pageSize')\n\tpublic validatePageSize(value?: number): void {\n\t\twatchNumber(this, '_pageSize', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePageSize,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_pageSizeOptions')\n\tpublic validatePageSizeOptions(value?: Stringified<number[]>): void {\n\t\twatchJsonArrayString(this, '_pageSizeOptions', (value) => typeof value === 'number', value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePageSizeOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_siblingCount')\n\tpublic validateSiblingCount(value?: number): void {\n\t\twatchNumber(this, '_siblingCount', Math.max(0, value ?? 1));\n\t}\n\n\t@Watch('_total')\n\tpublic validateTotal(value?: number): void {\n\t\twatchNumber(this, '_total', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\tconst page = nextState.has('_page') ? (nextState.get('_page') as number) : this.state._page;\n\t\t\t\t\tconst pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\t\t\t\tthis.syncPage(nextState, page, pageSize, _nextValue as number);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Align): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriButtonVariant): void {\n\t\twatchButtonVariant(this, '_variant', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateBoundaryCount(this._boundaryCount);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateHasButtons(this._hasButtons);\n\t\tthis.validateOn(this._on);\n\t\tthis.validatePage(this._page);\n\t\tthis.validatePageSize(this._pageSize);\n\t\tthis.validatePageSizeOptions(this._pageSizeOptions);\n\t\tthis.validateSiblingCount(this._siblingCount);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateTotal(this._total);\n\t\tthis.validateVariant(this._variant);\n\n\t\t/**\n\t\t * Die Seite muss als letztes gesetzt werden, da sonst die Seite\n\t\t * nicht korrekt berechnet wird.\n\t\t */\n\t\tthis.validatePage(this._page);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["defaultStyleCss","leftDoubleArrowIcon","left","leftSingleArrow","rightSingleArrowIcon","right","rightDoubleArrowIcon","KolPagination","this","nonce","calcCount","total","pageSize","Math","ceil","getCount","state","_total","_pageSize","onClick","event","page","_on","onChangePage","timeout","setTimeout","clearTimeout","onChangePageSize","value","parseInt","onGoToFirst","onGoToEnd","onGoBackward","_page","onGoForward","beforePageSize","_nextValue","nextState","has","get","pageSizeOptions","_pageSizeOptions","Array","isArray","length","find","option","undefined","set","syncPage","count","STATE_CHANGE_EVENT","beforePageSizeOptions","nextValue","options","push","label","translate","placeholders","entries","_boundaryCount","_hasButtons","first","last","next","previous","_siblingCount","_variant","render","ellipsis","pageButtons","from","keys","map","index","getSelectedPageButton","getUnselectedPageButton","h","class","key","Host","exportparts","_customClass","_disabled","_icon","_hideLabel","_label","_tooltipAlign","_a","_id","_list","onChange","_value","_ariaLabel","toFixed","_ariaCurrent","validateBoundaryCount","watchNumber","max","validateCustomClass","watchString","defaultValue","validateHasButtons","watchValidator","Set","hooks","beforePatch","parseJson","e","delete","Object","assign","validateOn","validatePage","validatePageSize","validatePageSizeOptions","watchJsonArrayString","validateSiblingCount","validateTotal","validateTooltipAlign","watchTooltipAlignment","validateVariant","watchButtonVariant","componentWillLoad"],"sources":["./src/components/pagination/style.css?tag=kol-pagination&mode=default&encapsulation=shadow","./src/components/pagination/component.tsx"],"sourcesContent":["@import url(../style.css);\n.separator:before {\n\tcontent: '•••';\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { KoliBriButtonVariant, KoliBriButtonVariantPropState, KoliBriButtonCustomClassPropState, watchTooltipAlignment } from '../../types/button-link';\nimport { nonce } from '../../utils/dev.utils';\nimport { parseJson, watchJsonArrayString, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchButtonVariant } from '../button/controller';\nimport { Align } from '../../types/props';\nimport { KoliBriPaginationButtonCallbacks } from './types';\nimport { Stringified } from '../../types/common';\nimport { Option } from '../../types/input/types';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { translate } from '../../i18n';\n\n/**\n * Der HasButton-Typ definiert die Einstellungsmöglichkeiten der speziellen\n * Sprung-Schalter der Pagination.\n */\nexport type PaginationHasButton = {\n\t/**\n\t * Der First-Button ist der Schalter, um direkt auf die erste Seite zu gelangen.\n\t */\n\tfirst: boolean;\n\t/**\n\t * Der Last-Button ist der Schalter, um direkt auf die letzte Seite zu gelangen.\n\t */\n\tlast: boolean;\n\t/**\n\t * Der Next-Button ist der Schalter, um direkt auf die nächste Seite zu gelangen.\n\t */\n\tnext: boolean;\n\t/**\n\t * Der Previous-Button ist der Schalter, um direkt auf die vorherige Seite zu gelangen.\n\t */\n\tprevious: boolean;\n};\n\nexport type RequiredProps = {\n\ton: KoliBriPaginationButtonCallbacks;\n\tpage: number;\n\ttotal: number;\n};\nexport type OptionalProps = KoliBriButtonCustomClassPropState &\n\tKoliBriButtonVariantPropState & {\n\t\tboundaryCount: number;\n\t\thasButtons: boolean | Stringified<PaginationHasButton>;\n\t\tpageSize: number;\n\t\tpageSizeOptions: Stringified<number[]>;\n\t\tsiblingCount: number;\n\t\ttooltipAlign: Align;\n\t};\n// export type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = KoliBriButtonVariantPropState & {\n\tboundaryCount: number;\n\thasButtons: PaginationHasButton;\n\tpage: number;\n\tpageSize: number;\n\tpageSizeOptions: Option<number>[];\n\ton: KoliBriPaginationButtonCallbacks;\n\tsiblingCount: number;\n\ttotal: number;\n};\ntype OptionalStates = KoliBriButtonCustomClassPropState & {\n\ttooltipAlign: Align;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst leftDoubleArrowIcon = {\n\tleft: 'codicon codicon-debug-reverse-continue',\n};\nconst leftSingleArrow = {\n\tleft: 'codicon codicon-chevron-left',\n};\nconst rightSingleArrowIcon = {\n\tright: 'codicon codicon-chevron-right',\n};\nconst rightDoubleArrowIcon = {\n\tright: 'codicon codicon-debug-continue',\n};\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly nonce = nonce();\n\n\tprivate readonly calcCount = (total: number, pageSize = 1): number => Math.ceil(total / pageSize);\n\n\tprivate readonly getCount = (): number => this.calcCount(this.state._total, this.state._pageSize);\n\n\tpublic render(): JSX.Element {\n\t\tlet ellipsis = false;\n\t\tconst count = this.getCount();\n\t\tconst pageButtons = Array.from(Array(count).keys())\n\t\t\t.map((index: number) => index + 1)\n\t\t\t.map((page: number) => {\n\t\t\t\tif (\n\t\t\t\t\tpage <= this.state._boundaryCount ||\n\t\t\t\t\tpage > count - this.state._boundaryCount ||\n\t\t\t\t\t(page >= this.state._page - this.state._siblingCount && page <= this.state._page + this.state._siblingCount)\n\t\t\t\t) {\n\t\t\t\t\tellipsis = true;\n\t\t\t\t\tif (this.state._page === page) {\n\t\t\t\t\t\treturn this.getSelectedPageButton(page);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn this.getUnselectedPageButton(page);\n\t\t\t\t\t}\n\t\t\t\t} else if (ellipsis === true) {\n\t\t\t\t\tellipsis = false;\n\t\t\t\t\treturn <span class=\"separator\" key={`${this.nonce}-el-${page}`}></span>;\n\t\t\t\t} else {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t});\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t{this.state._hasButtons.first && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\tclass=\"first\"\n\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t_icon={leftDoubleArrowIcon}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_label={translate('kol-page-first')}\n\t\t\t\t\t\t\t_on={this.onGoToFirst}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._hasButtons.previous && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\tclass=\"previous\"\n\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={this.state._page <= 1}\n\t\t\t\t\t\t\t_icon={leftSingleArrow}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_label={translate('kol-page-back')}\n\t\t\t\t\t\t\t_on={this.onGoBackward}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t\t{pageButtons}\n\t\t\t\t\t{this.state._hasButtons.next && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\tclass=\"next\"\n\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t_icon={rightSingleArrowIcon}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_label={translate('kol-page-next')}\n\t\t\t\t\t\t\t_on={this.onGoForward}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._hasButtons.last && (\n\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\tclass=\"last\"\n\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t\t\t\t_disabled={count <= this.state._page}\n\t\t\t\t\t\t\t_icon={rightDoubleArrowIcon}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_label={translate('kol-page-last')}\n\t\t\t\t\t\t\t_on={this.onGoToEnd}\n\t\t\t\t\t\t\t_variant={this.state._variant}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._tooltipAlign}\n\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{this.state._pageSizeOptions?.length > 0 && (\n\t\t\t\t\t<kol-select\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_id=\"pagination-size\"\n\t\t\t\t\t\t_label={translate('kol-entries-per-site')}\n\t\t\t\t\t\t_list={this.state._pageSizeOptions}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonChange: this.onChangePageSize,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_value={[this.state._pageSize]}\n\t\t\t\t\t></kol-select>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, wie viele Seiten neben den am Rand liegenden Pfeil-Schaltern angezeigt werden sollen.\n\t */\n\t@Prop() public _boundaryCount?: number = 1;\n\n\t/**\n\t * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t */\n\t@Prop() public _customClass?: string;\n\n\t/**\n\t * Setzt die Sichtbarkeit der Anfang/zurück/weiter/Ende-Schaltflächen.\n\t */\n\t@Prop() public _hasButtons?: boolean | Stringified<PaginationHasButton> = true;\n\n\t/**\n\t * Gibt an, welche Seite aktuell ausgewählt ist.\n\t */\n\t@Prop() public _page!: number;\n\n\t/**\n\t * Gibt an, wie viele Einträge pro Seite angezeigt werden.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _pageSize = 1;\n\n\t/**\n\t * Setzt die Optionen für das Seitenlängenselect.\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 * Gibt an, wie viele Seiten neben der aktuell Ausgewählten angezeigt werden.\n\t */\n\t@Prop() public _siblingCount?: number = 1;\n\n\t/**\n\t * Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/**\n\t * Setzt die Gesamtanzahl der Seiten.\n\t */\n\t@Prop() public _total!: number;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n\n\t@State() public state: States = {\n\t\t_boundaryCount: 1,\n\t\t_hasButtons: {\n\t\t\tfirst: true,\n\t\t\tlast: true,\n\t\t\tnext: true,\n\t\t\tprevious: true,\n\t\t},\n\t\t_on: {\n\t\t\tonClick: () => null,\n\t\t},\n\t\t_page: 0,\n\t\t_pageSize: 1,\n\t\t_pageSizeOptions: [],\n\t\t_siblingCount: 1,\n\t\t_total: 0,\n\t\t_variant: 'normal',\n\t};\n\n\tprivate onClick = (event: Event, page: number) => {\n\t\tif (typeof this.state._on.onClick === 'function') {\n\t\t\tthis.state._on.onClick(event, page);\n\t\t}\n\t\tthis.onChangePage(event, page);\n\t};\n\n\tprivate onChangePage = (event: Event, page: number) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tif (typeof this.state._on.onChangePage === 'function') {\n\t\t\t\tthis.state._on.onChangePage(event, page);\n\t\t\t}\n\t\t});\n\t};\n\n\tprivate onChangePageSize = (event: Event, value: unknown) => {\n\t\tvalue = parseInt((value as string[])[0]);\n\t\tif (typeof value === 'number' && value > 0 && this._pageSize !== value) {\n\t\t\tthis._pageSize = value;\n\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t\tif (typeof this.state._on.onChangePageSize === 'function') {\n\t\t\t\t\tthis.state._on.onChangePageSize(event, this._pageSize);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t};\n\n\tprivate readonly onGoToFirst = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, 1);\n\t\t},\n\t};\n\tprivate readonly onGoToEnd = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.getCount());\n\t\t},\n\t};\n\tprivate readonly onGoBackward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page - 1);\n\t\t},\n\t};\n\tprivate readonly onGoForward = {\n\t\tonClick: (event: Event) => {\n\t\t\tthis.onClick(event, this.state._page + 1);\n\t\t},\n\t};\n\n\tprivate getUnselectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<kol-button\n\t\t\t\texportparts=\"icon\"\n\t\t\t\tkey={`${this.nonce}-${page}`}\n\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t_ariaLabel={translate('kol-page-current', { placeholders: { page: page.toFixed(0) } })}\n\t\t\t\t_label={`${page}`}\n\t\t\t\t_on={{\n\t\t\t\t\tonClick: (event: Event) => {\n\t\t\t\t\t\tthis.onClick(event, page);\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t\t_variant={this.state._variant}\n\t\t\t></kol-button>\n\t\t);\n\t}\n\n\tprivate getSelectedPageButton(page: number): JSX.Element {\n\t\treturn (\n\t\t\t<kol-button-wc\n\t\t\t\tclass=\"selected\"\n\t\t\t\tkey={`${this.nonce}-selected`}\n\t\t\t\t_customClass={this.state._customClass}\n\t\t\t\t_disabled={true}\n\t\t\t\t_ariaCurrent={true}\n\t\t\t\t_ariaLabel={translate('kol-page-selected', { placeholders: { page: page.toFixed(0) } })}\n\t\t\t\t_label={`${page}`}\n\t\t\t\t_variant={this.state._variant}\n\t\t\t/>\n\t\t);\n\t}\n\n\t@Watch('_boundaryCount')\n\tpublic validateBoundaryCount(value?: number): void {\n\t\twatchNumber(this, '_boundaryCount', Math.max(0, value ?? 1));\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: string): void {\n\t\twatchString(this, '_customClass', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\t@Watch('_hasButtons')\n\tpublic validateHasButtons(value?: string | boolean | Stringified<PaginationHasButton>): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_hasButtons',\n\t\t\t(value) => typeof value === 'boolean' || typeof value === 'string' || (typeof value === 'object' && value !== null),\n\t\t\tnew Set(['Boolean', 'PaginationHasButton']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: (nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\t\tif (typeof nextValue === 'boolean') {\n\t\t\t\t\t\t\tnextState.set('_hasButtons', {\n\t\t\t\t\t\t\t\tfirst: nextValue,\n\t\t\t\t\t\t\t\tlast: nextValue,\n\t\t\t\t\t\t\t\tnext: nextValue,\n\t\t\t\t\t\t\t\tprevious: nextValue,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tif (typeof nextValue === 'string') {\n\t\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\t\tnextValue = parseJson<PaginationHasButton>(nextValue);\n\t\t\t\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\t\t\t\tnextState.delete('_hasButtons');\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (typeof nextValue === 'object' && nextValue !== null) {\n\t\t\t\t\t\t\t\tnextState.set('_hasButtons', {\n\t\t\t\t\t\t\t\t\t...this.state._hasButtons,\n\t\t\t\t\t\t\t\t\tfirst:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).first === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).first === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.first,\n\t\t\t\t\t\t\t\t\tlast:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).last === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).last === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.last,\n\t\t\t\t\t\t\t\t\tnext:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).next === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).next === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.next,\n\t\t\t\t\t\t\t\t\tprevious:\n\t\t\t\t\t\t\t\t\t\ttypeof (nextValue as PaginationHasButton).previous === 'boolean'\n\t\t\t\t\t\t\t\t\t\t\t? (nextValue as PaginationHasButton).previous === true\n\t\t\t\t\t\t\t\t\t\t\t: this.state._hasButtons.previous,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriPaginationButtonCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_page')\n\tpublic validatePage(value?: number): void {\n\t\twatchNumber(this, '_page', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\tconst pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\t\t\t\tconst total = nextState.has('_total') ? (nextState.get('_total') as number) : this.state._total;\n\t\t\t\t\tthis.syncPage(nextState, _nextValue as number, pageSize, total);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tprivate beforePageSize = (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\tlet pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\tconst pageSizeOptions = nextState.has('_pageSizeOptions') ? (nextState.get('_pageSizeOptions') as Option<number>[]) : this.state._pageSizeOptions;\n\t\tif (Array.isArray(pageSizeOptions) && pageSizeOptions.length > 0) {\n\t\t\tconst find = pageSizeOptions.find((option) => option.value === pageSize);\n\t\t\tif (find === undefined) {\n\t\t\t\tpageSize = pageSizeOptions[0].value;\n\t\t\t} else {\n\t\t\t\tpageSize = find.value;\n\t\t\t}\n\t\t\tnextState.set('_pageSize', pageSize);\n\t\t}\n\t\tconst page = nextState.has('_page') ? (nextState.get('_page') as number) : this.state._page;\n\t\tconst total = nextState.has('_total') ? (nextState.get('_total') as number) : this.state._total;\n\t\tthis.syncPage(nextState, page, nextState.get('_pageSize') as number, total);\n\t};\n\n\tprivate syncPage = (nextState: Map<string, unknown>, page: number, pageSize: number, total: number) => {\n\t\t// count === 0 means no data\n\t\tif (total > 0) {\n\t\t\tconst count = this.calcCount(total, pageSize);\n\t\t\tif (count > 0) {\n\t\t\t\tif (page > count) {\n\t\t\t\t\tnextState.set('_page', count);\n\t\t\t\t\tthis.onChangePage(STATE_CHANGE_EVENT, count);\n\t\t\t\t} else if (page < 1) {\n\t\t\t\t\tnextState.set('_page', 1);\n\t\t\t\t\tthis.onChangePage(STATE_CHANGE_EVENT, 1);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate beforePageSizeOptions = (nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\tconst options: Option<number>[] = [];\n\t\tif (Array.isArray(nextValue)) {\n\t\t\tfor (const value of nextValue) {\n\t\t\t\tif (typeof value === 'number') {\n\t\t\t\t\toptions.push({\n\t\t\t\t\t\tlabel: translate('kol-page-per-site', { placeholders: { entries: `${value}` } }),\n\t\t\t\t\t\tvalue: value,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tnextState.set('_pageSizeOptions', options);\n\t\tthis.beforePageSize(options, nextState);\n\t};\n\n\t@Watch('_pageSize')\n\tpublic validatePageSize(value?: number): void {\n\t\twatchNumber(this, '_pageSize', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePageSize,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_pageSizeOptions')\n\tpublic validatePageSizeOptions(value?: Stringified<number[]>): void {\n\t\twatchJsonArrayString(this, '_pageSizeOptions', (value) => typeof value === 'number', value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePageSizeOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_siblingCount')\n\tpublic validateSiblingCount(value?: number): void {\n\t\twatchNumber(this, '_siblingCount', Math.max(0, value ?? 1));\n\t}\n\n\t@Watch('_total')\n\tpublic validateTotal(value?: number): void {\n\t\twatchNumber(this, '_total', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: (_nextValue: unknown, nextState: Map<string, unknown>) => {\n\t\t\t\t\tconst page = nextState.has('_page') ? (nextState.get('_page') as number) : this.state._page;\n\t\t\t\t\tconst pageSize = nextState.has('_pageSize') ? (nextState.get('_pageSize') as number) : this.state._pageSize;\n\t\t\t\t\tthis.syncPage(nextState, page, pageSize, _nextValue as number);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Align): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriButtonVariant): void {\n\t\twatchButtonVariant(this, '_variant', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateBoundaryCount(this._boundaryCount);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateHasButtons(this._hasButtons);\n\t\tthis.validateOn(this._on);\n\t\tthis.validatePage(this._page);\n\t\tthis.validatePageSize(this._pageSize);\n\t\tthis.validatePageSizeOptions(this._pageSizeOptions);\n\t\tthis.validateSiblingCount(this._siblingCount);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateTotal(this._total);\n\t\tthis.validateVariant(this._variant);\n\n\t\t/**\n\t\t * Die Seite muss als letztes gesetzt werden, da sonst die Seite\n\t\t * nicht korrekt berechnet wird.\n\t\t */\n\t\tthis.validatePage(this._page);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as s}from"./index-34c3d6f8.js";import{c as o,o as e,f as a,s as n,a as h}from"./floating-ui.dom.esm-74010e65.js";import{g as r}from"./dev.utils-157f0499.js";import{p}from"./reuse-3a02afb9.js";import{w as l}from"./prop.validators-f81af56e.js";import{v as c}from"./show-a9e2d4c4.js";import"./a11y.tipps-2e27f8e6.js";import"./index-ff788b4b.js";const d=(t,e)=>{l(t,"_align",e)},f=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-popover{height:0;position:absolute}kol-popover .popover{background-color:#fff;min-height:max-content;min-width:max-content;opacity:0;position:absolute}kol-popover .hidden{display:none}kol-popover .show{animation:0.3s ease-in forwards fadeInOpacity}kol-popover .disappear{animation:0.3s ease-in backwards fadeInOpacity}kol-popover .arrow{background-color:inherit;height:var(--font-size);position:absolute;rotate:0.125turn;width:var(--font-size);z-index:-1}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",u=class{constructor(i){t(this,i),this.alignPopover=t=>{setTimeout((()=>{var i;if("test"!==p&&this.triggerElement&&this.popoverElement){const s=this.triggerElement,r=this.popoverElement,l=this.arrowElement,p=[e(null!==(i=null==l?void 0:l.offsetHeight)&&void 0!==i?i:10),a(),n()];l&&p.push(h({element:l})),o(s,r,{placement:this.state._align,middleware:p}).then((({x:e,y:o,middlewareData:i,placement:s})=>{this.setPosition(e,o,i,s,t)}))}}))},this.showPopover=()=>{this.addListenersToBody(),this.alignPopover((()=>{this.state=Object.assign(Object.assign({},this.state),{_visible:!0})}))},this.hidePopoverByEscape=t=>{"Escape"===t.key&&this.hidePopover()},this.hidePopoverByClickOutside=t=>{this.host&&!this.host.contains(t.target)&&this.hidePopover()},this.catchHostAndTriggerElement=t=>{t&&(this.host=t,this.triggerElement=t.previousElementSibling)},this.catchPopoverElement=t=>{this.popoverElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this._show=!1,this.state={_align:"top",_show:!1,_visible:!1}}setPosition(t,e,o,i,s){if(this.popoverElement){const r={left:this.popoverElement.style.left,top:this.popoverElement.style.top};if(Object.assign(this.popoverElement.style,{left:`${t}px`,top:`${e}px`}),this.arrowElement&&o.arrow)switch(i){case"top":this.arrowElement.style.inset=`100% auto auto ${o.arrow.x||0}px`,this.arrowElement.style.translate="0 -50%";break;case"right":this.arrowElement.style.inset=`${o.arrow.y||0}px 100% auto auto`,this.arrowElement.style.translate="50% 0";break;case"bottom":this.arrowElement.style.inset=`auto auto 100% ${o.arrow.x||0}px`,this.arrowElement.style.translate="0 50%";break;case"left":this.arrowElement.style.inset=`${o.arrow.y||0}px auto auto 100%`,this.arrowElement.style.translate="-50% 0"}r.left!==this.popoverElement.style.left||r.top!==this.popoverElement.style.top?this.alignPopover(s):"function"==typeof s&&s()}}hidePopover(){var t;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody()}addListenersToBody(){var t;const e=r().body;e.addEventListener("keyup",this.hidePopoverByEscape),e.addEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.addEventListener("scroll",this.showPopover,{passive:!0})}removeListenersToBody(){var t;const e=r().body;e.removeEventListener("keyup",this.hidePopoverByEscape),e.removeEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.removeEventListener("scroll",this.showPopover)}render(){return i(s,{ref:this.catchHostAndTriggerElement},i("div",{class:{popover:!0,hidden:!this.state._show,show:this.state._visible},ref:this.catchPopoverElement},i("div",{class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),i("slot",null)))}validateAlign(t){d(this,t)}validateShow(t){c(this,t),t&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_show:["validateShow"]}}};u.style=f;export{u as kol_popover};
+import{r as t,h as i,H as s}from"./index-6ad587d0.js";import{c as o,o as e,f as a,s as n,a as h}from"./floating-ui.dom.esm-2bceafa3.js";import{g as r}from"./dev.utils-157f0499.js";import{p}from"./reuse-3a02afb9.js";import{w as l}from"./prop.validators-f81af56e.js";import{v as c}from"./show-a9e2d4c4.js";import"./a11y.tipps-2e27f8e6.js";import"./index-ff788b4b.js";const d=(t,e)=>{l(t,"_align",e)},f=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-popover{height:0;position:absolute}kol-popover .popover{background-color:#fff;min-height:max-content;min-width:max-content;opacity:0;position:absolute}kol-popover .hidden{display:none}kol-popover .show{animation:0.3s ease-in forwards fadeInOpacity}kol-popover .disappear{animation:0.3s ease-in backwards fadeInOpacity}kol-popover .arrow{background-color:inherit;height:var(--font-size);position:absolute;rotate:0.125turn;width:var(--font-size);z-index:-1}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",u=class{constructor(i){t(this,i),this.alignPopover=t=>{setTimeout((()=>{var i;if("test"!==p&&this.triggerElement&&this.popoverElement){const s=this.triggerElement,r=this.popoverElement,l=this.arrowElement,p=[e(null!==(i=null==l?void 0:l.offsetHeight)&&void 0!==i?i:10),a(),n()];l&&p.push(h({element:l})),o(s,r,{placement:this.state._align,middleware:p}).then((({x:e,y:o,middlewareData:i,placement:s})=>{this.setPosition(e,o,i,s,t)}))}}))},this.showPopover=()=>{this.addListenersToBody(),this.alignPopover((()=>{this.state=Object.assign(Object.assign({},this.state),{_visible:!0})}))},this.hidePopoverByEscape=t=>{"Escape"===t.key&&this.hidePopover()},this.hidePopoverByClickOutside=t=>{this.host&&!this.host.contains(t.target)&&this.hidePopover()},this.catchHostAndTriggerElement=t=>{t&&(this.host=t,this.triggerElement=t.previousElementSibling)},this.catchPopoverElement=t=>{this.popoverElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this._show=!1,this.state={_align:"top",_show:!1,_visible:!1}}setPosition(t,e,o,i,s){if(this.popoverElement){const a={left:this.popoverElement.style.left,top:this.popoverElement.style.top};if(Object.assign(this.popoverElement.style,{left:`${t}px`,top:`${e}px`}),this.arrowElement&&o.arrow)switch(i){case"top":this.arrowElement.style.inset=`100% auto auto ${o.arrow.x||0}px`,this.arrowElement.style.translate="0 -50%";break;case"right":this.arrowElement.style.inset=`${o.arrow.y||0}px 100% auto auto`,this.arrowElement.style.translate="50% 0";break;case"bottom":this.arrowElement.style.inset=`auto auto 100% ${o.arrow.x||0}px`,this.arrowElement.style.translate="0 50%";break;case"left":this.arrowElement.style.inset=`${o.arrow.y||0}px auto auto 100%`,this.arrowElement.style.translate="-50% 0"}a.left!==this.popoverElement.style.left||a.top!==this.popoverElement.style.top?this.alignPopover(s):"function"==typeof s&&s()}}hidePopover(){var t;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody()}addListenersToBody(){var t;const e=r().body;e.addEventListener("keyup",this.hidePopoverByEscape),e.addEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.addEventListener("scroll",this.showPopover,{passive:!0})}removeListenersToBody(){var t;const e=r().body;e.removeEventListener("keyup",this.hidePopoverByEscape),e.removeEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.removeEventListener("scroll",this.showPopover)}render(){return i(s,{ref:this.catchHostAndTriggerElement},i("div",{class:{popover:!0,hidden:!this.state._show,show:this.state._visible},ref:this.catchPopoverElement},i("div",{class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),i("slot",null)))}validateAlign(t){d(this,t)}validateShow(t){c(this,t),t&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_show:["validateShow"]}}};u.style=f;export{u as kol_popover};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,H as i}from"./index-34c3d6f8.js";import{w as a,e as s}from"./prop.validators-f81af56e.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";const r=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}progress{display:block;height:0;overflow:hidden;width:0}.progress{transition:0.5s ease-in-out 0.25s}.cycle .progress{transform-origin:50% 50%;transform:rotate(-90deg)}",n=t=>"cycle"===t._variant?e("svg",{class:"cycle",width:"100",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},e("circle",{fill:"none",stroke:"#efefef",cx:"6px",cy:"6px",r:"5px"}),e("text",{"aria-hidden":"true","font-size":"0.1em",x:"50%",y:"50%","text-anchor":"middle",fill:"currentColor"},t._label&&e("tspan",{"text-anchor":"middle",x:"50%",dy:"-0.5em"},t._label),e("tspan",{"text-anchor":"middle",x:"50%",dy:t._label?"1em":"0em"},t._value,t._unit)),e("circle",{class:"progress","stroke-linecap":"round","stroke-dasharray":`${Math.round(t._value/t._max*32)}px 32px`,fill:"none",stroke:"#0075ff",cx:"6px",cy:"6px",r:"5px"})):e("div",{class:"bar"},t._label&&e("div",null,t._label),e("div",{style:{display:"flex",gap:"0.3em"}},e("svg",{width:"100",viewBox:"0 0 24 2",xmlns:"http://www.w3.org/2000/svg"},e("line",{"stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:"23",y2:"1",fill:"#efefef",stroke:"#efefef"}),e("line",{class:"progress","stroke-width":"2",x1:"1","stroke-linecap":"round",y1:"1",x2:`${1+Math.round(t._value/t._max*22)}`,y2:"1",fill:"#0075ff",stroke:"#0075ff"})),e("text",{"aria-hidden":"true","font-size":"0.1em","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},t._value,t._unit))),l=class{constructor(e){t(this,e),this._label=void 0,this._max=void 0,this._type=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return e(i,null,n(this.state),e("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),e("span",{"aria-live":"polite","aria-relevant":"removals text",hidden:!0},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(e){a(this,"_label",e)}validateMax(e){"number"!=typeof e&&(e=100),s(this,"_max",e,{required:!0})}validateType(e){this.validateVariant(e)}validateUnit(e){a(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),s(this,"_value",e,{required:!0})}validateVariant(e){!e&&this._type&&(e=this._type),"cycle"!==e&&(e="bar"),this.state=Object.assign(Object.assign({},this.state),{_variant:e})}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant||this._type),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"],_type:["validateType"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};l.style={default:r};export{l as kol_progress};
+import{r as t,h as e,H as i}from"./index-6ad587d0.js";import{w as a,e as s}from"./prop.validators-f81af56e.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";const r=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}progress{display:block;height:0;overflow:hidden;width:0}.progress{transition:250ms ease-in-out 50ms}@media (prefers-reduced-motion){.progress{transition-duration:0s;transition-delay:0s}}.cycle .progress{transform-origin:50% 50%;transform:rotate(-90deg)}",n=t=>"cycle"===t._variant?e("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},e("circle",{fill:"none",stroke:"#000",cx:"60px",cy:"60px",r:"50px","stroke-width":"10"}),e("circle",{fill:"none",stroke:"#ddd",cx:"60px",cy:"60px",r:"50px","stroke-width":"8"}),e("text",{"aria-hidden":"true",x:"50%",y:"50%","text-anchor":"middle",fill:"currentColor"},t._label&&e("tspan",{"text-anchor":"middle",x:"50%",dy:"-5em"},t._label),e("tspan",{"text-anchor":"middle",x:"50%",dy:t._label?"10em":"0em"},t._value,t._unit)),e("circle",{class:"progress","stroke-linecap":"round","stroke-dasharray":`${Math.round(t._value/t._max*320)}px 320px`,"stroke-width":"8",fill:"none",stroke:"#0075ff",cx:"60px",cy:"60px",r:"50px"})):e("div",{class:"bar"},t._label&&e("div",null,t._label),e("div",{style:{display:"flex",gap:"0.3em"}},e("svg",{width:"100",viewBox:"0 0 102 8",xmlns:"http://www.w3.org/2000/svg"},e("rect",{x:"1",y:"1",height:"8",rx:"4",fill:"#efefef",stroke:"#000000",width:"100"}),e("rect",{x:"1",y:"2",height:"6",rx:"4",fill:"#0075ff",stroke:"#0075ff",width:t._value/t._max*100,class:"progress"})),e("text",{"aria-hidden":"true","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},t._value,t._unit))),o=class{constructor(e){t(this,e),this._label=void 0,this._max=void 0,this._type=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return e(i,null,n(this.state),e("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),e("span",{"aria-live":"polite","aria-relevant":"removals text",hidden:!0},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(t){a(this,"_label",t)}validateMax(t){"number"!=typeof t&&(t=100),s(this,"_max",t,{required:!0})}validateType(t){this.validateVariant(t)}validateUnit(t){a(this,"_unit",t)}validateValue(t){"number"!=typeof t&&(t=0),s(this,"_value",t,{required:!0})}validateVariant(t){!t&&this._type&&(t=this._type),"cycle"!==t&&(t="bar"),this.state=Object.assign(Object.assign({},this.state),{_variant:t})}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant||this._type),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"],_type:["validateType"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};o.style={default:r};export{o as kol_progress};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","createProgressSVG","state","_variant","h","class","width","viewBox","xmlns","fill","stroke","cx","cy","r","x","y","_label","dy","_value","_unit","Math","round","_max","style","display","gap","x1","y1","x2","y2","KolProcess","_liveValue","render","Host","this","max","value","hidden","validateLabel","watchString","validateMax","watchNumber","required","validateType","validateVariant","validateUnit","validateValue","_type","Object","assign","componentWillLoad","interval","setInterval","disconnectedCallback","clearInterval"],"sources":["./src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","./src/components/progress/component.tsx"],"sourcesContent":["@import url(../style.css);\nprogress {\n\tdisplay: block;\n\theight: 0;\n\toverflow: hidden;\n\twidth: 0;\n}\n.progress {\n\ttransition: 0.5s ease-in-out 0.25s;\n}\n.cycle .progress {\n\ttransform-origin: 50% 50%;\n\ttransform: rotate(-90deg);\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { KoliBriProgressType } from '../../types/progress';\nimport { PropLabel } from '../../types/props';\nimport { watchNumber, watchString } from '../../utils/prop.validators';\n\ntype RequiredProps = {\n\tmax: number;\n\tvalue: number;\n};\ntype OptionalProps = PropLabel & {\n\ttype: KoliBriProgressType; // @deprecated\n\tunit: string;\n\tvariant: KoliBriProgressType;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & {\n\tliveValue: number;\n};\ntype OptionalStates = PropLabel & {\n\tunit: string;\n\tvariant: KoliBriProgressType;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: States): JSX.Element => {\n\tswitch (state._variant) {\n\t\tcase 'cycle':\n\t\t\treturn (\n\t\t\t\t<svg class=\"cycle\" width=\"100\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle fill=\"none\" stroke=\"#efefef\" cx=\"6px\" cy=\"6px\" r=\"5px\"></circle>\n\t\t\t\t\t<text aria-hidden=\"true\" font-size=\"0.1em\" x=\"50%\" y=\"50%\" text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t{state._label && (\n\t\t\t\t\t\t\t<tspan text-anchor=\"middle\" x=\"50%\" dy=\"-0.5em\">\n\t\t\t\t\t\t\t\t{state._label}\n\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<tspan text-anchor=\"middle\" x=\"50%\" dy={state._label ? '1em' : '0em'}>\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</tspan>\n\t\t\t\t\t</text>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * 32)}px 32px`}\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t\tcx=\"6px\"\n\t\t\t\t\t\tcy=\"6px\"\n\t\t\t\t\t\tr=\"5px\"\n\t\t\t\t\t></circle>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div class=\"bar\">\n\t\t\t\t\t{state._label && <div>{state._label}</div>}\n\t\t\t\t\t<div style={{ display: 'flex', gap: '0.3em' }}>\n\t\t\t\t\t\t<svg width=\"100\" viewBox=\"0 0 24 2\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<line stroke-width=\"2\" x1=\"1\" stroke-linecap=\"round\" y1=\"1\" x2=\"23\" y2=\"1\" fill=\"#efefef\" stroke=\"#efefef\"></line>\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\tx1=\"1\"\n\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\ty1=\"1\"\n\t\t\t\t\t\t\t\tx2={`${1 + Math.round((state._value / state._max) * 22)}`}\n\t\t\t\t\t\t\t\ty2=\"1\"\n\t\t\t\t\t\t\t\tfill=\"#0075ff\"\n\t\t\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t\t\t></line>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<text aria-hidden=\"true\" font-size=\"0.1em\" text-anchor=\"middle\" dominant-baseline=\"central\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate interval?: NodeJS.Timer;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t<progress aria-busy={this.state._value < this.state._max ? 'true' : 'false'} max={this.state._max} value={this.state._value}></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" hidden>\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Deprecated: Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.\n\t * @deprecated will be removed in v2, use _variant\n\t */\n\t@Prop() public _type?: KoliBriProgressType;\n\n\t/**\n\t * Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Gibt an, wie weit die Anzeige fortgeschritten ist.\n\t */\n\t@Prop() public _value!: number;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriProgressType;\n\n\t@State() public state: States = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\twatchString(this, '_label', value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t// @deprecated remove with v2\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriProgressType): void {\n\t\tthis.validateVariant(value);\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressType): void {\n\t\tif (!value && this._type) {\n\t\t\t// remove with v2\n\t\t\tvalue = this._type;\n\t\t}\n\t\tif (value !== 'cycle') {\n\t\t\tvalue = 'bar';\n\t\t}\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_variant: value,\n\t\t};\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant || this._type);\n\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["defaultStyleCss","createProgressSVG","state","_variant","h","class","width","viewBox","xmlns","fill","stroke","cx","cy","r","x","y","_label","dy","_value","_unit","Math","round","_max","style","display","gap","height","rx","KolProcess","_liveValue","render","Host","this","max","value","hidden","validateLabel","watchString","validateMax","watchNumber","required","validateType","validateVariant","validateUnit","validateValue","_type","Object","assign","componentWillLoad","interval","setInterval","disconnectedCallback","clearInterval"],"sources":["./src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","./src/components/progress/component.tsx"],"sourcesContent":["@import url(../style.css);\nprogress {\n\tdisplay: block;\n\theight: 0;\n\toverflow: hidden;\n\twidth: 0;\n}\n.progress {\n\ttransition: 250ms ease-in-out 50ms;\n}\n@media (prefers-reduced-motion) {\n\t.progress {\n\t\ttransition-duration: 0s;\n\t\ttransition-delay: 0s;\n\t}\n}\n.cycle .progress {\n\ttransform-origin: 50% 50%;\n\ttransform: rotate(-90deg);\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { KoliBriProgressType } from '../../types/progress';\nimport { PropLabel } from '../../types/props';\nimport { watchNumber, watchString } from '../../utils/prop.validators';\n\ntype RequiredProps = {\n\tmax: number;\n\tvalue: number;\n};\ntype OptionalProps = PropLabel & {\n\ttype: KoliBriProgressType; // @deprecated\n\tunit: string;\n\tvariant: KoliBriProgressType;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & {\n\tliveValue: number;\n};\ntype OptionalStates = PropLabel & {\n\tunit: string;\n\tvariant: KoliBriProgressType;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: States): JSX.Element => {\n\tswitch (state._variant) {\n\t\tcase 'cycle':\n\t\t\treturn (\n\t\t\t\t<svg class=\"cycle\" width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle fill=\"none\" stroke=\"#000\" cx=\"60px\" cy=\"60px\" r=\"50px\" stroke-width=\"10\"></circle>\n\t\t\t\t\t<circle fill=\"none\" stroke=\"#ddd\" cx=\"60px\" cy=\"60px\" r=\"50px\" stroke-width=\"8\"></circle>\n\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y=\"50%\" text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t{state._label && (\n\t\t\t\t\t\t\t<tspan text-anchor=\"middle\" x=\"50%\" dy=\"-5em\">\n\t\t\t\t\t\t\t\t{state._label}\n\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<tspan text-anchor=\"middle\" x=\"50%\" dy={state._label ? '10em' : '0em'}>\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</tspan>\n\t\t\t\t\t</text>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * 320)}px 320px`}\n\t\t\t\t\t\tstroke-width=\"8\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t\tcx=\"60px\"\n\t\t\t\t\t\tcy=\"60px\"\n\t\t\t\t\t\tr=\"50px\"\n\t\t\t\t\t></circle>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div class=\"bar\">\n\t\t\t\t\t{state._label && <div>{state._label}</div>}\n\t\t\t\t\t<div style={{ display: 'flex', gap: '0.3em' }}>\n\t\t\t\t\t\t<svg width=\"100\" viewBox=\"0 0 102 8\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<rect x=\"1\" y=\"1\" height=\"8\" rx=\"4\" fill=\"#efefef\" stroke=\"#000000\" width=\"100\"></rect>\n\t\t\t\t\t\t\t<rect x=\"1\" y=\"2\" height=\"6\" rx=\"4\" fill=\"#0075ff\" stroke=\"#0075ff\" width={100 * (state._value / state._max)} class=\"progress\"></rect>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<text aria-hidden=\"true\" text-anchor=\"middle\" dominant-baseline=\"central\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate interval?: NodeJS.Timer;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t<progress aria-busy={this.state._value < this.state._max ? 'true' : 'false'} max={this.state._max} value={this.state._value}></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" hidden>\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Deprecated: Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.\n\t * @deprecated will be removed in v2, use _variant\n\t */\n\t@Prop() public _type?: KoliBriProgressType;\n\n\t/**\n\t * Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Gibt an, wie weit die Anzeige fortgeschritten ist.\n\t */\n\t@Prop() public _value!: number;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriProgressType;\n\n\t@State() public state: States = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\twatchString(this, '_label', value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t// @deprecated remove with v2\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriProgressType): void {\n\t\tthis.validateVariant(value);\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressType): void {\n\t\tif (!value && this._type) {\n\t\t\t// remove with v2\n\t\t\tvalue = this._type;\n\t\t}\n\t\tif (value !== 'cycle') {\n\t\t\tvalue = 'bar';\n\t\t}\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_variant: value,\n\t\t};\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant || this._type);\n\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as e}from"./index-34c3d6f8.js";import{w as n,a}from"./prop.validators-f81af56e.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";const o=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}cite,figure,q+figcaption{display:inline;margin:0;padding:0}blockquote:before{content:open-quote}blockquote::after{content:close-quote}cite:before{content:'—'}.block cite:before{padding-right:0.5em}.inline cite:before{padding:0.5em}",r=class{constructor(i){t(this,i),this._caption=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateCaption(t){n(this,"_caption",t)}validateHref(t){n(this,"_href",t,{required:!0})}validateQuote(t){n(this,"_quote",t,{required:!0})}validateVariant(t){a(this,"_variant",(t=>"block"===t||"inline"===t),new Set(["block","inline"]),t)}componentWillLoad(){this.validateCaption(this._caption),this.validateHref(this._href),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const t=""!==this.state._quote;return i(e,null,i("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?i("blockquote",{cite:this.state._href},this.state._quote,i("span",{"aria-hidden":t?"true":void 0,hidden:t},i("slot",{name:"expert"}))):i("q",{cite:this.state._href},this.state._quote,i("span",{"aria-hidden":t?"true":void 0,hidden:t},i("slot",{name:"expert"}))),"string"==typeof this.state._caption&&this.state._caption.length>0&&i("figcaption",null,i("cite",null,i("kol-link",{_href:this.state._href,_label:this.state._caption,_target:"_blank"})))))}static get watchers(){return{_caption:["validateCaption"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};r.style={default:o};export{r as kol_quote};
+import{r as t,h as i,H as e}from"./index-6ad587d0.js";import{w as n,a}from"./prop.validators-f81af56e.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";const o=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}cite,figure,q+figcaption{display:inline;margin:0;padding:0}blockquote:before{content:open-quote}blockquote::after{content:close-quote}cite:before{content:'—'}.block cite:before{padding-right:0.5em}.inline cite:before{padding:0.5em}",r=class{constructor(i){t(this,i),this._caption=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateCaption(t){n(this,"_caption",t)}validateHref(t){n(this,"_href",t,{required:!0})}validateQuote(t){n(this,"_quote",t,{required:!0})}validateVariant(t){a(this,"_variant",(t=>"block"===t||"inline"===t),new Set(["block","inline"]),t)}componentWillLoad(){this.validateCaption(this._caption),this.validateHref(this._href),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const t=""!==this.state._quote;return i(e,null,i("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?i("blockquote",{cite:this.state._href},this.state._quote,i("span",{"aria-hidden":t?"true":void 0,hidden:t},i("slot",{name:"expert"}))):i("q",{cite:this.state._href},this.state._quote,i("span",{"aria-hidden":t?"true":void 0,hidden:t},i("slot",{name:"expert"}))),"string"==typeof this.state._caption&&this.state._caption.length>0&&i("figcaption",null,i("cite",null,i("kol-link",{_href:this.state._href,_label:this.state._caption,_target:"_blank"})))))}static get watchers(){return{_caption:["validateCaption"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};r.style={default:o};export{r as kol_quote};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as s}from"./index-34c3d6f8.js";import{n as a}from"./dev.utils-157f0499.js";import{S as n,a as l}from"./reuse-3a02afb9.js";import{g as r}from"./controller-cc18d25f.js";import{w as o,d as h,b as d,e as u}from"./prop.validators-f81af56e.js";import{I as p}from"./controller-icon-65f3377a.js";import{f as c}from"./controller-5a459788.js";import{a as f}from"./a11y.tipps-2e27f8e6.js";import{h as v,c as b}from"./label-559ca626.js";import"./tab-index-ff5374b8.js";import"./index-ff788b4b.js";import"./icon-83ced735.js";const m=t=>{if("object"==typeof t&&null!==t){if("string"==typeof t.label&&t.label.length>0)return t.disabled=!0===t.disabled,t.label=`${t.label}`.trim(),!1===v(t.label,3)&&!1===b(t.label)&&f(`Ein abweichendes Aria-Label (${t.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`),!Array.isArray(t.options)||void 0===t.options.find((t=>!1===m(t)));if("number"==typeof t.label)return!0}return!1};class y extends p{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchListValue=(t,e)=>{const i=e.has("_list")?e.get("_list"):this.component.state._list;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),c(this.keyOptionMap,i);const t=e.has("_value")?e.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],i);!1===this.component._multiple&&0===a.length?(e.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(t)&&a.length<t.length&&(e.set("_value",a),this.onStateChange())}},this.component=t}validateHeight(t){o(this.component,"_height",t)}validateList(t){h(this.component,"_list",m,t,void 0,{hooks:{beforePatch:this.beforePatchListValue}})}validateMultiple(t){d(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchListValue}})}validateRequired(t){d(this.component,"_required",t)}validateSize(t){u(this.component,"_size",t,{min:1})}validateValue(t){h(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchListValue}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(n)}))}},this.validateHeight(this.component._height),this.validateList(this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateSize(this.component._size),this.validateValue(this.component._value)}}const _=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",g=(t,e)=>Array.isArray(t)&&t.includes(e),x=class{renderOptgroup(e,i){var a;return t("optgroup",{disabled:!0===e.disabled,label:e.label},null===(a=e.options)||void 0===a?void 0:a.map(((e,a)=>{const l=`${i}-${a}`;return Array.isArray(e.options)?this.renderOptgroup(e,l):t("option",{disabled:!0===e.disabled,key:l,selected:g(this.state._value,e.value),value:l},e.label)})))}render(){const{ariaDescribedBy:i}=r(this.state),a=""===this.state._label,l="…"===this.state._label;return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{select:!0},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},a?t("slot",{name:"expert"}):l?t("slot",null):this.state._label),t("select",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",style:{height:this.state._height}},{onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus},{onChange:this.onChange}),this.state._list.map(((e,i)=>{const a=`-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:!0===e.disabled,key:a,selected:g(this.state._value,e.value),value:a},e.label)})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,l(this.host,this.ref)},this.onChange=t=>{var e,i;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._height=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=void 0,this._size=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_height:"",_id:a(),_label:"…",_list:[],_multiple:!1,_value:[]},this.controller=new y(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHeight(t){this.controller.validateHeight(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.controller.validateList(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_size:["validateSize"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};x.style={default:_};export{x as kol_select};
+import{h as t,H as e,r as i,g as s}from"./index-6ad587d0.js";import{n as a}from"./dev.utils-157f0499.js";import{S as n,a as l}from"./reuse-3a02afb9.js";import{g as r}from"./controller-cc18d25f.js";import{w as o,d as h,b as d,e as u}from"./prop.validators-f81af56e.js";import{I as p}from"./controller-icon-65f3377a.js";import{f as c}from"./controller-5a459788.js";import{a as f}from"./a11y.tipps-2e27f8e6.js";import{h as v,c as b}from"./label-559ca626.js";import"./tab-index-ff5374b8.js";import"./index-ff788b4b.js";import"./icon-83ced735.js";const m=t=>{if("object"==typeof t&&null!==t){if("string"==typeof t.label&&t.label.length>0)return t.disabled=!0===t.disabled,t.label=`${t.label}`.trim(),!1===v(t.label,3)&&!1===b(t.label)&&f(`Ein abweichendes Aria-Label (${t.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`),!Array.isArray(t.options)||void 0===t.options.find((t=>!1===m(t)));if("number"==typeof t.label)return!0}return!1};class y extends p{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchListValue=(t,e)=>{const i=e.has("_list")?e.get("_list"):this.component.state._list;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),c(this.keyOptionMap,i);const t=e.has("_value")?e.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],i);!1===this.component._multiple&&0===a.length?(e.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(t)&&a.length<t.length&&(e.set("_value",a),this.onStateChange())}},this.component=t}validateHeight(t){o(this.component,"_height",t)}validateList(t){h(this.component,"_list",m,t,void 0,{hooks:{beforePatch:this.beforePatchListValue}})}validateMultiple(t){d(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchListValue}})}validateRequired(t){d(this.component,"_required",t)}validateSize(t){u(this.component,"_size",t,{min:1})}validateValue(t){h(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchListValue}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(n)}))}},this.validateHeight(this.component._height),this.validateList(this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateSize(this.component._size),this.validateValue(this.component._value)}}const _=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",g=(t,e)=>Array.isArray(t)&&t.includes(e),x=class{renderOptgroup(e,i){var a;return t("optgroup",{disabled:!0===e.disabled,label:e.label},null===(a=e.options)||void 0===a?void 0:a.map(((e,a)=>{const l=`${i}-${a}`;return Array.isArray(e.options)?this.renderOptgroup(e,l):t("option",{disabled:!0===e.disabled,key:l,selected:g(this.state._value,e.value),value:l},e.label)})))}render(){const{ariaDescribedBy:i}=r(this.state),a=""===this.state._label,l="…"===this.state._label;return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{select:!0},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},a?t("slot",{name:"expert"}):l?t("slot",null):this.state._label),t("select",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",style:{height:this.state._height}},{onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus},{onChange:this.onChange}),this.state._list.map(((e,i)=>{const a=`-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:!0===e.disabled,key:a,selected:g(this.state._value,e.value),value:a},e.label)})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,l(this.host,this.ref)},this.onChange=t=>{var e,i;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._height=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=void 0,this._size=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_height:"",_id:a(),_label:"…",_list:[],_multiple:!1,_value:[]},this.controller=new y(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHeight(t){this.controller.validateHeight(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.controller.validateList(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_size:["validateSize"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};x.style={default:_};export{x as kol_select};

package/dist/kolibri/kol-skip-nav.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t}from"./index-34c3d6f8.js";import{b as e}from"./a11y.tipps-2e27f8e6.js";import{w as a}from"./prop.validators-f81af56e.js";import{w as n}from"./validation-b0e97f6c.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";const s=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}",r=class{constructor(t){i(this,t),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return t("nav",{"aria-label":this.state._ariaLabel},t("ul",null,this.state._links.map(((i,a)=>t("li",{key:a},t("kol-link",Object.assign({},i,{_stealth:!0})))))))}validateAriaLabel(i){a(this,"_ariaLabel",i,{required:!0}),e(i)}validateLinks(i){n("KolSkipNav",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};r.style={default:s};export{r as kol_skip_nav};
+import{r as i,h as t}from"./index-6ad587d0.js";import{b as e}from"./a11y.tipps-2e27f8e6.js";import{w as n}from"./prop.validators-f81af56e.js";import{w as a}from"./validation-b0e97f6c.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";const o=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}kol-link-wc a{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}kol-link-wc a:focus{background-color:#fff;left:unset;position:unset}",s=class{constructor(t){i(this,t),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return t("nav",{"aria-label":this.state._ariaLabel},t("ul",null,this.state._links.map(((i,a)=>t("li",{key:a},t("kol-link-wc",Object.assign({},i)))))))}validateAriaLabel(i){n(this,"_ariaLabel",i,{required:!0}),e(i)}validateLinks(i){a("KolSkipNav",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};s.style={default:o};export{s as kol_skip_nav};

package/dist/kolibri/kol-skip-nav.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSkipNav","_ariaLabel","_links","render","h","this","state","map","link","index","key","Object","assign","_stealth","validateAriaLabel","value","watchString","required","a11yHintLabelingLandmarks","validateLinks","watchNavLinks","componentWillLoad"],"sources":["./src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","./src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { LinkProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { watchNavLinks } from '../nav/validation';\n\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<LinkProps[]>;\n};\ntype OptionalProps = unknown;\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: LinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t{/*\n\t\t\t\t\t\t\t\t\tThis stealth link should be replaced with the kol-link-wc and\n\t\t\t\t\t\t\t\t\tstyled only inside skip-nav css.\n\t\t\t\t\t\t\t\t*/}\n\t\t\t\t\t\t\t\t<kol-link {...link} _stealth={true}></kol-link>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Gibt die Liste der darzustellenden Button, Links oder Texte an.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;mRAAA,MAAMA,EAAkB,yvB,MC8BXC,EAAU,M,oFA+BU,CAC/BC,WAAY,IACZC,OAAQ,G,CAhCFC,SACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,YAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAiBC,IAEvCL,EAAA,MAAIM,IAAKD,GAKRL,EAAA,WAAAO,OAAAC,OAAA,GAAcJ,EAAI,CAAEK,SAAU,Y,CAyB9BC,kBAAkBC,GACxBC,EAAYX,KAAM,aAAcU,EAAO,CACtCE,SAAU,OAEXC,EAA0BH,E,CAIpBI,cAAcJ,GACpBK,EAAc,aAAcf,KAAMU,E,CAG5BM,oBACNhB,KAAKS,kBAAkBT,KAAKJ,YAC5BI,KAAKc,cAAcd,KAAKH,O"}
+{"version":3,"names":["defaultStyleCss","KolSkipNav","_ariaLabel","_links","render","h","this","state","map","link","index","key","Object","assign","validateAriaLabel","value","watchString","required","a11yHintLabelingLandmarks","validateLinks","watchNavLinks","componentWillLoad"],"sources":["./src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","./src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\nkol-link-wc a {\n\tleft: -99999px;\n\toverflow: hidden;\n\tposition: absolute;\n\tz-index: 9999999;\n\tline-height: 1em;\n}\nkol-link-wc a:focus {\n\tbackground-color: #fff;\n\tleft: unset;\n\tposition: unset;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { LinkProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { watchNavLinks } from '../nav/validation';\n\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<LinkProps[]>;\n};\ntype OptionalProps = unknown;\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: LinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link-wc {...link}></kol-link-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Gibt die Liste der darzustellenden Button, Links oder Texte an.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;mRAAA,MAAMA,EAAkB,25B,MC8BXC,EAAU,M,oFA2BU,CAC/BC,WAAY,IACZC,OAAQ,G,CA5BFC,SACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,YAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAiBC,IAEvCL,EAAA,MAAIM,IAAKD,GACRL,EAAA,cAAAO,OAAAC,OAAA,GAAiBJ,Q,CAyBjBK,kBAAkBC,GACxBC,EAAYV,KAAM,aAAcS,EAAO,CACtCE,SAAU,OAEXC,EAA0BH,E,CAIpBI,cAAcJ,GACpBK,EAAc,aAAcd,KAAMS,E,CAG5BM,oBACNf,KAAKQ,kBAAkBR,KAAKJ,YAC5BI,KAAKa,cAAcb,KAAKH,O"}

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

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{r as i,h as s,H as t}from"./index-6ad587d0.js";import{v as a}from"./icon-83ced735.js";import{b as e}from"./label-559ca626.js";import{v as l}from"./hide-label-2baeb5c5.js";import"./prop.validators-f81af56e.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";const o=class{constructor(t){i(this,t),this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this.state={_hideLabel:!1,_icon:{},_iconOnly:!1,_label:"…"}}render(){const i=this.state._label.length>0;return s(t,{class:{"icon-only":!!this.state._hideLabel,"hide-label":!!this.state._hideLabel}},this.state._icon.top&&s("kol-icon",{class:"icon top",style:this.state._icon.top.style,_ariaLabel:"",_icon:this.state._icon.top.icon}),s("span",null,this.state._icon.left&&s("kol-icon",{class:"icon left",style:this.state._icon.left.style,_ariaLabel:"",_icon:this.state._icon.left.icon}),!0!==this.state._hideLabel&&this.state._label.length>0?s("span",null,this.state._label):"",s("span",{"aria-hidden":i?"true":void 0,hidden:i},s("slot",{name:"expert"})),this.state._icon.right&&s("kol-icon",{class:"icon right",style:this.state._icon.right.style,_ariaLabel:"",_icon:this.state._icon.right.icon})),this.state._icon.bottom&&s("kol-icon",{class:"icon bottom",style:this.state._icon.bottom.style,_ariaLabel:"",_icon:this.state._icon.bottom.icon}))}validateHideLabel(t){l(this,t)}validateIcon(t){a(this,t)}validateIconOnly(t){this.validateHideLabel(t)}validateLabel(t){e(this,t)}componentWillLoad(){this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcon(this._icon),this.validateLabel(this._label)}static get watchers(){return{_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"]}}};export{o as kol_span_wc};

package/dist/kolibri/kol-span-wc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["KolSpanWc","_hideLabel","_icon","_iconOnly","_label","render","hideExpertSlot","this","state","length","h","Host","class","top","style","_ariaLabel","icon","left","undefined","hidden","name","right","bottom","validateHideLabel","value","validateIcon","validateIconOnly","validateLabel","validateLabelWithAriaLabel","componentWillLoad"],"sources":["./src/components/span/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriCustomIcon, KoliBriIconProp } from '../../types/icon';\nimport { validateIcon } from '../../types/props/icon';\nimport { validateLabelWithAriaLabel } from '../../types/props/label';\nimport { PropHideLabel, validateHideLabel } from '../../types/props';\n\ntype RequiredProps = {\n\tlabel: string;\n};\ntype OptionalProps = {\n\ticon: Stringified<KoliBriIconProp>;\n\t/**\n\t * @deprecated use _hide-label\n\t */\n\ticonOnly: boolean;\n} & PropHideLabel;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\ticon: {\n\t\ttop?: KoliBriCustomIcon;\n\t\tright?: KoliBriCustomIcon;\n\t\tbottom?: KoliBriCustomIcon;\n\t\tleft?: KoliBriCustomIcon;\n\t};\n\tlabel: string;\n};\ntype OptionalStates = {\n\t/**\n\t * @deprecated use _hide-label\n\t */\n\ticonOnly: boolean;\n} & PropHideLabel;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-span-wc',\n\tshadow: false,\n})\nexport class KolSpanWc implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot = this.state._label.length > 0;\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'icon-only': !!this.state._hideLabel, // @deprecated in v2\n\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._icon.top && <kol-icon class=\"icon top\" style={this.state._icon.top.style} _ariaLabel=\"\" _icon={this.state._icon.top.icon} />}\n\t\t\t\t<span>\n\t\t\t\t\t{this.state._icon.left && <kol-icon class=\"icon left\" style={this.state._icon.left.style} _ariaLabel=\"\" _icon={this.state._icon.left.icon} />}\n\t\t\t\t\t{this.state._hideLabel !== true && this.state._label.length > 0 ? <span>{this.state._label}</span> : ''}\n\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.state._icon.right && <kol-icon class=\"icon right\" style={this.state._icon.right.style} _ariaLabel=\"\" _icon={this.state._icon.right.icon} />}\n\t\t\t\t</span>\n\t\t\t\t{this.state._icon.bottom && <kol-icon class=\"icon bottom\" style={this.state._icon.bottom.style} _ariaLabel=\"\" _icon={this.state._icon.bottom.icon} />}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: string;\n\n\t@State() public state: States = {\n\t\t_hideLabel: false,\n\t\t_icon: {},\n\t\t_iconOnly: false,\n\t\t_label: '…', // ⚠ required\n\t};\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: KoliBriIconProp): void {\n\t\tvalidateIcon(this, value);\n\t}\n\n\t/**\n\t * @deprecated use _hide-label\n\t */\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\tthis.validateHideLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tvalidateLabelWithAriaLabel(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHideLabel(this._hideLabel || this._iconOnly);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;uVA6CaA,EAAS,M,yCA2BkC,M,+EAkBvB,CAC/BC,WAAY,MACZC,MAAO,GACPC,UAAW,MACXC,OAAQ,I,CAhDFC,SACN,MAAMC,EAAiBC,KAAKC,MAAMJ,OAAOK,OAAS,EAClD,OACCC,EAACC,EAAI,CACJC,MAAO,CACN,cAAeL,KAAKC,MAAMP,WAC1B,eAAgBM,KAAKC,MAAMP,aAG3BM,KAAKC,MAAMN,MAAMW,KAAOH,EAAA,YAAUE,MAAM,WAAWE,MAAOP,KAAKC,MAAMN,MAAMW,IAAIC,MAAOC,WAAW,GAAGb,MAAOK,KAAKC,MAAMN,MAAMW,IAAIG,OACjIN,EAAA,YACEH,KAAKC,MAAMN,MAAMe,MAAQP,EAAA,YAAUE,MAAM,YAAYE,MAAOP,KAAKC,MAAMN,MAAMe,KAAKH,MAAOC,WAAW,GAAGb,MAAOK,KAAKC,MAAMN,MAAMe,KAAKD,OACpIT,KAAKC,MAAMP,aAAe,MAAQM,KAAKC,MAAMJ,OAAOK,OAAS,EAAIC,EAAA,YAAOH,KAAKC,MAAMJ,QAAiB,GACrGM,EAAA,sBAAmBJ,EAAiB,OAASY,UAAWC,OAAQb,GAC/DI,EAAA,QAAMU,KAAK,YAEXb,KAAKC,MAAMN,MAAMmB,OAASX,EAAA,YAAUE,MAAM,aAAaE,MAAOP,KAAKC,MAAMN,MAAMmB,MAAMP,MAAOC,WAAW,GAAGb,MAAOK,KAAKC,MAAMN,MAAMmB,MAAML,QAEzIT,KAAKC,MAAMN,MAAMoB,QAAUZ,EAAA,YAAUE,MAAM,cAAcE,MAAOP,KAAKC,MAAMN,MAAMoB,OAAOR,MAAOC,WAAW,GAAGb,MAAOK,KAAKC,MAAMN,MAAMoB,OAAON,O,CAkCzIO,kBAAkBC,GACxBD,EAAkBhB,KAAMiB,E,CAIlBC,aAAaD,GACnBC,EAAalB,KAAMiB,E,CAObE,iBAAiBF,GACvBjB,KAAKgB,kBAAkBC,E,CAIjBG,cAAcH,GACpBI,EAA2BrB,KAAMiB,E,CAG3BK,oBACNtB,KAAKgB,kBAAkBhB,KAAKN,YAAcM,KAAKJ,WAC/CI,KAAKkB,aAAalB,KAAKL,OACvBK,KAAKoB,cAAcpB,KAAKH,O"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n}from"./index-34c3d6f8.js";const i=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}",e=class{constructor(n){t(this,n),this._icon=void 0,this._iconOnly=!1,this._label=void 0}render(){return n("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label},n("slot",{name:"expert",slot:"expert"}))}};e.style={default:i};export{e as kol_span};
+import{r as t,h as n}from"./index-6ad587d0.js";const i=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}",e=class{constructor(i){t(this,i),this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0}render(){return n("kol-span-wc",{_icon:this._icon,_hideLabel:this._hideLabel,_label:this._label},n("slot",{name:"expert",slot:"expert"}))}};e.style={default:i};export{e as kol_span};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSpan","render","h","_icon","this","_iconOnly","_label","name","slot"],"sources":["./src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","./src/components/span/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n","import { Component, h, JSX, Prop } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"mappings":";;;+CAAA,MAAMA,EAAkB,urB,MCaXC,EAAO,M,6DAiBmC,M,sBAhB/CC,SACN,OACCC,EAAA,eAAaC,MAAOC,KAAKD,MAAOE,UAAWD,KAAKC,UAAWC,OAAQF,KAAKE,QACvEJ,EAAA,QAAMK,KAAK,SAASC,KAAK,W"}
+{"version":3,"names":["defaultStyleCss","KolSpan","render","h","_icon","this","_hideLabel","_label","name","slot"],"sources":["./src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","./src/components/span/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n","import { Component, h, JSX, Prop } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _hideLabel={this._hideLabel} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"mappings":";;;+CAAA,MAAMA,EAAkB,urB,MCaXC,EAAO,M,yCAYoC,M,oEAXhDC,SACN,OACCC,EAAA,eAAaC,MAAOC,KAAKD,MAAOE,WAAYD,KAAKC,WAAYC,OAAQF,KAAKE,QACzEJ,EAAA,QAAMK,KAAK,SAASC,KAAK,W"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as n,H as t,F as e}from"./index-34c3d6f8.js";import{a}from"./i18n-87a7ecb7.js";import{a as o,b as r}from"./prop.validators-f81af56e.js";import"./index-bacdc4cb.js";import"./index-ff788b4b.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";const s=(i,n)=>{o(i,"_variant",(i=>"cycle"===i||"dot"===i||"none"===i),new Set(["cycle","dot","none"]),n)},l=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.spin.cycle{width:3rem;height:3rem}.spin.cycle>.loader{display:block;width:100%;height:100%;border-radius:50%;position:relative;animation:2s linear infinite rotate}.spin.cycle>.loader::before{content:'';box-sizing:border-box;position:absolute;inset:0px;border-radius:50%;border:5px solid #333;animation:3s linear infinite prixClipFix}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes prixClipFix{0%{border-color:#fff;clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}25%{border-color:#666;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}50%{border-color:#fc0;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}75%{border-color:red;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}100%{border-color:#000;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}}@media (prefers-reduced-motion){.spin.cycle>.loader{animation-duration:4s}.spin.cycle>.loader::before{animation-duration:6s}}.spin.dot{height:1rem;width:3rem}.spin.dot>span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-radius:50%;border:0.1rem solid #fff;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}.spin.dot>span:first-child{background-color:#fc0;z-index:0;animation:1s infinite spin1;left:0.1rem}.spin.dot>span:nth-child(2){background-color:red;z-index:1;animation:1s infinite spin2;left:0.1rem}.spin.dot>span:nth-child(3){background-color:#000;z-index:1;animation:1s infinite spin2;left:1.1rem}.spin.dot>span:nth-child(4){background-color:#666;z-index:0;animation:1s infinite spin3;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}@media (prefers-reduced-motion){.spin.dot>span:first-child,.spin.dot>span:nth-child(2),.spin.dot>span:nth-child(3),.spin.dot>span:nth-child(4){animation-duration:2s}}.spin{display:block;padding:0.125rem;position:relative}";function p(i){switch(i){case"cycle":return n("span",{class:"loader"});case"none":return n("slot",{name:"expert"});default:return n(e,null,n("span",{class:"bg-spin-1"}),n("span",{class:"bg-spin-2"}),n("span",{class:"bg-spin-3"}),n("span",{class:"bg-neutral"}))}}const d=class{constructor(n){i(this,n),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return n(t,null,this.state._show?n("span",{"aria-busy":"true","aria-label":a("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},p(this.state._variant)):this.showToggled&&n("span",{"aria-label":a("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,r(this,"_show",i)}validateVariant(i){s(this,i)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};d.style={default:l};export{d as kol_spin};
+import{r as i,h as n,H as t,F as e}from"./index-6ad587d0.js";import{a}from"./i18n-3ed8125e.js";import{a as o,b as r}from"./prop.validators-f81af56e.js";import"./index-ebb14eab.js";import"./index-ff788b4b.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";const s=(i,n)=>{o(i,"_variant",(i=>"cycle"===i||"dot"===i||"none"===i),new Set(["cycle","dot","none"]),n)},l=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.spin.cycle{width:3rem;height:3rem}.spin.cycle>.loader{display:block;width:100%;height:100%;border-radius:50%;position:relative;animation:2s linear infinite rotate}.spin.cycle>.loader::before{content:'';box-sizing:border-box;position:absolute;inset:0px;border-radius:50%;border:5px solid #333;animation:3s linear infinite prixClipFix}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes prixClipFix{0%{border-color:#fff;clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}25%{border-color:#666;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}50%{border-color:#fc0;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}75%{border-color:red;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}100%{border-color:#000;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}}@media (prefers-reduced-motion){.spin.cycle>.loader{animation-duration:4s}.spin.cycle>.loader::before{animation-duration:6s}}.spin.dot{height:1rem;width:3rem}.spin.dot>span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-radius:50%;border:0.1rem solid #fff;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}.spin.dot>span:first-child{background-color:#fc0;z-index:0;animation:1s infinite spin1;left:0.1rem}.spin.dot>span:nth-child(2){background-color:red;z-index:1;animation:1s infinite spin2;left:0.1rem}.spin.dot>span:nth-child(3){background-color:#000;z-index:1;animation:1s infinite spin2;left:1.1rem}.spin.dot>span:nth-child(4){background-color:#666;z-index:0;animation:1s infinite spin3;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}@media (prefers-reduced-motion){.spin.dot>span:first-child,.spin.dot>span:nth-child(2),.spin.dot>span:nth-child(3),.spin.dot>span:nth-child(4){animation-duration:2s}}.spin{display:block;padding:0.125rem;position:relative}";function p(i){switch(i){case"cycle":return n("span",{class:"loader"});case"none":return n("slot",{name:"expert"});default:return n(e,null,n("span",{class:"bg-spin-1"}),n("span",{class:"bg-spin-2"}),n("span",{class:"bg-spin-3"}),n("span",{class:"bg-neutral"}))}}const d=class{constructor(n){i(this,n),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return n(t,null,this.state._show?n("span",{"aria-busy":"true","aria-label":a("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},p(this.state._variant)):this.showToggled&&n("span",{"aria-label":a("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,r(this,"_show",i)}validateVariant(i){s(this,i)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};d.style={default:l};export{d as kol_spin};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as s}from"./index-34c3d6f8.js";import{w as e,b as a,s as o}from"./prop.validators-f81af56e.js";import{a as n,b as h}from"./label-559ca626.js";import{g as l}from"./a11y.tipps-2e27f8e6.js";import{v as d}from"./tab-index-ff5374b8.js";import{w as r}from"./button-link-283b2d32.js";import{a as c,w as p}from"./controller-ec771280.js";import{v as u,a as b}from"./aria-selected-efb464e1.js";import{v as f,a as v}from"./disabled-6200e69c.js";import{v as _}from"./hide-label-2baeb5c5.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";const m=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:flex;position:relative}.main-button{flex-grow:1;text-align:left}.main-button kol-span-wc{place-items:start}.secondary-button button{height:100%}.horizontal-line{background-color:rgba(0, 0, 0, 0.2);border-radius:2px;height:70%;margin-block:auto;width:1px}.popover{height:0;left:0;min-width:100%;overflow:hidden;position:absolute;top:100%;transition:height 0.3s ease-in-out}.popover-content{inset:0 0 auto 0;min-width:100%;position:absolute}",w=class{constructor(i){t(this,i),this.clickHandler=t=>{"function"==typeof this.state._on.onClick?this.state._on.onClick(t):this.toggleDropdown()},this.openDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height=`${this.dropdownContent.clientHeight}px`,this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!0}))},this.closeDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height="",this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!1}))},this.toggleDropdown=t=>{("boolean"==typeof t?t:!this.state._showDropdown)?this.openDropdown():this.closeDropdown()},this.forceCounter=100,this.forceOpenDropdown=()=>{var t;this.forceCounter>0&&((null===(t=this.dropdownContent)||void 0===t?void 0:t.clientHeight)?this.openDropdown():setTimeout(this.forceOpenDropdown,10),this.forceCounter--)},this.catchDropdownElements=t=>{t&&(this.dropdown=t,setTimeout((()=>{this.dropdownContent=t.firstChild,this._showDropdown&&this.forceOpenDropdown()})))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._iconOnly=!1,this._label=void 0,this._on=void 0,this._role=void 0,this._showDropdown=!1,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icon:"",_label:"",_on:{},_showDropdown:!1}}render(){return i(s,null,i("kol-button-wc",{class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icon:this._icon,_iconOnly:this._hideLabel,_label:this._label,_on:{onClick:this.clickHandler},_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),i("div",{class:"horizontal-line"}),i("kol-button-wc",{class:"secondary-button",_disabled:this._disabled,"_icon-only":!0,_icon:"codicon codicon-triangle-down",_label:"dropdown "+(this.state._showDropdown?"schließen":"öffnen"),_on:{onClick:()=>this.toggleDropdown()}}),i("div",{class:"popover",ref:this.catchDropdownElements},i("div",{class:"popover-content"},i("slot",null))))}validateAccessKey(t){e(this,"_accessKey",t)}validateAriaControls(t){e(this,"_ariaControls",t)}validateAriaCurrent(t){u(this,t)}validateAriaExpanded(t){f(this,t)}validateAriaLabel(t){n(this,t)}validateAriaSelected(t){b(this,t)}validateCustomClass(t){e(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){v(this,t),t&&l()}validateHideLabel(t){_(this,t)}validateIcon(t){e(this,"_icon",t)}validateIconOnly(t){_(this,t)}validateLabel(t){h(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){e(this,"_role",t)}validateShowDropdown(t){a(this,"_showDropdown",t),this.toggleDropdown(t)}validateTabIndex(t){d(this,t)}validateTooltipAlign(t){r(this,"_tooltipAlign",t)}validateType(t){c(this,"_type",t)}validateValue(t){o(this,"_value",t)}validateVariant(t){p(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel),this.validateIcon(this._icon),this.validateIconOnly(this._iconOnly),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateShowDropdown(this._showDropdown),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_showDropdown:["validateShowDropdown"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};w.style={default:m};export{w as kol_split_button};
+import{r as t,h as i,H as s}from"./index-6ad587d0.js";import{w as e,b as a,s as o}from"./prop.validators-f81af56e.js";import{a as n,b as h}from"./label-559ca626.js";import{g as l}from"./a11y.tipps-2e27f8e6.js";import{v as d}from"./tab-index-ff5374b8.js";import{w as r}from"./button-link-283b2d32.js";import{a as c,w as p}from"./controller-ec771280.js";import{v as u,a as b}from"./aria-selected-efb464e1.js";import{v as f,a as v}from"./disabled-6200e69c.js";import{v as _}from"./hide-label-2baeb5c5.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";const m=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:flex;position:relative}.main-button{flex-grow:1;text-align:left}.main-button kol-span-wc{place-items:start}.secondary-button button{height:100%}.horizontal-line{background-color:rgba(0, 0, 0, 0.2);border-radius:2px;height:70%;margin-block:auto;width:1px}.popover{height:0;left:0;min-width:100%;overflow:hidden;position:absolute;top:100%;transition:height 0.3s ease-in-out}.popover-content{inset:0 0 auto 0;min-width:100%;position:absolute}",w=class{constructor(i){t(this,i),this.clickHandler=t=>{"function"==typeof this.state._on.onClick?this.state._on.onClick(t):this.toggleDropdown()},this.openDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height=`${this.dropdownContent.clientHeight}px`,this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!0}))},this.closeDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height="",this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!1}))},this.toggleDropdown=t=>{("boolean"==typeof t?t:!this.state._showDropdown)?this.openDropdown():this.closeDropdown()},this.forceCounter=100,this.forceOpenDropdown=()=>{var t;this.forceCounter>0&&((null===(t=this.dropdownContent)||void 0===t?void 0:t.clientHeight)?this.openDropdown():setTimeout(this.forceOpenDropdown,10),this.forceCounter--)},this.catchDropdownElements=t=>{t&&(this.dropdown=t,setTimeout((()=>{this.dropdownContent=t.firstChild,this._showDropdown&&this.forceOpenDropdown()})))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._showDropdown=!1,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icon:"",_label:"",_on:{},_showDropdown:!1}}render(){return i(s,null,i("kol-button-wc",{class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icon:this._icon,_hideLabel:this._hideLabel,_label:this._label,_on:{onClick:this.clickHandler},_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),i("div",{class:"horizontal-line"}),i("kol-button-wc",{class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icon:"codicon codicon-triangle-down",_label:"dropdown "+(this.state._showDropdown?"schließen":"öffnen"),_on:{onClick:()=>this.toggleDropdown()}}),i("div",{class:"popover",ref:this.catchDropdownElements},i("div",{class:"popover-content"},i("slot",null))))}validateAccessKey(t){e(this,"_accessKey",t)}validateAriaControls(t){e(this,"_ariaControls",t)}validateAriaCurrent(t){u(this,t)}validateAriaExpanded(t){f(this,t)}validateAriaLabel(t){n(this,t)}validateAriaSelected(t){b(this,t)}validateCustomClass(t){e(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){v(this,t),t&&l()}validateHideLabel(t){_(this,t)}validateIcon(t){e(this,"_icon",t)}validateIconOnly(t){this.validateHideLabel(t)}validateLabel(t){h(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){e(this,"_role",t)}validateShowDropdown(t){a(this,"_showDropdown",t),this.toggleDropdown(t)}validateTabIndex(t){d(this,t)}validateTooltipAlign(t){r(this,"_tooltipAlign",t)}validateType(t){c(this,"_type",t)}validateValue(t){o(this,"_value",t)}validateVariant(t){p(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcon(this._icon),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateShowDropdown(this._showDropdown),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_showDropdown:["validateShowDropdown"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};w.style={default:m};export{w as kol_split_button};