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

package/app/dist/assets/kol-meter.entry-BBlv5SXi.js

@@ -0,0 +1,312 @@
+import{o as e,r as t,s as n}from"./index-CLYw1HnO.js";import"./isArray-CcrBs4JM-DiEJ1b3e.js";import"./_Uint8Array-kJHDjtoP-CTkgs_0o.js";import{a as r,n as i,o as a}from"./normalizers-B5NKuJgN-BAPba39_.js";import{t as o}from"./label-BT-6lb8r-DTZ8Zack.js";import{t as s}from"./base-web-component-CArCAUxk-iRwmL-Bz.js";import{t as c}from"./base-controller-CXhqh4cR-BNzx0WwK.js";import{t as l}from"./i18n-BkwRYsvE-Baa6kHEL.js";import{n as u,r as d,t as f}from"./value-number-clamped-eznLHU11-Dh70flmU.js";var p=i(`high`,0,r),m=i(`low`,0,r),h=i(`min`,0,r),g=i(`optimum`,0,r),_=[`horizontal`,`vertical`],v=i(`orientation`,`horizontal`,e=>{let t=a(e);if(_.includes(t))return t;throw Error(`Invalid orientation: ${t}`)}),y=i(`value`,0,r,e=>e>=0);function b(e,t,n,r,i,a){let o=r??t,s=i??n;if(a===void 0)return e>=o&&e<=s?`optimum`:`suboptimal`;let c=e<o,l=e>s,u=!c&&!l;return a<o?c?`optimum`:u?`suboptimal`:`critical`:a>s?l?`optimum`:u?`suboptimal`:`critical`:u?`optimum`:`suboptimal`}var x=t=>{let{high:n,label:r,low:i,max:a,min:o,optimum:s,orientation:c,unit:u,value:d}=t,f=c===`vertical`,p=u===`%`,m=p?Math.round((d-o)/(a-o)*100):d,h=b(d,o,a,i,n,s),g=i!==void 0||n!==void 0,_=g?l(`kol-meter-state-${h}`):``,v=p?l(`kol-live-value`,{placeholders:{value:String(m),unit:u}}):l(`kol-live-value-bounded`,{placeholders:{value:String(m),max:String(a),unit:u}}),y=g?`${v} – ${_}`:v,x=a.toString().length>o.toString().length?a.toString().length+`ch`:o.toString().length+`ch`;return e(`div`,{class:{"kol-meter":!0,"kol-meter--vertical":f}},e(`div`,{class:`kol-meter__bar`},e(`div`,{class:`kol-meter__bar-label`},r,g&&e(`span`,{class:`kol-meter__bar-state kol-meter__bar-state--${h}`},` – `,_)),e(`div`,{class:`kol-meter__bar-track`},e(`meter`,{"aria-label":r,"aria-valuetext":y,high:n,low:i,max:a,min:o,optimum:s,value:d})),e(`span`,{class:`kol-meter__value-unit`},e(`span`,{class:`kol-meter__value`,style:{"min-width":x}},m),e(`span`,{class:`kol-meter__unit`},u))))},S={optional:[h,v,d],required:[o,u,y]},C=class extends c{constructor(e){super(e,S),this.meterData={high:void 0,low:void 0,optimum:void 0}}componentWillLoad(e){let{high:t,label:n,low:r,max:i,min:a,optimum:o,orientation:s,unit:c,value:l}=e;this.watchHigh(t),this.watchLabel(n),this.watchLow(r),this.watchMax(i),this.watchMin(a),this.watchOptimum(o),this.watchOrientation(s),this.watchUnit(c),this.watchValue(l)}getMeterData(){return this.meterData}watchHigh(e){e===void 0?this.meterData.high=void 0:p.apply(e,e=>{this.meterData.high=e})}watchLabel(e){o.apply(e,e=>{this.setRenderProp(`label`,e)})}watchLow(e){e===void 0?this.meterData.low=void 0:m.apply(e,e=>{this.meterData.low=e})}watchMax(e){u.apply(e,e=>{this.setRenderProp(`max`,e),this.watchValue(this.getRawProp(`value`))})}watchMin(e){h.apply(e,e=>{this.setRenderProp(`min`,e),this.watchValue(this.getRawProp(`value`))})}watchOptimum(e){e===void 0?this.meterData.optimum=void 0:g.apply(e,e=>{this.meterData.optimum=e})}watchOrientation(e){v.apply(e,e=>{this.setRenderProp(`orientation`,e)})}watchUnit(e){d.apply(e,e=>{this.setRenderProp(`unit`,e)})}watchValue(e){this.setRawProp(`value`,e),f.apply(e,e=>{this.setRenderProp(`value`,e)},{min:this.getRenderProp(`min`),max:this.getRenderProp(`max`)})}},w=`@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-meter {
+    --color-optimal: var(--kol-meter-color-optimal, #2ea32e);
+    --color-suboptimal: var(--kol-meter-color-suboptimal, #c8a000);
+    --color-critical: var(--kol-meter-color-critical, #c00);
+    --vertical-height: var(--kol-meter-vertical-height, 128);
+    --horizontal-height: var(--kol-meter-horizontal-height, 12);
+  }
+  .kol-meter__bar {
+    display: grid;
+    align-items: center;
+    grid-template-areas: "label label" "bar value";
+    grid-template-columns: 1fr auto;
+  }
+  .kol-meter__bar-label {
+    grid-column-end: 2;
+    grid-area: label;
+  }
+  .kol-meter__bar-track {
+    display: flex;
+    min-width: 100%;
+    grid-area: bar;
+  }
+  .kol-meter__value-unit {
+    grid-area: value;
+  }
+  .kol-meter:not(.kol-meter--vertical) .kol-meter__value {
+    display: inline-block;
+    text-align: right;
+  }
+  .kol-meter--vertical {
+    min-height: 100%;
+  }
+  .kol-meter--vertical .kol-meter__bar {
+    min-height: 100%;
+    align-items: end;
+    justify-items: center;
+    grid-template-areas: "label" "bar" "value";
+    grid-template-columns: 1fr;
+    grid-template-rows: min-content 1fr min-content;
+  }
+  .kol-meter--vertical .kol-meter__bar-label {
+    text-align: center;
+  }
+  .kol-meter--vertical .kol-meter__bar-track {
+    position: relative;
+    min-width: 0;
+    min-height: calc(var(--vertical-height) * 1rem / var(--kolibri-root-font-size, 16));
+    align-items: center;
+  }
+  .kol-meter--vertical .kol-meter__bar meter {
+    transform: rotate(-90deg);
+    transform-origin: left bottom;
+    position: absolute;
+    bottom: 0;
+    width: calc(var(--vertical-height) * 1rem / var(--kolibri-root-font-size, 16));
+  }
+  .kol-meter {
+    /* Base meter styling */
+  }
+  .kol-meter meter {
+    width: 100%;
+    height: calc(var(--horizontal-height) * 1rem / var(--kolibri-root-font-size, 16));
+    /* Remove default appearance in some browsers */
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
+  .kol-meter {
+    /* Chrome, Safari, Edge (WebKit/Blink) */
+  }
+  .kol-meter meter::-webkit-meter-bar {
+    background: white;
+    height: calc(var(--horizontal-height) * 1rem / var(--kolibri-root-font-size, 16));
+    border: 1px solid black;
+  }
+  .kol-meter meter::-webkit-meter-optimum-value {
+    background: var(--color-optimal);
+  }
+  .kol-meter meter::-webkit-meter-suboptimum-value {
+    background: var(--color-suboptimal);
+  }
+  .kol-meter meter::-webkit-meter-even-less-good-value {
+    background: var(--color-critical);
+  }
+  .kol-meter {
+    /* Firefox */
+  }
+  @supports (selector(::-moz-meter-bar)) {
+    .kol-meter meter {
+      background: white;
+      border: 1px solid black;
+    }
+  }
+  .kol-meter meter::-moz-meter-bar {
+    background: var(--color-optimal);
+  }
+  .kol-meter meter:-moz-meter-sub-optimum::-moz-meter-bar {
+    background: var(--color-suboptimal);
+  }
+  .kol-meter meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    background: var(--color-critical);
+  }
+}`,T=class extends s{constructor(e){super(),n(this,e),this.ctrl=new C(s.stateLess),this._max=1,this._min=0,this._orientation=`horizontal`,this._unit=`%`}watchHigh(e){this.ctrl.watchHigh(e)}watchLabel(e){this.ctrl.watchLabel(e)}watchLow(e){this.ctrl.watchLow(e)}watchMax(e){this.ctrl.watchMax(e)}watchMin(e){this.ctrl.watchMin(e)}watchOptimum(e){this.ctrl.watchOptimum(e)}watchOrientation(e){this.ctrl.watchOrientation(e)}watchUnit(e){this.ctrl.watchUnit(e)}watchValue(e){this.ctrl.watchValue(e)}componentWillLoad(){this.ctrl.componentWillLoad({high:this._high,label:this._label,low:this._low,max:this._max,min:this._min,optimum:this._optimum,orientation:this._orientation,unit:this._unit,value:this._value})}render(){let{high:n,low:r,optimum:i}=this.ctrl.getMeterData();return e(t,{key:`7ea5b381bf22f86968a7abd2a80afbabe32a4ba3`},e(x,{key:`a860ba33e7a08de68091a9e1f3855c9082214893`,high:n,label:this.ctrl.getRenderProp(`label`),low:r,max:this.ctrl.getRenderProp(`max`),min:this.ctrl.getRenderProp(`min`),optimum:i,orientation:this.ctrl.getRenderProp(`orientation`),unit:this.ctrl.getRenderProp(`unit`),value:this.ctrl.getRenderProp(`value`)}))}static get watchers(){return{_high:[`watchHigh`],_label:[`watchLabel`],_low:[`watchLow`],_max:[`watchMax`],_min:[`watchMin`],_optimum:[`watchOptimum`],_orientation:[`watchOrientation`],_unit:[`watchUnit`],_value:[`watchValue`]}}};T.style={default:w};export{T as kol_meter};
+//# sourceMappingURL=kol-meter.entry-BBlv5SXi.js.map

