@public-ui/components 4.1.1-rc.2 → 4.1.1

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["h","registerInstance","Host","labelProp","createPropDefinition","normalizeNumber","normalizeString","createDependentPropDefinition","BaseController","maxProp","v","unitProp","length","clampedNumberValueProp","value","deps","normalized","min","max","progressVariantOptions","variantProgressProp","str","includes","Error","FULL_CIRCLE","CycleSvg","width","viewBox","xmlns","class","cx","cy","r","fill","stroke","Math","round","BarSvg","percentage","height","overflow","x","y","rx","style","createProgressSVG","variant","ProgressFC","props","label","unit","liveValue","isPercentage","liveProgressValue","displayValue","valueColumnWidth","ProgressController","constructor","states","super","componentWillLoad","this","watchLabel","watchMax","watchUnit","watchValue","watchVariant","setState","getProps","startLiveValueInterval","apply","setProp","interval","setInterval","component","destroy","clearInterval","undefined","defaultStyleCss","KolProgress","hostRef","ctrl","_max","_label","_unit","_value","_variant","disconnectedCallback","render","key","watchers","default"],"sources":["0"],"mappings":";;;YAGSA,OAAQC,OAAuBC,MAAY,4BAC7C,mCACOC,MAAiB,kCACjBC,OAA2BC,OAAsBC,OAAsBC,OAAoCC,MAAsB,gCAE/I,MAAMC,EAAUL,EAAqBC,GAAkBK,GAAMA,EAAI,IAEjE,MAAMC,EAAWP,EAAqBE,GAAkBI,GAAMA,EAAEE,OAAS,IAEzE,MAAMC,EAAyBN,GAA8B,CAACO,EAAOC,KACjE,MAAMC,EAAaX,EAAgBS,GACnC,GAAIE,EAAaD,EAAKE,IAAK,CACvB,OAAOF,EAAKE,GAChB,MACK,GAAID,EAAaD,EAAKG,IAAK,CAC5B,OAAOH,EAAKG,GAChB,CACA,OAAOF,CAAU,IACjBN,GAAMA,GAAK,IAEf,MAAMS,EAAyB,CAAC,MAAO,SACvC,MAAMC,EAAsBhB,GAAsBU,IAC9C,MAAMO,EAAMf,EAAgBQ,GAC5B,GAAIK,EAAuBG,SAASD,GAAM,CACtC,OAAOA,CACX,CACA,MAAM,IAAIE,MAAM,6BAA6BF,IAAM,IACpD,IAAM,OAET,MAAMG,EAAc,IACpB,MAAMC,EAAW,EAAGP,MAAKJ,WAAad,EAAE,MAAO,CAAE0B,MAAO,MAAOC,QAAS,cAAeC,MAAO,8BAAgC5B,EAAE,SAAU,CAAE6B,MAAO,iCAAkCC,GAAI,KAAMC,GAAI,KAAMC,EAAG,OAAQC,KAAM,eAAgBC,OAAQ,eAAgB,eAAgB,MAAQlC,EAAE,SAAU,CAAE6B,MAAO,iCAAkCC,GAAI,KAAMC,GAAI,KAAMC,EAAG,KAAMC,KAAM,eAAgBC,OAAQ,eAAgB,eAAgB,MAAQlC,EAAE,SAAU,CAAE6B,MAAO,6BAA8BC,GAAI,KAAMC,GAAI,KAAMC,EAAG,KAAMC,KAAM,eAAgBC,OAAQ,eAAgB,eAAgB,MAAQlC,EAAE,SAAU,CAAE6B,MAAO,iCAAkCC,GAAI,KAAMC,GAAI,KAAMC,EAAG,KAAMC,KAAM,eAAgBC,OAAQ,eAAgB,eAAgB,MAAQlC,EAAE,SAAU,CAAE6B,MAAO,6BAA8BC,GAAI,KAAMC,GAAI,KAAMC,EAAG,KAAMC,KAAM,eAAgBC,OAAQ,eAAgB,eAAgB,MAAQlC,EAAE,SAAU,CAAE6B,MAAO,+BAAgCI,KAAM,eAAgBC,OAAQ,eAAgB,iBAAkB,QAAS,mBAAoB,GAAGC,KAAKC,MAAOtB,EAAQI,EAAOM,QAAkBA,MAAiB,eAAgB,IAAKM,GAAI,KAAMC,GAAI,KAAMC,EAAG,UACznC,MAAMK,EAAS,EAAGnB,MAAKJ,YACnB,MAAMwB,EAAa,KAAOxB,EAAQI,GAClC,OAAQlB,EAAE,MAAO,CAAE4B,MAAO,6BAA8BF,MAAO,OAAQa,OAAQ,KAAMC,SAAU,WAAaxC,EAAE,OAAQ,CAAE6B,MAAO,+BAAgCY,EAAG,IAAKC,EAAG,IAAKH,OAAQ,KAAMI,GAAI,IAAKV,KAAM,eAAgBC,OAAQ,eAAgB,eAAgB,IAAKR,MAAO,SAAW1B,EAAE,OAAQ,CAAE6B,MAAO,2BAA4BY,EAAG,IAAKC,EAAG,IAAKH,OAAQ,KAAMI,GAAI,IAAKV,KAAM,eAAgBC,OAAQ,eAAgB,eAAgB,IAAKR,MAAO,SAAW1B,EAAE,OAAQ,CAAE6B,MAAO,6BAA8BY,EAAG,IAAKC,EAAG,IAAKH,OAAQ,IAAKI,GAAI,MAAOV,KAAM,eAAgBC,OAAQ,eAAgB,eAAgB,IAAKU,MAAO,CAAElB,MAAO,QAAQY,eAA2B,EAEzpB,MAAMO,EAAoB,CAACC,EAAS5B,EAAKJ,KACrC,OAAQgC,GACJ,IAAK,QACD,OAAO9C,EAAEyB,EAAU,CAAEP,IAAKA,EAAKJ,MAAOA,IAC1C,IAAK,MACD,OAAOd,EAAEqC,EAAQ,CAAEnB,IAAKA,EAAKJ,MAAOA,IACxC,QACI,MAAM,IAAIS,MAAM,oBAAoBuB,sBAC5C,EAEJ,MAAMC,EAAcC,IAChB,MAAMC,MAAEA,EAAK/B,IAAEA,EAAGgC,KAAEA,EAAIpC,MAAEA,EAAKgC,QAAEA,EAAOK,UAAEA,GAAcH,EACxD,MAAMI,EAAeF,IAAS,IAC9B,MAAMG,EAAoBD,EAAe,GAAGjB,KAAKC,MAAOe,EAAYjC,EAAO,OAASiC,EACpF,MAAMG,EAAeF,EAAejB,KAAKC,MAAOtB,EAAQI,EAAO,KAAOJ,EACtE,MAAMyC,EAAmB,GAAG,IAAIH,EAAe,IAAMlC,GAAO,IAAIN,WAChE,OAAQZ,EAAE,MAAO,CAAE6B,MAAO,gBAAkB7B,EAAE,MAAO,CAAE,cAAe,OAAQ6B,MAAO,CAC7E,sBAAuBiB,IAAY,QACnC,oBAAqBA,IAAY,QAChCA,IAAY,OAASG,GAASjD,EAAE,MAAO,CAAE6B,MAAO,2BAA6BoB,GAAQJ,EAAkBC,EAAS5B,EAAKJ,GAAQgC,IAAY,SAAY9C,EAAE,MAAO,CAAE6B,MAAO,4BAA8BoB,GAASjD,EAAE,MAAO,CAAE6B,MAAO,6BAA+BoB,GAAQjD,EAAE,MAAO,CAAE6B,MAAO,6BAA+B,GAAGyB,KAAgBJ,MAAWJ,IAAY,OAAU9C,EAAE,MAAO,CAAE6B,MAAO,0BAA2Be,MAAO,CAAElB,MAAO6B,IAAsBD,GAAgBR,IAAY,OAAS9C,EAAE,MAAO,CAAE6B,MAAO,0BAA4BqB,IAAQlD,EAAE,WAAY,CAAE6B,MAAO,kBAAmB,YAAaf,EAAQI,EAAM,OAAS,QAASA,IAAKA,EAAKJ,MAAOA,IAAUd,EAAE,OAAQ,CAAE,YAAa,SAAU,gBAAiB,gBAAiB6B,MAAO,mBAAqBuB,EAAe,GAAGC,MAAwB,GAAGA,SAAyBnC,KAAOgC,KAAS,EAGh1B,MAAMM,UAA2BhD,EAC7B,WAAAiD,CAAYC,GACRC,MAAMD,EAAQ,CACVT,MAAO,GACP/B,IAAK,IACLgC,KAAM,IACNpC,MAAO,EACPgC,QAAS,OAEjB,CACA,iBAAAc,CAAkBZ,GACd,MAAMC,MAAEA,EAAK/B,IAAEA,EAAGgC,KAAEA,EAAIpC,MAAEA,EAAKgC,QAAEA,GAAYE,EAC7Ca,KAAKC,WAAWb,GAChBY,KAAKE,SAAS7C,GACd2C,KAAKG,UAAUd,GACfW,KAAKI,WAAWnD,GAChB+C,KAAKK,aAAapB,GAClBe,KAAKM,SAAS,YAAaN,KAAKO,WAAWtD,OAC3C+C,KAAKM,SAAS,MAAON,KAAKO,WAAWlD,KACrC2C,KAAKQ,wBACT,CACA,UAAAP,CAAWhD,GACPX,EAAUmE,MAAMxD,GAAQJ,IACpBmD,KAAKU,QAAQ,QAAS7D,EAAE,GAEhC,CACA,QAAAqD,CAASjD,GACLL,EAAQ6D,MAAMxD,GAAQJ,IAClBmD,KAAKU,QAAQ,MAAO7D,GACpBmD,KAAKM,SAAS,MAAOzD,EAAE,IAE3BmD,KAAKI,WAAWJ,KAAKO,WAAWtD,MACpC,CACA,SAAAkD,CAAUlD,GACNH,EAAS2D,MAAMxD,GAAQJ,IACnBmD,KAAKU,QAAQ,OAAQ7D,GACrBmD,KAAKM,SAAS,OAAQzD,EAAE,GAEhC,CACA,UAAAuD,CAAWnD,GACPD,EAAuByD,MAAMxD,GAAQJ,IACjCmD,KAAKU,QAAQ,QAAS7D,EAAE,GACzB,CAAEO,IAAK,EAAGC,IAAK2C,KAAKO,WAAWlD,KACtC,CACA,YAAAgD,CAAapD,GACTM,EAAoBkD,MAAMxD,GAAQJ,IAC9BmD,KAAKU,QAAQ,UAAW7D,GACxBmD,KAAKM,SAAS,UAAWzD,EAAE,GAEnC,CACA,sBAAA2D,GACIR,KAAKW,SAAWC,aAAY,KACxB,MAAM3D,MAAEA,GAAU+C,KAAKO,WACvB,GAAIP,KAAKa,UAAUvB,YAAcrC,EAAO,CACpC+C,KAAKM,SAAS,YAAarD,EAC/B,IACD,IACP,CACA,OAAA6D,GACI,GAAId,KAAKW,SAAU,CACfI,cAAcf,KAAKW,UACnBX,KAAKW,SAAWK,SACpB,CACJ,EAGJ,MAAMC,EAAkB,ynOAExB,MAAMC,EAAc,MAChB,WAAAtB,CAAYuB,GACR/E,EAAiB4D,KAAMmB,GACvBnB,KAAKoB,KAAO,IAAIzB,EAAmBK,MACnCA,KAAKX,KAAO,IACZW,KAAKf,QAAU,MACfe,KAAKV,UAAY,EACjBU,KAAK3C,IAAM2C,KAAKqB,IACpB,CACA,UAAApB,CAAWhD,GACP+C,KAAKoB,KAAKnB,WAAWhD,EACzB,CACA,QAAAiD,CAASjD,GACL+C,KAAKoB,KAAKlB,SAASjD,EACvB,CACA,SAAAkD,CAAUlD,GACN+C,KAAKoB,KAAKjB,UAAUlD,EACxB,CACA,UAAAmD,CAAWnD,GACP+C,KAAKoB,KAAKhB,WAAWnD,EACzB,CACA,YAAAoD,CAAapD,GACT+C,KAAKoB,KAAKf,aAAapD,EAC3B,CACA,iBAAA8C,GACIC,KAAKoB,KAAKrB,kBAAkB,CACxBX,MAAOY,KAAKsB,OACZjE,IAAK2C,KAAKqB,KACVhC,KAAMW,KAAKuB,MACXtE,MAAO+C,KAAKwB,OACZvC,QAASe,KAAKyB,UAEtB,CACA,oBAAAC,GACI1B,KAAKoB,KAAKN,SACd,CACA,MAAAa,GACI,MAAMvC,MAAEA,EAAK/B,IAAEA,EAAGgC,KAAEA,EAAIpC,MAAEA,EAAKgC,QAAEA,GAAYe,KAAKoB,KAAKb,WACvD,MAAMjB,UAAEA,GAAcU,KACtB,OAAQ7D,EAAEE,EAAM,CAAEuF,IAAK,4CAA8CzF,EAAE+C,EAAY,CAAE0C,IAAK,2CAA4CxC,MAAOA,EAAO/B,IAAKA,EAAKgC,KAAMA,EAAMpC,MAAOA,EAAOgC,QAASA,EAASK,UAAWA,IACzN,CACA,mBAAWuC,GAAa,MAAO,CAC3BP,OAAU,CAAC,cACXD,KAAQ,CAAC,YACTE,MAAS,CAAC,aACVC,OAAU,CAAC,cACXC,SAAY,CAAC,gBACd,GAEPP,EAAYnC,MAAQ,CAChB+C,QAASb,UAGJC","ignoreList":[]}
+{"version":3,"names":["h","registerInstance","Host","labelProp","createPropDefinition","normalizeNumber","normalizeString","createDependentPropDefinition","BaseController","maxProp","v","unitProp","length","clampedNumberValueProp","value","deps","normalized","min","max","progressVariantOptions","variantProgressProp","str","includes","Error","FULL_CIRCLE","CycleSvg","width","viewBox","xmlns","class","cx","cy","r","fill","stroke","Math","round","BarSvg","percentage","height","overflow","x","y","rx","style","createProgressSVG","variant","ProgressFC","props","label","unit","liveValue","isPercentage","liveProgressValue","displayValue","valueColumnWidth","ProgressController","componentWillLoad","this","watchLabel","watchMax","watchUnit","watchValue","watchVariant","setState","getProps","startLiveValueInterval","apply","setProp","getRawProps","setRawProp","interval","setInterval","component","destroy","clearInterval","undefined","defaultStyleCss","KolProgress","constructor","hostRef","ctrl","_label","_max","_unit","_value","_variant","disconnectedCallback","render","key","watchers","default"],"sources":["0"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"kol-quote.entry.esm.js","sources":["src/internal/props/href.ts","src/internal/props/quote.ts","src/internal/functional-components/quote/component.tsx","src/internal/functional-components/quote/controller.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type HrefProp = SimpleProp<'href', string>;\nexport const hrefProp = createPropDefinition<HrefProp>(normalizeString, (v) => v.length > 0);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type QuoteProp = SimpleProp<'quote', string>;\nexport const quoteProp = createPropDefinition<QuoteProp>(normalizeString, () => true);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport { KolLinkTag } from '../../../core/component-names';\nimport { bem } from '../../../schema/bem-registry';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { QuoteApi } from './api';\n\nconst quoteBem = bem.forBlock('kol-quote');\nconst BEM_CLASS_QUOTE__BLOCKQUOTE = quoteBem('blockquote');\nconst BEM_CLASS_QUOTE__CITE = quoteBem('cite');\nconst BEM_CLASS_QUOTE__FIGCAPTION = quoteBem('figcaption');\nconst BEM_CLASS_QUOTE__QUOTE = quoteBem('quote');\n\nexport const QuoteFC: FC<FunctionalComponentProps<QuoteApi>> = (props) => {\n\tconst { href, label, quote, variant } = props;\n\tconst hasExpertSlot = quote === '';\n\tconst BEM_CLASS_ROOT = quoteBem({ [variant]: true });\n\treturn (\n\t\t<figure class={BEM_CLASS_ROOT}>\n\t\t\t{variant === 'block' ? (\n\t\t\t\t<blockquote class={BEM_CLASS_QUOTE__BLOCKQUOTE} cite={href}>\n\t\t\t\t\t{quote}\n\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t</blockquote>\n\t\t\t) : (\n\t\t\t\t<q class={BEM_CLASS_QUOTE__QUOTE} cite={href}>\n\t\t\t\t\t{quote}\n\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t</q>\n\t\t\t)}\n\t\t\t{typeof label === 'string' && label.length > 0 && (\n\t\t\t\t<figcaption class={BEM_CLASS_QUOTE__FIGCAPTION}>\n\t\t\t\t\t<cite class={BEM_CLASS_QUOTE__CITE}>\n\t\t\t\t\t\t<KolLinkTag _href={href} _label={label} _target=\"_blank\" />\n\t\t\t\t\t</cite>\n\t\t\t\t</figcaption>\n\t\t\t)}\n\t\t</figure>\n\t);\n};\n","import { hrefProp, labelProp, quoteProp, variantQuoteProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps } from '../generic-types';\nimport type { QuoteApi } from './api';\n\nexport class QuoteController extends BaseController<QuoteApi> implements ControllerInterface<QuoteApi> {\n\tpublic constructor() {\n\t\tsuper(\n\t\t\t{},\n\t\t\t{\n\t\t\t\thref: '',\n\t\t\t\tlabel: '',\n\t\t\t\tquote: '',\n\t\t\t\tvariant: 'inline',\n\t\t\t},\n\t\t);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<QuoteApi>): void {\n\t\tconst { href, label, quote, variant } = props;\n\t\tthis.watchHref(href);\n\t\tthis.watchLabel(label);\n\t\tthis.watchQuote(quote);\n\t\tthis.watchVariant(variant);\n\t}\n\n\tpublic watchHref(value?: string): void {\n\t\threfProp.apply(value, (v) => {\n\t\t\tthis.setProp('href', v);\n\t\t});\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setProp('label', v);\n\t\t});\n\t}\n\n\tpublic watchQuote(value?: string): void {\n\t\tquoteProp.apply(value, (v) => {\n\t\t\tthis.setProp('quote', v);\n\t\t});\n\t}\n\n\tpublic watchVariant(value?: string): void {\n\t\tvariantQuoteProp.apply(value, (v) => {\n\t\t\tthis.setProp('variant', v);\n\t\t});\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-quote {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.kol-quote__cite {\n\t\t&::before {\n\t\t\tcontent: '—';\n\n\t\t\t.kol-quote--block & {\n\t\t\t\tpadding-right: 0.5em;\n\t\t\t}\n\n\t\t\t.kol-quote--inline & {\n\t\t\t\tpadding: 0.5em;\n\t\t\t}\n\t\t}\n\t}\n\n\t.kol-quote__figcaption {\n\t\t.kol-quote--block & {\n\t\t\tdisplay: inline;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.kol-quote__blockquote {\n\t\t&::before {\n\t\t\tcontent: open-quote;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: close-quote;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { QuoteApi } from '../../internal/functional-components/quote/api';\nimport { QuoteFC } from '../../internal/functional-components/quote/component';\nimport { QuoteController } from '../../internal/functional-components/quote/controller';\nimport type { QuoteVariantType } from '../../internal/props/variant-quote';\n\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements WebComponentInterface<QuoteApi> {\n\tprivate readonly ctrl = new QuoteController();\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop()\n\tpublic _href!: string;\n\n\t@Watch('_href')\n\tpublic watchHref(value?: string): void {\n\t\tthis.ctrl.watchHref(value);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop()\n\tpublic _label?: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop()\n\tpublic _quote!: string;\n\n\t@Watch('_quote')\n\tpublic watchQuote(value?: string): void {\n\t\tthis.ctrl.watchQuote(value);\n\t}\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop()\n\tpublic _variant?: QuoteVariantType = 'inline';\n\n\t@Watch('_variant')\n\tpublic watchVariant(value?: QuoteVariantType): void {\n\t\tthis.ctrl.watchVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\thref: this._href,\n\t\t\tlabel: this._label,\n\t\t\tquote: this._quote,\n\t\t\tvariant: this._variant,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { href, label, quote, variant } = this.ctrl.getProps();\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<QuoteFC href={href} label={label} quote={quote} variant={variant} />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kol-quote.entry.esm.js","sources":["src/internal/props/href.ts","src/internal/props/quote.ts","src/internal/functional-components/quote/component.tsx","src/internal/functional-components/quote/controller.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type HrefProp = SimpleProp<'href', string>;\nexport const hrefProp = createPropDefinition<HrefProp>(normalizeString, (v) => v.length > 0);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type QuoteProp = SimpleProp<'quote', string>;\nexport const quoteProp = createPropDefinition<QuoteProp>(normalizeString, () => true);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport { KolLinkTag } from '../../../core/component-names';\nimport { bem } from '../../../schema/bem-registry';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { QuoteApi } from './api';\n\nconst quoteBem = bem.forBlock('kol-quote');\nconst BEM_CLASS_QUOTE__BLOCKQUOTE = quoteBem('blockquote');\nconst BEM_CLASS_QUOTE__CITE = quoteBem('cite');\nconst BEM_CLASS_QUOTE__FIGCAPTION = quoteBem('figcaption');\nconst BEM_CLASS_QUOTE__QUOTE = quoteBem('quote');\n\nexport const QuoteFC: FC<FunctionalComponentProps<QuoteApi>> = (props) => {\n\tconst { href, label, quote, variant } = props;\n\tconst hasExpertSlot = quote === '';\n\tconst BEM_CLASS_ROOT = quoteBem({ [variant]: true });\n\treturn (\n\t\t<figure class={BEM_CLASS_ROOT}>\n\t\t\t{variant === 'block' ? (\n\t\t\t\t<blockquote class={BEM_CLASS_QUOTE__BLOCKQUOTE} cite={href}>\n\t\t\t\t\t{quote}\n\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t</blockquote>\n\t\t\t) : (\n\t\t\t\t<q class={BEM_CLASS_QUOTE__QUOTE} cite={href}>\n\t\t\t\t\t{quote}\n\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t</q>\n\t\t\t)}\n\t\t\t{typeof label === 'string' && label.length > 0 && (\n\t\t\t\t<figcaption class={BEM_CLASS_QUOTE__FIGCAPTION}>\n\t\t\t\t\t<cite class={BEM_CLASS_QUOTE__CITE}>\n\t\t\t\t\t\t<KolLinkTag _href={href} _label={label} _target=\"_blank\" />\n\t\t\t\t\t</cite>\n\t\t\t\t</figcaption>\n\t\t\t)}\n\t\t</figure>\n\t);\n};\n","import { hrefProp, labelProp, quoteProp, variantQuoteProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps } from '../generic-types';\nimport type { QuoteApi } from './api';\n\nexport class QuoteController extends BaseController<QuoteApi> implements ControllerInterface<QuoteApi> {\n\tpublic componentWillLoad(props: ResolvedInputProps<QuoteApi>): void {\n\t\tconst { href, label, quote, variant } = props;\n\t\tthis.watchHref(href);\n\t\tthis.watchLabel(label);\n\t\tthis.watchQuote(quote);\n\t\tthis.watchVariant(variant);\n\t}\n\n\tpublic watchHref(value?: string): void {\n\t\threfProp.apply(\n\t\t\tvalue,\n\t\t\t(v) => {\n\t\t\t\tthis.setProp('href', v);\n\t\t\t},\n\t\t\t'',\n\t\t);\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(\n\t\t\tvalue,\n\t\t\t(v) => {\n\t\t\t\tthis.setProp('label', v);\n\t\t\t},\n\t\t\t'',\n\t\t);\n\t}\n\n\tpublic watchQuote(value?: string): void {\n\t\tquoteProp.apply(\n\t\t\tvalue,\n\t\t\t(v) => {\n\t\t\t\tthis.setProp('quote', v);\n\t\t\t},\n\t\t\t'',\n\t\t);\n\t}\n\n\tpublic watchVariant(value?: string): void {\n\t\tvariantQuoteProp.apply(\n\t\t\tvalue,\n\t\t\t(v) => {\n\t\t\t\tthis.setProp('variant', v);\n\t\t\t},\n\t\t\t'inline',\n\t\t);\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-quote {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.kol-quote__cite {\n\t\t&::before {\n\t\t\tcontent: '—';\n\n\t\t\t.kol-quote--block & {\n\t\t\t\tpadding-right: 0.5em;\n\t\t\t}\n\n\t\t\t.kol-quote--inline & {\n\t\t\t\tpadding: 0.5em;\n\t\t\t}\n\t\t}\n\t}\n\n\t.kol-quote__figcaption {\n\t\t.kol-quote--block & {\n\t\t\tdisplay: inline;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.kol-quote__blockquote {\n\t\t&::before {\n\t\t\tcontent: open-quote;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: close-quote;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { QuoteApi } from '../../internal/functional-components/quote/api';\nimport { QuoteFC } from '../../internal/functional-components/quote/component';\nimport { QuoteController } from '../../internal/functional-components/quote/controller';\nimport type { QuoteVariantType } from '../../internal/props/variant-quote';\n\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements WebComponentInterface<QuoteApi> {\n\tprivate readonly ctrl = new QuoteController();\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop()\n\tpublic _href!: string;\n\n\t@Watch('_href')\n\tpublic watchHref(value?: string): void {\n\t\tthis.ctrl.watchHref(value);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop()\n\tpublic _label?: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop()\n\tpublic _quote!: string;\n\n\t@Watch('_quote')\n\tpublic watchQuote(value?: string): void {\n\t\tthis.ctrl.watchQuote(value);\n\t}\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop()\n\tpublic _variant?: QuoteVariantType = 'inline';\n\n\t@Watch('_variant')\n\tpublic watchVariant(value?: QuoteVariantType): void {\n\t\tthis.ctrl.watchVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\thref: this._href,\n\t\t\tlabel: this._label,\n\t\t\tquote: this._quote,\n\t\t\tvariant: this._variant,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { href, label, quote, variant } = this.ctrl.getProps();\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<QuoteFC href={href} label={label} quote={quote} variant={variant} />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["h","registerInstance","Host","KolLinkTag","bem","createPropDefinition","normalizeString","BaseController","variantQuoteProp","labelProp","hrefProp","v","length","quoteProp","quoteBem","forBlock","BEM_CLASS_QUOTE__BLOCKQUOTE","BEM_CLASS_QUOTE__CITE","BEM_CLASS_QUOTE__FIGCAPTION","BEM_CLASS_QUOTE__QUOTE","QuoteFC","props","href","label","quote","variant","hasExpertSlot","BEM_CLASS_ROOT","class","cite","undefined","hidden","name","_href","_label","_target","QuoteController","constructor","super","componentWillLoad","this","watchHref","watchLabel","watchQuote","watchVariant","value","apply","setProp","defaultStyleCss","KolQuote","hostRef","ctrl","_variant","_quote","render","getProps","key","watchers","style","default"],"sources":["0"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["h","registerInstance","Host","KolLinkTag","bem","createPropDefinition","normalizeString","BaseController","variantQuoteProp","labelProp","hrefProp","v","length","quoteProp","quoteBem","forBlock","BEM_CLASS_QUOTE__BLOCKQUOTE","BEM_CLASS_QUOTE__CITE","BEM_CLASS_QUOTE__FIGCAPTION","BEM_CLASS_QUOTE__QUOTE","QuoteFC","props","href","label","quote","variant","hasExpertSlot","BEM_CLASS_ROOT","class","cite","undefined","hidden","name","_href","_label","_target","QuoteController","componentWillLoad","this","watchHref","watchLabel","watchQuote","watchVariant","value","apply","setProp","defaultStyleCss","KolQuote","constructor","hostRef","ctrl","_variant","_quote","render","getProps","key","watchers","style","default"],"sources":["0"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as e,F as t,r as s,g as i}from"./index-CHdBQ7XR.js";import{c as a}from"./clsx-COFh-Vc8.js";import{i as l,d as o,g as r,a as n,F as d}from"./FormFieldStateWrapper-BFyiN9EY.js";import{I as h,a as c}from"./controller-icon-DKRqmDU2.js";import{_ as u}from"./tslib.es6-CxX45GIN.js";import{G as p}from"./common-BIkdAxr0.js";import{n as v}from"./dev.utils-DEjbEXtH.js";import{p as f}from"./controller-zA71XEOV.js";import{v as m}from"./multiple-BgWWOenK.js";import{f as b,v as y}from"./controller-vTikIczD.js";import{v as _}from"./required-Dt9l4wUg.js";import{v as j}from"./rows-CN7sG0G_.js";import"./access-and-short-key-CPX70LXd.js";import"./disabled-BdPI9eda.js";import"./hide-label-ByItyHgV.js";import"./label-C18ud7Yt.js";import"./tooltip-align-DodV1tEH.js";import"./align-DDUsWnWP.js";import"./events-DHTi_wtD.js";import"./associated.controller-CdEaJGVD.js";import"./bootstrap-DcH8Lr28.js";import"./component-names-CqTpXVIM.js";import"./i18n-B0tfVPMa.js";import"./isObject-DvSELytj.js";import"./InternalUnderlinedBadgeText-DLXbDpmD.js";import"./i18n-DvMeCREp.js";import"./Alert-DJWeD9Xz.js";import"./bem-registry-DRYZs7IX.js";import"./browser-KcXKIKON.js";import"./Heading-Cp72eQOw.js";import"./Icon-BI9iw7pD.js";import"./icons-CmA8Oww0.js";import"./orientation-pWOiDBRo.js";const g=t=>{var{baseClassName:s="kol-select",class:i,index:o,selectedValue:l,selected:r,value:n,label:c,disabled:d}=t,h=u(t,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);void 0===l?l=[]:Array.isArray(l)||(l=[l]);const p=r||l.includes(n);return e("option",Object.assign({class:a(`${s}__option`,{[`${s}__option--selected`]:p,[`${s}__option--disabled`]:d},i),selected:p,disabled:d,value:o},h),c)},O=({baseClassName:s,preKey:i,options:o,disabled:l,value:r,OptionProps:n={},OptionGroupProps:c={}})=>(null==o?void 0:o.length)?e(t,null,o.map((t,d)=>{const h=[i,`-${d}`].join("");if("options"in t){if(!o.length)return null;const{label:i}=t,d=u(t,["label"]);return e("optgroup",Object.assign({class:a(`${s}__optgroup`,{[`${s}__optgroup--disabled`]:l}),key:h},c,{label:null==i?void 0:i.toString(),disabled:l}),e(O,Object.assign({baseClassName:s,OptionGroupProps:c,OptionProps:n,value:r,preKey:h},d)))}return"value"in t?e(g,Object.assign({key:h,baseClassName:s},n,{index:h,selectedValue:r},t)):null})):null,w=t=>{const{class:s,msg:i,touched:n,disabled:c,required:d,options:h,value:p,OptionProps:v,OptionGroupProps:m,ariaDescribedBy:b,hideLabel:_,label:f}=t,y=u(t,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),g={"kol-select--disabled":Boolean(c),"kol-select--required":Boolean(d),"kol-select--touched":Boolean(n),[`kol-select--${r(i)}`]:l(i,n)},j=Object.assign(Object.assign({class:a("kol-select",g,s),required:d,disabled:c},o({ariaDescribedBy:b,hideLabel:_,label:f})),y);return e("select",Object.assign({},j),e(O,{baseClassName:"kol-select",options:h,value:p,OptionGroupProps:m,OptionProps:v}))};function D(e){const{ariaDescribedBy:t}=n(e),s={id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,options:e._options,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,size:e._rows,multiple:e._multiple,required:e._required,touched:e._touched,msg:e._msg};return"_shortKey"in e&&(s["aria-keyshortcuts"]=e._shortKey),s}const k=t=>{var{state:s}=t,i=u(t,["state"]);return e(w,Object.assign({},D(s),i))};class B extends h{constructor(e,t,s){super(e,t,s),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find(t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options)),this.filterValuesInOptions=(e,t)=>e.filter(e=>void 0!==this.isValueInOptions(e,t)),this.afterPatchOptions=(e,t,s,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const s=t.get("_value");void 0===s||Array.isArray(s)||t.set("_value",[s]);const i=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),b(this.keyOptionMap,i);const e=t.has("_value")?t.get("_value"):this.component.state._value,s=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],i);!1===this.component._multiple&&0===s.length?t.set("_value",[i[0].value]):Array.isArray(e)&&s.length<e.length&&t.set("_value",s)}},this.component=e}validateOptions(e){y(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){this.assertComponentValueMatchesMultiplicity(!0===e),m(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){_(this.component,e)}validateRows(e){j(this.component,e)}validateValue(e){this.assertValueMatchesMultiplicity(e),p(this.component,"_value",()=>!0,void 0===e?[]:Array.isArray(e)?e:[e],void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}assertValueMatchesMultiplicity(e){const t=Array.isArray(e);if(!0===this.component._multiple){if(void 0!==e&&!t)throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (received = ${JSON.stringify(e)})`)}else if(t)throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (received = ${JSON.stringify(e)})`)}assertComponentValueMatchesMultiplicity(e){const t=this.component._value;if(e){if(void 0!==t&&!Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (current = ${JSON.stringify(t)})`)}else if(Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (current = ${JSON.stringify(t)})`)}}const P=class{async getValue(){return this._multiple?this.state._value:Array.isArray(this.state._value)&&this.state._value.length>0?this.state._value[0]:this.state._value}async focus(){return new Promise(e=>{requestAnimationFrame(()=>{var t;null===(t=this.selectRef)||void 0===t||t.focus(),e()})})}getFormFieldProps(){return{state:this.state,class:a("kol-form-field-select",{"kol-form-field--has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return e(d,Object.assign({key:"5f0a307074c04096c87c8562bb4b32cd7a68fe33"},this.getFormFieldProps()),e(c,{key:"1c4df443d35659907835ce2a72d16fb2a23be340",state:this.state},e("form",{key:"78f8b37700ac271ebcfb92529e0fefbd79fffedd",onSubmit:e=>{e.preventDefault(),f({form:this.host})}},e("input",{key:"73ccb43eee0a4e71e9fa907d4e6a40bdf903fb33",type:"submit",hidden:!0}),e(k,Object.assign({key:"4cb054a8550a6c58eac0fdc23e751152c141c592"},this.getSelectProps())))))}constructor(e){s(this,e),this.catchRef=e=>{this.selectRef=e},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${v()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new B(this,"select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}onInput(e){var t;const s=Array.from((null===(t=this.selectRef)||void 0===t?void 0:t.options)||[]).filter(e=>e.selected).map(e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value});if(this._multiple)this._value=s,this.controller.onFacade.onInput(e,!0,s);else{const t=s.length>0?s[0]:void 0;this._value=t,this.controller.onFacade.onInput(e,!0,t)}}onChange(e){this._multiple,this.controller.onFacade.onChange(e,this._value)}get host(){return i(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};export{P as kol_select_wc};
+import{h as e,F as t,r as s,g as i}from"./index-CkrSoIPD.js";import{c as a}from"./clsx-COFh-Vc8.js";import{i as l,d as o,g as r,a as n,F as d}from"./FormFieldStateWrapper--EBKaIYU.js";import{I as h,a as c}from"./controller-icon-By1Ikt1k.js";import{_ as u}from"./tslib.es6-CxX45GIN.js";import{G as p}from"./common-BIkdAxr0.js";import{n as v}from"./dev.utils-DEA-azs5.js";import{p as f}from"./controller-zA71XEOV.js";import{v as m}from"./multiple-BgWWOenK.js";import{f as b,v as y}from"./controller-INr--hn-.js";import{v as _}from"./required-Dt9l4wUg.js";import{v as j}from"./rows-CN7sG0G_.js";import"./access-and-short-key-CPX70LXd.js";import"./disabled-BdPI9eda.js";import"./hide-label-ByItyHgV.js";import"./label-C18ud7Yt.js";import"./tooltip-align-DodV1tEH.js";import"./align-DDUsWnWP.js";import"./events-DHTi_wtD.js";import"./associated.controller-CdEaJGVD.js";import"./bootstrap-DcH8Lr28.js";import"./component-names-CqTpXVIM.js";import"./i18n-B0tfVPMa.js";import"./isObject-DvSELytj.js";import"./InternalUnderlinedBadgeText-t86A5_XQ.js";import"./i18n-DvMeCREp.js";import"./Alert-w2MT71aB.js";import"./bem-registry-DRYZs7IX.js";import"./browser-KcXKIKON.js";import"./Heading-B9rTijzp.js";import"./Icon-BYiB0b6v.js";import"./icons-CmA8Oww0.js";import"./orientation-pWOiDBRo.js";const g=t=>{var{baseClassName:s="kol-select",class:i,index:o,selectedValue:l,selected:r,value:n,label:c,disabled:d}=t,h=u(t,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);void 0===l?l=[]:Array.isArray(l)||(l=[l]);const p=r||l.includes(n);return e("option",Object.assign({class:a(`${s}__option`,{[`${s}__option--selected`]:p,[`${s}__option--disabled`]:d},i),selected:p,disabled:d,value:o},h),c)},O=({baseClassName:s,preKey:i,options:o,disabled:l,value:r,OptionProps:n={},OptionGroupProps:c={}})=>(null==o?void 0:o.length)?e(t,null,o.map((t,d)=>{const h=[i,`-${d}`].join("");if("options"in t){if(!o.length)return null;const{label:i}=t,d=u(t,["label"]);return e("optgroup",Object.assign({class:a(`${s}__optgroup`,{[`${s}__optgroup--disabled`]:l}),key:h},c,{label:null==i?void 0:i.toString(),disabled:l}),e(O,Object.assign({baseClassName:s,OptionGroupProps:c,OptionProps:n,value:r,preKey:h},d)))}return"value"in t?e(g,Object.assign({key:h,baseClassName:s},n,{index:h,selectedValue:r},t)):null})):null,w=t=>{const{class:s,msg:i,touched:n,disabled:c,required:d,options:h,value:p,OptionProps:v,OptionGroupProps:m,ariaDescribedBy:_,hideLabel:b,label:f}=t,y=u(t,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),g={"kol-select--disabled":Boolean(c),"kol-select--required":Boolean(d),"kol-select--touched":Boolean(n),[`kol-select--${r(i)}`]:l(i,n)},j=Object.assign(Object.assign({class:a("kol-select",g,s),required:d,disabled:c},o({ariaDescribedBy:_,hideLabel:b,label:f})),y);return e("select",Object.assign({},j),e(O,{baseClassName:"kol-select",options:h,value:p,OptionGroupProps:m,OptionProps:v}))};function k(e){const{ariaDescribedBy:t}=n(e),s={id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,options:e._options,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,size:e._rows,multiple:e._multiple,required:e._required,touched:e._touched,msg:e._msg};return"_shortKey"in e&&(s["aria-keyshortcuts"]=e._shortKey),s}const B=t=>{var{state:s}=t,a=u(t,["state"]);return e(w,Object.assign({},k(s),a))};class A extends h{constructor(e,t,s){super(e,t,s),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find(t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options)),this.filterValuesInOptions=(e,t)=>e.filter(e=>void 0!==this.isValueInOptions(e,t)),this.afterPatchOptions=(e,t,s,a)=>{"_value"===a&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const s=t.get("_value");void 0===s||Array.isArray(s)||t.set("_value",[s]);const a=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(a)&&a.length>0){this.keyOptionMap.clear(),b(this.keyOptionMap,a);const e=t.has("_value")?t.get("_value"):this.component.state._value,s=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],a);!1===this.component._multiple&&0===s.length?t.set("_value",[a[0].value]):Array.isArray(e)&&s.length<e.length&&t.set("_value",s)}},this.component=e}validateOptions(e){y(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){this.assertComponentValueMatchesMultiplicity(!0===e),m(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){_(this.component,e)}validateRows(e){j(this.component,e)}validateValue(e){this.assertValueMatchesMultiplicity(e),p(this.component,"_value",()=>!0,void 0===e?[]:Array.isArray(e)?e:[e],void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}assertValueMatchesMultiplicity(e){const t=Array.isArray(e);if(!0===this.component._multiple){if(void 0!==e&&!t)throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (received = ${JSON.stringify(e)})`)}else if(t)throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (received = ${JSON.stringify(e)})`)}assertComponentValueMatchesMultiplicity(e){const t=this.component._value;if(e){if(void 0!==t&&!Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (current = ${JSON.stringify(t)})`)}else if(Array.isArray(t))throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (current = ${JSON.stringify(t)})`)}}const P=class{async getValue(){return this._multiple?this.state._value:Array.isArray(this.state._value)&&this.state._value.length>0?this.state._value[0]:this.state._value}async focus(){return new Promise(e=>{requestAnimationFrame(()=>{var t;null===(t=this.selectRef)||void 0===t||t.focus(),e()})})}getFormFieldProps(){return{state:this.state,class:a("kol-form-field-select",{"kol-form-field--has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return e(d,Object.assign({key:"5f0a307074c04096c87c8562bb4b32cd7a68fe33"},this.getFormFieldProps()),e(c,{key:"1c4df443d35659907835ce2a72d16fb2a23be340",state:this.state},e("form",{key:"78f8b37700ac271ebcfb92529e0fefbd79fffedd",onSubmit:e=>{e.preventDefault(),f({form:this.host})}},e("input",{key:"73ccb43eee0a4e71e9fa907d4e6a40bdf903fb33",type:"submit",hidden:!0}),e(B,Object.assign({key:"4cb054a8550a6c58eac0fdc23e751152c141c592"},this.getSelectProps())))))}constructor(e){s(this,e),this.catchRef=e=>{this.selectRef=e},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${v()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new A(this,"select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}onInput(e){var t;const s=Array.from((null===(t=this.selectRef)||void 0===t?void 0:t.options)||[]).filter(e=>e.selected).map(e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value});if(this._multiple)this._value=s,this.controller.onFacade.onInput(e,!0,s);else{const t=s.length>0?s[0]:void 0;this._value=t,this.controller.onFacade.onInput(e,!0,t)}}onChange(e){this._multiple,this.controller.onFacade.onChange(e,this._value)}get host(){return i(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};export{P as kol_select_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-CHdBQ7XR.js";import{l as o}from"./component-names-CqTpXVIM.js";import"./common-BIkdAxr0.js";const i='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: "✓ ";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n}',l=class{constructor(e){n(this,e),this.catchRef=n=>{this.selectWcRef=n},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1}async getValue(){var n;return null===(n=this.selectWcRef)||void 0===n?void 0:n.getValue()}async focus(){var n;return Promise.resolve(null===(n=this.selectWcRef)||void 0===n?void 0:n.focus())}render(){return e(t,{key:"1e92431ea58a4bfc3f0de2bdf454f6a9e027fe98",class:"kol-select"},e(o,{key:"57a74fe2dae64061fe7ca517db9b4ebd93c89a73",ref:this.catchRef,_accessKey:this._accessKey,_disabled:this._disabled,_hideLabel:this._hideLabel,_hideMsg:this._hideMsg,_hint:this._hint,_icons:this._icons,_label:this._label,_msg:this._msg,_multiple:this._multiple,_name:this._name,_on:this._on,_options:this._options,_required:this._required,_rows:this._rows,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_touched:this._touched,_value:this._value},e("slot",{key:"409f1436592a63649350d56f3dc6d4a7901aad9f",name:"expert",slot:"expert"})))}};l.style={default:i};export{l as kol_select};
+import{r as n,h as e,H as t}from"./index-CkrSoIPD.js";import{l as o}from"./component-names-CqTpXVIM.js";import"./common-BIkdAxr0.js";const i='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: "✓ ";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n}',l=class{constructor(e){n(this,e),this.catchRef=n=>{this.selectWcRef=n},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1}async getValue(){var n;return null===(n=this.selectWcRef)||void 0===n?void 0:n.getValue()}async focus(){var n;return Promise.resolve(null===(n=this.selectWcRef)||void 0===n?void 0:n.focus())}render(){return e(t,{key:"1e92431ea58a4bfc3f0de2bdf454f6a9e027fe98",class:"kol-select"},e(o,{key:"57a74fe2dae64061fe7ca517db9b4ebd93c89a73",ref:this.catchRef,_accessKey:this._accessKey,_disabled:this._disabled,_hideLabel:this._hideLabel,_hideMsg:this._hideMsg,_hint:this._hint,_icons:this._icons,_label:this._label,_msg:this._msg,_multiple:this._multiple,_name:this._name,_on:this._on,_options:this._options,_required:this._required,_rows:this._rows,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_touched:this._touched,_value:this._value},e("slot",{key:"409f1436592a63649350d56f3dc6d4a7901aad9f",name:"expert",slot:"expert"})))}};l.style={default:i};export{l as kol_select};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,r as e,g as i}from"./index-CHdBQ7XR.js";import{c as n,d as s}from"./component-names-CqTpXVIM.js";import{a as o,F as l}from"./FormFieldStateWrapper-BFyiN9EY.js";import{I as a,a as r}from"./controller-icon-DKRqmDU2.js";import{I as h}from"./InputStateWrapper-D7DYAs_8.js";import{C as d,a as c}from"./CustomSuggestionsOptionsGroup-BBiujBa7.js";import{t as u}from"./i18n-DvMeCREp.js";import{c as f}from"./clsx-COFh-Vc8.js";import{n as m}from"./dev.utils-DEjbEXtH.js";import{b as p,e as b,N as g}from"./common-BIkdAxr0.js";import{f as v,b as k}from"./controller-vTikIczD.js";import{v as y}from"./placeholder-D8vH7TM6.js";import{v as w}from"./required-Dt9l4wUg.js";import"./access-and-short-key-CPX70LXd.js";import"./disabled-BdPI9eda.js";import"./hide-label-ByItyHgV.js";import"./label-C18ud7Yt.js";import"./tooltip-align-DodV1tEH.js";import"./align-DDUsWnWP.js";import"./events-DHTi_wtD.js";import"./associated.controller-CdEaJGVD.js";import"./bootstrap-DcH8Lr28.js";import"./i18n-B0tfVPMa.js";import"./isObject-DvSELytj.js";import"./tslib.es6-CxX45GIN.js";import"./InternalUnderlinedBadgeText-DLXbDpmD.js";import"./Alert-DJWeD9Xz.js";import"./bem-registry-DRYZs7IX.js";import"./browser-KcXKIKON.js";import"./Heading-Cp72eQOw.js";import"./Icon-BI9iw7pD.js";import"./icons-CmA8Oww0.js";import"./Input-DXQUCRHF.js";import"./orientation-pWOiDBRo.js";class _ extends a{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.afterPatchOptions=(t,e,n,i)=>{"_value"===i&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),v(this.keyOptionMap,n))},this.component=t}validateOptions(t){k(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){w(this.component,t)}validateValue(t){p(this.component,"_value",t=>void 0!==t,new Set(["KoliBriUnknown"]),t)}validatePlaceholder(t){y(this.component,t)}validateHasClearButton(t){b(this.component,"_hasClearButton",t)}validateRows(t){g(this.component,"_rows",t)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder),this.validateHasClearButton(this.component._hasClearButton),this.validateRows(this.component._rows)}}const x='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    line-height: 1.5;\n    white-space: normal;\n    cursor: pointer;\n    overflow-wrap: break-word;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n  .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-options-group {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .kol-input-container:has(.kol-custom-suggestions-options-group--open) {\n    z-index: 10;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n    cursor: not-allowed;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-single-select__delete :host {\n    display: inline-block;\n  }\n  .kol-single-select__delete .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-single-select__delete .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-single-select__delete .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-single-select__delete .kol-button {\n    margin-top: -2px;\n    margin-bottom: -2px;\n  }\n  .kol-single-select__no-results-message {\n    display: flex;\n    min-height: calc(50 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-single-select .kol-custom-suggestions-options-group {\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * var(--visible-options, 5) + 2 * 1rem / var(--kolibri-root-font-size, 16)) !important;\n  }\n  .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n    cursor: pointer;\n  }\n  .kol-custom-suggestions-toggle--disabled {\n    opacity: 0.5;\n  }\n}',j=class{async getValue(){return this._value}async focus(){return new Promise(t=>{requestAnimationFrame(()=>{var e;null===(e=this.refInput)||void 0===e||e.focus(),t()})})}onBlur(t){var e,n,i;const o=null===(e=this.state._options)||void 0===e?void 0:e.find(t=>{var e,n;return(null===(e=t.label)||void 0===e?void 0:e.toLowerCase())===(null===(n=this._inputValue)||void 0===n?void 0:n.toLowerCase())});o?this.selectOption(o):!this._isOpen&&this._value&&(this._inputValue=null===(i=null===(n=this.state._options)||void 0===n?void 0:n.find(t=>t.value===this._value))||void 0===i?void 0:i.label,this._filteredOptions=[...this.state._options]),t instanceof FocusEvent&&t.view===window&&!this.isClearing&&(this._isOpen=!1)}createEventWithTarget(t,e){const n=new CustomEvent(t,{bubbles:!0,detail:e});return this.refInput&&(Object.defineProperty(n,"target",{value:this.refInput}),Object.defineProperty(n,"currentTarget",{value:this.refInput})),n}clearSelection(){if(this.isClearing=!0,this.state._disabled)return;const t=null;this._focusedOptionIndex=-1,this._value=t,this._inputValue="",this._filteredOptions=[...this.state._options];const e=this.createEventWithTarget("input",{name:this.state._name,value:t}),n=this.createEventWithTarget("change",{name:this.state._name,value:t});this.controller.onFacade.onInput(e,!0,{value:t}),this.controller.onFacade.onChange(n,{value:t}),this.isClearing=!1}selectOption(t){var e,n;if(t.value===this._value)return this._inputValue=t.label,void(this._filteredOptions=[...this.state._options]);this._value=t.value,this._inputValue=t.label;const i=this.createEventWithTarget("input",{name:null!==(e=this.state._name)&&void 0!==e?e:"",value:t.value}),o=this.createEventWithTarget("change",{name:null!==(n=this.state._name)&&void 0!==n?n:"",value:t.value});this.controller.onFacade.onInput(i,!1,t.value),this.controller.onFacade.onChange(o,t.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._value)}onInput(t){const e=t.target;this._inputValue=e.value,this._isOpen=!0,this.setFilteredOptionsByQuery(e.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(t){1===t.key.length&&/[a-z0-9]/i.test(t.key)&&(t.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(t.key))}setFilteredOptionsByQuery(t){""===(null==t?void 0:t.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&t.length>0&&(this._filteredOptions=this.state._options.filter(e=>{var n,i;return null===(i=null===(n=e.label)||void 0===n?void 0:n.toLowerCase())||void 0===i?void 0:i.includes(null==t?void 0:t.toLowerCase())}))}moveFocus(t){if(!this._filteredOptions)return;let e=this._focusedOptionIndex+t,n=0,i=!1;const o=this._filteredOptions.length;for(;n<o;){e>=this._filteredOptions.length&&(e=0),e<0&&(e=this._filteredOptions.length-1);if(!this._filteredOptions[e].disabled){i=!0;break}e+=t,n++}i&&(this._focusedOptionIndex=e,this.focusOption(this._focusedOptionIndex))}focusOption(t){if(this.refOptions){const e=this.refOptions[t];null==e||e.focus()}}selectFocusedOption(){return!!(Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&this._focusedOptionIndex>=0)&&(this.selectOption(this._filteredOptions[this._focusedOptionIndex]),!0)}focusSuggestionStartingWith(t){const e=t.toLowerCase(),n=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex(t=>t.label.toLowerCase().startsWith(e)&&!t.disabled);"number"==typeof n&&n>=0&&(this._focusedOptionIndex=n,this.focusOption(n))}getFormFieldProps(){return{state:this.state,class:"kol-single-select",tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:t}=o(this.state),e=!0===this.state._disabled;return Object.assign(Object.assign({"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-keyshortcuts":this.state._shortKey,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",class:"kol-single-select__input",disabled:e,name:this.state._name,placeholder:this.state._placeholder,ref:this.catchRef,required:this.state._required,role:"combobox",state:this.state,type:"text",value:this._inputValue},this.controller.onFacade),{onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onInput:this.onInput.bind(this),onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})}render(){var e;const i=!0===this.state._disabled;return t(l,Object.assign({key:"ad9a38a46479da356b1907afd906c0af53d0207e"},this.getFormFieldProps()),t(r,{key:"43954af770afef0dd073dc250071d43022553c20",state:this.state},t("div",{key:"d169f4b094570987aa89e37845df5c32dbb59e14",class:"kol-single-select__group"},t(h,Object.assign({key:"05c882735fb65b1d38415cbdf18bf0965ac3d879"},this.getInputProps())),this._inputValue&&this.state._hasClearButton&&t(n,{key:"573c57f90fed05f2a37c01176c6b6400c6776d6c",_icons:"kolicon-cross",_label:this.translateDeleteSelection,_hideLabel:!0,_variant:"ghost",_disabled:i,"data-testid":"single-select-delete",class:"kol-single-select__delete",hidden:i,_on:{onClick:()=>{var t;this.clearSelection(),null===(t=this.refInput)||void 0===t||t.focus()}}}),t(s,{key:"1c7113d7a3b0f2f7880565019f8564e6158bd739",_icons:"kolicon-chevron-down",_label:"",class:f("kol-custom-suggestions-toggle",{"kol-custom-suggestions-toggle--disabled":i}),onClick:this.toggleListbox.bind(this)})),t(d,{key:"62384a52d06f722bf25cbec7172dcf8f45a811ea",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this),style:{"--visible-options":`${null!==(e=this._rows)&&void 0!==e?e:5}`},hidden:!this._isOpen||i},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map((e,n)=>t(c,{index:n,option:e.label,searchTerm:this._inputValue,ref:t=>{t&&(this.refOptions[n]=t)},selected:this._value===e.value,disabled:!!e.disabled,onClick:t=>{var n;e.disabled||(this.selectOption(e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t),this._isOpen=!1)},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=n,this.focusOption(n))},onFocus:()=>{e.disabled||(this._focusedOptionIndex=n,this.focusOption(n))},onKeyDown:t=>{var n;e.disabled||"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t),t.preventDefault())}})):t("li",{class:"kol-single-select__no-results-message",role:"alert"},this.translateNoResultsMessage," "))))}handleFocusOut(t){setTimeout(()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur(t)})}handleWindowBlur(t){this.onBlur(t)}handleKeyDown(t){var e,n;const i=(e,n)=>{var i;t.preventDefault(),void 0!==e&&(this._isOpen=e,e||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(t.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(1));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(-1));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus());break;case"Esc":case"Escape":this._isOpen=!1,i(!1);break;case" ":case"Enter":case"NumpadEnter":this._isOpen?this.selectFocusedOption()&&(null===(n=this.refInput)||void 0===n||n.focus(),i(!1)):this.toggleListbox(t);break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))});break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))});break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(-10));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(10))}}constructor(t){e(this,t),this.refOptions=[],this.translateDeleteSelection=u("kol-delete-selection"),this.translateNoResultsMessage=u("kol-no-results-message"),this.isClearing=!1,this.catchRef=t=>{this.refInput=t},this.toggleListbox=t=>{var e;null==t||t.preventDefault();if(!(!0===this.state._disabled))if(null===(e=this.refInput)||void 0===e||e.focus(),this._isOpen)this._isOpen=!1;else{this._isOpen=!0;const t=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex(t=>t.label===this._inputValue):-1;this._focusedOptionIndex=t>=0?t:-1,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._required=!1,this._tooltipAlign="top",this._touched=!1,this._value=null,this._hasClearButton=!0,this.state={_hideMsg:!1,_id:`id-${m()}`,_label:"",_options:[],_hasClearButton:!0},this.inputHasFocus=!1,this.controller=new _(this,"single-select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHideMsg(t){this.controller.validateHideMsg(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateLabel(t){this.controller.validateLabel(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t),this._filteredOptions=t,this.updateInputValue(this._value)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t),this.oldValue=t,this.updateInputValue(t)}validateHasClearButton(t){this.controller.validateHasClearButton(t)}validateRows(t){this.controller.validateRows(t)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(t){if(Array.isArray(this._options)){const e=this._options.find(e=>e.value===t);this._inputValue=e?String(e.label):""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this.state._options,this.updateInputValue(this._value)}onChange(t){var e,n;this.oldValue!==(null===(e=this.refInput)||void 0===e?void 0:e.value)&&(this.oldValue=null===(n=this.refInput)||void 0===n?void 0:n.value),this._isOpen||this.controller.onFacade.onChange(t,this._value)}onClick(t){var e;this.toggleListbox(t),null===(e=this.refInput)||void 0===e||e.focus(),this.controller.onFacade.onClick(t)}get host(){return i(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"],_hasClearButton:["validateHasClearButton"],_rows:["validateRows"]}}};j.style={default:x};export{j as kol_single_select};
+import{h as t,r as e,g as i}from"./index-CkrSoIPD.js";import{c as n,d as s}from"./component-names-CqTpXVIM.js";import{a as o,F as l}from"./FormFieldStateWrapper--EBKaIYU.js";import{I as a,a as r}from"./controller-icon-By1Ikt1k.js";import{I as h}from"./InputStateWrapper-CCJNqzRI.js";import{C as d,a as c}from"./CustomSuggestionsOptionsGroup-BiV1SLtM.js";import{t as u}from"./i18n-DvMeCREp.js";import{c as f}from"./clsx-COFh-Vc8.js";import{n as m}from"./dev.utils-DEA-azs5.js";import{b as p,e as b,N as g}from"./common-BIkdAxr0.js";import{f as v,b as k}from"./controller-INr--hn-.js";import{v as y}from"./placeholder-D8vH7TM6.js";import{v as _}from"./required-Dt9l4wUg.js";import"./access-and-short-key-CPX70LXd.js";import"./disabled-BdPI9eda.js";import"./hide-label-ByItyHgV.js";import"./label-C18ud7Yt.js";import"./tooltip-align-DodV1tEH.js";import"./align-DDUsWnWP.js";import"./events-DHTi_wtD.js";import"./associated.controller-CdEaJGVD.js";import"./bootstrap-DcH8Lr28.js";import"./i18n-B0tfVPMa.js";import"./isObject-DvSELytj.js";import"./tslib.es6-CxX45GIN.js";import"./InternalUnderlinedBadgeText-t86A5_XQ.js";import"./Alert-w2MT71aB.js";import"./bem-registry-DRYZs7IX.js";import"./browser-KcXKIKON.js";import"./Heading-B9rTijzp.js";import"./Icon-BYiB0b6v.js";import"./icons-CmA8Oww0.js";import"./Input-N-fWHtGJ.js";import"./orientation-pWOiDBRo.js";class w extends a{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.afterPatchOptions=(t,e,n,i)=>{"_value"===i&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),v(this.keyOptionMap,n))},this.component=t}validateOptions(t){k(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){_(this.component,t)}validateValue(t){p(this.component,"_value",t=>void 0!==t,new Set(["KoliBriUnknown"]),t)}validatePlaceholder(t){y(this.component,t)}validateHasClearButton(t){b(this.component,"_hasClearButton",t)}validateRows(t){g(this.component,"_rows",t)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder),this.validateHasClearButton(this.component._hasClearButton),this.validateRows(this.component._rows)}}const x='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    line-height: 1.5;\n    white-space: normal;\n    cursor: pointer;\n    overflow-wrap: break-word;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n  .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-options-group {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .kol-input-container:has(.kol-custom-suggestions-options-group--open) {\n    z-index: 10;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n    cursor: not-allowed;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-single-select__delete :host {\n    display: inline-block;\n  }\n  .kol-single-select__delete .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-single-select__delete .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-single-select__delete .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-single-select__delete .kol-button {\n    margin-top: -2px;\n    margin-bottom: -2px;\n  }\n  .kol-single-select__no-results-message {\n    display: flex;\n    min-height: calc(50 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-single-select .kol-custom-suggestions-options-group {\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * var(--visible-options, 5) + 2 * 1rem / var(--kolibri-root-font-size, 16)) !important;\n  }\n  .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n    cursor: pointer;\n  }\n  .kol-custom-suggestions-toggle--disabled {\n    opacity: 0.5;\n  }\n}',j=class{async getValue(){return this._value}async focus(){return new Promise(t=>{requestAnimationFrame(()=>{var e;null===(e=this.refInput)||void 0===e||e.focus(),t()})})}onBlur(t){var e,n,i;const o=null===(e=this.state._options)||void 0===e?void 0:e.find(t=>{var e,n;return(null===(e=t.label)||void 0===e?void 0:e.toLowerCase())===(null===(n=this._inputValue)||void 0===n?void 0:n.toLowerCase())});o?this.selectOption(o):!this._isOpen&&this._value&&(this._inputValue=null===(i=null===(n=this.state._options)||void 0===n?void 0:n.find(t=>t.value===this._value))||void 0===i?void 0:i.label,this._filteredOptions=[...this.state._options]),t instanceof FocusEvent&&t.view===window&&!this.isClearing&&(this._isOpen=!1)}createEventWithTarget(t,e){const n=new CustomEvent(t,{bubbles:!0,detail:e});return this.refInput&&(Object.defineProperty(n,"target",{value:this.refInput}),Object.defineProperty(n,"currentTarget",{value:this.refInput})),n}clearSelection(){if(this.isClearing=!0,this.state._disabled)return;const t=null;this._focusedOptionIndex=-1,this._value=t,this._inputValue="",this._filteredOptions=[...this.state._options];const e=this.createEventWithTarget("input",{name:this.state._name,value:t}),n=this.createEventWithTarget("change",{name:this.state._name,value:t});this.controller.onFacade.onInput(e,!0,{value:t}),this.controller.onFacade.onChange(n,{value:t}),this.isClearing=!1}selectOption(t){var e,n;if(t.value===this._value)return this._inputValue=t.label,void(this._filteredOptions=[...this.state._options]);this._value=t.value,this._inputValue=t.label;const i=this.createEventWithTarget("input",{name:null!==(e=this.state._name)&&void 0!==e?e:"",value:t.value}),o=this.createEventWithTarget("change",{name:null!==(n=this.state._name)&&void 0!==n?n:"",value:t.value});this.controller.onFacade.onInput(i,!1,t.value),this.controller.onFacade.onChange(o,t.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._value)}onInput(t){const e=t.target;this._inputValue=e.value,this._isOpen=!0,this.setFilteredOptionsByQuery(e.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(t){1===t.key.length&&/[a-z0-9]/i.test(t.key)&&(t.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(t.key))}setFilteredOptionsByQuery(t){""===(null==t?void 0:t.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&t.length>0&&(this._filteredOptions=this.state._options.filter(e=>{var n,i;return null===(i=null===(n=e.label)||void 0===n?void 0:n.toLowerCase())||void 0===i?void 0:i.includes(null==t?void 0:t.toLowerCase())}))}moveFocus(t){if(!this._filteredOptions)return;let e=this._focusedOptionIndex+t,n=0,i=!1;const o=this._filteredOptions.length;for(;n<o;){e>=this._filteredOptions.length&&(e=0),e<0&&(e=this._filteredOptions.length-1);if(!this._filteredOptions[e].disabled){i=!0;break}e+=t,n++}i&&(this._focusedOptionIndex=e,this.focusOption(this._focusedOptionIndex))}focusOption(t){if(this.refOptions){const e=this.refOptions[t];null==e||e.focus()}}selectFocusedOption(){return!!(Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&this._focusedOptionIndex>=0)&&(this.selectOption(this._filteredOptions[this._focusedOptionIndex]),!0)}focusSuggestionStartingWith(t){const e=t.toLowerCase(),n=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex(t=>t.label.toLowerCase().startsWith(e)&&!t.disabled);"number"==typeof n&&n>=0&&(this._focusedOptionIndex=n,this.focusOption(n))}getFormFieldProps(){return{state:this.state,class:"kol-single-select",tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:t}=o(this.state),e=!0===this.state._disabled;return Object.assign(Object.assign({"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-keyshortcuts":this.state._shortKey,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",class:"kol-single-select__input",disabled:e,name:this.state._name,placeholder:this.state._placeholder,ref:this.catchRef,required:this.state._required,role:"combobox",state:this.state,type:"text",value:this._inputValue},this.controller.onFacade),{onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onInput:this.onInput.bind(this),onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})}render(){var e;const i=!0===this.state._disabled;return t(l,Object.assign({key:"ad9a38a46479da356b1907afd906c0af53d0207e"},this.getFormFieldProps()),t(r,{key:"43954af770afef0dd073dc250071d43022553c20",state:this.state},t("div",{key:"d169f4b094570987aa89e37845df5c32dbb59e14",class:"kol-single-select__group"},t(h,Object.assign({key:"05c882735fb65b1d38415cbdf18bf0965ac3d879"},this.getInputProps())),this._inputValue&&this.state._hasClearButton&&t(n,{key:"573c57f90fed05f2a37c01176c6b6400c6776d6c",_icons:"kolicon-cross",_label:this.translateDeleteSelection,_hideLabel:!0,_variant:"ghost",_disabled:i,"data-testid":"single-select-delete",class:"kol-single-select__delete",hidden:i,_on:{onClick:()=>{var t;this.clearSelection(),null===(t=this.refInput)||void 0===t||t.focus()}}}),t(s,{key:"1c7113d7a3b0f2f7880565019f8564e6158bd739",_icons:"kolicon-chevron-down",_label:"",class:f("kol-custom-suggestions-toggle",{"kol-custom-suggestions-toggle--disabled":i}),onClick:this.toggleListbox.bind(this)})),t(d,{key:"62384a52d06f722bf25cbec7172dcf8f45a811ea",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this),style:{"--visible-options":`${null!==(e=this._rows)&&void 0!==e?e:5}`},hidden:!this._isOpen||i},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map((e,n)=>t(c,{index:n,option:e.label,searchTerm:this._inputValue,ref:t=>{t&&(this.refOptions[n]=t)},selected:this._value===e.value,disabled:!!e.disabled,onClick:t=>{var n;e.disabled||(this.selectOption(e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t),this._isOpen=!1)},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=n,this.focusOption(n))},onFocus:()=>{e.disabled||(this._focusedOptionIndex=n,this.focusOption(n))},onKeyDown:t=>{var n;e.disabled||"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t),t.preventDefault())}})):t("li",{class:"kol-single-select__no-results-message",role:"alert"},this.translateNoResultsMessage," "))))}handleFocusOut(t){setTimeout(()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur(t)})}handleWindowBlur(t){this.onBlur(t)}handleKeyDown(t){var e,n;const i=(e,n)=>{var i;t.preventDefault(),void 0!==e&&(this._isOpen=e,e||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(t.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(1));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(-1));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus());break;case"Esc":case"Escape":this._isOpen=!1,i(!1);break;case" ":case"Enter":case"NumpadEnter":this._isOpen?this.selectFocusedOption()&&(null===(n=this.refInput)||void 0===n||n.focus(),i(!1)):this.toggleListbox(t);break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))});break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))});break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(-10));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(10))}}constructor(t){e(this,t),this.refOptions=[],this.translateDeleteSelection=u("kol-delete-selection"),this.translateNoResultsMessage=u("kol-no-results-message"),this.isClearing=!1,this.catchRef=t=>{this.refInput=t},this.toggleListbox=t=>{var e;null==t||t.preventDefault();if(!(!0===this.state._disabled))if(null===(e=this.refInput)||void 0===e||e.focus(),this._isOpen)this._isOpen=!1;else{this._isOpen=!0;const t=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex(t=>t.label===this._inputValue):-1;this._focusedOptionIndex=t>=0?t:-1,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._required=!1,this._tooltipAlign="top",this._touched=!1,this._value=null,this._hasClearButton=!0,this.state={_hideMsg:!1,_id:`id-${m()}`,_label:"",_options:[],_hasClearButton:!0},this.inputHasFocus=!1,this.controller=new w(this,"single-select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHideMsg(t){this.controller.validateHideMsg(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateLabel(t){this.controller.validateLabel(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t),this._filteredOptions=t,this.updateInputValue(this._value)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t),this.oldValue=t,this.updateInputValue(t)}validateHasClearButton(t){this.controller.validateHasClearButton(t)}validateRows(t){this.controller.validateRows(t)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(t){if(Array.isArray(this._options)){const e=this._options.find(e=>e.value===t);this._inputValue=e?String(e.label):""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this.state._options,this.updateInputValue(this._value)}onChange(t){var e,n;this.oldValue!==(null===(e=this.refInput)||void 0===e?void 0:e.value)&&(this.oldValue=null===(n=this.refInput)||void 0===n?void 0:n.value),this._isOpen||this.controller.onFacade.onChange(t,this._value)}onClick(t){var e;this.toggleListbox(t),null===(e=this.refInput)||void 0===e||e.focus(),this.controller.onFacade.onClick(t)}get host(){return i(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"],_hasClearButton:["validateHasClearButton"],_rows:["validateRows"]}}};j.style={default:x};export{j as kol_single_select};

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

