@public-ui/visual-tests 4.3.0-rc.1 → 4.3.0-rc.3

package/app/dist/assets/kol-progress.entry-BHaO_I1Q.js

@@ -0,0 +1,293 @@
+import{o as e,r as t,s as n}from"./index-BEIcpIbr.js";import"./isArray-CcrBs4JM-DiEJ1b3e.js";import"./_Uint8Array-kJHDjtoP-CTkgs_0o.js";import{n as r,o as i}from"./normalizers-iLdS6AQE-C9zKfn33.js";import{t as a}from"./label-BwPy2Jd4-Ckcz6Umq.js";import{t as o}from"./base-web-component-BCIMb9gN-CviiCyGl.js";import{t as s}from"./base-controller-CXhqh4cR-BNzx0WwK.js";import{t as c}from"./i18n-CcjZRTxD-DOVnRsej.js";import{n as l,r as u,t as d}from"./value-number-clamped-CiWMaJPP-By8_LJ2Q.js";var f=[`bar`,`cycle`],p=r(`variant`,`bar`,e=>{let t=i(e);if(f.includes(t))return t;throw Error(`Invalid progress variant: ${t}`)},()=>!0),m=342,h=({max:t,value:n})=>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(n/t*m)}px ${m}px`,"stroke-width":`6`,cx:`60`,cy:`60`,r:`54.5`})),g=({max:t,value:n})=>{let r=n/t*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)`}}))},_=(t,n,r)=>{switch(t){case`cycle`:return e(h,{max:n,value:r});case`bar`:return e(g,{max:n,value:r});default:throw Error(`Progress variant ${t} not implemented.`)}},v=t=>{let{label:n,max:r,unit:i,value:a,variant:o,liveValue:s}=t,l=i===`%`,u=l?`${Math.round(s/r*100)}`:s,d=l?Math.round(a/r*100):a,f=`${`${(l?100:r)+1}`.length}ch`,p=l?c(`kol-live-value`,{placeholders:{value:String(u),unit:i}}):c(`kol-live-value-bounded`,{placeholders:{value:String(u),max:String(r),unit:i}});return e(`div`,{class:`kol-progress`},e(`div`,{"aria-hidden":`true`,class:{"kol-progress__cycle":o===`cycle`,"kol-progress__bar":o===`bar`}},o===`bar`&&n&&e(`div`,{class:`kol-progress__bar-label`},n),_(o,r,a),o===`cycle`&&e(`div`,{class:`kol-progress__cycle-text`},n&&e(`div`,{class:`kol-progress__cycle-label`},n),e(`div`,{class:`kol-progress__cycle-value`},`${d} ${i}`)),o===`bar`&&e(`div`,{class:`kol-progress__bar-value`,style:{width:f}},d),o===`bar`&&e(`div`,{class:`kol-progress__bar-unit`},i)),e(`progress`,{class:`visually-hidden`,"aria-busy":a<r?`true`:`false`,max:r,value:a}),e(`span`,{"aria-live":`polite`,"aria-relevant":`removals text`,class:`visually-hidden`},p))},y={optional:[a,u,p],required:[l,d]},b=class extends s{constructor(e){super(e,y)}componentWillLoad(e){let{label:t,max:n,unit:r,value:i,variant:a}=e;this.watchLabel(t),this.watchMax(n),this.watchUnit(r),this.watchValue(i),this.watchVariant(a),this.setState(`liveValue`,this.getRenderProp(`value`)),this.startLiveValueInterval()}watchLabel(e){a.apply(e,e=>{this.setRenderProp(`label`,e)})}watchMax(e){l.apply(e,e=>{this.setRenderProp(`max`,e),this.watchValue(this.getRawProp(`value`))})}watchUnit(e){u.apply(e,e=>{this.setRenderProp(`unit`,e)})}watchValue(e){this.setRawProp(`value`,e),d.apply(e,e=>{this.setRenderProp(`value`,e)},{min:0,max:this.getRenderProp(`max`)})}watchVariant(e){p.apply(e,e=>{this.setRenderProp(`variant`,e)})}startLiveValueInterval(){this.interval=setInterval(()=>{let e=this.getRenderProp(`value`);this.setState(`liveValue`,e)},5e3)}destroy(){this.interval&&=(clearInterval(this.interval),void 0)}},x=`@charset "UTF-8";
+/* forward the rem function */
+/*
+* This file defines the layer order for all CSS layers used in KoliBri.
+* The order is important as it determines the cascade priority.
+*
+* Layer order (lowest to highest priority):
+* 1. kol-a11y - Accessibility defaults and requirements
+* 2. kol-global - Global component styles and resets
+* 3. kol-component - Component-specific styles
+* 4. kol-theme-global - Theme-specific global styles
+* 5. kol-theme-component - Theme-specific component styles
+*/
+@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;
+/*
+ * This file contains all rules for accessibility.
+ */
+@layer kol-a11y {
+  :host {
+    /*
+     * Minimum size of interactive elements.
+     *
+     * The \`max(…, 44px)\` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:
+     * \`to-rem(44)\` runs the value through a \`calc()\` rem round-trip which can lose
+     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's
+     * rounding, dropping just below the required minimum.
+     */
+    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);
+    /*
+     * No element should be used without verifying the contrast ratio of its background and font colors.
+     * By initially setting the background color to white and the font color to black,
+     * the contrast ratio is ensured and explicit adjustment is forced.
+     */
+    color: black;
+    background-color: white;
+    /*
+     * Verdana is an accessible font that can be used without requiring additional loading time.
+     */
+    font-family: Verdana;
+    /*
+     * Letter spacing is required for all texts.
+     */
+    letter-spacing: inherit;
+    /*
+     * Word spacing is required for all texts.
+     */
+    word-spacing: inherit;
+    /*
+     * Text should be aligned left by default to provide a predictable starting point.
+     */
+    text-align: left;
+  }
+  * {
+    /*
+     * This rule enables the word dividing for all texts. That is important for high zoom levels.
+     */
+    hyphens: auto;
+    /*
+     * This rule enables the word dividing for all texts. That is important for high zoom levels.
+     */
+    word-break: break-word;
+  }
+  /*
+   * All interactive elements should have a minimum size of to-rem(44).
+   */
+  /* input:not([type='checkbox'], [type='radio'], [type='range']), */
+  /* option, */
+  /* select, */
+  /* textarea, */
+  button,
+  .kol-input .input {
+    min-width: var(--a11y-min-size);
+    min-height: var(--a11y-min-size);
+  }
+  /*
+   * Some interactive elements should not inherit the font-family and font-size.
+   */
+  a,
+  button,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  input,
+  option,
+  select,
+  textarea {
+    /*
+     * All elements should inherit the text color from his parent element.
+     */
+    color: inherit;
+    /*
+     * All elements should inherit the font family from his parent element.
+     */
+    font-family: inherit;
+    /*
+     * All elements should inherit the font size from his parent element.
+     */
+    font-size: inherit;
+    /*
+     * Letter spacing is required for all texts.
+     */
+    letter-spacing: inherit;
+    /*
+     * Word spacing is required for all texts.
+     */
+    word-spacing: inherit;
+  }
+  /**
+  * Sometimes we need the semantic element for accessibility reasons,
+  * but we don't want to show it.
+  *
+  * - https://www.a11yproject.com/posts/how-to-hide-content/
+  */
+  .visually-hidden {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+}
+@layer kol-global {
+  /*
+   * Dieses CSS stellt sicher, dass der Standard-Style
+   * von A und Button resettet werden.
+   */
+  :is(a, button) {
+    background-color: transparent;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+    /* 100% needed for custom width from outside */
+  }
+  /*
+   * Ensure elements with hidden attribute to be actually not visible
+   * @see https://meowni.ca/hidden.is.a.lie.html
+   */
+  [hidden] {
+    display: none !important;
+  }
+  .badge-text-hint {
+    color: black;
+    background-color: white;
+  }
+}
+@layer kol-global {
+  :host {
+    /*
+     * The max-width is needed to prevent the table from overflowing the
+     * parent node, if the table is wider than the parent node.
+     */
+    max-width: 100%;
+    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
+  }
+  * {
+    /*
+     * We prefer to box-sizing: border-box for all elements.
+     */
+    box-sizing: border-box;
+  }
+  .kol-span {
+    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */
+  }
+  .kol-span__container {
+    display: flex;
+    align-items: center;
+  }
+  a,
+  button {
+    cursor: pointer;
+  }
+  .kol-span .kol-span__label--hide-label .kol-span__label {
+    display: none;
+  }
+  /* Reset browser agent style. */
+  button:disabled {
+    color: unset;
+  }
+  .disabled label,
+  .disabled:focus-within label,
+  [aria-disabled=true],
+  [aria-disabled=true]:focus,
+  [disabled],
+  [disabled]:focus {
+    outline: none;
+    cursor: not-allowed;
+  }
+  [aria-disabled=true]:focus .kol-span,
+  [disabled]:focus .kol-span {
+    outline: none !important;
+  }
+  .hastooltip {
+    z-index: 900 !important;
+  }
+}
+@layer kol-component {
+  .kol-progress {
+    --color-bar: var(--kol-progress-color-bar, #0075ff);
+  }
+  .kol-progress__bar {
+    display: grid;
+    align-items: center;
+    grid-template-areas: "LABEL LABEL LABEL" "BAR VALUE UNIT";
+    grid-template-columns: 1fr auto;
+  }
+  .kol-progress__bar-label {
+    grid-column-end: 2;
+    grid-area: LABEL;
+  }
+  .kol-progress__bar svg {
+    grid-area: BAR;
+  }
+  .kol-progress__bar-value {
+    grid-area: VALUE;
+    text-align: right;
+  }
+  .kol-progress__bar-unit {
+    grid-area: UNIT;
+  }
+  .kol-progress__bar-border {
+    fill: transparent;
+    stroke: black;
+  }
+  .kol-progress__bar-background {
+    fill: white;
+    stroke: white;
+  }
+  .kol-progress__bar-progress {
+    fill: var(--color-bar);
+    stroke: transparent;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .kol-progress__bar-progress {
+      transition: 250ms ease-in-out 50ms;
+    }
+  }
+  .kol-progress__cycle {
+    display: grid;
+    align-content: center;
+    justify-items: center;
+    grid-template-areas: "ALL";
+    grid-template-columns: auto;
+  }
+  .kol-progress__cycle > * {
+    grid-area: ALL;
+  }
+  .kol-progress__cycle-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: x-small;
+    text-align: center;
+  }
+  .kol-progress__cycle-text * {
+    background-color: white;
+  }
+  .kol-progress__cycle-background {
+    fill: transparent;
+    stroke: white;
+  }
+  .kol-progress__cycle-border {
+    fill: transparent;
+    stroke: black;
+  }
+  .kol-progress__cycle-whitespace {
+    fill: transparent;
+    stroke: white;
+  }
+  .kol-progress__cycle-progress {
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+    fill: transparent;
+    stroke: var(--color-bar);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .kol-progress__cycle-progress {
+      transition: 250ms ease-in-out 50ms;
+    }
+  }
+}`,S=class extends o{constructor(e){super(),n(this,e),this.ctrl=new b(this.stateAccess),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(){return e(t,{key:`70710a5592ba3177b7d4e657c36ee496c92fb879`},e(v,{key:`19414781e2a8b8b4daa4df4ca0734afcc7507830`,label:this.ctrl.getRenderProp(`label`),max:this.ctrl.getRenderProp(`max`),unit:this.ctrl.getRenderProp(`unit`),value:this.ctrl.getRenderProp(`value`),variant:this.ctrl.getRenderProp(`variant`),liveValue:this.liveValue}))}static get watchers(){return{_label:[`watchLabel`],_max:[`watchMax`],_unit:[`watchUnit`],_value:[`watchValue`],_variant:[`watchVariant`]}}};S.style={default:x};export{S as kol_progress};
+//# sourceMappingURL=kol-progress.entry-BHaO_I1Q.js.map

package/app/dist/assets/kol-progress.entry-BHaO_I1Q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kol-progress.entry-BHaO_I1Q.js","names":[],"sources":["../../../../../components/dist/esm/kol-progress.entry.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { h, r as registerInstance, H as Host } from './index-CfYfRjdO.js';\nimport { B as BaseWebComponent } from './base-web-component-BCIMb9gN.js';\nimport { t as translate } from './i18n-CcjZRTxD.js';\nimport './common-Cbb6Axov.js';\nimport { l as labelProp } from './label-BwPy2Jd4.js';\nimport { m as maxProp, c as clampedNumberValueProp, u as unitProp } from './value-number-clamped-CiWMaJPP.js';\nimport { c as createPropDefinition, n as normalizeString } from './normalizers-iLdS6AQE.js';\nimport { B as BaseController } from './base-controller-CXhqh4cR.js';\nimport './i18n-CMA39edx.js';\nimport './_Uint8Array-kJHDjtoP.js';\nimport './isArray-CcrBs4JM.js';\n\nconst progressVariantOptions = ['bar', 'cycle'];\nconst variantProgressProp = createPropDefinition('variant', 'bar', (value) => {\n    const str = normalizeString(value);\n    if (progressVariantOptions.includes(str)) {\n        return str;\n    }\n    throw new Error(`Invalid progress variant: ${str}`);\n}, () => true);\n\nconst FULL_CIRCLE = 342;\nconst CycleSvg = ({ max, value }) => (h(\"svg\", { width: \"100\", viewBox: \"0 0 120 120\", xmlns: \"http://www.w3.org/2000/svg\" }, h(\"circle\", { class: \"kol-progress__cycle-background\", cx: \"60\", cy: \"60\", r: \"54.5\", fill: \"currentColor\", stroke: \"currentColor\", \"stroke-width\": \"8\" }), h(\"circle\", { class: \"kol-progress__cycle-whitespace\", cx: \"60\", cy: \"60\", r: \"59\", fill: \"currentColor\", stroke: \"currentColor\", \"stroke-width\": \"3\" }), h(\"circle\", { class: \"kol-progress__cycle-border\", cx: \"60\", cy: \"60\", r: \"59\", fill: \"currentColor\", stroke: \"currentColor\", \"stroke-width\": \"1\" }), h(\"circle\", { class: \"kol-progress__cycle-whitespace\", cx: \"60\", cy: \"60\", r: \"51\", fill: \"currentColor\", stroke: \"currentColor\", \"stroke-width\": \"1\" }), h(\"circle\", { class: \"kol-progress__cycle-border\", cx: \"60\", cy: \"60\", r: \"50\", fill: \"currentColor\", stroke: \"currentColor\", \"stroke-width\": \"1\" }), h(\"circle\", { class: \"kol-progress__cycle-progress\", fill: \"currentColor\", stroke: \"currentColor\", \"stroke-linecap\": \"round\", \"stroke-dasharray\": `${Math.round((value / max) * FULL_CIRCLE)}px ${FULL_CIRCLE}px`, \"stroke-width\": \"6\", cx: \"60\", cy: \"60\", r: \"54.5\" })));\nconst BarSvg = ({ max, value }) => {\n    const percentage = 100 * (value / max);\n    return (h(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"100%\", height: \"12\", overflow: \"visible\" }, h(\"rect\", { class: \"kol-progress__bar-background\", x: \"1\", y: \"1\", height: \"11\", rx: \"5\", fill: \"currentColor\", stroke: \"currentColor\", \"stroke-width\": \"3\", width: \"100%\" }), h(\"rect\", { class: \"kol-progress__bar-border\", x: \"1\", y: \"1\", height: \"11\", rx: \"5\", fill: \"currentColor\", stroke: \"currentColor\", \"stroke-width\": \"1\", width: \"100%\" }), h(\"rect\", { class: \"kol-progress__bar-progress\", x: \"3\", y: \"3\", height: \"7\", rx: \"3.5\", fill: \"currentColor\", stroke: \"currentColor\", \"stroke-width\": \"3\", style: { width: `calc(${percentage}% - 4px)` } })));\n};\nconst createProgressSVG = (variant, max, value) => {\n    switch (variant) {\n        case 'cycle':\n            return h(CycleSvg, { max: max, value: value });\n        case 'bar':\n            return h(BarSvg, { max: max, value: value });\n        default:\n            throw new Error(`Progress variant ${variant} not implemented.`);\n    }\n};\nconst ProgressFC = (props) => {\n    const { label, max, unit, value, variant, liveValue } = props;\n    const isPercentage = unit === '%';\n    const liveProgressValue = isPercentage ? `${Math.round((liveValue / max) * 100)}` : liveValue;\n    const displayValue = isPercentage ? Math.round((value / max) * 100) : value;\n    const valueColumnWidth = `${`${(isPercentage ? 100 : max) + 1}`.length}ch`;\n    const liveValueText = isPercentage\n        ? translate('kol-live-value', { placeholders: { value: String(liveProgressValue), unit } })\n        : translate('kol-live-value-bounded', { placeholders: { value: String(liveProgressValue), max: String(max), unit } });\n    return (h(\"div\", { class: \"kol-progress\" }, h(\"div\", { \"aria-hidden\": \"true\", class: {\n            'kol-progress__cycle': variant === 'cycle',\n            'kol-progress__bar': variant === 'bar',\n        } }, variant === 'bar' && label && h(\"div\", { class: \"kol-progress__bar-label\" }, label), createProgressSVG(variant, max, value), variant === 'cycle' && (h(\"div\", { class: \"kol-progress__cycle-text\" }, label && h(\"div\", { class: \"kol-progress__cycle-label\" }, label), h(\"div\", { class: \"kol-progress__cycle-value\" }, `${displayValue} ${unit}`))), variant === 'bar' && (h(\"div\", { class: \"kol-progress__bar-value\", style: { width: valueColumnWidth } }, displayValue)), variant === 'bar' && h(\"div\", { class: \"kol-progress__bar-unit\" }, unit)), h(\"progress\", { class: \"visually-hidden\", \"aria-busy\": value < max ? 'true' : 'false', max: max, value: value }), h(\"span\", { \"aria-live\": \"polite\", \"aria-relevant\": \"removals text\", class: \"visually-hidden\" }, liveValueText)));\n};\n\nconst progressPropsConfig = {\n    optional: [labelProp, unitProp, variantProgressProp],\n    required: [maxProp, clampedNumberValueProp],\n};\n\nclass ProgressController extends BaseController {\n    constructor(stateAccess) {\n        super(stateAccess, progressPropsConfig);\n    }\n    componentWillLoad(props) {\n        const { label, max, unit, value, variant } = props;\n        this.watchLabel(label);\n        this.watchMax(max);\n        this.watchUnit(unit);\n        this.watchValue(value);\n        this.watchVariant(variant);\n        this.setState('liveValue', this.getRenderProp('value'));\n        this.startLiveValueInterval();\n    }\n    watchLabel(value) {\n        labelProp.apply(value, (v) => {\n            this.setRenderProp('label', v);\n        });\n    }\n    watchMax(value) {\n        maxProp.apply(value, (v) => {\n            this.setRenderProp('max', v);\n            this.watchValue(this.getRawProp('value'));\n        });\n    }\n    watchUnit(value) {\n        unitProp.apply(value, (v) => {\n            this.setRenderProp('unit', v);\n        });\n    }\n    watchValue(value) {\n        this.setRawProp('value', value);\n        clampedNumberValueProp.apply(value, (v) => {\n            this.setRenderProp('value', v);\n        }, { min: 0, max: this.getRenderProp('max') });\n    }\n    watchVariant(value) {\n        variantProgressProp.apply(value, (v) => {\n            this.setRenderProp('variant', v);\n        });\n    }\n    startLiveValueInterval() {\n        this.interval = setInterval(() => {\n            const value = this.getRenderProp('value');\n            this.setState('liveValue', value);\n        }, 5000);\n    }\n    destroy() {\n        if (this.interval) {\n            clearInterval(this.interval);\n            this.interval = undefined;\n        }\n    }\n}\n\nconst defaultStyleCss = \"@charset \\\"UTF-8\\\";\\n/* forward the rem function */\\n/*\\n* This file defines the layer order for all CSS layers used in KoliBri.\\n* The order is important as it determines the cascade priority.\\n*\\n* Layer order (lowest to highest priority):\\n* 1. kol-a11y - Accessibility defaults and requirements\\n* 2. kol-global - Global component styles and resets\\n* 3. kol-component - Component-specific styles\\n* 4. kol-theme-global - Theme-specific global styles\\n* 5. kol-theme-component - Theme-specific component styles\\n*/\\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\\n/*\\n * This file contains all rules for accessibility.\\n */\\n@layer kol-a11y {\\n  :host {\\n    /*\\n     * Minimum size of interactive elements.\\n     *\\n     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's\\n     * rounding, dropping just below the required minimum.\\n     */\\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\\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: white;\\n  }\\n}\\n@layer kol-global {\\n  :host {\\n    /*\\n     * The max-width is needed to prevent the table from overflowing the\\n     * parent node, if the table is wider than the parent node.\\n     */\\n    max-width: 100%;\\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\\n  }\\n  * {\\n    /*\\n     * We prefer to box-sizing: border-box for all elements.\\n     */\\n    box-sizing: border-box;\\n  }\\n  .kol-span {\\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\\n    display: flex;\\n    flex-flow: column;\\n    align-items: center;\\n    justify-content: center;\\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\\n  }\\n  .kol-span__container {\\n    display: flex;\\n    align-items: center;\\n  }\\n  a,\\n  button {\\n    cursor: pointer;\\n  }\\n  .kol-span .kol-span__label--hide-label .kol-span__label {\\n    display: none;\\n  }\\n  /* Reset browser agent style. */\\n  button:disabled {\\n    color: unset;\\n  }\\n  .disabled label,\\n  .disabled:focus-within label,\\n  [aria-disabled=true],\\n  [aria-disabled=true]:focus,\\n  [disabled],\\n  [disabled]:focus {\\n    outline: none;\\n    cursor: not-allowed;\\n  }\\n  [aria-disabled=true]:focus .kol-span,\\n  [disabled]:focus .kol-span {\\n    outline: none !important;\\n  }\\n  .hastooltip {\\n    z-index: 900 !important;\\n  }\\n}\\n@layer kol-component {\\n  .kol-progress {\\n    --color-bar: var(--kol-progress-color-bar, #0075ff);\\n  }\\n  .kol-progress__bar {\\n    display: grid;\\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: white;\\n    stroke: white;\\n  }\\n  .kol-progress__bar-progress {\\n    fill: var(--color-bar);\\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: white;\\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: var(--color-bar);\\n  }\\n  @media (prefers-reduced-motion: no-preference) {\\n    .kol-progress__cycle-progress {\\n      transition: 250ms ease-in-out 50ms;\\n    }\\n  }\\n}\";\n\nconst KolProgress = class extends BaseWebComponent {\n    constructor(hostRef) {\n        super();\n        registerInstance(this, hostRef);\n        this.ctrl = new ProgressController(this.stateAccess);\n        this.liveValue = 0;\n    }\n    watchLabel(value) {\n        this.ctrl.watchLabel(value);\n    }\n    watchMax(value) {\n        this.ctrl.watchMax(value);\n    }\n    watchUnit(value) {\n        this.ctrl.watchUnit(value);\n    }\n    watchValue(value) {\n        this.ctrl.watchValue(value);\n    }\n    watchVariant(value) {\n        this.ctrl.watchVariant(value);\n    }\n    componentWillLoad() {\n        this.ctrl.componentWillLoad({\n            label: this._label,\n            max: this._max,\n            unit: this._unit,\n            value: this._value,\n            variant: this._variant,\n        });\n    }\n    disconnectedCallback() {\n        this.ctrl.destroy();\n    }\n    render() {\n        return (h(Host, { key: '70710a5592ba3177b7d4e657c36ee496c92fb879' }, h(ProgressFC, { key: '19414781e2a8b8b4daa4df4ca0734afcc7507830', label: this.ctrl.getRenderProp('label'), max: this.ctrl.getRenderProp('max'), unit: this.ctrl.getRenderProp('unit'), value: this.ctrl.getRenderProp('value'), variant: this.ctrl.getRenderProp('variant'), liveValue: this.liveValue })));\n    }\n    static get watchers() { return {\n        \"_label\": [\"watchLabel\"],\n        \"_max\": [\"watchMax\"],\n        \"_unit\": [\"watchUnit\"],\n        \"_value\": [\"watchValue\"],\n        \"_variant\": [\"watchVariant\"]\n    }; }\n};\nKolProgress.style = {\n    default: defaultStyleCss\n};\n\nexport { KolProgress as kol_progress };\n//# sourceMappingURL=kol-progress.entry.js.map\n"],"mappings":"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"}

package/app/dist/assets/kol-quote.entry-CtZBn5PK.js

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

package/app/dist/assets/kol-quote.entry-CtZBn5PK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kol-quote.entry-CtZBn5PK.js","names":[],"sources":["../../../../../components/dist/esm/kol-quote.entry.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { h, r as registerInstance, H as Host } from './index-CfYfRjdO.js';\nimport { v as variantQuoteProp, B as BaseWebComponent } from './base-web-component-BCIMb9gN.js';\nimport { i as KolLinkTag } from './component-names-Dy77vq43.js';\nimport { b as bem } from './bem-registry-BRfTMZf0.js';\nimport './common-Cbb6Axov.js';\nimport { c as createPropDefinition, n as normalizeString } from './normalizers-iLdS6AQE.js';\nimport { l as labelProp } from './label-BwPy2Jd4.js';\nimport { B as BaseController } from './base-controller-CXhqh4cR.js';\nimport './_Uint8Array-kJHDjtoP.js';\nimport './isArray-CcrBs4JM.js';\n\nconst hrefProp = createPropDefinition('href', '', normalizeString, (v) => typeof v === 'string');\n\nconst quoteProp = createPropDefinition('quote', '', normalizeString);\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');\nconst QuoteFC = (props) => {\n    const { href, label, quote, variant } = props;\n    const hasExpertSlot = quote === '';\n    const BEM_CLASS_ROOT = quoteBem({ [variant]: true });\n    return (h(\"figure\", { class: BEM_CLASS_ROOT }, variant === 'block' ? (h(\"blockquote\", { class: BEM_CLASS_QUOTE__BLOCKQUOTE, cite: href }, quote, h(\"span\", { \"aria-hidden\": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, h(\"slot\", { name: \"expert\" })))) : (h(\"q\", { class: BEM_CLASS_QUOTE__QUOTE, cite: href }, quote, h(\"span\", { \"aria-hidden\": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, h(\"slot\", { name: \"expert\" })))), typeof label === 'string' && label.length > 0 && (h(\"figcaption\", { class: BEM_CLASS_QUOTE__FIGCAPTION }, h(\"cite\", { class: BEM_CLASS_QUOTE__CITE }, h(KolLinkTag, { _href: href, _label: label, _target: \"_blank\" }))))));\n};\n\nconst quotePropsConfig = {\n    optional: [labelProp, variantQuoteProp],\n    required: [hrefProp, quoteProp],\n};\n\nclass QuoteController extends BaseController {\n    constructor(stateAccess) {\n        super(stateAccess, quotePropsConfig);\n    }\n    componentWillLoad(props) {\n        const { href, label, quote, variant } = props;\n        this.watchHref(href);\n        this.watchLabel(label);\n        this.watchQuote(quote);\n        this.watchVariant(variant);\n    }\n    watchHref(value) {\n        hrefProp.apply(value, (v) => {\n            this.setRenderProp('href', v);\n        });\n    }\n    watchLabel(value) {\n        labelProp.apply(value, (v) => {\n            this.setRenderProp('label', v);\n        });\n    }\n    watchQuote(value) {\n        quoteProp.apply(value, (v) => {\n            this.setRenderProp('quote', v);\n        });\n    }\n    watchVariant(value) {\n        variantQuoteProp.apply(value, (v) => {\n            this.setRenderProp('variant', v);\n        });\n    }\n}\n\nconst defaultStyleCss = \"@charset \\\"UTF-8\\\";\\n/* forward the rem function */\\n/*\\n* This file defines the layer order for all CSS layers used in KoliBri.\\n* The order is important as it determines the cascade priority.\\n*\\n* Layer order (lowest to highest priority):\\n* 1. kol-a11y - Accessibility defaults and requirements\\n* 2. kol-global - Global component styles and resets\\n* 3. kol-component - Component-specific styles\\n* 4. kol-theme-global - Theme-specific global styles\\n* 5. kol-theme-component - Theme-specific component styles\\n*/\\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\\n/*\\n * This file contains all rules for accessibility.\\n */\\n@layer kol-a11y {\\n  :host {\\n    /*\\n     * Minimum size of interactive elements.\\n     *\\n     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's\\n     * rounding, dropping just below the required minimum.\\n     */\\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\\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: white;\\n  }\\n}\\n@layer kol-global {\\n  :host {\\n    /*\\n     * The max-width is needed to prevent the table from overflowing the\\n     * parent node, if the table is wider than the parent node.\\n     */\\n    max-width: 100%;\\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\\n  }\\n  * {\\n    /*\\n     * We prefer to box-sizing: border-box for all elements.\\n     */\\n    box-sizing: border-box;\\n  }\\n  .kol-span {\\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\\n    display: flex;\\n    flex-flow: column;\\n    align-items: center;\\n    justify-content: center;\\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\\n  }\\n  .kol-span__container {\\n    display: flex;\\n    align-items: center;\\n  }\\n  a,\\n  button {\\n    cursor: pointer;\\n  }\\n  .kol-span .kol-span__label--hide-label .kol-span__label {\\n    display: none;\\n  }\\n  /* Reset browser agent style. */\\n  button:disabled {\\n    color: unset;\\n  }\\n  .disabled label,\\n  .disabled:focus-within label,\\n  [aria-disabled=true],\\n  [aria-disabled=true]:focus,\\n  [disabled],\\n  [disabled]:focus {\\n    outline: none;\\n    cursor: not-allowed;\\n  }\\n  [aria-disabled=true]:focus .kol-span,\\n  [disabled]:focus .kol-span {\\n    outline: none !important;\\n  }\\n  .hastooltip {\\n    z-index: 900 !important;\\n  }\\n}\\n@layer kol-component {\\n  .kol-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__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}\";\n\nconst KolQuote = class {\n    constructor(hostRef) {\n        registerInstance(this, hostRef);\n        this.ctrl = new QuoteController(BaseWebComponent.stateLess);\n        this._variant = 'inline';\n    }\n    watchHref(value) {\n        this.ctrl.watchHref(value);\n    }\n    watchLabel(value) {\n        this.ctrl.watchLabel(value);\n    }\n    watchQuote(value) {\n        this.ctrl.watchQuote(value);\n    }\n    watchVariant(value) {\n        this.ctrl.watchVariant(value);\n    }\n    componentWillLoad() {\n        this.ctrl.componentWillLoad({\n            href: this._href,\n            label: this._label,\n            quote: this._quote,\n            variant: this._variant,\n        });\n    }\n    render() {\n        return (h(Host, { key: '0e6593206846694c7a999d1a00d1776c5507112c' }, h(QuoteFC, { key: '8e4b699204dd80e609632c82ab6e3db688d0c3ef', href: this.ctrl.getRenderProp('href'), label: this.ctrl.getRenderProp('label'), quote: this.ctrl.getRenderProp('quote'), variant: this.ctrl.getRenderProp('variant') })));\n    }\n    static get watchers() { return {\n        \"_href\": [\"watchHref\"],\n        \"_label\": [\"watchLabel\"],\n        \"_quote\": [\"watchQuote\"],\n        \"_variant\": [\"watchVariant\"]\n    }; }\n};\nKolQuote.style = {\n    default: defaultStyleCss\n};\n\nexport { KolQuote as kol_quote };\n//# sourceMappingURL=kol-quote.entry.js.map\n"],"mappings":"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"}