package/app/dist/assets/kol-meter.entry-BBlv5SXi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kol-meter.entry-BBlv5SXi.js","names":[],"sources":["../../../../../components/dist/esm/kol-meter.entry.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { h, r as registerInstance, H as Host } from './index-CwtGN7ID.js';\nimport { B as BaseWebComponent } from './base-web-component-CArCAUxk.js';\nimport { t as translate } from './i18n-BkwRYsvE.js';\nimport './common-DyILLof-.js';\nimport { c as createPropDefinition, b as normalizeNumber, n as normalizeString } from './normalizers-B5NKuJgN.js';\nimport { l as labelProp } from './label-BT-6lb8r.js';\nimport { m as maxProp, u as unitProp, c as clampedNumberValueProp } from './value-number-clamped-eznLHU11.js';\nimport { B as BaseController } from './base-controller-CXhqh4cR.js';\nimport './i18n-CMA39edx.js';\nimport './_Uint8Array-kJHDjtoP.js';\nimport './isArray-CcrBs4JM.js';\n\nconst highProp = createPropDefinition('high', 0, normalizeNumber);\n\nconst lowProp = createPropDefinition('low', 0, normalizeNumber);\n\nconst minProp = createPropDefinition('min', 0, normalizeNumber);\n\nconst optimumProp = createPropDefinition('optimum', 0, normalizeNumber);\n\nconst orientationOptions = ['horizontal', 'vertical'];\nconst orientationProp = createPropDefinition('orientation', 'horizontal', (value) => {\n    const str = normalizeString(value);\n    if (orientationOptions.includes(str)) {\n        return str;\n    }\n    throw new Error(`Invalid orientation: ${str}`);\n});\n\nconst numberValueProp = createPropDefinition('value', 0, normalizeNumber, (v) => v >= 0);\n\nfunction getMeterState(value, min, max, low, high, optimum) {\n    const effectiveLow = low !== null && low !== void 0 ? low : min;\n    const effectiveHigh = high !== null && high !== void 0 ? high : max;\n    if (optimum === undefined) {\n        const inMidRegion = value >= effectiveLow && value <= effectiveHigh;\n        return inMidRegion ? 'optimum' : 'suboptimal';\n    }\n    const inLowRegion = value < effectiveLow;\n    const inHighRegion = value > effectiveHigh;\n    const inMidRegion = !inLowRegion && !inHighRegion;\n    const optimumInLow = optimum < effectiveLow;\n    const optimumInHigh = optimum > effectiveHigh;\n    if (optimumInLow) {\n        if (inLowRegion)\n            return 'optimum';\n        if (inMidRegion)\n            return 'suboptimal';\n        return 'critical';\n    }\n    else if (optimumInHigh) {\n        if (inHighRegion)\n            return 'optimum';\n        if (inMidRegion)\n            return 'suboptimal';\n        return 'critical';\n    }\n    else {\n        if (inMidRegion)\n            return 'optimum';\n        return 'suboptimal';\n    }\n}\nconst MeterFC = (props) => {\n    const { high, label, low, max, min, optimum, orientation, unit, value } = props;\n    const isVertical = orientation === 'vertical';\n    const isPercentage = unit === '%';\n    const displayValue = isPercentage ? Math.round(((value - min) / (max - min)) * 100) : value;\n    const state = getMeterState(value, min, max, low, high, optimum);\n    const hasStateClassification = low !== undefined || high !== undefined;\n    const stateLabel = hasStateClassification ? translate(`kol-meter-state-${state}`) : '';\n    const staticValueText = isPercentage\n        ? translate('kol-live-value', { placeholders: { value: String(displayValue), unit } })\n        : translate('kol-live-value-bounded', { placeholders: { value: String(displayValue), max: String(max), unit } });\n    const staticValueWithState = hasStateClassification ? `${staticValueText} – ${stateLabel}` : staticValueText;\n    const charCount = max.toString().length > min.toString().length ? max.toString().length + 'ch' : min.toString().length + 'ch';\n    return (h(\"div\", { class: { 'kol-meter': true, 'kol-meter--vertical': isVertical } }, h(\"div\", { class: \"kol-meter__bar\" }, h(\"div\", { class: \"kol-meter__bar-label\" }, label, hasStateClassification && (h(\"span\", { class: `kol-meter__bar-state kol-meter__bar-state--${state}` }, ' – ', stateLabel))), h(\"div\", { class: \"kol-meter__bar-track\" }, h(\"meter\", { \"aria-label\": label, \"aria-valuetext\": staticValueWithState, high: high, low: low, max: max, min: min, optimum: optimum, value: value })), h(\"span\", { class: \"kol-meter__value-unit\" }, h(\"span\", { class: \"kol-meter__value\", style: { 'min-width': charCount } }, displayValue), h(\"span\", { class: \"kol-meter__unit\" }, unit)))));\n};\n\nconst meterPropsConfig = {\n    optional: [minProp, orientationProp, unitProp],\n    required: [labelProp, maxProp, numberValueProp],\n};\n\nclass MeterController extends BaseController {\n    constructor(stateAccess) {\n        super(stateAccess, meterPropsConfig);\n        this.meterData = { high: undefined, low: undefined, optimum: undefined };\n    }\n    componentWillLoad(props) {\n        const { high, label, low, max, min, optimum, orientation, unit, value } = props;\n        this.watchHigh(high);\n        this.watchLabel(label);\n        this.watchLow(low);\n        this.watchMax(max);\n        this.watchMin(min);\n        this.watchOptimum(optimum);\n        this.watchOrientation(orientation);\n        this.watchUnit(unit);\n        this.watchValue(value);\n    }\n    getMeterData() {\n        return this.meterData;\n    }\n    watchHigh(value) {\n        if (value === undefined) {\n            this.meterData.high = undefined;\n        }\n        else {\n            highProp.apply(value, (v) => {\n                this.meterData.high = v;\n            });\n        }\n    }\n    watchLabel(value) {\n        labelProp.apply(value, (v) => {\n            this.setRenderProp('label', v);\n        });\n    }\n    watchLow(value) {\n        if (value === undefined) {\n            this.meterData.low = undefined;\n        }\n        else {\n            lowProp.apply(value, (v) => {\n                this.meterData.low = v;\n            });\n        }\n    }\n    watchMax(value) {\n        maxProp.apply(value, (v) => {\n            this.setRenderProp('max', v);\n            this.watchValue(this.getRawProp('value'));\n        });\n    }\n    watchMin(value) {\n        minProp.apply(value, (v) => {\n            this.setRenderProp('min', v);\n            this.watchValue(this.getRawProp('value'));\n        });\n    }\n    watchOptimum(value) {\n        if (value === undefined) {\n            this.meterData.optimum = undefined;\n        }\n        else {\n            optimumProp.apply(value, (v) => {\n                this.meterData.optimum = v;\n            });\n        }\n    }\n    watchOrientation(value) {\n        orientationProp.apply(value, (v) => {\n            this.setRenderProp('orientation', v);\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: this.getRenderProp('min'), max: this.getRenderProp('max') });\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-meter {\\n    --color-optimal: var(--kol-meter-color-optimal, #2ea32e);\\n    --color-suboptimal: var(--kol-meter-color-suboptimal, #c8a000);\\n    --color-critical: var(--kol-meter-color-critical, #c00);\\n    --vertical-height: var(--kol-meter-vertical-height, 128);\\n    --horizontal-height: var(--kol-meter-horizontal-height, 12);\\n  }\\n  .kol-meter__bar {\\n    display: grid;\\n    align-items: center;\\n    grid-template-areas: \\\"label label\\\" \\\"bar value\\\";\\n    grid-template-columns: 1fr auto;\\n  }\\n  .kol-meter__bar-label {\\n    grid-column-end: 2;\\n    grid-area: label;\\n  }\\n  .kol-meter__bar-track {\\n    display: flex;\\n    min-width: 100%;\\n    grid-area: bar;\\n  }\\n  .kol-meter__value-unit {\\n    grid-area: value;\\n  }\\n  .kol-meter:not(.kol-meter--vertical) .kol-meter__value {\\n    display: inline-block;\\n    text-align: right;\\n  }\\n  .kol-meter--vertical {\\n    min-height: 100%;\\n  }\\n  .kol-meter--vertical .kol-meter__bar {\\n    min-height: 100%;\\n    align-items: end;\\n    justify-items: center;\\n    grid-template-areas: \\\"label\\\" \\\"bar\\\" \\\"value\\\";\\n    grid-template-columns: 1fr;\\n    grid-template-rows: min-content 1fr min-content;\\n  }\\n  .kol-meter--vertical .kol-meter__bar-label {\\n    text-align: center;\\n  }\\n  .kol-meter--vertical .kol-meter__bar-track {\\n    position: relative;\\n    min-width: 0;\\n    min-height: calc(var(--vertical-height) * 1rem / var(--kolibri-root-font-size, 16));\\n    align-items: center;\\n  }\\n  .kol-meter--vertical .kol-meter__bar meter {\\n    transform: rotate(-90deg);\\n    transform-origin: left bottom;\\n    position: absolute;\\n    bottom: 0;\\n    width: calc(var(--vertical-height) * 1rem / var(--kolibri-root-font-size, 16));\\n  }\\n  .kol-meter {\\n    /* Base meter styling */\\n  }\\n  .kol-meter meter {\\n    width: 100%;\\n    height: calc(var(--horizontal-height) * 1rem / var(--kolibri-root-font-size, 16));\\n    /* Remove default appearance in some browsers */\\n    -webkit-appearance: none;\\n    -moz-appearance: none;\\n    appearance: none;\\n  }\\n  .kol-meter {\\n    /* Chrome, Safari, Edge (WebKit/Blink) */\\n  }\\n  .kol-meter meter::-webkit-meter-bar {\\n    background: white;\\n    height: calc(var(--horizontal-height) * 1rem / var(--kolibri-root-font-size, 16));\\n    border: 1px solid black;\\n  }\\n  .kol-meter meter::-webkit-meter-optimum-value {\\n    background: var(--color-optimal);\\n  }\\n  .kol-meter meter::-webkit-meter-suboptimum-value {\\n    background: var(--color-suboptimal);\\n  }\\n  .kol-meter meter::-webkit-meter-even-less-good-value {\\n    background: var(--color-critical);\\n  }\\n  .kol-meter {\\n    /* Firefox */\\n  }\\n  @supports (selector(::-moz-meter-bar)) {\\n    .kol-meter meter {\\n      background: white;\\n      border: 1px solid black;\\n    }\\n  }\\n  .kol-meter meter::-moz-meter-bar {\\n    background: var(--color-optimal);\\n  }\\n  .kol-meter meter:-moz-meter-sub-optimum::-moz-meter-bar {\\n    background: var(--color-suboptimal);\\n  }\\n  .kol-meter meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {\\n    background: var(--color-critical);\\n  }\\n}\";\n\nconst KolMeter = class extends BaseWebComponent {\n    constructor(hostRef) {\n        super();\n        registerInstance(this, hostRef);\n        this.ctrl = new MeterController(BaseWebComponent.stateLess);\n        this._max = 1;\n        this._min = 0;\n        this._orientation = 'horizontal';\n        this._unit = '%';\n    }\n    watchHigh(value) {\n        this.ctrl.watchHigh(value);\n    }\n    watchLabel(value) {\n        this.ctrl.watchLabel(value);\n    }\n    watchLow(value) {\n        this.ctrl.watchLow(value);\n    }\n    watchMax(value) {\n        this.ctrl.watchMax(value);\n    }\n    watchMin(value) {\n        this.ctrl.watchMin(value);\n    }\n    watchOptimum(value) {\n        this.ctrl.watchOptimum(value);\n    }\n    watchOrientation(value) {\n        this.ctrl.watchOrientation(value);\n    }\n    watchUnit(value) {\n        this.ctrl.watchUnit(value);\n    }\n    watchValue(value) {\n        this.ctrl.watchValue(value);\n    }\n    componentWillLoad() {\n        this.ctrl.componentWillLoad({\n            high: this._high,\n            label: this._label,\n            low: this._low,\n            max: this._max,\n            min: this._min,\n            optimum: this._optimum,\n            orientation: this._orientation,\n            unit: this._unit,\n            value: this._value,\n        });\n    }\n    render() {\n        const { high, low, optimum } = this.ctrl.getMeterData();\n        return (h(Host, { key: '7ea5b381bf22f86968a7abd2a80afbabe32a4ba3' }, h(MeterFC, { key: 'a860ba33e7a08de68091a9e1f3855c9082214893', high: high, label: this.ctrl.getRenderProp('label'), low: low, max: this.ctrl.getRenderProp('max'), min: this.ctrl.getRenderProp('min'), optimum: optimum, orientation: this.ctrl.getRenderProp('orientation'), unit: this.ctrl.getRenderProp('unit'), value: this.ctrl.getRenderProp('value') })));\n    }\n    static get watchers() { return {\n        \"_high\": [\"watchHigh\"],\n        \"_label\": [\"watchLabel\"],\n        \"_low\": [\"watchLow\"],\n        \"_max\": [\"watchMax\"],\n        \"_min\": [\"watchMin\"],\n        \"_optimum\": [\"watchOptimum\"],\n        \"_orientation\": [\"watchOrientation\"],\n        \"_unit\": [\"watchUnit\"],\n        \"_value\": [\"watchValue\"]\n    }; }\n};\nKolMeter.style = {\n    default: defaultStyleCss\n};\n\nexport { KolMeter as kol_meter };\n//# sourceMappingURL=kol-meter.entry.js.map\n"],"mappings":"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"}