@@ -1 +1 @@
-{"version":3,"file":"kol-skeleton.entry.esm.js","sources":["src/internal/props/count.ts","src/internal/props/name.ts","src/internal/functional-components/skeleton/component.tsx","src/internal/functional-components/skeleton/controller.ts","src/components/_skeleton/web-components/skeleton/component.tsx"],"sourcesContent":["import { createPropDefinition, type Prop } from './helpers/factory';\nimport { normalizeInteger } from './helpers/normalizers';\n\nexport type CountProp = Prop<'count', number | string, number>;\nexport const countProp = createPropDefinition<CountProp>(normalizeInteger, (v) => v >= 0);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type NameProp = SimpleProp<'name', string>;\nexport const nameProp = createPropDefinition<NameProp>(normalizeString, () => true);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport { bem } from '../../../schema/bem-registry';\nimport { ClickButtonFC } from '../click-button/component';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { SkeletonApi } from './api';\n\nconst skeletonBem = bem.forBlock('kol-skeleton');\nconst BEM_CLASS_SKELETON__ACTIONS = skeletonBem('actions');\nconst BEM_CLASS_SKELETON__CONTAINER = skeletonBem('container');\nconst BEM_CLASS_SKELETON__COUNTER = skeletonBem('counter');\nconst BEM_CLASS_SKELETON__NAME = skeletonBem('name');\n\nexport const SkeletonFC: FC<FunctionalComponentProps<SkeletonApi>> = (props) => {\n\tconst { count, label, name, show, handleClick, refButton } = props;\n\tconst hasName = !!(show && name?.trim());\n\tconst BEM_CLASS_ROOT = skeletonBem({\n\t\t'has-name': hasName,\n\t\t'is-hidden': !show,\n\t});\n\treturn (\n\t\t<div class={BEM_CLASS_ROOT}>\n\t\t\t<div class={BEM_CLASS_SKELETON__CONTAINER}>\n\t\t\t\t{hasName && <span class={BEM_CLASS_SKELETON__NAME}>{name}</span>}\n\t\t\t\t<div class={BEM_CLASS_SKELETON__COUNTER}>Count: {count}</div>\n\t\t\t</div>\n\t\t\t<div class={BEM_CLASS_SKELETON__ACTIONS}>\n\t\t\t\t<ClickButtonFC label={label} handleClick={handleClick} refButton={refButton} />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n","import { Log } from '../../../schema';\nimport { countProp, labelProp, nameProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport { ClickButtonController } from '../click-button/controller';\nimport type { ControllerInterface, ResolvedInputProps } from '../generic-types';\nimport type { SkeletonApi } from './api';\n\nexport class SkeletonController extends BaseController<SkeletonApi> implements ControllerInterface<SkeletonApi> {\n\tprivate readonly clickButtonCtrl: ClickButtonController;\n\tprivate intervalId?: ReturnType<typeof setTimeout>;\n\n\tpublic constructor(states: SkeletonApi['States']) {\n\t\tsuper(states, {\n\t\t\tcount: 0,\n\t\t\tname: '',\n\t\t});\n\n\t\tthis.clickButtonCtrl = new ClickButtonController({});\n\t\tthis.startLoadedEventInterval();\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<SkeletonApi>): void {\n\t\tconst { count, name } = props;\n\t\tthis.watchCount(count);\n\t\tthis.watchName(name);\n\t\tthis.watchLabel(this.component.label);\n\t\tthis.clickButtonCtrl.componentWillLoad({\n\t\t\tlabel: this.component.label,\n\t\t});\n\t}\n\n\tpublic watchCount(value?: number | string): void {\n\t\tcountProp.apply(value, (v) => {\n\t\t\tthis.setProp('count', v);\n\t\t\tthis.setState('count', v);\n\t\t});\n\t}\n\n\tpublic watchName(value?: string): void {\n\t\tnameProp.apply(value, (v) => {\n\t\t\tthis.setProp('name', v);\n\t\t});\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setState('label', v);\n\t\t\tthis.clickButtonCtrl.watchLabel(v);\n\t\t});\n\t}\n\n\tpublic toggle(): void {\n\t\tthis.setState('show', !this.component.show);\n\t}\n\n\tpublic onKeydown = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.log('Show should be toggled');\n\t\t\tvoid this.toggle();\n\t\t}\n\t};\n\n\tpublic handleClick = (): void => {\n\t\tLog.debug('Button clicked, count should be increased');\n\t\tconst { count } = this.getProps();\n\t\tconst nextCount = count + 1;\n\t\tthis.setProp('count', nextCount);\n\t\tthis.setState('count', nextCount);\n\t};\n\n\tpublic focus(): void {\n\t\treturn this.clickButtonCtrl.focus();\n\t}\n\n\tpublic setButtonRef = (element?: HTMLButtonElement): void => {\n\t\tthis.clickButtonCtrl.setButtonRef(element);\n\t};\n\n\tprivate startLoadedEventInterval(): void {\n\t\t// Emit loaded event every 2 seconds with current count value\n\t\tthis.intervalId = setInterval(() => {\n\t\t\tconst { count } = this.getProps();\n\t\t\tthis.emitLoaded(count);\n\t\t}, 2000);\n\t}\n\n\tprivate emitLoaded(count: number): void {\n\t\t// This method will be used by the web component to emit the loaded event\n\t\t// The web component needs to call this method to actually emit the event\n\t\t// We use a callback approach to let the web component handle the emission\n\t\tif (this.onLoadedCallback) {\n\t\t\tthis.onLoadedCallback(count);\n\t\t}\n\t}\n\n\tprivate onLoadedCallback?: (count: number) => void;\n\n\tpublic setOnLoadedCallback(callback: (count: number) => void): void {\n\t\tthis.onLoadedCallback = callback;\n\t}\n\n\tpublic destroy(): void {\n\t\tif (this.intervalId) {\n\t\t\tclearInterval(this.intervalId);\n\t\t\tthis.intervalId = undefined;\n\t\t}\n\t}\n}\n","import type { EventEmitter, JSX } from '@stencil/core';\nimport { Component, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type { WebComponentInterface } from '../../../../internal/functional-components/generic-types';\nimport type { SkeletonApi } from '../../../../internal/functional-components/skeleton/api';\nimport { SkeletonFC } from '../../../../internal/functional-components/skeleton/component';\nimport { SkeletonController } from '../../../../internal/functional-components/skeleton/controller';\nimport { Log } from '../../../../schema';\n\n@Component({\n\ttag: 'kol-skeleton',\n\tshadow: true,\n})\nexport class KolSkeleton implements WebComponentInterface<SkeletonApi> {\n\tprivate readonly ctrl = new SkeletonController(this);\n\n\t/**\n\t * Focuses the interactive element of the component.\n\t */\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn Promise.resolve(this.ctrl.focus());\n\t}\n\n\t/**\n\t * Toggles the visibility of the skeleton component.\n\t */\n\t@Method()\n\tpublic async toggle(): Promise<void> {\n\t\treturn Promise.resolve(this.ctrl.toggle());\n\t}\n\n\t/**\n\t * Sets the count of the skeleton component.\n\t */\n\t@Prop()\n\tpublic _count?: number | string;\n\n\t@Watch('_count')\n\tpublic watchCount(value?: number | string): void {\n\t\tthis.ctrl.watchCount(value);\n\t}\n\n\t/**\n\t * Sets the name of the skeleton component.\n\t */\n\t@Prop()\n\tpublic _name!: string;\n\n\t@Watch('_name')\n\tpublic watchName(value?: string): void {\n\t\tthis.ctrl.watchName(value);\n\t}\n\n\t@State()\n\tpublic label: string = 'Label';\n\n\t@State()\n\tpublic show: boolean = true;\n\n\t@State()\n\tpublic count: number = 0;\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent): void {\n\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\tLog.debug('button pressed');\n\t\t\tthis.ctrl.handleClick();\n\t\t}\n\t}\n\n\t/**\n\t * Emitted when the skeleton has finished loading.\n\t */\n\t@Event() public loaded!: EventEmitter<number>;\n\n\t/**\n\t * Emitted when the skeleton has been rendered for the first time.\n\t */\n\t@Event() public rendered!: EventEmitter<void>;\n\n\t@Listen('keydown', { target: 'window' })\n\tpublic onKeydown(event: KeyboardEvent): void {\n\t\tthis.ctrl.onKeydown(event);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tcount: this._count,\n\t\t\tname: this._name,\n\t\t});\n\n\t\t// Set up the callback for emitting loaded events\n\t\tthis.ctrl.setOnLoadedCallback((count: number) => {\n\t\t\tthis.loaded.emit(count);\n\t\t});\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.rendered.emit();\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ctrl.destroy();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { count, name } = this.ctrl.getProps();\n\t\tconst { label, show } = this;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<SkeletonFC\n\t\t\t\t\tcount={count}\n\t\t\t\t\tlabel={label}\n\t\t\t\t\tname={name}\n\t\t\t\t\thandleClick={() => this.ctrl.handleClick()}\n\t\t\t\t\tonLoaded={this.loaded}\n\t\t\t\t\tonRendered={this.rendered}\n\t\t\t\t\tshow={show}\n\t\t\t\t\trefButton={(element) => this.ctrl.setButtonRef(element)}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kol-skeleton.entry.esm.js","sources":["src/internal/props/name.ts","src/internal/functional-components/skeleton/component.tsx","src/internal/functional-components/skeleton/controller.ts","src/components/_skeleton/web-components/skeleton/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type NameProp = SimpleProp<'name', string>;\nexport const nameProp = createPropDefinition<NameProp>(normalizeString, () => true);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport { bem } from '../../../schema/bem-registry';\nimport { ClickButtonFC } from '../click-button/component';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { SkeletonApi } from './api';\n\nconst skeletonBem = bem.forBlock('kol-skeleton');\nconst BEM_CLASS_SKELETON__ACTIONS = skeletonBem('actions');\nconst BEM_CLASS_SKELETON__CONTAINER = skeletonBem('container');\nconst BEM_CLASS_SKELETON__COUNTER = skeletonBem('counter');\nconst BEM_CLASS_SKELETON__NAME = skeletonBem('name');\n\nexport const SkeletonFC: FC<FunctionalComponentProps<SkeletonApi>> = (props) => {\n\tconst { count, label, name, show, handleClick, refButton } = props;\n\tconst hasName = !!(show && name?.trim());\n\tconst BEM_CLASS_ROOT = skeletonBem({\n\t\t'has-name': hasName,\n\t\t'is-hidden': !show,\n\t});\n\treturn (\n\t\t<div class={BEM_CLASS_ROOT}>\n\t\t\t<div class={BEM_CLASS_SKELETON__CONTAINER}>\n\t\t\t\t{hasName && <span class={BEM_CLASS_SKELETON__NAME}>{name}</span>}\n\t\t\t\t<div class={BEM_CLASS_SKELETON__COUNTER}>Count: {count}</div>\n\t\t\t</div>\n\t\t\t<div class={BEM_CLASS_SKELETON__ACTIONS}>\n\t\t\t\t<ClickButtonFC label={label} handleClick={handleClick} refButton={refButton} />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n","import { Log } from '../../../schema';\nimport { nameProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport { ClickButtonController } from '../click-button/controller';\nimport type { ControllerInterface, ResolvedInputProps } from '../generic-types';\nimport type { SkeletonApi } from './api';\n\nexport class SkeletonController extends BaseController<SkeletonApi> implements ControllerInterface<SkeletonApi> {\n\tprivate readonly clickButtonCtrl: ClickButtonController;\n\tprivate intervalId?: ReturnType<typeof setTimeout>;\n\n\tpublic constructor(states: SkeletonApi['States']) {\n\t\tsuper(states);\n\n\t\tthis.clickButtonCtrl = new ClickButtonController({});\n\t\tthis.startLoadedEventInterval();\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<SkeletonApi>): void {\n\t\tconst { name } = props;\n\t\tthis.watchName(name);\n\t\tthis.clickButtonCtrl.componentWillLoad({\n\t\t\tlabel: this.component.label,\n\t\t});\n\t}\n\n\tpublic watchName(value?: string): void {\n\t\tnameProp.apply(\n\t\t\tvalue,\n\t\t\t(v) => {\n\t\t\t\tthis.setProp('name', v);\n\t\t\t},\n\t\t\t'',\n\t\t);\n\t}\n\n\tpublic toggle(): void {\n\t\tthis.setState('show', !this.component.show);\n\t}\n\n\tpublic onKeydown = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.log('Show should be toggled');\n\t\t\tvoid this.toggle();\n\t\t}\n\t};\n\n\tpublic handleClick = (): void => {\n\t\tLog.debug('Button clicked, count should be increased');\n\t\tconst { count } = this.component;\n\t\tconst nextCount = count + 1;\n\t\tthis.setState('count', nextCount);\n\t};\n\n\tpublic focus(): void {\n\t\treturn this.clickButtonCtrl.focus();\n\t}\n\n\tpublic setButtonRef = (element?: HTMLButtonElement): void => {\n\t\tthis.clickButtonCtrl.setButtonRef(element);\n\t};\n\n\tprivate startLoadedEventInterval(): void {\n\t\t// Emit loaded event every 2 seconds with current count value\n\t\tthis.intervalId = setInterval(() => {\n\t\t\tconst { count } = this.component;\n\t\t\tthis.emitLoaded(count);\n\t\t}, 2000);\n\t}\n\n\tprivate emitLoaded(count: number): void {\n\t\t// This method will be used by the web component to emit the loaded event\n\t\t// The web component needs to call this method to actually emit the event\n\t\t// We use a callback approach to let the web component handle the emission\n\t\tif (this.onLoadedCallback) {\n\t\t\tthis.onLoadedCallback(count);\n\t\t}\n\t}\n\n\tprivate onLoadedCallback?: (count: number) => void;\n\n\tpublic setOnLoadedCallback(callback: (count: number) => void): void {\n\t\tthis.onLoadedCallback = callback;\n\t}\n\n\tpublic destroy(): void {\n\t\tif (this.intervalId) {\n\t\t\tclearInterval(this.intervalId);\n\t\t\tthis.intervalId = undefined;\n\t\t}\n\t}\n}\n","import type { EventEmitter, JSX } from '@stencil/core';\nimport { Component, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type { WebComponentInterface } from '../../../../internal/functional-components/generic-types';\nimport type { SkeletonApi } from '../../../../internal/functional-components/skeleton/api';\nimport { SkeletonFC } from '../../../../internal/functional-components/skeleton/component';\nimport { SkeletonController } from '../../../../internal/functional-components/skeleton/controller';\nimport { Log } from '../../../../schema';\n\n@Component({\n\ttag: 'kol-skeleton',\n\tshadow: true,\n})\nexport class KolSkeleton implements WebComponentInterface<SkeletonApi> {\n\tprivate readonly ctrl = new SkeletonController(this);\n\n\t/**\n\t * Focuses the interactive element of the component.\n\t */\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn Promise.resolve(this.ctrl.focus());\n\t}\n\n\t/**\n\t * Toggles the visibility of the skeleton component.\n\t */\n\t@Method()\n\tpublic async toggle(): Promise<void> {\n\t\treturn Promise.resolve(this.ctrl.toggle());\n\t}\n\n\t/**\n\t * Sets the name of the skeleton component.\n\t */\n\t@Prop()\n\tpublic _name!: string;\n\n\t@Watch('_name')\n\tpublic watchName(value?: string): void {\n\t\tthis.ctrl.watchName(value);\n\t}\n\n\t@State()\n\tpublic count: number = 0;\n\n\t@State()\n\tpublic label: string = 'Label';\n\n\t@State()\n\tpublic show: boolean = true;\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent): void {\n\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\tLog.debug('button pressed');\n\t\t\tthis.ctrl.handleClick();\n\t\t}\n\t}\n\n\t/**\n\t * Emitted when the skeleton has finished loading.\n\t */\n\t@Event() public loaded!: EventEmitter<number>;\n\n\t/**\n\t * Emitted when the skeleton has been rendered for the first time.\n\t */\n\t@Event() public rendered!: EventEmitter<void>;\n\n\t@Listen('keydown', { target: 'window' })\n\tpublic onKeydown(event: KeyboardEvent): void {\n\t\tthis.ctrl.onKeydown(event);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tname: this._name,\n\t\t});\n\n\t\t// Set up the callback for emitting loaded events\n\t\tthis.ctrl.setOnLoadedCallback((count: number) => {\n\t\t\tthis.loaded.emit(count);\n\t\t});\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.rendered.emit();\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ctrl.destroy();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { name } = this.ctrl.getProps();\n\t\tconst { count, label, show } = this;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<SkeletonFC\n\t\t\t\t\tcount={count}\n\t\t\t\t\tlabel={label}\n\t\t\t\t\tname={name}\n\t\t\t\t\thandleClick={() => this.ctrl.handleClick()}\n\t\t\t\t\tonLoaded={this.loaded}\n\t\t\t\t\tonRendered={this.rendered}\n\t\t\t\t\tshow={show}\n\t\t\t\t\trefButton={(element) => this.ctrl.setButtonRef(element)}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}