wcs-core 4.2.0 → 5.0.0

package/dist/esm/wcs-progress-bar.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-progress-bar.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,g0CAAg0C;;MCU10C,WAAW;;;iBAIG,KAAK;qBAKD,KAAK;iBAMV,CAAC;;EAEzB,MAAM;IACJ,MAAM,KAAK,GAAG;MACZ,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG;KACxB,CAAC;IAEF,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAC5B,WAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,KAAK,IACnC,IAAI,CAAC,SAAS;MACb,YAAM,KAAK,EAAC,gBAAgB,IACzB,IAAI,CAAC,KAAK,EAAC,mBAAY,CACnB,CAEL,CACF,EACN;GACH;EAED,WAAW;IACT,IAAI,OAAO,GAAG,UAAU,CAAC;IACzB,IAAI,IAAI,CAAC,KAAK;MAAE,OAAO,IAAI,QAAQ,CAAC;IACpC,IAAI,IAAI,CAAC,SAAS;MAAE,OAAO,IAAI,YAAY,CAAC;;IAE5C,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC;MAAE,OAAO,IAAI,aAAa,CAAC;IAC/C,OAAO,OAAO,CAAC;GAChB;;;;;;","names":[],"sources":["./src/components/progress-bar/progress-bar.scss?tag=wcs-progress-bar&encapsulation=shadow","./src/components/progress-bar/progress-bar.tsx"],"sourcesContent":[":host {\n    --wcs-internal-progress-bar-border-radius: var(--wcs-progress-bar-border-radius,0.3125rem);\n    --wcs-internal-progress-bar-border-radius-small: var(--wcs-progress-bar-border-radius-small,0.15625rem);\n    --wcs-internal-progress-bar-animation-duration: var(--wcs-progress-bar-animation-duration,0.375s);\n}\n.progress {\n  display: flex;\n  height: 0.625rem;\n  font-size: 0.75rem;\n  color: #4d4f53;\n  background-color: #fff;\n  background-image: linear-gradient(90deg, #e1ded9 50%, transparent 50%);\n  background-size: 0.25rem 0.625rem;\n  border-radius: var(--wcs-internal-progress-bar-border-radius);\n\n  &.has-label {\n    margin-top: 2.375rem;\n  }\n\n  &.small {\n    height: 0.3125rem;\n    overflow: hidden;\n    background-color: #fff;\n    background-image: none;\n    background-size: auto;\n    border-radius: var(--wcs-internal-progress-bar-border-radius-small);\n  }\n\n  // FIXME: Temporary fix so the label doesn't appear before the bar\n  &.value-zero>.progress-bar>.progress-label {\n    right: unset;\n  }\n}\n\n.progress-bar {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  color: #4d4f53;\n  text-align: center;\n  background-color: var(--wcs-primary);\n  border-radius: var(--wcs-internal-progress-bar-border-radius);\n  transition: width var(--wcs-internal-progress-bar-animation-duration) ease-out;\n}\n\n.progress-label {\n  position: absolute;\n  right: 0;\n  bottom: calc(100% + 0.5rem);\n  font-size: 1.5rem;\n  font-weight: 500;\n\n  sup {\n    font-size: 0.875rem;\n    top: -.5em;\n    position: relative;\n    line-height: 0;\n    vertical-align: baseline;\n  }\n}\n","import { Component, ComponentInterface, h, Prop } from '@stencil/core';\n\n/**\n * Component displaying progress as a bar.\n */\n@Component({\n  tag: 'wcs-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true\n})\nexport class ProgressBar implements ComponentInterface {\n  /**\n   * Whether the component display the small version\n   */\n  @Prop() small: boolean = false;\n\n  /**\n   * Whether it displays a label indicating the percentage of progress above the bar.\n   */\n  @Prop() showLabel: boolean = false;\n\n  /**\n   * The actual value of the progress.\n   * Ranging from 0 to 100.\n   */\n  @Prop() value: number = 0;\n\n  render() {\n    const style = {\n      width: this.value + '%'\n    };\n\n    return (\n      <div class={this.rootClasses()} >\n        <div class=\"progress-bar\" style={style}>\n          {this.showLabel &&\n            <span class=\"progress-label\">\n              {this.value}<sup>%</sup>\n            </span>\n          }\n        </div>\n      </div>\n    );\n  }\n\n  rootClasses(): string {\n    let classes = 'progress';\n    if (this.small) classes += ' small';\n    if (this.showLabel) classes += ' has-label';\n    // FIXME: Temporary fix so the label doesn't appear before the bar.\n    if (this.value === 0) classes += ' value-zero';\n    return classes;\n  }\n}\n"],"version":3}
+{"file":"wcs-progress-bar.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,60CAA60C;;MCcv1C,WAAW;;;gBAKsB,GAAG;qBAKlB,KAAK;iBAMV,CAAC;;EAEzB,MAAM;IACJ,MAAM,KAAK,GAAG;MACZ,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG;KACxB,CAAC;IAEF,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EACzB,IAAI,EAAC,OAAO,mBACE,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,KAAK,oBACT,IAAI,CAAC,KAAK,GAAG,GAAG,IACnC,WAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,KAAK,IACnC,IAAI,CAAC,SAAS;MACb,YAAM,KAAK,EAAC,gBAAgB,IACzB,IAAI,CAAC,KAAK,EAAC,mBAAY,CACnB,CAEL,CACF,EACN;GACH;EAED,WAAW;IACT,IAAI,OAAO,GAAG,UAAU,CAAC;IACzB,IAAI,IAAI,CAAC,SAAS;MAAE,OAAO,IAAI,YAAY,CAAC;;IAE5C,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC;MAAE,OAAO,IAAI,aAAa,CAAC;IAC/C,OAAO,OAAO,CAAC;GAChB;;;;;;","names":[],"sources":["./src/components/progress-bar/progress-bar.scss?tag=wcs-progress-bar&encapsulation=shadow","./src/components/progress-bar/progress-bar.tsx"],"sourcesContent":[":host {\n    --wcs-internal-progress-bar-border-radius: var(--wcs-progress-bar-border-radius, 0.3125rem);\n    --wcs-internal-progress-bar-border-radius-small: var(--wcs-progress-bar-border-radius-small, 0.15625rem);\n    --wcs-internal-progress-bar-animation-duration: var(--wcs-progress-bar-animation-duration, 0.375s);\n}\n\n\n:host([size=s]) {\n    .progress {\n        height: 0.3125rem;\n        overflow: hidden;\n        background-color: #fff;\n        background-image: none;\n        background-size: auto;\n        border-radius: var(--wcs-internal-progress-bar-border-radius-small);\n    }\n}\n\n.progress {\n    display: flex;\n    height: 0.625rem;\n    font-size: 0.75rem;\n    color: #4d4f53;\n    background-color: #fff;\n    background-image: linear-gradient(90deg, #e1ded9 50%, transparent 50%);\n    background-size: 0.25rem 0.625rem;\n    border-radius: var(--wcs-internal-progress-bar-border-radius);\n\n    &.has-label {\n        margin-top: 2.375rem;\n    }\n\n    // FIXME: Temporary fix so the label doesn't appear before the bar\n    &.value-zero > .progress-bar > .progress-label {\n        right: unset;\n    }\n}\n\n.progress-bar {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    color: #4d4f53;\n    text-align: center;\n    background-color: var(--wcs-primary);\n    border-radius: var(--wcs-internal-progress-bar-border-radius);\n    transition: width var(--wcs-internal-progress-bar-animation-duration) ease-out;\n}\n\n.progress-label {\n    position: absolute;\n    right: 0;\n    bottom: calc(100% + 0.5rem);\n    font-size: 1.5rem;\n    font-weight: 500;\n\n    sup {\n        font-size: 0.875rem;\n        top: -.5em;\n        position: relative;\n        line-height: 0;\n        vertical-align: baseline;\n    }\n}\n","import { Component, ComponentInterface, h, Prop } from '@stencil/core';\nimport { WcsSize } from \"../../shared-types\";\n\n/**\n * Component displaying progress as a horizontal bar.\n * @cssprop --wcs-progress-bar-border-radius - Border radius\n * @cssprop --wcs-progress-bar-border-radius-small - Border radius for size small\n * @cssprop --wcs-progress-bar-animation-duration - Animation duration\n */\n@Component({\n  tag: 'wcs-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true\n})\nexport class ProgressBar implements ComponentInterface {\n  /**\n   * Specify the size of the progress bar.  \n   * m = default, s = smaller\n   */\n  @Prop() size: Extract<WcsSize, 'm' | 's'> = 'm';\n\n  /**\n   * Whether it displays a label indicating the percentage of progress above the bar.\n   */\n  @Prop() showLabel: boolean = false;\n\n  /**\n   * The actual value of the progress.\n   * Ranging from 0 to 100.\n   */\n  @Prop() value: number = 0;\n\n  render() {\n    const style = {\n      width: this.value + '%'\n    };\n\n    return (\n      <div class={this.rootClasses()}\n           role=\"meter\"\n           aria-valuemin=\"0\"\n           aria-valuemax=\"100\"\n           aria-valuenow={this.value}\n           aria-valuetext={this.value + '%'}>\n        <div class=\"progress-bar\" style={style}>\n          {this.showLabel &&\n            <span class=\"progress-label\">\n              {this.value}<sup>%</sup>\n            </span>\n          }\n        </div>\n      </div>\n    );\n  }\n\n  rootClasses(): string {\n    let classes = 'progress';\n    if (this.showLabel) classes += ' has-label';\n    // FIXME: Temporary fix so the label doesn't appear before the bar.\n    if (this.value === 0) classes += ' value-zero';\n    return classes;\n  }\n}\n"],"version":3}

package/dist/esm/wcs-progress-radial.entry.js

@@ -1,23 +1,31 @@
-import { r as registerInstance, h } from './index-dc4d96d4.js';
+import { r as registerInstance, h } from './index-4f282598.js';
 
-const progressRadialCss = ".progress-circle{position:relative;display:inline-block;width:7.5rem;height:7.5rem;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 120 120' style='enable-background:new 0 0 120 120;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:%23D7D7D7;%7d %3c/style%3e%3cg%3e%3crect x='59' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='55.2' y='0.1' transform='matrix(0.9976 -6.975647e-02 6.975647e-02 0.9976 -0.2907 3.9376)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='51.5' y='0.5' transform='matrix(0.9903 -0.1392 0.1392 0.9903 -0.3974 7.368)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='47.8' y='1.2' transform='matrix(0.9781 -0.2079 0.2079 0.9781 -0.427 10.2973)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='44.1' y='2.1' transform='matrix(0.9613 -0.2756 0.2756 0.9613 -0.4827 12.749)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='40.5' y='3.3' transform='matrix(0.9397 -0.342 0.342 0.9397 -0.6613 14.7626)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='37' y='4.7' transform='matrix(0.9135 -0.4067 0.4067 0.9135 -1.0509 16.3931)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='33.6' y='6.3' transform='matrix(0.8829 -0.4695 0.4695 0.8829 -1.7286 17.7087)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='30.4' y='8.2' transform='matrix(0.848 -0.5299 0.5299 0.848 -2.7588 18.7897)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='27.3' y='10.3' transform='matrix(0.809 -0.5878 0.5878 0.809 -4.1915 19.7261)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='24.3' y='12.6' transform='matrix(0.766 -0.6428 0.6428 0.766 -6.0608 20.6152)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='21.5' y='15.2' transform='matrix(0.7193 -0.6947 0.6947 0.7193 -8.3843 21.5593)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='18.9' y='17.9' transform='matrix(0.6691 -0.7431 0.7431 0.6691 -11.1622 22.6633)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='16.4' y='20.8' transform='matrix(0.6157 -0.788 0.788 0.6157 -14.3769 24.0315)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='14.2' y='23.8' transform='matrix(0.5592 -0.829 0.829 0.5592 -17.9939 25.7655)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='12.2' y='27' transform='matrix(0.5 -0.866 0.866 0.5 -21.9615 27.9615)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='10.5' y='30.3' transform='matrix(0.4384 -0.8988 0.8988 0.4384 -26.2122 30.7076)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='8.9' y='33.8' transform='matrix(0.3746 -0.9272 0.9272 0.3746 -30.6638 34.0815)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='7.6' y='37.3' transform='matrix(0.309 -0.9511 0.9511 0.309 -35.2211 38.1485)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='6.6' y='40.9' transform='matrix(0.2419 -0.9703 0.9703 0.2419 -39.7776 42.9595)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='5.8' y='44.6' transform='matrix(0.1736 -0.9848 0.9848 0.1736 -44.2179 48.5492)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='5.3' y='48.4' transform='matrix(0.1045 -0.9945 0.9945 0.1045 -48.42 54.9351)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='5' y='52.1' transform='matrix(3.489950e-02 -0.9994 0.9994 3.489950e-02 -52.2577 62.1164)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='0' y='60.9' transform='matrix(0.9994 -3.489950e-02 3.489950e-02 0.9994 -2.1561 0.2482)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='0.3' y='64.6' transform='matrix(0.9945 -0.1045 0.1045 0.9945 -6.8272 1.0177)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='0.8' y='68.4' transform='matrix(0.9848 -0.1736 0.1736 0.9848 -11.9436 2.2383)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='1.6' y='72.1' transform='matrix(0.9703 -0.2419 0.2419 0.9703 -17.4499 4.0099)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='2.6' y='75.7' transform='matrix(0.9511 -0.309 0.309 0.9511 -23.2745 6.4241)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='3.9' y='79.2' transform='matrix(0.9272 -0.3746 0.3746 0.9272 -29.331 9.5626)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='5.5' y='82.7' transform='matrix(0.8988 -0.4384 0.4384 0.8988 -35.5191 13.4941)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='7.2' y='86' transform='matrix(0.866 -0.5 0.5 0.866 -41.7269 18.2731)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='9.2' y='89.2' transform='matrix(0.829 -0.5592 0.5592 0.829 -47.8331 23.9378)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='11.4' y='92.2' transform='matrix(0.788 -0.6157 0.6157 0.788 -53.7091 30.5088)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='13.9' y='95.1' transform='matrix(0.7431 -0.6691 0.6691 0.7431 -59.2218 37.988)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='16.5' y='97.8' transform='matrix(0.6947 -0.7193 0.7193 0.6947 -64.236 46.3581)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='19.3' y='100.4' transform='matrix(0.6428 -0.766 0.766 0.6428 -68.6175 55.5822)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='22.3' y='102.7' transform='matrix(0.5878 -0.809 0.809 0.5878 -72.2355 65.6038)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='25.4' y='104.8' transform='matrix(0.5299 -0.848 0.848 0.5299 -74.9657 76.3475)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='28.6' y='106.7' transform='matrix(0.4695 -0.8829 0.8829 0.4695 -76.693 87.7197)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='32' y='108.3' transform='matrix(0.4067 -0.9135 0.9135 0.4067 -77.3138 99.6102)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='35.5' y='109.7' transform='matrix(0.342 -0.9397 0.9397 0.342 -76.7383 111.8932)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='39.1' y='110.9' transform='matrix(0.2756 -0.9613 0.9613 0.2756 -74.893 124.43)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='42.8' y='111.8' transform='matrix(0.2079 -0.9781 0.9781 0.2079 -71.7222 137.0703)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='46.5' y='112.5' transform='matrix(0.1392 -0.9903 0.9903 0.1392 -67.1899 149.6558)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='50.2' y='112.9' transform='matrix(6.975647e-02 -0.9976 0.9976 6.975647e-02 -61.2806 162.0216)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='59' y='108' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='62.8' y='107.9' transform='matrix(0.9976 -6.975647e-02 6.975647e-02 0.9976 -7.7877 4.7255)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='66.5' y='107.5' transform='matrix(0.9903 -0.1392 0.1392 0.9903 -15.1355 10.5006)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='70.2' y='106.8' transform='matrix(0.9781 -0.2079 0.2079 0.9781 -21.9001 17.2744)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='73.9' y='105.9' transform='matrix(0.9613 -0.2756 0.2756 0.9613 -27.9452 24.9761)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='77.5' y='104.7' transform='matrix(0.9397 -0.342 0.342 0.9397 -33.1442 33.5167)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='81' y='103.3' transform='matrix(0.9135 -0.4067 0.4067 0.9135 -37.383 42.7899)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='84.4' y='101.7' transform='matrix(0.8829 -0.4695 0.4695 0.8829 -40.5617 52.6742)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='87.6' y='99.8' transform='matrix(0.848 -0.5299 0.5299 0.848 -42.5973 63.0348)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='90.7' y='97.7' transform='matrix(0.809 -0.5878 0.5878 0.809 -43.4248 73.7261)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='93.7' y='95.4' transform='matrix(0.766 -0.6428 0.6428 0.766 -42.999 84.594)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='96.5' y='92.8' transform='matrix(0.7193 -0.6947 0.6947 0.7193 -41.2954 95.4789)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='99.1' y='90.1' transform='matrix(0.6691 -0.7431 0.7431 0.6691 -38.3109 106.2184)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='101.6' y='87.2' transform='matrix(0.6157 -0.788 0.788 0.6157 -34.0637 116.6505)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='103.8' y='84.2' transform='matrix(0.5592 -0.829 0.829 0.5592 -28.5937 126.6159)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='105.8' y='81' transform='matrix(0.5 -0.866 0.866 0.5 -21.9615 135.9615)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='107.5' y='77.7' transform='matrix(0.4384 -0.8988 0.8988 0.4384 -14.2476 144.5431)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='109.1' y='74.2' transform='matrix(0.3746 -0.9272 0.9272 0.3746 -5.5511 152.2277)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='110.4' y='70.7' transform='matrix(0.309 -0.9511 0.9511 0.309 4.0122 158.8962)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='111.4' y='67.1' transform='matrix(0.2419 -0.9703 0.9703 0.2419 14.3114 164.4454)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='112.2' y='63.4' transform='matrix(0.1736 -0.9848 0.9848 0.1736 25.2032 168.79)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='112.7' y='59.6' transform='matrix(0.1045 -0.9945 0.9945 0.1045 36.5339 171.8641)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='113' y='55.9' transform='matrix(3.489950e-02 -0.9994 0.9994 3.489950e-02 48.1428 173.6225)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='108' y='57.1' transform='matrix(0.9994 -3.489950e-02 3.489950e-02 0.9994 -1.9588 4.0128)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='107.7' y='53.4' transform='matrix(0.9945 -0.1045 0.1045 0.9945 -5.0588 12.1831)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='107.2' y='49.6' transform='matrix(0.9848 -0.1736 0.1736 0.9848 -7.0711 20.4225)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='106.4' y='45.9' transform='matrix(0.9703 -0.2419 0.2419 0.9703 -8.0163 28.5853)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='105.4' y='42.3' transform='matrix(0.9511 -0.309 0.309 0.9511 -7.9343 36.5311)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='104.1' y='38.8' transform='matrix(0.9272 -0.3746 0.3746 0.9272 -6.8838 44.1282)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='102.5' y='35.3' transform='matrix(0.8988 -0.4384 0.4384 0.8988 -4.9408 51.2552)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='100.8' y='32' transform='matrix(0.866 -0.5 0.5 0.866 -2.1962 57.8038)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='98.8' y='28.8' transform='matrix(0.829 -0.5592 0.5592 0.829 1.2454 63.6808)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='96.6' y='25.8' transform='matrix(0.788 -0.6157 0.6157 0.788 5.2685 68.8093)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='94.1' y='22.9' transform='matrix(0.7431 -0.6691 0.6691 0.7431 9.7488 73.1303)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='91.5' y='20.2' transform='matrix(0.6947 -0.7193 0.7193 0.6947 14.5562 76.6036)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='88.7' y='17.6' transform='matrix(0.6428 -0.766 0.766 0.6428 19.5576 79.2086)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='85.7' y='15.3' transform='matrix(0.5878 -0.809 0.809 0.5878 24.6192 80.944)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='82.6' y='13.2' transform='matrix(0.5299 -0.848 0.848 0.5299 29.6096 81.828)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='79.4' y='11.3' transform='matrix(0.4695 -0.8829 0.8829 0.4695 34.4027 81.8974)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='76' y='9.7' transform='matrix(0.4067 -0.9135 0.9135 0.4067 38.8799 81.2069)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='72.5' y='8.3' transform='matrix(0.342 -0.9397 0.9397 0.342 42.9327 79.8275)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='68.9' y='7.1' transform='matrix(0.2756 -0.9613 0.9613 0.2756 46.4651 77.845)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='65.2' y='6.2' transform='matrix(0.2079 -0.9781 0.9781 0.2079 49.3951 75.358)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='61.5' y='5.5' transform='matrix(0.1392 -0.9903 0.9903 0.1392 51.657 72.4756)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='57.8' y='5.1' transform='matrix(6.975647e-02 -0.9976 0.9976 6.975647e-02 53.2021 69.3153)' class='st0' width='12' height='2'/%3e%3c/g%3e%3c/svg%3e\")}.progress-circle-figure{transform:rotate(-90deg);transition:stroke-dashoffset 0.375s ease-out}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;clip-path:inset(50%);border:0}.progress-circle-label{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:1.5rem;font-weight:500}.progress-circle-label sup{font-size:0.875rem;top:-0.5em;position:relative;line-height:0;vertical-align:baseline}.progress-circle-meter{stroke:var(--wcs-white)}.progress-circle-value{stroke:var(--wcs-primary);stroke-linecap:round}.progress-circle-value,.progress-circle-meter{fill:none}";
+const progressRadialCss = ":host{display:inline-flex}.progress-circle{position:relative;display:inline-block;width:7.5rem;height:7.5rem;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 120 120' style='enable-background:new 0 0 120 120;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:%23D7D7D7;%7d %3c/style%3e%3cg%3e%3crect x='59' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='55.2' y='0.1' transform='matrix(0.9976 -6.975647e-02 6.975647e-02 0.9976 -0.2907 3.9376)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='51.5' y='0.5' transform='matrix(0.9903 -0.1392 0.1392 0.9903 -0.3974 7.368)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='47.8' y='1.2' transform='matrix(0.9781 -0.2079 0.2079 0.9781 -0.427 10.2973)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='44.1' y='2.1' transform='matrix(0.9613 -0.2756 0.2756 0.9613 -0.4827 12.749)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='40.5' y='3.3' transform='matrix(0.9397 -0.342 0.342 0.9397 -0.6613 14.7626)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='37' y='4.7' transform='matrix(0.9135 -0.4067 0.4067 0.9135 -1.0509 16.3931)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='33.6' y='6.3' transform='matrix(0.8829 -0.4695 0.4695 0.8829 -1.7286 17.7087)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='30.4' y='8.2' transform='matrix(0.848 -0.5299 0.5299 0.848 -2.7588 18.7897)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='27.3' y='10.3' transform='matrix(0.809 -0.5878 0.5878 0.809 -4.1915 19.7261)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='24.3' y='12.6' transform='matrix(0.766 -0.6428 0.6428 0.766 -6.0608 20.6152)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='21.5' y='15.2' transform='matrix(0.7193 -0.6947 0.6947 0.7193 -8.3843 21.5593)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='18.9' y='17.9' transform='matrix(0.6691 -0.7431 0.7431 0.6691 -11.1622 22.6633)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='16.4' y='20.8' transform='matrix(0.6157 -0.788 0.788 0.6157 -14.3769 24.0315)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='14.2' y='23.8' transform='matrix(0.5592 -0.829 0.829 0.5592 -17.9939 25.7655)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='12.2' y='27' transform='matrix(0.5 -0.866 0.866 0.5 -21.9615 27.9615)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='10.5' y='30.3' transform='matrix(0.4384 -0.8988 0.8988 0.4384 -26.2122 30.7076)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='8.9' y='33.8' transform='matrix(0.3746 -0.9272 0.9272 0.3746 -30.6638 34.0815)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='7.6' y='37.3' transform='matrix(0.309 -0.9511 0.9511 0.309 -35.2211 38.1485)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='6.6' y='40.9' transform='matrix(0.2419 -0.9703 0.9703 0.2419 -39.7776 42.9595)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='5.8' y='44.6' transform='matrix(0.1736 -0.9848 0.9848 0.1736 -44.2179 48.5492)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='5.3' y='48.4' transform='matrix(0.1045 -0.9945 0.9945 0.1045 -48.42 54.9351)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='5' y='52.1' transform='matrix(3.489950e-02 -0.9994 0.9994 3.489950e-02 -52.2577 62.1164)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='0' y='60.9' transform='matrix(0.9994 -3.489950e-02 3.489950e-02 0.9994 -2.1561 0.2482)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='0.3' y='64.6' transform='matrix(0.9945 -0.1045 0.1045 0.9945 -6.8272 1.0177)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='0.8' y='68.4' transform='matrix(0.9848 -0.1736 0.1736 0.9848 -11.9436 2.2383)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='1.6' y='72.1' transform='matrix(0.9703 -0.2419 0.2419 0.9703 -17.4499 4.0099)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='2.6' y='75.7' transform='matrix(0.9511 -0.309 0.309 0.9511 -23.2745 6.4241)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='3.9' y='79.2' transform='matrix(0.9272 -0.3746 0.3746 0.9272 -29.331 9.5626)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='5.5' y='82.7' transform='matrix(0.8988 -0.4384 0.4384 0.8988 -35.5191 13.4941)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='7.2' y='86' transform='matrix(0.866 -0.5 0.5 0.866 -41.7269 18.2731)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='9.2' y='89.2' transform='matrix(0.829 -0.5592 0.5592 0.829 -47.8331 23.9378)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='11.4' y='92.2' transform='matrix(0.788 -0.6157 0.6157 0.788 -53.7091 30.5088)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='13.9' y='95.1' transform='matrix(0.7431 -0.6691 0.6691 0.7431 -59.2218 37.988)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='16.5' y='97.8' transform='matrix(0.6947 -0.7193 0.7193 0.6947 -64.236 46.3581)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='19.3' y='100.4' transform='matrix(0.6428 -0.766 0.766 0.6428 -68.6175 55.5822)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='22.3' y='102.7' transform='matrix(0.5878 -0.809 0.809 0.5878 -72.2355 65.6038)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='25.4' y='104.8' transform='matrix(0.5299 -0.848 0.848 0.5299 -74.9657 76.3475)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='28.6' y='106.7' transform='matrix(0.4695 -0.8829 0.8829 0.4695 -76.693 87.7197)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='32' y='108.3' transform='matrix(0.4067 -0.9135 0.9135 0.4067 -77.3138 99.6102)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='35.5' y='109.7' transform='matrix(0.342 -0.9397 0.9397 0.342 -76.7383 111.8932)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='39.1' y='110.9' transform='matrix(0.2756 -0.9613 0.9613 0.2756 -74.893 124.43)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='42.8' y='111.8' transform='matrix(0.2079 -0.9781 0.9781 0.2079 -71.7222 137.0703)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='46.5' y='112.5' transform='matrix(0.1392 -0.9903 0.9903 0.1392 -67.1899 149.6558)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='50.2' y='112.9' transform='matrix(6.975647e-02 -0.9976 0.9976 6.975647e-02 -61.2806 162.0216)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='59' y='108' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='62.8' y='107.9' transform='matrix(0.9976 -6.975647e-02 6.975647e-02 0.9976 -7.7877 4.7255)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='66.5' y='107.5' transform='matrix(0.9903 -0.1392 0.1392 0.9903 -15.1355 10.5006)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='70.2' y='106.8' transform='matrix(0.9781 -0.2079 0.2079 0.9781 -21.9001 17.2744)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='73.9' y='105.9' transform='matrix(0.9613 -0.2756 0.2756 0.9613 -27.9452 24.9761)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='77.5' y='104.7' transform='matrix(0.9397 -0.342 0.342 0.9397 -33.1442 33.5167)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='81' y='103.3' transform='matrix(0.9135 -0.4067 0.4067 0.9135 -37.383 42.7899)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='84.4' y='101.7' transform='matrix(0.8829 -0.4695 0.4695 0.8829 -40.5617 52.6742)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='87.6' y='99.8' transform='matrix(0.848 -0.5299 0.5299 0.848 -42.5973 63.0348)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='90.7' y='97.7' transform='matrix(0.809 -0.5878 0.5878 0.809 -43.4248 73.7261)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='93.7' y='95.4' transform='matrix(0.766 -0.6428 0.6428 0.766 -42.999 84.594)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='96.5' y='92.8' transform='matrix(0.7193 -0.6947 0.6947 0.7193 -41.2954 95.4789)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='99.1' y='90.1' transform='matrix(0.6691 -0.7431 0.7431 0.6691 -38.3109 106.2184)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='101.6' y='87.2' transform='matrix(0.6157 -0.788 0.788 0.6157 -34.0637 116.6505)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='103.8' y='84.2' transform='matrix(0.5592 -0.829 0.829 0.5592 -28.5937 126.6159)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='105.8' y='81' transform='matrix(0.5 -0.866 0.866 0.5 -21.9615 135.9615)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='107.5' y='77.7' transform='matrix(0.4384 -0.8988 0.8988 0.4384 -14.2476 144.5431)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='109.1' y='74.2' transform='matrix(0.3746 -0.9272 0.9272 0.3746 -5.5511 152.2277)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='110.4' y='70.7' transform='matrix(0.309 -0.9511 0.9511 0.309 4.0122 158.8962)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='111.4' y='67.1' transform='matrix(0.2419 -0.9703 0.9703 0.2419 14.3114 164.4454)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='112.2' y='63.4' transform='matrix(0.1736 -0.9848 0.9848 0.1736 25.2032 168.79)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='112.7' y='59.6' transform='matrix(0.1045 -0.9945 0.9945 0.1045 36.5339 171.8641)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='113' y='55.9' transform='matrix(3.489950e-02 -0.9994 0.9994 3.489950e-02 48.1428 173.6225)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='108' y='57.1' transform='matrix(0.9994 -3.489950e-02 3.489950e-02 0.9994 -1.9588 4.0128)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='107.7' y='53.4' transform='matrix(0.9945 -0.1045 0.1045 0.9945 -5.0588 12.1831)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='107.2' y='49.6' transform='matrix(0.9848 -0.1736 0.1736 0.9848 -7.0711 20.4225)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='106.4' y='45.9' transform='matrix(0.9703 -0.2419 0.2419 0.9703 -8.0163 28.5853)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='105.4' y='42.3' transform='matrix(0.9511 -0.309 0.309 0.9511 -7.9343 36.5311)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='104.1' y='38.8' transform='matrix(0.9272 -0.3746 0.3746 0.9272 -6.8838 44.1282)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='102.5' y='35.3' transform='matrix(0.8988 -0.4384 0.4384 0.8988 -4.9408 51.2552)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='100.8' y='32' transform='matrix(0.866 -0.5 0.5 0.866 -2.1962 57.8038)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='98.8' y='28.8' transform='matrix(0.829 -0.5592 0.5592 0.829 1.2454 63.6808)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='96.6' y='25.8' transform='matrix(0.788 -0.6157 0.6157 0.788 5.2685 68.8093)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='94.1' y='22.9' transform='matrix(0.7431 -0.6691 0.6691 0.7431 9.7488 73.1303)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='91.5' y='20.2' transform='matrix(0.6947 -0.7193 0.7193 0.6947 14.5562 76.6036)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='88.7' y='17.6' transform='matrix(0.6428 -0.766 0.766 0.6428 19.5576 79.2086)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='85.7' y='15.3' transform='matrix(0.5878 -0.809 0.809 0.5878 24.6192 80.944)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='82.6' y='13.2' transform='matrix(0.5299 -0.848 0.848 0.5299 29.6096 81.828)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='79.4' y='11.3' transform='matrix(0.4695 -0.8829 0.8829 0.4695 34.4027 81.8974)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='76' y='9.7' transform='matrix(0.4067 -0.9135 0.9135 0.4067 38.8799 81.2069)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='72.5' y='8.3' transform='matrix(0.342 -0.9397 0.9397 0.342 42.9327 79.8275)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='68.9' y='7.1' transform='matrix(0.2756 -0.9613 0.9613 0.2756 46.4651 77.845)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='65.2' y='6.2' transform='matrix(0.2079 -0.9781 0.9781 0.2079 49.3951 75.358)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='61.5' y='5.5' transform='matrix(0.1392 -0.9903 0.9903 0.1392 51.657 72.4756)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='57.8' y='5.1' transform='matrix(6.975647e-02 -0.9976 0.9976 6.975647e-02 53.2021 69.3153)' class='st0' width='12' height='2'/%3e%3c/g%3e%3c/svg%3e\")}.progress-circle-figure{position:absolute;transform:rotate(-90deg);transition:stroke-dashoffset 0.375s ease-out}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;clip-path:inset(50%);border:0}.progress-circle-label{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:1.5rem;font-weight:500}.progress-circle-label sup{font-size:0.875rem;top:-0.5em;position:relative;line-height:0;vertical-align:baseline}.progress-circle-meter{stroke:var(--wcs-white)}.progress-circle-value{stroke:var(--wcs-primary);stroke-linecap:round}.progress-circle-value,.progress-circle-meter{fill:none}";
 
 const ProgressRadial = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /** The initial background image size (120x120) as specified in the background-image css property of .progress-circle */
+    this.backgroundImageSize = 120;
     this.size = 120;
     this.showLabel = false;
     this.value = 0;
   }
   render() {
-    const { size, halfSize } = { size: this.size, halfSize: this.size / 2 };
-    return (h("div", { class: "progress-circle", "data-component": "radial-progress" }, h("svg", { class: "progress-circle-figure", "data-role": "figure", width: this.size, height: this.size, viewBox: `0 0 ${size} ${size}`, style: this.getSvgStyle() }, h("circle", { class: "progress-circle-meter", cx: halfSize, cy: halfSize, r: "54", "stroke-width": "12" }), h("circle", { class: "progress-circle-value", cx: halfSize, cy: halfSize, r: "54", "stroke-width": "12" })), this.showLabel &&
-      h("div", { class: "progress-circle-label", "data-role": "label" }, h("span", null, h("span", { "data-role": "labelvalue" }, this.value), h("sup", null, "%"))), h("input", { "data-role": "control", class: "sr-only", type: "range", value: this.value })));
+    const { backgroundImageSize, halfSize } = { backgroundImageSize: this.backgroundImageSize, halfSize: this.backgroundImageSize / 2 };
+    return (h("div", { class: "progress-circle", "data-component": "radial-progress", style: this.getSize() }, h("svg", { class: "progress-circle-figure", "data-role": "figure", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}`, style: this.getSvgStyle() }, h("circle", { class: "progress-circle-meter", cx: halfSize, cy: halfSize, r: "54", "stroke-width": "12" }), h("circle", { class: "progress-circle-value", cx: halfSize, cy: halfSize, r: "54", "stroke-width": "12" })), this.showLabel &&
+      h("div", { class: "progress-circle-label", "data-role": "label" }, h("span", null, h("span", { "data-role": "labelvalue" }, this.value), h("sup", null, "%"))), h("input", { "data-role": "control", class: "sr-only", type: "range", role: "meter", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', value: this.value })));
   }
   getSvgStyle() {
     return {
       'stroke-dasharray': '339.292',
-      'stroke-dashoffset': `${339.292 - (this.value / 100) * 339.292}`
+      'stroke-dashoffset': `${339.292 - (this.value / 100) * 339.292}`,
+    };
+  }
+  getSize() {
+    return {
+      'width': `${(this.size)}px`,
+      'height': `${(this.size)}px`,
     };
   }
 };

package/dist/esm/wcs-progress-radial.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-progress-radial.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,wlbAAwlb;;MCOrmb,cAAc;;;gBACA,GAAG;qBACG,KAAK;iBACV,CAAC;;EAEzB,MAAM;IACF,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC;IACxE,QACI,WAAK,KAAK,EAAE,iBAAiB,oBAAiB,iBAAiB,IAC3D,WAAK,KAAK,EAAE,wBAAwB,eACrB,QAAQ,EACnB,KAAK,EAAG,IAAI,CAAC,IAAI,EACjB,MAAM,EAAG,IAAI,CAAC,IAAI,EAClB,OAAO,EAAG,OAAO,IAAI,IAAI,IAAI,EAAE,EAC/B,KAAK,EAAG,IAAI,CAAC,WAAW,EAAE,IAE1B,cAAQ,KAAK,EAAE,uBAAuB,EAAC,EAAE,EAAG,QAAQ,EAAE,EAAE,EAAG,QAAQ,EAAE,CAAC,EAAE,IAAI,kBAAe,IAAI,GAAG,EAClG,cAAQ,KAAK,EAAE,uBAAuB,EAAC,EAAE,EAAG,QAAQ,EAAE,EAAE,EAAG,QAAQ,EAAE,CAAC,EAAE,IAAI,kBAAe,IAAI,GAAG,CAChG,EACL,IAAI,CAAC,SAAS;MACX,WAAK,KAAK,EAAE,uBAAuB,eAAY,OAAO,IAAC,gBAAM,yBAAiB,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,EAAA,mBAAY,CAAO,CAAM,EAE3I,0BAAkB,SAAS,EAAC,KAAK,EAAE,SAAS,EAAC,IAAI,EAAE,OAAO,EAAC,KAAK,EAAG,IAAI,CAAC,KAAK,GAAI,CAC/E,EACR;GACL;EAED,WAAW;IACP,OAAO;MACH,kBAAkB,EAAE,SAAS;MAC7B,mBAAmB,EAAE,GAAG,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,OAAO,EAAE;KACnE,CAAC;GACL;;;;;;","names":[],"sources":["./src/components/progress-radial/progress-radial.scss?tag=wcs-progress-radial&encapsulation=shadow","./src/components/progress-radial/progress-radial.tsx"],"sourcesContent":[".progress-circle {\n  position: relative;\n  display: inline-block;\n  width: 7.5rem;\n  height: 7.5rem;\n  background-image: url(\"data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 120 120' style='enable-background:new 0 0 120 120;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:%23D7D7D7;%7d %3c/style%3e%3cg%3e%3crect x='59' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='55.2' y='0.1' transform='matrix(0.9976 -6.975647e-02 6.975647e-02 0.9976 -0.2907 3.9376)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='51.5' y='0.5' transform='matrix(0.9903 -0.1392 0.1392 0.9903 -0.3974 7.368)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='47.8' y='1.2' transform='matrix(0.9781 -0.2079 0.2079 0.9781 -0.427 10.2973)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='44.1' y='2.1' transform='matrix(0.9613 -0.2756 0.2756 0.9613 -0.4827 12.749)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='40.5' y='3.3' transform='matrix(0.9397 -0.342 0.342 0.9397 -0.6613 14.7626)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='37' y='4.7' transform='matrix(0.9135 -0.4067 0.4067 0.9135 -1.0509 16.3931)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='33.6' y='6.3' transform='matrix(0.8829 -0.4695 0.4695 0.8829 -1.7286 17.7087)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='30.4' y='8.2' transform='matrix(0.848 -0.5299 0.5299 0.848 -2.7588 18.7897)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='27.3' y='10.3' transform='matrix(0.809 -0.5878 0.5878 0.809 -4.1915 19.7261)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='24.3' y='12.6' transform='matrix(0.766 -0.6428 0.6428 0.766 -6.0608 20.6152)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='21.5' y='15.2' transform='matrix(0.7193 -0.6947 0.6947 0.7193 -8.3843 21.5593)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='18.9' y='17.9' transform='matrix(0.6691 -0.7431 0.7431 0.6691 -11.1622 22.6633)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='16.4' y='20.8' transform='matrix(0.6157 -0.788 0.788 0.6157 -14.3769 24.0315)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='14.2' y='23.8' transform='matrix(0.5592 -0.829 0.829 0.5592 -17.9939 25.7655)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='12.2' y='27' transform='matrix(0.5 -0.866 0.866 0.5 -21.9615 27.9615)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='10.5' y='30.3' transform='matrix(0.4384 -0.8988 0.8988 0.4384 -26.2122 30.7076)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='8.9' y='33.8' transform='matrix(0.3746 -0.9272 0.9272 0.3746 -30.6638 34.0815)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='7.6' y='37.3' transform='matrix(0.309 -0.9511 0.9511 0.309 -35.2211 38.1485)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='6.6' y='40.9' transform='matrix(0.2419 -0.9703 0.9703 0.2419 -39.7776 42.9595)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='5.8' y='44.6' transform='matrix(0.1736 -0.9848 0.9848 0.1736 -44.2179 48.5492)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='5.3' y='48.4' transform='matrix(0.1045 -0.9945 0.9945 0.1045 -48.42 54.9351)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='5' y='52.1' transform='matrix(3.489950e-02 -0.9994 0.9994 3.489950e-02 -52.2577 62.1164)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='0' y='60.9' transform='matrix(0.9994 -3.489950e-02 3.489950e-02 0.9994 -2.1561 0.2482)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='0.3' y='64.6' transform='matrix(0.9945 -0.1045 0.1045 0.9945 -6.8272 1.0177)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='0.8' y='68.4' transform='matrix(0.9848 -0.1736 0.1736 0.9848 -11.9436 2.2383)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='1.6' y='72.1' transform='matrix(0.9703 -0.2419 0.2419 0.9703 -17.4499 4.0099)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='2.6' y='75.7' transform='matrix(0.9511 -0.309 0.309 0.9511 -23.2745 6.4241)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='3.9' y='79.2' transform='matrix(0.9272 -0.3746 0.3746 0.9272 -29.331 9.5626)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='5.5' y='82.7' transform='matrix(0.8988 -0.4384 0.4384 0.8988 -35.5191 13.4941)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='7.2' y='86' transform='matrix(0.866 -0.5 0.5 0.866 -41.7269 18.2731)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='9.2' y='89.2' transform='matrix(0.829 -0.5592 0.5592 0.829 -47.8331 23.9378)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='11.4' y='92.2' transform='matrix(0.788 -0.6157 0.6157 0.788 -53.7091 30.5088)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='13.9' y='95.1' transform='matrix(0.7431 -0.6691 0.6691 0.7431 -59.2218 37.988)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='16.5' y='97.8' transform='matrix(0.6947 -0.7193 0.7193 0.6947 -64.236 46.3581)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='19.3' y='100.4' transform='matrix(0.6428 -0.766 0.766 0.6428 -68.6175 55.5822)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='22.3' y='102.7' transform='matrix(0.5878 -0.809 0.809 0.5878 -72.2355 65.6038)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='25.4' y='104.8' transform='matrix(0.5299 -0.848 0.848 0.5299 -74.9657 76.3475)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='28.6' y='106.7' transform='matrix(0.4695 -0.8829 0.8829 0.4695 -76.693 87.7197)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='32' y='108.3' transform='matrix(0.4067 -0.9135 0.9135 0.4067 -77.3138 99.6102)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='35.5' y='109.7' transform='matrix(0.342 -0.9397 0.9397 0.342 -76.7383 111.8932)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='39.1' y='110.9' transform='matrix(0.2756 -0.9613 0.9613 0.2756 -74.893 124.43)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='42.8' y='111.8' transform='matrix(0.2079 -0.9781 0.9781 0.2079 -71.7222 137.0703)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='46.5' y='112.5' transform='matrix(0.1392 -0.9903 0.9903 0.1392 -67.1899 149.6558)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='50.2' y='112.9' transform='matrix(6.975647e-02 -0.9976 0.9976 6.975647e-02 -61.2806 162.0216)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='59' y='108' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='62.8' y='107.9' transform='matrix(0.9976 -6.975647e-02 6.975647e-02 0.9976 -7.7877 4.7255)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='66.5' y='107.5' transform='matrix(0.9903 -0.1392 0.1392 0.9903 -15.1355 10.5006)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='70.2' y='106.8' transform='matrix(0.9781 -0.2079 0.2079 0.9781 -21.9001 17.2744)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='73.9' y='105.9' transform='matrix(0.9613 -0.2756 0.2756 0.9613 -27.9452 24.9761)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='77.5' y='104.7' transform='matrix(0.9397 -0.342 0.342 0.9397 -33.1442 33.5167)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='81' y='103.3' transform='matrix(0.9135 -0.4067 0.4067 0.9135 -37.383 42.7899)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='84.4' y='101.7' transform='matrix(0.8829 -0.4695 0.4695 0.8829 -40.5617 52.6742)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='87.6' y='99.8' transform='matrix(0.848 -0.5299 0.5299 0.848 -42.5973 63.0348)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='90.7' y='97.7' transform='matrix(0.809 -0.5878 0.5878 0.809 -43.4248 73.7261)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='93.7' y='95.4' transform='matrix(0.766 -0.6428 0.6428 0.766 -42.999 84.594)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='96.5' y='92.8' transform='matrix(0.7193 -0.6947 0.6947 0.7193 -41.2954 95.4789)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='99.1' y='90.1' transform='matrix(0.6691 -0.7431 0.7431 0.6691 -38.3109 106.2184)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='101.6' y='87.2' transform='matrix(0.6157 -0.788 0.788 0.6157 -34.0637 116.6505)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='103.8' y='84.2' transform='matrix(0.5592 -0.829 0.829 0.5592 -28.5937 126.6159)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='105.8' y='81' transform='matrix(0.5 -0.866 0.866 0.5 -21.9615 135.9615)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='107.5' y='77.7' transform='matrix(0.4384 -0.8988 0.8988 0.4384 -14.2476 144.5431)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='109.1' y='74.2' transform='matrix(0.3746 -0.9272 0.9272 0.3746 -5.5511 152.2277)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='110.4' y='70.7' transform='matrix(0.309 -0.9511 0.9511 0.309 4.0122 158.8962)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='111.4' y='67.1' transform='matrix(0.2419 -0.9703 0.9703 0.2419 14.3114 164.4454)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='112.2' y='63.4' transform='matrix(0.1736 -0.9848 0.9848 0.1736 25.2032 168.79)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='112.7' y='59.6' transform='matrix(0.1045 -0.9945 0.9945 0.1045 36.5339 171.8641)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='113' y='55.9' transform='matrix(3.489950e-02 -0.9994 0.9994 3.489950e-02 48.1428 173.6225)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='108' y='57.1' transform='matrix(0.9994 -3.489950e-02 3.489950e-02 0.9994 -1.9588 4.0128)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='107.7' y='53.4' transform='matrix(0.9945 -0.1045 0.1045 0.9945 -5.0588 12.1831)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='107.2' y='49.6' transform='matrix(0.9848 -0.1736 0.1736 0.9848 -7.0711 20.4225)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='106.4' y='45.9' transform='matrix(0.9703 -0.2419 0.2419 0.9703 -8.0163 28.5853)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='105.4' y='42.3' transform='matrix(0.9511 -0.309 0.309 0.9511 -7.9343 36.5311)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='104.1' y='38.8' transform='matrix(0.9272 -0.3746 0.3746 0.9272 -6.8838 44.1282)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='102.5' y='35.3' transform='matrix(0.8988 -0.4384 0.4384 0.8988 -4.9408 51.2552)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='100.8' y='32' transform='matrix(0.866 -0.5 0.5 0.866 -2.1962 57.8038)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='98.8' y='28.8' transform='matrix(0.829 -0.5592 0.5592 0.829 1.2454 63.6808)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='96.6' y='25.8' transform='matrix(0.788 -0.6157 0.6157 0.788 5.2685 68.8093)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='94.1' y='22.9' transform='matrix(0.7431 -0.6691 0.6691 0.7431 9.7488 73.1303)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='91.5' y='20.2' transform='matrix(0.6947 -0.7193 0.7193 0.6947 14.5562 76.6036)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='88.7' y='17.6' transform='matrix(0.6428 -0.766 0.766 0.6428 19.5576 79.2086)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='85.7' y='15.3' transform='matrix(0.5878 -0.809 0.809 0.5878 24.6192 80.944)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='82.6' y='13.2' transform='matrix(0.5299 -0.848 0.848 0.5299 29.6096 81.828)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='79.4' y='11.3' transform='matrix(0.4695 -0.8829 0.8829 0.4695 34.4027 81.8974)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='76' y='9.7' transform='matrix(0.4067 -0.9135 0.9135 0.4067 38.8799 81.2069)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='72.5' y='8.3' transform='matrix(0.342 -0.9397 0.9397 0.342 42.9327 79.8275)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='68.9' y='7.1' transform='matrix(0.2756 -0.9613 0.9613 0.2756 46.4651 77.845)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='65.2' y='6.2' transform='matrix(0.2079 -0.9781 0.9781 0.2079 49.3951 75.358)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='61.5' y='5.5' transform='matrix(0.1392 -0.9903 0.9903 0.1392 51.657 72.4756)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='57.8' y='5.1' transform='matrix(6.975647e-02 -0.9976 0.9976 6.975647e-02 53.2021 69.3153)' class='st0' width='12' height='2'/%3e%3c/g%3e%3c/svg%3e\");\n}\n\n.progress-circle-figure {\n  transform: rotate(-90deg);\n  transition: stroke-dashoffset 0.375s ease-out;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  clip-path: inset(50%);\n  border: 0;\n}\n\n.progress-circle-label {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  font-size: 1.5rem;\n  font-weight: 500;\n\n  sup {\n    font-size: 0.875rem;\n    top: -.5em;\n    position: relative;\n    line-height: 0;\n    vertical-align: baseline;\n  }\n}\n\n.progress-circle-meter {\n  stroke: var(--wcs-white);\n}\n\n.progress-circle-value {\n  stroke: var(--wcs-primary);\n  stroke-linecap: round;\n}\n\n.progress-circle-value,\n.progress-circle-meter {\n  fill: none;\n}\n","import { Component, Prop, ComponentInterface, h } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-progress-radial',\n    styleUrl: 'progress-radial.scss',\n    shadow: true\n})\nexport class ProgressRadial implements ComponentInterface {\n    @Prop() size: number = 120;\n    @Prop() showLabel: boolean = false;\n    @Prop() value: number = 0;\n\n    render() {\n        const { size, halfSize } = { size: this.size, halfSize: this.size / 2 };\n        return (\n            <div class= \"progress-circle\" data-component= \"radial-progress\">\n                <svg class= \"progress-circle-figure\"\n                    data-role= \"figure\"\n                    width= {this.size}\n                    height= {this.size}\n                    viewBox= {`0 0 ${size} ${size}`}\n                    style= {this.getSvgStyle()}\n                >\n                    <circle class= \"progress-circle-meter\" cx= {halfSize} cy= {halfSize} r= \"54\" stroke-width= \"12\" />\n                    <circle class= \"progress-circle-value\" cx= {halfSize} cy= {halfSize} r= \"54\" stroke-width= \"12\" />\n                </svg>\n                {this.showLabel &&\n                    <div class= \"progress-circle-label\" data-role= \"label\"><span><span data-role= \"labelvalue\">{this.value}</span><sup>%</sup></span></div>\n                }\n                <input data-role= \"control\" class= \"sr-only\" type= \"range\" value= {this.value} />\n            </div>\n        );\n    }\n\n    getSvgStyle() {\n        return {\n            'stroke-dasharray': '339.292',\n            'stroke-dashoffset': `${339.292 - (this.value / 100) * 339.292}`\n        };\n    }\n}\n"],"version":3}
+{"file":"wcs-progress-radial.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,oobAAoob;;MCUjpb,cAAc;;;;IAEf,wBAAmB,GAAW,GAAG,CAAC;gBAGnB,GAAG;qBAEG,KAAK;iBAEV,CAAC;;EAEzB,MAAM;IACF,MAAM,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,EAAE,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAAE,QAAQ,EAAE,IAAI,CAAC,mBAAmB,GAAG,CAAC,EAAE,CAAC;IACpI,QACI,WAAK,KAAK,EAAC,iBAAiB,oBAAgB,iBAAiB,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,IAC/E,WAAK,KAAK,EAAC,wBAAwB,eACrB,QAAQ,EAClB,OAAO,EAAE,OAAO,mBAAmB,IAAI,mBAAmB,EAAE,EAC5D,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IACrB,cAAQ,KAAK,EAAC,uBAAuB,EAAC,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAC,IAAI,kBAAc,IAAI,GAAG,EAC7F,cAAQ,KAAK,EAAC,uBAAuB,EAAC,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAC,IAAI,kBAAc,IAAI,GAAG,CAC/F,EACL,IAAI,CAAC,SAAS;MACX,WAAK,KAAK,EAAC,uBAAuB,eAAW,OAAO,IAChD,gBACI,yBAAgB,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,EAAA,mBAAY,CACzD,CACL,EAEV,0BAAiB,SAAS,EACnB,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,mBACE,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,KAAK,oBACT,IAAI,CAAC,KAAK,GAAG,GAAG,EAChC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAC1B,EACR;GACL;EAED,WAAW;IACP,OAAO;MACH,kBAAkB,EAAE,SAAS;MAC7B,mBAAmB,EAAE,GAAG,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,OAAO,EAAE;KACnE,CAAC;GACL;EAED,OAAO;IACH,OAAO;MACH,OAAO,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK;MAC3B,QAAQ,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK;KAC/B,CAAC;GACL;;;;;;","names":[],"sources":["./src/components/progress-radial/progress-radial.scss?tag=wcs-progress-radial&encapsulation=shadow","./src/components/progress-radial/progress-radial.tsx"],"sourcesContent":[":host {\n    display: inline-flex;\n}\n\n.progress-circle {\n  position: relative;\n  display: inline-block;\n  width: 7.5rem;\n  height: 7.5rem;\n  background-image: url(\"data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 120 120' style='enable-background:new 0 0 120 120;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:%23D7D7D7;%7d %3c/style%3e%3cg%3e%3crect x='59' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='55.2' y='0.1' transform='matrix(0.9976 -6.975647e-02 6.975647e-02 0.9976 -0.2907 3.9376)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='51.5' y='0.5' transform='matrix(0.9903 -0.1392 0.1392 0.9903 -0.3974 7.368)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='47.8' y='1.2' transform='matrix(0.9781 -0.2079 0.2079 0.9781 -0.427 10.2973)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='44.1' y='2.1' transform='matrix(0.9613 -0.2756 0.2756 0.9613 -0.4827 12.749)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='40.5' y='3.3' transform='matrix(0.9397 -0.342 0.342 0.9397 -0.6613 14.7626)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='37' y='4.7' transform='matrix(0.9135 -0.4067 0.4067 0.9135 -1.0509 16.3931)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='33.6' y='6.3' transform='matrix(0.8829 -0.4695 0.4695 0.8829 -1.7286 17.7087)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='30.4' y='8.2' transform='matrix(0.848 -0.5299 0.5299 0.848 -2.7588 18.7897)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='27.3' y='10.3' transform='matrix(0.809 -0.5878 0.5878 0.809 -4.1915 19.7261)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='24.3' y='12.6' transform='matrix(0.766 -0.6428 0.6428 0.766 -6.0608 20.6152)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='21.5' y='15.2' transform='matrix(0.7193 -0.6947 0.6947 0.7193 -8.3843 21.5593)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='18.9' y='17.9' transform='matrix(0.6691 -0.7431 0.7431 0.6691 -11.1622 22.6633)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='16.4' y='20.8' transform='matrix(0.6157 -0.788 0.788 0.6157 -14.3769 24.0315)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='14.2' y='23.8' transform='matrix(0.5592 -0.829 0.829 0.5592 -17.9939 25.7655)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='12.2' y='27' transform='matrix(0.5 -0.866 0.866 0.5 -21.9615 27.9615)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='10.5' y='30.3' transform='matrix(0.4384 -0.8988 0.8988 0.4384 -26.2122 30.7076)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='8.9' y='33.8' transform='matrix(0.3746 -0.9272 0.9272 0.3746 -30.6638 34.0815)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='7.6' y='37.3' transform='matrix(0.309 -0.9511 0.9511 0.309 -35.2211 38.1485)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='6.6' y='40.9' transform='matrix(0.2419 -0.9703 0.9703 0.2419 -39.7776 42.9595)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='5.8' y='44.6' transform='matrix(0.1736 -0.9848 0.9848 0.1736 -44.2179 48.5492)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='5.3' y='48.4' transform='matrix(0.1045 -0.9945 0.9945 0.1045 -48.42 54.9351)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='5' y='52.1' transform='matrix(3.489950e-02 -0.9994 0.9994 3.489950e-02 -52.2577 62.1164)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='0' y='60.9' transform='matrix(0.9994 -3.489950e-02 3.489950e-02 0.9994 -2.1561 0.2482)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='0.3' y='64.6' transform='matrix(0.9945 -0.1045 0.1045 0.9945 -6.8272 1.0177)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='0.8' y='68.4' transform='matrix(0.9848 -0.1736 0.1736 0.9848 -11.9436 2.2383)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='1.6' y='72.1' transform='matrix(0.9703 -0.2419 0.2419 0.9703 -17.4499 4.0099)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='2.6' y='75.7' transform='matrix(0.9511 -0.309 0.309 0.9511 -23.2745 6.4241)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='3.9' y='79.2' transform='matrix(0.9272 -0.3746 0.3746 0.9272 -29.331 9.5626)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='5.5' y='82.7' transform='matrix(0.8988 -0.4384 0.4384 0.8988 -35.5191 13.4941)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='7.2' y='86' transform='matrix(0.866 -0.5 0.5 0.866 -41.7269 18.2731)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='9.2' y='89.2' transform='matrix(0.829 -0.5592 0.5592 0.829 -47.8331 23.9378)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='11.4' y='92.2' transform='matrix(0.788 -0.6157 0.6157 0.788 -53.7091 30.5088)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='13.9' y='95.1' transform='matrix(0.7431 -0.6691 0.6691 0.7431 -59.2218 37.988)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='16.5' y='97.8' transform='matrix(0.6947 -0.7193 0.7193 0.6947 -64.236 46.3581)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='19.3' y='100.4' transform='matrix(0.6428 -0.766 0.766 0.6428 -68.6175 55.5822)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='22.3' y='102.7' transform='matrix(0.5878 -0.809 0.809 0.5878 -72.2355 65.6038)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='25.4' y='104.8' transform='matrix(0.5299 -0.848 0.848 0.5299 -74.9657 76.3475)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='28.6' y='106.7' transform='matrix(0.4695 -0.8829 0.8829 0.4695 -76.693 87.7197)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='32' y='108.3' transform='matrix(0.4067 -0.9135 0.9135 0.4067 -77.3138 99.6102)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='35.5' y='109.7' transform='matrix(0.342 -0.9397 0.9397 0.342 -76.7383 111.8932)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='39.1' y='110.9' transform='matrix(0.2756 -0.9613 0.9613 0.2756 -74.893 124.43)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='42.8' y='111.8' transform='matrix(0.2079 -0.9781 0.9781 0.2079 -71.7222 137.0703)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='46.5' y='112.5' transform='matrix(0.1392 -0.9903 0.9903 0.1392 -67.1899 149.6558)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='50.2' y='112.9' transform='matrix(6.975647e-02 -0.9976 0.9976 6.975647e-02 -61.2806 162.0216)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='59' y='108' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='62.8' y='107.9' transform='matrix(0.9976 -6.975647e-02 6.975647e-02 0.9976 -7.7877 4.7255)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='66.5' y='107.5' transform='matrix(0.9903 -0.1392 0.1392 0.9903 -15.1355 10.5006)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='70.2' y='106.8' transform='matrix(0.9781 -0.2079 0.2079 0.9781 -21.9001 17.2744)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='73.9' y='105.9' transform='matrix(0.9613 -0.2756 0.2756 0.9613 -27.9452 24.9761)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='77.5' y='104.7' transform='matrix(0.9397 -0.342 0.342 0.9397 -33.1442 33.5167)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='81' y='103.3' transform='matrix(0.9135 -0.4067 0.4067 0.9135 -37.383 42.7899)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='84.4' y='101.7' transform='matrix(0.8829 -0.4695 0.4695 0.8829 -40.5617 52.6742)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='87.6' y='99.8' transform='matrix(0.848 -0.5299 0.5299 0.848 -42.5973 63.0348)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='90.7' y='97.7' transform='matrix(0.809 -0.5878 0.5878 0.809 -43.4248 73.7261)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='93.7' y='95.4' transform='matrix(0.766 -0.6428 0.6428 0.766 -42.999 84.594)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='96.5' y='92.8' transform='matrix(0.7193 -0.6947 0.6947 0.7193 -41.2954 95.4789)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='99.1' y='90.1' transform='matrix(0.6691 -0.7431 0.7431 0.6691 -38.3109 106.2184)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='101.6' y='87.2' transform='matrix(0.6157 -0.788 0.788 0.6157 -34.0637 116.6505)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='103.8' y='84.2' transform='matrix(0.5592 -0.829 0.829 0.5592 -28.5937 126.6159)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='105.8' y='81' transform='matrix(0.5 -0.866 0.866 0.5 -21.9615 135.9615)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='107.5' y='77.7' transform='matrix(0.4384 -0.8988 0.8988 0.4384 -14.2476 144.5431)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='109.1' y='74.2' transform='matrix(0.3746 -0.9272 0.9272 0.3746 -5.5511 152.2277)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='110.4' y='70.7' transform='matrix(0.309 -0.9511 0.9511 0.309 4.0122 158.8962)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='111.4' y='67.1' transform='matrix(0.2419 -0.9703 0.9703 0.2419 14.3114 164.4454)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='112.2' y='63.4' transform='matrix(0.1736 -0.9848 0.9848 0.1736 25.2032 168.79)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='112.7' y='59.6' transform='matrix(0.1045 -0.9945 0.9945 0.1045 36.5339 171.8641)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='113' y='55.9' transform='matrix(3.489950e-02 -0.9994 0.9994 3.489950e-02 48.1428 173.6225)' class='st0' width='2' height='12'/%3e%3c/g%3e%3cg%3e%3crect x='108' y='57.1' transform='matrix(0.9994 -3.489950e-02 3.489950e-02 0.9994 -1.9588 4.0128)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='107.7' y='53.4' transform='matrix(0.9945 -0.1045 0.1045 0.9945 -5.0588 12.1831)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='107.2' y='49.6' transform='matrix(0.9848 -0.1736 0.1736 0.9848 -7.0711 20.4225)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='106.4' y='45.9' transform='matrix(0.9703 -0.2419 0.2419 0.9703 -8.0163 28.5853)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='105.4' y='42.3' transform='matrix(0.9511 -0.309 0.309 0.9511 -7.9343 36.5311)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='104.1' y='38.8' transform='matrix(0.9272 -0.3746 0.3746 0.9272 -6.8838 44.1282)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='102.5' y='35.3' transform='matrix(0.8988 -0.4384 0.4384 0.8988 -4.9408 51.2552)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='100.8' y='32' transform='matrix(0.866 -0.5 0.5 0.866 -2.1962 57.8038)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='98.8' y='28.8' transform='matrix(0.829 -0.5592 0.5592 0.829 1.2454 63.6808)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='96.6' y='25.8' transform='matrix(0.788 -0.6157 0.6157 0.788 5.2685 68.8093)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='94.1' y='22.9' transform='matrix(0.7431 -0.6691 0.6691 0.7431 9.7488 73.1303)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='91.5' y='20.2' transform='matrix(0.6947 -0.7193 0.7193 0.6947 14.5562 76.6036)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='88.7' y='17.6' transform='matrix(0.6428 -0.766 0.766 0.6428 19.5576 79.2086)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='85.7' y='15.3' transform='matrix(0.5878 -0.809 0.809 0.5878 24.6192 80.944)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='82.6' y='13.2' transform='matrix(0.5299 -0.848 0.848 0.5299 29.6096 81.828)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='79.4' y='11.3' transform='matrix(0.4695 -0.8829 0.8829 0.4695 34.4027 81.8974)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='76' y='9.7' transform='matrix(0.4067 -0.9135 0.9135 0.4067 38.8799 81.2069)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='72.5' y='8.3' transform='matrix(0.342 -0.9397 0.9397 0.342 42.9327 79.8275)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='68.9' y='7.1' transform='matrix(0.2756 -0.9613 0.9613 0.2756 46.4651 77.845)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='65.2' y='6.2' transform='matrix(0.2079 -0.9781 0.9781 0.2079 49.3951 75.358)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='61.5' y='5.5' transform='matrix(0.1392 -0.9903 0.9903 0.1392 51.657 72.4756)' class='st0' width='12' height='2'/%3e%3c/g%3e%3cg%3e%3crect x='57.8' y='5.1' transform='matrix(6.975647e-02 -0.9976 0.9976 6.975647e-02 53.2021 69.3153)' class='st0' width='12' height='2'/%3e%3c/g%3e%3c/svg%3e\");\n}\n\n.progress-circle-figure {\n  position: absolute;\n  transform: rotate(-90deg);\n  transition: stroke-dashoffset 0.375s ease-out;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  clip-path: inset(50%);\n  border: 0;\n}\n\n.progress-circle-label {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  font-size: 1.5rem;\n  font-weight: 500;\n\n  sup {\n    font-size: 0.875rem;\n    top: -.5em;\n    position: relative;\n    line-height: 0;\n    vertical-align: baseline;\n  }\n}\n\n.progress-circle-meter {\n  stroke: var(--wcs-white);\n}\n\n.progress-circle-value {\n  stroke: var(--wcs-primary);\n  stroke-linecap: round;\n}\n\n.progress-circle-value,\n.progress-circle-meter {\n  fill: none;\n}\n","import { Component, Prop, ComponentInterface, h } from '@stencil/core';\n\n/**\n * The progress-radial component is a circular progress bar that indicates the current completion of a task. \n */\n@Component({\n    tag: 'wcs-progress-radial',\n    styleUrl: 'progress-radial.scss',\n    shadow: true\n})\nexport class ProgressRadial implements ComponentInterface {\n    /** The initial background image size (120x120) as specified in the background-image css property of .progress-circle */\n    private backgroundImageSize: number = 120;\n    \n    /** The size of the progress radial (in px) */\n    @Prop() size: number = 120;\n    /** Whether the component should display the % label inside */\n    @Prop() showLabel: boolean = false;\n    /** The value of the progress radial. Prefer values between 0 and 100. */\n    @Prop() value: number = 0;\n\n    render() {\n        const { backgroundImageSize, halfSize } = { backgroundImageSize: this.backgroundImageSize, halfSize: this.backgroundImageSize / 2 };\n        return (\n            <div class=\"progress-circle\" data-component=\"radial-progress\" style={this.getSize()}>\n                <svg class=\"progress-circle-figure\"\n                    data-role=\"figure\"\n                    viewBox={`0 0 ${backgroundImageSize} ${backgroundImageSize}`}\n                    style={this.getSvgStyle()}>\n                        <circle class=\"progress-circle-meter\" cx={halfSize} cy={halfSize} r=\"54\" stroke-width=\"12\" />\n                        <circle class=\"progress-circle-value\" cx={halfSize} cy={halfSize} r=\"54\" stroke-width=\"12\" />\n                </svg>\n                {this.showLabel &&\n                    <div class=\"progress-circle-label\" data-role=\"label\">\n                        <span>\n                            <span data-role=\"labelvalue\">{this.value}</span><sup>%</sup>\n                        </span>\n                    </div>\n                }\n                <input data-role=\"control\"\n                       class=\"sr-only\"\n                       type=\"range\"\n                       role=\"meter\"\n                       aria-valuemin=\"0\"\n                       aria-valuemax=\"100\"\n                       aria-valuenow={this.value} \n                       aria-valuetext={this.value + '%'}\n                       value={this.value} />\n            </div>\n        );\n    }\n\n    getSvgStyle() {\n        return {\n            'stroke-dasharray': '339.292',\n            'stroke-dashoffset': `${339.292 - (this.value / 100) * 339.292}`,\n        };\n    }\n    \n    getSize() {\n        return {\n            'width': `${(this.size)}px`,\n            'height': `${(this.size)}px`,\n        };\n    }\n}\n"],"version":3}

package/dist/esm/wcs-radio-group.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-dc4d96d4.js';
-import { n as isDownArrowKey, o as isUpArrowKey, p as isLeftArrowKey, q as isRightArrowKey } from './helpers-1d55b67f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f282598.js';
+import { q as isDownArrowKey, r as isUpArrowKey, s as isLeftArrowKey, t as isRightArrowKey } from './helpers-a21ae7d0.js';
 
 const radioGroupCss = ":host{display:flex}:host([mode=radio]){flex-direction:column}:host([mode=radio]) ::slotted([slot=option]:first-child){margin-top:0}:host([mode=radio]) ::slotted([slot=option]:last-child){margin-bottom:0}:host([mode=radio]) ::slotted([slot=options]){margin-top:calc(var(--wcs-base-margin) / 2);margin-bottom:calc(var(--wcs-base-margin) / 2)}:host([mode=option]){display:inline-flex;flex-direction:row;padding:calc(var(--wcs-base-margin) / 4);background-color:#4d4f53;border-radius:0.6875rem}:host([mode=horizontal]){justify-content:space-between}";
 
@@ -49,6 +49,14 @@ const RadioGroup = class {
     this.wcsChange.emit({
       value: event.detail.value
     });
+    this.optionsNotDisabled.forEach((option) => {
+      if (option === event.detail.source) {
+        option.tabIndex = 0;
+      }
+      else {
+        option.tabIndex = -1;
+      }
+    });
   }
   handleKeyDown(ev) {
     if (isDownArrowKey(ev) || isUpArrowKey(ev) || isLeftArrowKey(ev) || isRightArrowKey(ev)) {
@@ -62,24 +70,20 @@ const RadioGroup = class {
       ? this.optionsNotDisabled.findIndex(o => o.checked)
       : 0;
     if (isDownArrowKey(ev) || isRightArrowKey(ev)) {
-      // Let the previous wcs-radio not accessible via the tab key
-      radiosNotDisabled[previousSelected].checked = false;
-      radiosNotDisabled[previousSelected].tabIndex = -1;
-      // Check the next wcs-radio from the previous selected and let accessible via tab key (tabIndex = 0)
+      // Check the next wcs-radio from the previous selected
       const nextOptionIndex = (previousSelected + 1) % radiosNotDisabled.length; // to return at the beginning on the list when we are on the last index
-      radiosNotDisabled[nextOptionIndex].tabIndex = 0;
-      radiosNotDisabled[nextOptionIndex].focus();
       radiosNotDisabled[nextOptionIndex].checked = true;
+      this.wcsChange.emit({
+        value: radiosNotDisabled[nextOptionIndex].value
+      });
     }
     else if (isUpArrowKey(ev) || isLeftArrowKey(ev)) {
-      // Let the previous wcs-radio not accessible via the tab key
-      radiosNotDisabled[previousSelected].checked = false;
-      radiosNotDisabled[previousSelected].tabIndex = -1;
-      // Check the previous wcs-radio from the previous selected and let accessible via tab key (tabIndex = 0)
+      // Check the previous wcs-radio from the previous selected
       const previousOptionIndex = (previousSelected - 1 + radiosNotDisabled.length) % radiosNotDisabled.length; // To return at the end of the list when we are on index=0
-      radiosNotDisabled[previousOptionIndex].tabIndex = 0;
-      radiosNotDisabled[previousOptionIndex].focus();
       radiosNotDisabled[previousOptionIndex].checked = true;
+      this.wcsChange.emit({
+        value: radiosNotDisabled[previousOptionIndex].value
+      });
     }
   }
   updateOptionsState(value, markAsChecked) {
@@ -94,8 +98,11 @@ const RadioGroup = class {
       }
     }
   }
+  async setAriaAttribute(attr, value) {
+    this.el.setAttribute(attr, value);
+  }
   render() {
-    return (h(Host, null, h("slot", { name: "option" })));
+    return (h(Host, { role: "radiogroup" }, h("slot", { name: "option" })));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/wcs-radio-group.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-radio-group.entry.js","mappings":"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","names":[],"sources":["./src/components/radio-group/radio-group.scss?tag=wcs-radio-group&encapsulation=shadow","./src/components/radio-group/radio-group.tsx"],"sourcesContent":[":host {\n    display: flex;\n}\n\n:host([mode=radio]) {\n    flex-direction: column;\n\n    ::slotted([slot=option]:first-child) {\n        margin-top: 0;\n    }\n\n    ::slotted([slot=option]:last-child) {\n        margin-bottom: 0;\n    }\n\n    ::slotted([slot=options]) {\n        margin-top: calc(var(--wcs-base-margin) / 2);\n        margin-bottom: calc(var(--wcs-base-margin) / 2);\n    }\n}\n\n:host([mode=option]) {\n    display: inline-flex;\n    flex-direction: row;\n    padding: calc(var(--wcs-base-margin) / 4);\n    background-color: #4d4f53;\n    border-radius: 0.6875rem;\n}\n\n:host([mode=horizontal]) {\n    justify-content: space-between;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { RadioGroupChangeEventDetail, RadioGroupMode } from './radio-group-interface';\nimport { RadioChosedEvent } from '../radio/radio-interface';\nimport { isDownArrowKey, isLeftArrowKey, isRightArrowKey, isUpArrowKey } from \"../../utils/helpers\";\n\n@Component({\n    tag: 'wcs-radio-group',\n    styleUrl: 'radio-group.scss',\n    shadow: true\n})\nexport class RadioGroup implements ComponentInterface {\n    @Prop() value: any | any[] | undefined | null;\n    @Prop({reflect: true, mutable: false}) name;\n    @Prop({reflect: true, mutable: false}) mode: RadioGroupMode = 'radio';\n    @Element() private el!: HTMLWcsRadioGroupElement;\n\n    /** Emitted when the value has changed. */\n    @Event() wcsChange!: EventEmitter<RadioGroupChangeEventDetail>;\n\n    @Watch('value')\n    onValueChangeHandler(newValue: any) {\n        this.updateOptionsState(newValue, true);\n    }\n\n    componentDidLoad() {\n        if (this.value) {\n            this.updateOptionsState(this.value, true);\n        }\n\n        // We set the radio group mode on all options\n        this.options.forEach(o => o.mode = this.mode);\n\n        this.optionsNotDisabled.forEach((option) => {\n            if (option.checked) {\n                option.tabIndex = 0;\n            } else {\n                option.tabIndex = -1\n            }\n        });\n\n        // If no option is already checked we made the first non-disabled option focusable\n        if (this.optionsNotDisabled.length > 0 && this.optionsNotDisabled.findIndex(o => o.tabIndex === 0) === -1) this.optionsNotDisabled[0].tabIndex = 0;\n    }\n\n    private get options(): HTMLWcsRadioElement[] {\n        const opts = this.el.querySelectorAll('wcs-radio');\n        const slot = this.el.querySelector('slot');\n        return opts.length !== 0\n            ? opts as unknown as HTMLWcsRadioElement[]\n            : slot !== null\n                ? slot.assignedElements() as HTMLWcsRadioElement[]\n                : [];\n    }\n\n    private get optionsNotDisabled(): HTMLWcsRadioElement[] {\n        return Array.from(this.options).filter(option => !option.disabled);\n    }\n\n    @Listen('wcsRadioClick')\n    selectedOptionChanged(event: CustomEvent<RadioChosedEvent>) {\n        this.updateOptionsState(event.detail.value, false);\n        this.wcsChange.emit({\n            value: event.detail.value\n        })\n    }\n\n    @Listen('keydown')\n    handleKeyDown(ev: KeyboardEvent) {\n        if (isDownArrowKey(ev) || isUpArrowKey(ev) || isLeftArrowKey(ev) || isRightArrowKey(ev)) {\n            ev.preventDefault();\n        }\n    }\n\n    @Listen('keyup')\n    async handleKeyUp(ev: KeyboardEvent) {\n        const radiosNotDisabled = this.optionsNotDisabled;\n\n        // Get the index of the currently checked radio\n        const previousSelected = this.optionsNotDisabled.findIndex(o => o.checked) >= 0\n            ? this.optionsNotDisabled.findIndex(o => o.checked)\n            : 0;\n\n        if (isDownArrowKey(ev) || isRightArrowKey(ev)) {\n            // Let the previous wcs-radio not accessible via the tab key\n            radiosNotDisabled[previousSelected].checked = false;\n            radiosNotDisabled[previousSelected].tabIndex = -1;\n\n            // Check the next wcs-radio from the previous selected and let accessible via tab key (tabIndex = 0)\n            const nextOptionIndex = (previousSelected + 1) % radiosNotDisabled.length;  // to return at the beginning on the list when we are on the last index\n            radiosNotDisabled[nextOptionIndex].tabIndex = 0;\n            radiosNotDisabled[nextOptionIndex].focus();\n            radiosNotDisabled[nextOptionIndex].checked = true;\n        } else if (isUpArrowKey(ev) || isLeftArrowKey(ev)) {\n            // Let the previous wcs-radio not accessible via the tab key\n            radiosNotDisabled[previousSelected].checked = false;\n            radiosNotDisabled[previousSelected].tabIndex = -1;\n\n            // Check the previous wcs-radio from the previous selected and let accessible via tab key (tabIndex = 0)\n            const previousOptionIndex = (previousSelected - 1 + radiosNotDisabled.length) % radiosNotDisabled.length; // To return at the end of the list when we are on index=0\n            radiosNotDisabled[previousOptionIndex].tabIndex = 0;\n            radiosNotDisabled[previousOptionIndex].focus();\n            radiosNotDisabled[previousOptionIndex].checked = true;\n        }\n    }\n\n    private updateOptionsState(value: string, markAsChecked: boolean) {\n        for (const option of this.options) {\n            if (option.value !== value) {\n                option.removeAttribute('checked');\n            } else {\n                if (markAsChecked) {\n                    option.setAttribute('checked', '');\n                }\n            }\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <slot name=\"option\"/>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}
+{"file":"wcs-radio-group.entry.js","mappings":"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","names":[],"sources":["./src/components/radio-group/radio-group.scss?tag=wcs-radio-group&encapsulation=shadow","./src/components/radio-group/radio-group.tsx"],"sourcesContent":[":host {\n    display: flex;\n}\n\n:host([mode=radio]) {\n    flex-direction: column;\n\n    ::slotted([slot=option]:first-child) {\n        margin-top: 0;\n    }\n\n    ::slotted([slot=option]:last-child) {\n        margin-bottom: 0;\n    }\n\n    ::slotted([slot=options]) {\n        margin-top: calc(var(--wcs-base-margin) / 2);\n        margin-bottom: calc(var(--wcs-base-margin) / 2);\n    }\n}\n\n:host([mode=option]) {\n    display: inline-flex;\n    flex-direction: row;\n    padding: calc(var(--wcs-base-margin) / 4);\n    background-color: #4d4f53;\n    border-radius: 0.6875rem;\n}\n\n:host([mode=horizontal]) {\n    justify-content: space-between;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen, Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { RadioGroupChangeEventDetail, RadioGroupMode } from './radio-group-interface';\nimport { RadioChosedEvent } from '../radio/radio-interface';\nimport { isDownArrowKey, isLeftArrowKey, isRightArrowKey, isUpArrowKey } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n@Component({\n    tag: 'wcs-radio-group',\n    styleUrl: 'radio-group.scss',\n    shadow: true\n})\nexport class RadioGroup implements ComponentInterface, MutableAriaAttribute {\n    @Prop() value: any | any[] | undefined | null;\n    @Prop({reflect: true, mutable: false}) name;\n    @Prop({reflect: true, mutable: false}) mode: RadioGroupMode = 'radio';\n    @Element() private el!: HTMLWcsRadioGroupElement;\n\n    /** Emitted when the value has changed. */\n    @Event() wcsChange!: EventEmitter<RadioGroupChangeEventDetail>;\n\n    @Watch('value')\n    onValueChangeHandler(newValue: any) {\n        this.updateOptionsState(newValue, true);\n    }\n\n    componentDidLoad() {\n        if (this.value) {\n            this.updateOptionsState(this.value, true);\n        }\n\n        // We set the radio group mode on all options\n        this.options.forEach(o => o.mode = this.mode);\n\n        this.optionsNotDisabled.forEach((option) => {\n            if (option.checked) {\n                option.tabIndex = 0;\n            } else {\n                option.tabIndex = -1\n            }\n        });\n\n        // If no option is already checked we made the first non-disabled option focusable\n        if (this.optionsNotDisabled.length > 0 && this.optionsNotDisabled.findIndex(o => o.tabIndex === 0) === -1) this.optionsNotDisabled[0].tabIndex = 0;\n    }\n\n    private get options(): HTMLWcsRadioElement[] {\n        const opts = this.el.querySelectorAll('wcs-radio');\n        const slot = this.el.querySelector('slot');\n        return opts.length !== 0\n            ? opts as unknown as HTMLWcsRadioElement[]\n            : slot !== null\n                ? slot.assignedElements() as HTMLWcsRadioElement[]\n                : [];\n    }\n\n    private get optionsNotDisabled(): HTMLWcsRadioElement[] {\n        return Array.from(this.options).filter(option => !option.disabled);\n    }\n\n    @Listen('wcsRadioClick')\n    selectedOptionChanged(event: CustomEvent<RadioChosedEvent>) {\n        this.updateOptionsState(event.detail.value, false);\n        this.wcsChange.emit({\n            value: event.detail.value\n        });\n\n        this.optionsNotDisabled.forEach((option) => {\n            if(option === event.detail.source) {\n                option.tabIndex = 0;\n            } else {\n                option.tabIndex = -1;\n            }\n        });\n    }\n\n    @Listen('keydown')\n    handleKeyDown(ev: KeyboardEvent) {\n        if (isDownArrowKey(ev) || isUpArrowKey(ev) || isLeftArrowKey(ev) || isRightArrowKey(ev)) {\n            ev.preventDefault();\n        }\n    }\n\n    @Listen('keyup')\n    async handleKeyUp(ev: KeyboardEvent) {\n        const radiosNotDisabled = this.optionsNotDisabled;\n\n        // Get the index of the currently checked radio\n        const previousSelected = this.optionsNotDisabled.findIndex(o => o.checked) >= 0\n            ? this.optionsNotDisabled.findIndex(o => o.checked)\n            : 0;\n\n        if (isDownArrowKey(ev) || isRightArrowKey(ev)) {\n            // Check the next wcs-radio from the previous selected\n            const nextOptionIndex = (previousSelected + 1) % radiosNotDisabled.length;  // to return at the beginning on the list when we are on the last index\n            radiosNotDisabled[nextOptionIndex].checked = true;\n            this.wcsChange.emit({\n                value: radiosNotDisabled[nextOptionIndex].value\n            });\n        } else if (isUpArrowKey(ev) || isLeftArrowKey(ev)) {\n            // Check the previous wcs-radio from the previous selected\n            const previousOptionIndex = (previousSelected - 1 + radiosNotDisabled.length) % radiosNotDisabled.length; // To return at the end of the list when we are on index=0\n            radiosNotDisabled[previousOptionIndex].checked = true;\n            this.wcsChange.emit({\n                value: radiosNotDisabled[previousOptionIndex].value\n            });\n        }\n    }\n\n    private updateOptionsState(value: string, markAsChecked: boolean) {\n        for (const option of this.options) {\n            if (option.value !== value) {\n                option.removeAttribute('checked');\n            } else {\n                if (markAsChecked) {\n                    option.setAttribute('checked', '');\n                }\n            }\n        }\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string) {\n        this.el.setAttribute(attr, value);\n    }\n\n    render() {\n        return (\n            <Host role={\"radiogroup\"}>\n                <slot name=\"option\"/>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}

package/dist/esm/wcs-radio.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-dc4d96d4.js';
-import { i as isSpaceKey, a as isEnterKey } from './helpers-1d55b67f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f282598.js';
+import { i as isSpaceKey, a as isEnterKey } from './helpers-a21ae7d0.js';
 
-const radioCss = ":host{width:fit-content}:host([mode=radio]:focus-within){transition:none;outline:2px dashed var(--wcs-primary);outline-offset:0;border-radius:0.5rem}:host([mode=horizontal]:focus-within){transition:none;outline:2px dashed var(--wcs-primary);outline-offset:2px;border-radius:0.5rem}:host([mode=radio]) input,:host([mode=horizontal]) input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([mode=radio]) label,:host([mode=horizontal]) label{margin-bottom:0;color:var(--wcs-text-medium);background-color:transparent;font-weight:500 !important;display:inline-block}:host([mode=radio]) label:before,:host([mode=horizontal]) label:before{border-radius:50%;border:2px solid var(--wcs-text-disabled);position:relative;width:1.125rem;height:1.125rem;pointer-events:none;content:\"\";background-color:var(--wcs-white)}:host([mode=radio]) label:after,:host([mode=horizontal]) label:after{transition:0.175s ease-in-out;position:relative;width:1.125rem;height:1.125rem;content:\"\";background:no-repeat 50%/50% 50%}:host([disabled]) label{color:var(--wcs-text-disabled);cursor:not-allowed}:host(:not([disabled])) label{cursor:pointer}:host([mode=radio][checked]) label,:host([mode=horizontal][checked]) label{color:var(--wcs-primary)}:host([mode=radio][checked]) label:before,:host([mode=horizontal][checked]) label:before{border-color:var(--wcs-primary);background-color:var(--wcs-primary);outline:solid 2px var(--wcs-white);outline-offset:-4px}:host([mode=radio]:hover):not([disabled]) label,:host([mode=horizontal]:hover):not([disabled]) label{color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label:before,:host([mode=horizontal]:hover):not([disabled]) label:before{border-color:var(--wcs-primary)}:host([mode=radio]) label{padding:0.125rem;border:none;transition:0.175s ease-in-out}:host([mode=radio]) label:before{transition:0.175s ease-in-out;margin-right:var(--wcs-base-margin);display:inline-block;top:3px;box-sizing:border-box}:host([mode=radio]) label:empty::before{margin-right:0}:host([mode=horizontal]){height:fit-content}:host([mode=horizontal]) label:before{transition:background-color 0.175s ease-in-out;margin:auto auto var(--wcs-base-margin);display:block}:host([mode=horizontal]) label:empty::before{margin-bottom:0}:host([mode=option]){padding:var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);font-weight:500 !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:5px calc(2 * var(--wcs-base-margin));margin-bottom:0;color:var(--wcs-white);white-space:nowrap;border-radius:0.4375rem;transition:0.175s ease-in-out}:host([mode=option]:focus-within) label{outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:0.4375rem}:host([mode=option][checked]) label{font-weight:500 !important;color:var(--wcs-primary);background-color:var(--wcs-white)}";
+const radioCss = ":host{width:fit-content}:host([mode=radio]) input,:host([mode=horizontal]) input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([mode=radio]) label,:host([mode=horizontal]) label{margin-bottom:0;color:var(--wcs-text-medium);background-color:transparent;font-weight:500 !important;display:inline-block}:host([mode=radio]) label:before,:host([mode=horizontal]) label:before{border-radius:50%;border:2px solid var(--wcs-text-disabled);position:relative;width:1.125rem;height:1.125rem;pointer-events:none;content:\"\";background-color:var(--wcs-white)}:host([mode=radio]) label:after,:host([mode=horizontal]) label:after{transition:0.175s ease-in-out;position:relative;width:1.125rem;height:1.125rem;content:\"\";background:no-repeat 50%/50% 50%}:host([mode=radio]) input:focus-visible+label,:host([mode=horizontal]) input:focus-visible+label{transition:none;outline:2px dashed var(--wcs-primary);outline-offset:2px;border-radius:0.5rem}:host([disabled]) label{color:var(--wcs-text-disabled);cursor:not-allowed}:host(:not([disabled])) label{cursor:pointer}:host([mode=radio][checked]) label,:host([mode=horizontal][checked]) label{color:var(--wcs-primary)}:host([mode=radio][checked]) label:before,:host([mode=horizontal][checked]) label:before{border-color:var(--wcs-primary);background-color:var(--wcs-primary);outline:solid 2px var(--wcs-white);outline-offset:-4px}:host([mode=radio]:hover):not([disabled]) label,:host([mode=horizontal]:hover):not([disabled]) label{color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label:before,:host([mode=horizontal]:hover):not([disabled]) label:before{border-color:var(--wcs-primary)}:host([mode=radio]) label{padding:0.125rem;border:none;transition:0.175s ease-in-out}:host([mode=radio]) label:before{transition:0.175s ease-in-out;margin-right:var(--wcs-base-margin);display:inline-block;top:3px;box-sizing:border-box}:host([mode=radio]) label:empty::before{margin-right:0}:host([mode=horizontal]){height:fit-content}:host([mode=horizontal]) label:before{transition:background-color 0.175s ease-in-out;margin:auto auto var(--wcs-base-margin);display:block}:host([mode=horizontal]) label:empty::before{margin-bottom:0}:host([mode=option]){padding:var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);font-weight:500 !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:5px calc(2 * var(--wcs-base-margin));margin-bottom:0;color:var(--wcs-white);white-space:nowrap;border-radius:0.4375rem;transition:0.175s ease-in-out}:host([mode=option]) input:focus-visible+label{outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:0.4375rem}:host([mode=option][checked]) label{font-weight:500 !important;color:var(--wcs-primary);background-color:var(--wcs-white)}";
 
 const Radio = class {
   constructor(hostRef) {
@@ -23,10 +23,17 @@ const Radio = class {
   }
   checkedChanged(newValue) {
     if (newValue) {
-      this.inputEl.click();
-    }
-    else {
-      this.inputEl.click();
+      if (this.el.parentElement.tagName === 'WCS-RADIO-GROUP') {
+        Array.from(this.el.parentElement.querySelectorAll('wcs-radio'))
+          .filter(radio => radio.name === this.el.name)
+          .filter(radio => radio !== this.el)
+          .forEach(radio => {
+          radio.checked = false;
+          radio.tabIndex = -1;
+        });
+        this.el.tabIndex = 0;
+        this.el.focus();
+      }
     }
   }
   componentWillLoad() {

package/dist/esm/wcs-radio.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-radio.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,63FAA63F;;MCuBj4F,KAAK;;;;IACN,YAAO,GAAG,UAAU,cAAc,EAAE,EAAE,CAAC;gBAGiB,OAAO;;;mBAOvB,KAAK;oBAIjB,KAAK;;;EAOzC,SAAS,CAAC,MAAqB;IAC3B,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE;MAChE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MACpB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACxB;GACJ;EAGD,cAAc,CAAC,QAAiB;IAC5B,IAAG,QAAQ,EAAE;MACT,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACxB;SAAM;MACH,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACxB;GACJ;EAED,iBAAiB;IACb,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;;MAE1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,IAAI,EAAE,CAAC;KACxC;GACJ;EAED,gBAAgB;IACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC;MACrC,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACvB,CAAC,CAAA;GACL;EAED,oBAAoB;IAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;MACpB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,MAAM,EAAE,IAAI,CAAC,EAAE;MACf,KAAK,EAAE,IAAI,CAAC,KAAK;KACpB,CAAC,CAAC;GACN;EAED,MAAM;IAEF,QACI,EAAC,IAAI,kBAAC,IAAI,EAAC,QAAQ,KAAM,IAAI,CAAC,QAAQ,GAAG,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAC,GAAG,EAAE,IACxD,aACI,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,kBAC9B,GAAG,IAAI,CAAC,OAAO,EAAE,GACjC,EACF,aAAO,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,IAAG,IAAI,CAAC,KAAK,CAAS,CACpD,EACT;GACL;;;;;;;AAGL,IAAI,cAAc,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/radio/radio.scss?tag=wcs-radio&encapsulation=shadow","./src/components/radio/radio.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    width: fit-content;\n}\n\n:host([mode=radio]:focus-within) {\n    transition: none;\n    @include focus-outline($border-radius: 0.5rem, $outline-offset: 0);\n}\n\n:host([mode=horizontal]:focus-within) {\n    transition: none;\n    @include focus-outline($border-radius: 0.5rem, $outline-offset: 2px);\n}\n\n:host([mode=radio]),\n:host([mode=horizontal]) {\n    input {\n        position: absolute;\n        opacity: 0;\n        height: 1px;\n        width: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n    }\n\n    label {\n        margin-bottom: 0;\n        color: var(--wcs-text-medium);\n        background-color: transparent;\n        font-weight: 500 !important;\n        display: inline-block;\n\n        &:before {\n            border-radius: 50%;\n            border: 2px solid var(--wcs-text-disabled);\n            position: relative;\n            width: 1.125rem;\n            height: 1.125rem;\n            pointer-events: none;\n            content: \"\";\n            background-color: var(--wcs-white);\n        }\n\n        &:after {\n            transition: 0.175s ease-in-out;\n            position: relative;\n            width: 1.125rem;\n            height: 1.125rem;\n            content: \"\";\n            background: no-repeat 50% / 50% 50%;\n        }\n    }\n}\n\n:host([disabled]) {\n    label {\n        color: var(--wcs-text-disabled);\n        cursor: not-allowed;\n    }\n}\n\n:host(:not([disabled])) {\n    label {\n        cursor: pointer;\n    }\n}\n\n:host([mode=radio][checked]),\n:host([mode=horizontal][checked]) {\n    label {\n        color: var(--wcs-primary);\n\n        &:before {\n            border-color: var(--wcs-primary);\n            background-color: var(--wcs-primary);\n            outline: solid 2px var(--wcs-white);\n            outline-offset: -4px;\n        }\n    }\n}\n\n:host([mode=radio]:hover):not([disabled]),\n:host([mode=horizontal]:hover):not([disabled]) {\n    label {\n        color: var(--wcs-primary);\n\n        &:before {\n            border-color: var(--wcs-primary);\n        }\n    }\n}\n\n:host([mode=radio]) {\n    label {\n        padding: 0.125rem;\n        border: none;\n        transition: 0.175s ease-in-out;\n\n        &:before {\n            transition: 0.175s ease-in-out;\n            margin-right: var(--wcs-base-margin);\n            display: inline-block;\n            top: 3px;\n            box-sizing: border-box;\n        }\n\n        &:empty::before {\n            margin-right: 0;\n        }\n    }\n}\n\n:host([mode=horizontal]) {\n    height: fit-content;\n    label {\n        &:before {\n            transition: background-color 0.175s ease-in-out;\n            margin: auto auto var(--wcs-base-margin);\n            display: block;\n        }\n\n        &:empty::before {\n            margin-bottom: 0;\n        }\n    }\n}\n\n:host([mode=option]) {\n    padding: var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);\n    font-weight: 500 !important;\n\n    input {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n        box-sizing: border-box;\n        padding: 0;\n    }\n\n    label {\n        padding: 5px calc(2 * var(--wcs-base-margin));\n        margin-bottom: 0;\n        color: var(--wcs-white);\n        white-space: nowrap;\n        border-radius: 0.4375rem;\n        transition: 0.175s ease-in-out;\n    }\n}\n\n:host([mode=option]:focus-within) {\n    label {\n        @include focus-outline(var(--wcs-white), 0.4375rem, 0.1rem);\n    }\n}\n\n:host([mode=option][checked]) {\n    label {\n        font-weight: 500 !important;\n        color: var(--wcs-primary);\n        background-color: var(--wcs-white);\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    h,\n    Host,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    Listen,\n    Watch\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { isEnterKey, isSpaceKey } from '../../utils/helpers';\n\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Radio implements ComponentInterface {\n    private inputId = `wcs-rb-${radioButtonIds++}`;\n    private inputEl: HTMLInputElement;\n    @Element() private el!: HTMLWcsRadioElement;\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n    @Prop({ mutable: true, reflect: true }) label: string;\n    /**\n     * If `true`, the radio is selected. \n     */\n    @Prop({mutable: true, reflect: true}) checked = false;\n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ mutable: true }) disabled = false;\n    // FIXME renommer l'évènement c'est pas un onclick mais un onchange\n    @Event({eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n    \n    @Prop() name: string;\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event) || isEnterKey(_event)) && !this.el.checked) {\n            this.checked = true;\n            this.inputEl.click(); // input[radio].checked = true does not trigger any event => input[radio].click() emit a change event\n        }\n    }\n    \n    @Watch(\"checked\")\n    checkedChanged(newValue: boolean) {\n        if(newValue) {\n            this.inputEl.click();\n        } else {\n            this.inputEl.click();\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n    }\n\n    componentDidLoad() {\n        this.inputEl = this.el.shadowRoot.querySelector('input');\n        this.inputEl.addEventListener('change', _ => {\n            this.emitRadioChangeEvent();\n            this.checked = true;\n        })\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    render() {\n        \n        return (\n            <Host slot=\"option\" {...(this.disabled ? {tabIndex: -1} : {})}>\n                <input\n                    id={this.inputId}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked} // Initial checked state of native input\n                    disabled={this.disabled}\n                    aria-disabled={this.disabled ? 'true' : null}\n                    aria-checked={`${this.checked}`}\n                />\n                <label htmlFor={`${this.inputId}`}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"],"version":3}
+{"file":"wcs-radio.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,k0FAAk0F;;MCuBt0F,KAAK;;;;IACN,YAAO,GAAG,UAAU,cAAc,EAAE,EAAE,CAAC;gBAGiB,OAAO;;;mBAOvB,KAAK;oBAIjB,KAAK;;;EAUzC,SAAS,CAAC,MAAqB;IAC3B,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE;MAChE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MACpB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACxB;GACJ;EAGD,cAAc,CAAC,QAAiB;IAC5B,IAAI,QAAQ,EAAE;MACV,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,KAAK,iBAAiB,EAAE;QACrD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;WAC5D,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC;WAC5C,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,EAAE,CAAC;WAClC,OAAO,CAAC,KAAK;UACV,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;UACtB,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;SACvB,CAAC,CAAC;QACL,IAAI,CAAC,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;OACnB;KACJ;GACJ;EAED,iBAAiB;IACb,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;;MAE1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,IAAI,EAAE,CAAC;KACxC;GACJ;EAED,gBAAgB;IACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC;MACrC,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACvB,CAAC,CAAA;GACL;EAED,oBAAoB;IAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;MACpB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,MAAM,EAAE,IAAI,CAAC,EAAE;MACf,KAAK,EAAE,IAAI,CAAC,KAAK;KACpB,CAAC,CAAC;GACN;EAED,MAAM;IAEF,QACI,EAAC,IAAI,kBAAC,IAAI,EAAC,QAAQ,KAAM,IAAI,CAAC,QAAQ,GAAG,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAC,GAAG,EAAE,IACxD,aACI,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,kBAC9B,GAAG,IAAI,CAAC,OAAO,EAAE,GACjC,EACF,aAAO,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,IAAG,IAAI,CAAC,KAAK,CAAS,CACpD,EACT;GACL;;;;;;;AAGL,IAAI,cAAc,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/radio/radio.scss?tag=wcs-radio&encapsulation=shadow","./src/components/radio/radio.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    width: fit-content;\n}\n\n:host([mode=radio]),\n:host([mode=horizontal]) {\n    input {\n        position: absolute;\n        opacity: 0;\n        height: 1px;\n        width: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n    }\n\n    label {\n        margin-bottom: 0;\n        color: var(--wcs-text-medium);\n        background-color: transparent;\n        font-weight: 500 !important;\n        display: inline-block;\n\n        &:before {\n            border-radius: 50%;\n            border: 2px solid var(--wcs-text-disabled);\n            position: relative;\n            width: 1.125rem;\n            height: 1.125rem;\n            pointer-events: none;\n            content: \"\";\n            background-color: var(--wcs-white);\n        }\n\n        &:after {\n            transition: 0.175s ease-in-out;\n            position: relative;\n            width: 1.125rem;\n            height: 1.125rem;\n            content: \"\";\n            background: no-repeat 50% / 50% 50%;\n        }\n    }\n    \n    input:focus-visible + label {\n        transition: none;\n        @include focus-outline($border-radius: 0.5rem, $outline-offset: 2px);\n    }\n}\n\n:host([disabled]) {\n    label {\n        color: var(--wcs-text-disabled);\n        cursor: not-allowed;\n    }\n}\n\n:host(:not([disabled])) {\n    label {\n        cursor: pointer;\n    }\n}\n\n:host([mode=radio][checked]),\n:host([mode=horizontal][checked]) {\n    label {\n        color: var(--wcs-primary);\n\n        &:before {\n            border-color: var(--wcs-primary);\n            background-color: var(--wcs-primary);\n            outline: solid 2px var(--wcs-white);\n            outline-offset: -4px;\n        }\n    }\n}\n\n:host([mode=radio]:hover):not([disabled]),\n:host([mode=horizontal]:hover):not([disabled]) {\n    label {\n        color: var(--wcs-primary);\n\n        &:before {\n            border-color: var(--wcs-primary);\n        }\n    }\n}\n\n:host([mode=radio]) {\n    label {\n        padding: 0.125rem;\n        border: none;\n        transition: 0.175s ease-in-out;\n\n        &:before {\n            transition: 0.175s ease-in-out;\n            margin-right: var(--wcs-base-margin);\n            display: inline-block;\n            top: 3px;\n            box-sizing: border-box;\n        }\n\n        &:empty::before {\n            margin-right: 0;\n        }\n    }\n}\n\n:host([mode=horizontal]) {\n    height: fit-content;\n    label {\n        &:before {\n            transition: background-color 0.175s ease-in-out;\n            margin: auto auto var(--wcs-base-margin);\n            display: block;\n        }\n\n        &:empty::before {\n            margin-bottom: 0;\n        }\n    }\n}\n\n:host([mode=option]) {\n    padding: var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);\n    font-weight: 500 !important;\n\n    input {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n        box-sizing: border-box;\n        padding: 0;\n    }\n\n    label {\n        padding: 5px calc(2 * var(--wcs-base-margin));\n        margin-bottom: 0;\n        color: var(--wcs-white);\n        white-space: nowrap;\n        border-radius: 0.4375rem;\n        transition: 0.175s ease-in-out;\n    }\n\n    input:focus-visible + label {\n        @include focus-outline(var(--wcs-white), 0.4375rem, 0.1rem);\n    }\n}\n\n:host([mode=option][checked]) {\n    label {\n        font-weight: 500 !important;\n        color: var(--wcs-primary);\n        background-color: var(--wcs-white);\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    h,\n    Host,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    Listen,\n    Watch\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { isEnterKey, isSpaceKey } from '../../utils/helpers';\n\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Radio implements ComponentInterface {\n    private inputId = `wcs-rb-${radioButtonIds++}`;\n    private inputEl: HTMLInputElement;\n    @Element() private el!: HTMLWcsRadioElement;\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n    @Prop({ mutable: true, reflect: true }) label: string;\n    /**\n     * If `true`, the radio is selected. \n     */\n    @Prop({mutable: true, reflect: true}) checked = false;\n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ mutable: true }) disabled = false;\n\n    @Event({eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    /**\n     * Giving every radio button the same name is mandatory to group them\n     */\n    @Prop() name: string;\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event) || isEnterKey(_event)) && !this.el.checked) {\n            this.checked = true;\n            this.inputEl.click(); // input[radio].checked = true does not trigger any event => input[radio].click() emit a change event\n        }\n    }\n    \n    @Watch(\"checked\")\n    checkedChanged(newValue: boolean) {\n        if (newValue) {\n            if (this.el.parentElement.tagName === 'WCS-RADIO-GROUP') {\n                Array.from(this.el.parentElement.querySelectorAll('wcs-radio'))\n                  .filter(radio => radio.name === this.el.name)\n                  .filter(radio => radio !== this.el)\n                  .forEach(radio => {\n                      radio.checked = false;\n                      radio.tabIndex = -1;\n                  });\n                this.el.tabIndex = 0;\n                this.el.focus();\n            }\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n    }\n\n    componentDidLoad() {\n        this.inputEl = this.el.shadowRoot.querySelector('input');\n        this.inputEl.addEventListener('change', _ => {\n            this.emitRadioChangeEvent();\n            this.checked = true;\n        })\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    render() {\n        \n        return (\n            <Host slot=\"option\" {...(this.disabled ? {tabIndex: -1} : {})}>\n                <input\n                    id={this.inputId}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked} // Initial checked state of native input\n                    disabled={this.disabled}\n                    aria-disabled={this.disabled ? 'true' : null}\n                    aria-checked={`${this.checked}`}\n                />\n                <label htmlFor={`${this.inputId}`}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"],"version":3}