wcs-core 4.2.0 → 5.0.0

package/dist/collection/components/progress-radial/progress-radial.js

@@ -1,19 +1,30 @@
 import { h } from '@stencil/core';
+/**
+ * The progress-radial component is a circular progress bar that indicates the current completion of a task.
+ */
 export class ProgressRadial {
   constructor() {
+    /** 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`,
     };
   }
   static get is() { return "wcs-progress-radial"; }
@@ -42,7 +53,7 @@ export class ProgressRadial {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "The size of the progress radial (in px)"
         },
         "attribute": "size",
         "reflect": false,
@@ -60,7 +71,7 @@ export class ProgressRadial {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Whether the component should display the % label inside"
         },
         "attribute": "show-label",
         "reflect": false,
@@ -78,7 +89,7 @@ export class ProgressRadial {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "The value of the progress radial. Prefer values between 0 and 100."
         },
         "attribute": "value",
         "reflect": false,

package/dist/collection/components/progress-radial/progress-radial.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-radial.js","sourceRoot":"","sources":["../../../src/components/progress-radial/progress-radial.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAsB,CAAC,EAAE,MAAM,eAAe,CAAC;AAOvE,MAAM,OAAO,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,OAAO,CACH,WAAK,KAAK,EAAE,iBAAiB,oBAAiB,iBAAiB;MAC3D,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;QAE1B,cAAQ,KAAK,EAAE,uBAAuB,EAAC,EAAE,EAAG,QAAQ,EAAE,EAAE,EAAG,QAAQ,EAAE,CAAC,EAAE,IAAI,kBAAe,IAAI,GAAG;QAClG,cAAQ,KAAK,EAAE,uBAAuB,EAAC,EAAE,EAAG,QAAQ,EAAE,EAAE,EAAG,QAAQ,EAAE,CAAC,EAAE,IAAI,kBAAe,IAAI,GAAG,CAChG;MACL,IAAI,CAAC,SAAS;QACX,WAAK,KAAK,EAAE,uBAAuB,eAAY,OAAO;UAAC;YAAM,yBAAiB,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ;YAAA,mBAAY,CAAO,CAAM;MAE3I,0BAAkB,SAAS,EAAC,KAAK,EAAE,SAAS,EAAC,IAAI,EAAE,OAAO,EAAC,KAAK,EAAG,IAAI,CAAC,KAAK,GAAI,CAC/E,CACT,CAAC;EACN,CAAC;EAED,WAAW;IACP,OAAO;MACH,kBAAkB,EAAE,SAAS;MAC7B,mBAAmB,EAAE,GAAG,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,OAAO,EAAE;KACnE,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["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":"progress-radial.js","sourceRoot":"","sources":["../../../src/components/progress-radial/progress-radial.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAsB,CAAC,EAAE,MAAM,eAAe,CAAC;AAEvE;;GAEG;AAMH,MAAM,OAAO,cAAc;;IACvB,wHAAwH;IAChH,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,OAAO,CACH,WAAK,KAAK,EAAC,iBAAiB,oBAAgB,iBAAiB,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;MAC/E,WAAK,KAAK,EAAC,wBAAwB,eACrB,QAAQ,EAClB,OAAO,EAAE,OAAO,mBAAmB,IAAI,mBAAmB,EAAE,EAC5D,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;QACrB,cAAQ,KAAK,EAAC,uBAAuB,EAAC,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAC,IAAI,kBAAc,IAAI,GAAG;QAC7F,cAAQ,KAAK,EAAC,uBAAuB,EAAC,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAC,IAAI,kBAAc,IAAI,GAAG,CAC/F;MACL,IAAI,CAAC,SAAS;QACX,WAAK,KAAK,EAAC,uBAAuB,eAAW,OAAO;UAChD;YACI,yBAAgB,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ;YAAA,mBAAY,CACzD,CACL;MAEV,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,CACT,CAAC;EACN,CAAC;EAED,WAAW;IACP,OAAO;MACH,kBAAkB,EAAE,SAAS;MAC7B,mBAAmB,EAAE,GAAG,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,OAAO,EAAE;KACnE,CAAC;EACN,CAAC;EAED,OAAO;IACH,OAAO;MACH,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;MAC3B,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;KAC/B,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["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"]}

package/dist/collection/components/radio/radio.css

@@ -2,20 +2,6 @@
   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;
@@ -54,6 +40,13 @@
   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);
@@ -132,8 +125,7 @@
   border-radius: 0.4375rem;
   transition: 0.175s ease-in-out;
 }
-
-:host([mode=option]:focus-within) label {
+:host([mode=option]) input:focus-visible + label {
   outline: 2px dashed var(--wcs-white);
   outline-offset: 0.1rem;
   border-radius: 0.4375rem;

package/dist/collection/components/radio/radio.js

@@ -18,10 +18,17 @@ export class Radio {
   }
   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() {
@@ -167,7 +174,7 @@ export class Radio {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Giving every radio button the same name is mandatory to group them"
         },
         "attribute": "name",
         "reflect": false

package/dist/collection/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EAET,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,MAAM,EACN,KAAK,EACR,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAS7D,MAAM,OAAO,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,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE;MAChE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MACpB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,qGAAqG;KAC9H;EACL,CAAC;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;EACL,CAAC;EAED,iBAAiB;IACb,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC1B,yDAAyD;MACzD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,IAAI,EAAE,CAAC;KACxC;EACL,CAAC;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,CAAC,EAAE;MACxC,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACxB,CAAC,CAAC,CAAA;EACN,CAAC;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;EACP,CAAC;EAED,MAAM;IAEF,OAAO,CACH,EAAC,IAAI,kBAAC,IAAI,EAAC,QAAQ,IAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC;MACzD,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,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,kBAC9B,GAAG,IAAI,CAAC,OAAO,EAAE,GACjC;MACF,aAAO,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,IAAG,IAAI,CAAC,KAAK,CAAS,CACpD,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ;AAED,IAAI,cAAc,GAAG,CAAC,CAAC","sourcesContent":["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":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/radio-group/radio-group.js

@@ -44,6 +44,14 @@ export class RadioGroup {
     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)) {
@@ -57,24 +65,20 @@ export class RadioGroup {
       ? 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) {
@@ -89,8 +93,11 @@ export class RadioGroup {
       }
     }
   }
+  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" })));
   }
   static get is() { return "wcs-radio-group"; }
   static get encapsulation() { return "shadow"; }
@@ -188,6 +195,36 @@ export class RadioGroup {
         }
       }];
   }
+  static get methods() {
+    return {
+      "setAriaAttribute": {
+        "complexType": {
+          "signature": "(attr: AriaAttributeName, value: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "AriaAttributeName": {
+              "location": "import",
+              "path": "../../utils/mutable-aria-attribute"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{

package/dist/collection/components/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["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":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/select/select-interface.js

@@ -1,3 +1,13 @@
+/**
+ * Default filtering function. Compares the string start of wcs-select-option element's text content
+ * with your filter input.
+ * @param optionEl - wcs-select-option element
+ * @param filter - input filter field value
+ * @constructor
+ */
+export const WcsDefaultSelectFilterFn = (optionEl, filter) => {
+  return optionEl.textContent.toLowerCase().startsWith(filter.toLowerCase());
+};
 export const WcsSelectSizeValue = ['m', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
 export function isWcsSelectSize(size) {
   // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues

package/dist/collection/components/select/select-interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-interface.js","sourceRoot":"","sources":["../../../src/components/select/select-interface.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,GAAG,EAAE,GAAG,CAAU,CAAC,CAAC,iGAAiG;AAIxJ,MAAM,UAAU,eAAe,CAAC,IAAY;EACxC,0EAA0E;EAC1E,OAAO,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface SelectChangeEventDetail {\n    value: any | any[] | undefined | null;\n}\n\nexport const WcsSelectSizeValue = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsSelectSize = Extract<WcsSize, typeof WcsSelectSizeValue[number]>;\n\nexport function isWcsSelectSize(size: string): size is WcsSelectSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsSelectSizeValue.includes(size);\n}\n"]}
+{"version":3,"file":"select-interface.js","sourceRoot":"","sources":["../../../src/components/select/select-interface.ts"],"names":[],"mappings":"AAYA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAsB,CAAC,QAAQ,EAAE,MAAM,EAAW,EAAE;EACrF,OAAO,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;AAC/E,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,GAAG,EAAE,GAAG,CAAU,CAAC,CAAC,iGAAiG;AAIxJ,MAAM,UAAU,eAAe,CAAC,IAAY;EACxC,0EAA0E;EAC1E,OAAO,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface SelectChangeEventDetail {\n    value: any | any[] | undefined | null;\n}\n\nexport interface SelectFilerChangeEventDetail {\n    value: string | number | undefined | null;\n}\n\nexport type WcsSelectFilterFn = (optionEl: HTMLWcsSelectOptionElement, filter: string) => boolean;\n\n/**\n * Default filtering function. Compares the string start of wcs-select-option element's text content\n * with your filter input. \n * @param optionEl - wcs-select-option element\n * @param filter - input filter field value\n * @constructor\n */\nexport const WcsDefaultSelectFilterFn: WcsSelectFilterFn = (optionEl, filter): boolean => {\n    return optionEl.textContent.toLowerCase().startsWith(filter.toLowerCase());\n}\n\nexport const WcsSelectSizeValue = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsSelectSize = Extract<WcsSize, typeof WcsSelectSizeValue[number]>;\n\nexport function isWcsSelectSize(size: string): size is WcsSelectSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsSelectSizeValue.includes(size);\n}\n"]}