@public-ui/components/dist/cjs/kol-progress.cjs.entry.js

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

/*!
 * KoliBri - The accessible HTML-Standard
 */
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-03ef29aa.js"),index$1=require("./index-8b802221.js"),label=require("./label-21c38949.js"),defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: 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 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\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    background-color: lightgray;\n    color: black;\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  }\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: grid;\n    place-items: 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    place-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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-progress {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-progress__bar {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    align-items: center;\n    column-gap: 0.05rem;\n  }\n  .kol-progress__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-progress__bar svg {\n    grid-area: BAR;\n  }\n  .kol-progress__bar-value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-progress__bar-unit {\n    grid-area: UNIT;\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: #0075ff;\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle {\n    display: grid;\n    grid-template-columns: auto;\n    grid-template-areas: \"ALL\";\n    justify-items: center;\n    align-content: center;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    text-align: center;\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    font-size: x-small;\n  }\n  .kol-progress__cycle-text * {\n    background-color: white;\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",KolProgressDefaultStyle0=defaultStyleCss,VALID_VARIANTS=Object.keys(index$1.KoliBriProgressVariantEnum),CycleSvg=({state:e})=>index.h("svg",{width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},index.h("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),index.h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),index.h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"})),BarSvg=({state:e})=>{const t=e._value/e._max*100;return index.h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},index.h("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:"100%"}}),index.h("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"11",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",style:{width:"100%"}}),index.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(${t}% - 4px)`}}))},createProgressSVG=e=>{switch(e._variant){case"cycle":return index.h(CycleSvg,{state:e});case"bar":return index.h(BarSvg,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}},KolProgress=class{constructor(e){index.registerInstance(this,e),this._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){const e="%"===this.state._unit,t=e?`${Math.round(this.state._liveValue/this.state._max*100)}`:this.state._liveValue,n=e?Math.round(this.state._value/this.state._max*100):this.state._value;return index.h("div",{key:"a3cb72fa70f83e640758aa2a9a9b05f3144586d1",class:"kol-progress"},index.h("div",{key:"3f9f7a83fa9fe5f0e01ab96051b0f058afeb6ba0","aria-hidden":"true",class:{"kol-progress__cycle":"cycle"===this.state._variant,"kol-progress__bar":"bar"===this.state._variant}},"bar"===this.state._variant&&this.state._label&&index.h("div",{key:"e53ad6ee7ff680988179e7b57208cb0361783d31",class:"kol-progress__bar-label"},this.state._label),createProgressSVG(this.state),"cycle"==this.state._variant&&index.h("div",{key:"10a3aabfee33e6093dd63a028482854fb47735ac",class:"kol-progress__cycle-text"},this.state._label&&index.h("div",{key:"d83981b1b6376f07474f1ec2e5909efb5e436ff6",class:"kol-progress__cycle-label"},this.state._label),index.h("div",{key:"9bde39e955af81f1fd1e97039485c051e8837be3",class:"kol-progress__cycle-value"},`${n} ${this.state._unit}`)),"bar"==this.state._variant&&index.h("div",{key:"b8b3317b036e8026d83cca7e4d4d49dd744a02f5",class:"kol-progress__bar-value",style:{width:`${`${(e?100:this.state._max)+1}`.length}ch`}},n),"bar"==this.state._variant&&index.h("div",{key:"ae0e71db447b5f49db88ccddb143975883a9ae41",class:"kol-progress__bar-unit"},this.state._unit)),index.h("progress",{key:"dfad86c10b981a615481c51f15f54217a2f65f62",class:"visually-hidden","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),index.h("span",{key:"751c3a8f4cb2d0b7bd99da19ee91c94975df4cbe","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},e?`${t} %`:`${t} von ${this.state._max} ${this.state._unit}`))}validateLabel(e){label.validateLabel(this,e)}validateMax(e){"number"!=typeof e&&(e=100),index$1.watchNumber(this,"_max",e,{required:!0})}validateUnit(e){index$1.watchString(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),index$1.watchNumber(this,"_value",e,{required:!0})}validateVariant(e){index$1.watchValidator(this,"_variant",(e=>"string"==typeof e&&VALID_VARIANTS.includes(e)),new Set(VALID_VARIANTS),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};KolProgress.style={default:KolProgressDefaultStyle0},exports.kol_progress=KolProgress;