package/app/dist/assets/kol-select-wc.entry-Db1ERJZ2.js

@@ -0,0 +1,2 @@
+import{a as e,kt as t,n,o as r,s as i}from"./index-BEIcpIbr.js";import{n as a}from"./dev.utils-CBuLoTMV-xmZMRaFA.js";import"./isArray-CcrBs4JM-DiEJ1b3e.js";import"./_Uint8Array-kJHDjtoP-CTkgs_0o.js";import"./normalizers-iLdS6AQE-C9zKfn33.js";import"./label-BwPy2Jd4-Ckcz6Umq.js";import"./base-web-component-BCIMb9gN-CviiCyGl.js";import"./base-controller-CXhqh4cR-BNzx0WwK.js";import{n as o,t as s}from"./tslib.es6-QNbPBOk5-DpzS01Oy.js";import{t as c}from"./clsx-COFh-Vc8-alQuJLqj.js";import"./component-DaUkSW3u-D4PLyO52.js";import"./component-CKSOghiT-BiZ3zoDz.js";import"./component-BX1n4r9q-3osKTIQB.js";import"./align-floating-elements-Xqbu3THH-BUBoykAf.js";import"./align-BdqBkiyq-yjTJisYK.js";import"./controller-BUTW5QfH-Ccipdohy.js";import"./Heading-Bi9MCxAk-HD5nVG83.js";import"./disabled-DfW4ft-F-03H5wBxe.js";import"./label-We78Dt9U-Cj1PFfHw.js";import"./element-focus-BQXzaLL9-oq1SsV6e.js";import{a as l,i as u,t as d}from"./element-interaction-C5-6aPzz-CwUv4L8C.js";import"./i18n-CcjZRTxD-DOVnRsej.js";import"./Alert-DlY1Cd8i-BwVroHFI.js";import"./icons-BGkS8g2K-DE4wgWYH.js";import"./access-and-short-key-DzjVTrop-CKMyzJsA.js";import"./hide-label-BDwvU6I8-DPHrI4dn.js";import"./tooltip-align-LkJ2mgrc-DUUNAT3I.js";import"./variant-class-name-D8tvX7Qv-DSzsetku.js";import{n as f}from"./controller-9xFQ1gbO-DtlBDO-s.js";import"./aria-labelledby-6-ki3akM-C6lJ0lQF.js";import"./aria-details-Ddidnfeo-9O-5V94J.js";import"./associated.controller-yo_yku-m-ClLavzyJ.js";import{a as p,c as m,o as h,s as g,t as _}from"./FormFieldStateWrapper-DCZ5A-2U-ChiSnkkl.js";import{n as v,t as y}from"./controller-icon-DktA_QxA-CLpTKqQv.js";import{t as b}from"./required-BYwM0tPO-CHc9tOfR.js";import"./orientation-DPjc47G2-B6SKR9Mw.js";import{a as x,r as S}from"./controller-CSptrI5n-Bhpko7BW.js";import{t as C}from"./multiple-wlinUB8P-DSNgZYuP.js";import{t as w}from"./rows-W8SFsFj4-UewBNY_r.js";var T=e=>{var{baseClassName:t=`kol-select`,class:n,index:i,selectedValue:a,selected:s,value:l,label:u,disabled:d}=e,f=o(e,[`baseClassName`,`class`,`index`,`selectedValue`,`selected`,`value`,`label`,`disabled`]);a===void 0?a=[]:Array.isArray(a)||(a=[a]);let p=s||a.includes(l);return r(`option`,Object.assign({class:c(`${t}__option`,{[`${t}__option--selected`]:p,[`${t}__option--disabled`]:d},n),selected:p,disabled:d,value:i},f),u)},E=({baseClassName:e,preKey:t,options:i,disabled:a,value:s,OptionProps:l={},OptionGroupProps:u={}})=>i?.length?r(n,null,i.map((n,d)=>{let f=[t,`-${d}`].join(``);if(`options`in n){if(!i.length)return null;let{label:t}=n,d=o(n,[`label`]);return r(`optgroup`,Object.assign({class:c(`${e}__optgroup`,{[`${e}__optgroup--disabled`]:a}),key:f},u,{label:t?.toString(),disabled:a}),r(E,Object.assign({baseClassName:e,OptionGroupProps:u,OptionProps:l,value:s,preKey:f},d)))}return`value`in n?r(T,Object.assign({key:f,baseClassName:e},l,{index:f,selectedValue:s},n)):null})):null,D=e=>{let{class:t,msg:n,touched:i,disabled:a,required:s,options:l,value:u,OptionProps:d,OptionGroupProps:f,ariaDescribedBy:g,hideLabel:_,label:v}=e,y=o(e,[`class`,`msg`,`touched`,`disabled`,`required`,`options`,`value`,`OptionProps`,`OptionGroupProps`,`ariaDescribedBy`,`hideLabel`,`label`]),b={"kol-select--disabled":!!a,"kol-select--required":!!s,"kol-select--touched":!!i,[`kol-select--${h(n)}`]:m(n,i)},x=Object.assign(Object.assign({class:c(`kol-select`,b,t),required:s,disabled:a},p({ariaDescribedBy:g,hideLabel:_,label:v})),y);return r(`select`,Object.assign({},x),r(E,{baseClassName:`kol-select`,options:l,value:u,OptionGroupProps:f,OptionProps:d}))};function O(e){let{ariaDescribedBy:t}=g(e),n={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._multiple?e._rows:void 0,multiple:e._multiple,required:e._required,touched:e._touched,msg:e._msg};return`_shortKey`in e&&(n[`aria-keyshortcuts`]=e._shortKey),n}var k=e=>{var{state:t}=e,n=o(e,[`state`]);return r(D,Object.assign({},O(t),n))},A=class extends v{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>t.find(t=>typeof t.value==`string`?t.value===e:Array.isArray(t.options)?this.isValueInOptions(e,t.options):!1)!==void 0,this.filterValuesInOptions=(e,t)=>e.filter(e=>this.isValueInOptions(e,t)!==void 0),this.afterPatchOptions=(e,t,n,r)=>{r===`_value`&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{let n=t.get(`_value`);n!==void 0&&!Array.isArray(n)&&t.set(`_value`,[n]);let r=t.has(`_options`)?t.get(`_options`):this.component.state._options;if(Array.isArray(r)&&r.length>0){this.keyOptionMap.clear(),S(this.keyOptionMap,r);let e=t.has(`_value`)?t.get(`_value`):this.component.state._value,n=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],r);this.component._multiple===!1&&n.length===0?t.set(`_value`,[r[0].value]):Array.isArray(e)&&n.length<e.length&&t.set(`_value`,n)}},this.component=e}validateOptions(e){x(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){this.assertComponentValueMatchesMultiplicity(e===!0),C(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){b(this.component,e)}validateRows(e){w(this.component,e)}validateValue(e){this.assertValueMatchesMultiplicity(e),t(this.component,`_value`,()=>!0,e===void 0?[]: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){let t=Array.isArray(e);if(this.component._multiple===!0){if(e!==void 0&&!t)throw 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 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){let t=this.component._value;if(e){if(t!==void 0&&!Array.isArray(t))throw 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 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)})`)}},j=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(e){}async click(){}getFormFieldProps(){return{state:this.state,class:c(`kol-form-field-select`,{"kol-form-field--has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>this.ctaRef.el?.focus(),alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.ctaRef,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 r(_,Object.assign({key:`f4650685f51b81d569c58b83d9cb3e0fcbe1e3ac`},this.getFormFieldProps()),r(y,{key:`8c667a237948d5a16fbfa7386cf2fa570b1aabda`,state:this.state},r(`form`,{key:`797df79691c959d00703ab3c4ed75f3ce184a8c0`,onSubmit:e=>{e.preventDefault(),f({form:this.host})}},r(`input`,{key:`e156192b09a158149fa310b2d81cbfad4657a875`,type:`submit`,hidden:!0}),r(k,Object.assign({key:`dee324e9704157bc659671c582743eb4771509d6`},this.getSelectProps())))))}validateAriaDetails(e){this.controller.validateAriaDetails(e)}constructor(e){i(this,e),this.ctaRef=d(),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:a(`select`),_label:``,_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new A(this,`select`,this.host)}showAsAlert(){return!!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)}validateVariant(e){this.controller.validateVariant(e)}componentWillLoad(){this.validateAriaDetails(this._ariaDetails),this._touched=this._touched===!0,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}onInput(e){let t=Array.from(this.ctaRef.el?.options||[]).filter(e=>e.selected).map(e=>this.controller.getOptionByKey(e.value)?.value);if(this._multiple)this._value=t,this.controller.onFacade.onInput(e,!0,t);else{let n=t.length>0?t[0]:void 0;this._value=n,this.controller.onFacade.onInput(e,!0,n)}}onChange(e){this._multiple,this.controller.onFacade.onChange(e,this._value)}get host(){return e(this)}static get watchers(){return{_ariaDetails:[`validateAriaDetails`],_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`],_variant:[`validateVariant`]}}};s([l(`ctaRef`)],j.prototype,`focus`,null),s([u(`ctaRef`)],j.prototype,`click`,null);export{j as kol_select_wc};
+//# sourceMappingURL=kol-select-wc.entry-Db1ERJZ2.js.map