@cas-smartdesign/radio-button-group 4.1.1 → 4.3.0

package/dist/radio-button-group.d.ts

@@ -47,6 +47,8 @@ export declare class RadioButtonGroup extends LitElement {
     private handleButtonClick;
     private fireValueChangeEvent;
     private handleKeyDown;
+    private focusNext;
+    private focusPrevious;
     private getNextFocusIndex;
     private getPreviousFocusIndex;
     private isFocusable;

package/dist/radio-button-group.mjs

@@ -1,11 +1,11 @@
-import { LitElement as b, unsafeCSS as v, css as g, html as f } from "lit";
+import { LitElement as b, unsafeCSS as v, css as g, html as p } from "lit";
 import { property as r } from "lit/decorators/property.js";
 import { ifDefined as k } from "lit/directives/if-defined.js";
 import { ValidationLevel as x } from "@cas-smartdesign/field-validation-message";
 const y = ":host{display:block}:host,.label,.checkbox{outline:none}:host([disabled]){pointer-events:none}:host([disabled]) .root{opacity:.6;cursor:default;filter:grayscale(100%)}:host(:not([disabled])[focused]) .highlight{display:block!important}:host([checked]) circle.inner{display:block!important}:host([checked]) circle.outer{stroke:var(--sd-radio-button-checked-color, #1467ba)!important}:host([oneline]) .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.root{display:inline-flex;align-items:center;vertical-align:middle;width:100%;padding-top:6px;padding-bottom:6px}.root .radio-button-container{position:relative;display:inline-block;width:28px;height:28px;box-sizing:border-box;cursor:pointer;margin-right:5px;flex-shrink:0}.root .radio-button-container input{position:absolute;top:0;left:0;opacity:0}.root .radio-button-container circle.highlight{stroke:var(--sd-radio-button-highlight-color, rgba(20, 103, 186, .3))}.root .radio-button-container circle.inner{fill:var(--sd-radio-button-checked-color, #1467ba)}.root .radio-button-container circle.outer{stroke:var(--sd-radio-button-unchecked-color, #767676)}.root .label{font-family:Segoe UI,Lucida Sans,Arial,sans-serif;text-overflow:ellipsis;overflow-x:hidden;-webkit-user-select:none;user-select:none;cursor:pointer;padding-top:2px;padding-bottom:2px}";
-var I = Object.defineProperty, p = (o, t, e, i) => {
-  for (var s = void 0, d = o.length - 1, u; d >= 0; d--)
-    (u = o[d]) && (s = u(t, e, s) || s);
+var I = Object.defineProperty, f = (o, t, e, i) => {
+  for (var s = void 0, c = o.length - 1, u; c >= 0; c--)
+    (u = o[c]) && (s = u(t, e, s) || s);
   return s && I(t, e, s), s;
 };
 let m = 0;
@@ -24,7 +24,7 @@ const h = (n = class extends b {
     ];
   }
   render() {
-    return f`
+    return p`
             <div class="root">
                 <div class="radio-button-container">
                     <input
@@ -54,26 +54,26 @@ const h = (n = class extends b {
 }, n.ID = "sd-radio-button", n.ensureDefined = () => {
   customElements.get(n.ID) || customElements.define(n.ID, n);
 }, n);
-p([
+f([
   r({ type: Boolean, reflect: !0, attribute: !0 })
 ], h.prototype, "checked");
-p([
+f([
   r({ type: String, reflect: !0, attribute: !0 })
 ], h.prototype, "value");
-p([
+f([
   r({ type: Boolean, reflect: !0, attribute: !0 })
 ], h.prototype, "disabled");
-p([
+f([
   r({ type: String, reflect: !0, attribute: !0 })
 ], h.prototype, "label");
 let w = h;
 const B = ":host(:focus){outline:none}.buttons-container{display:flex}.buttons-container.vertical{flex-direction:column}.validation-message{margin-left:5px}";
-var C = Object.defineProperty, c = (o, t, e, i) => {
-  for (var s = void 0, d = o.length - 1, u; d >= 0; d--)
-    (u = o[d]) && (s = u(t, e, s) || s);
+var C = Object.defineProperty, d = (o, t, e, i) => {
+  for (var s = void 0, c = o.length - 1, u; c >= 0; c--)
+    (u = o[c]) && (s = u(t, e, s) || s);
   return s && C(t, e, s), s;
-}, l;
-const a = (l = class extends b {
+}, a;
+const l = (a = class extends b {
   constructor() {
     super(...arguments), this.layout = "horizontal", this.value = "", this.uncheckAllowed = !1, this.disabled = !1, this._focusIndex = -1, this._checkedButton = null, this.handleSlotChange = () => {
       this._buttons = this.buttonsSlot.assignedElements(), this._buttons.forEach((t) => {
@@ -92,15 +92,17 @@ const a = (l = class extends b {
       let e = !0;
       switch (t.key) {
         case "Down":
-        case "ArrowDown": {
-          const i = this.getNextFocusIndex(this.focusIndex + 1);
-          this.focusIndex = i !== -1 ? i : this.getNextFocusIndex(0), this.uncheckAllowed || this.updateChecked();
+        case "ArrowDown":
+        case "Right":
+        case "ArrowRight": {
+          this.focusNext();
           break;
         }
         case "Up":
-        case "ArrowUp": {
-          const i = this.getPreviousFocusIndex(this.focusIndex - 1);
-          this.focusIndex = i !== -1 ? i : this.getPreviousFocusIndex(this.childElementCount - 1), this.uncheckAllowed || this.updateChecked();
+        case "ArrowUp":
+        case "Left":
+        case "ArrowLeft": {
+          this.focusPrevious();
           break;
         }
         case "Enter": {
@@ -139,14 +141,14 @@ const a = (l = class extends b {
     ];
   }
   render() {
-    return f`
+    return p`
             <div
                 class="buttons-container ${this.layout === "vertical" ? "vertical" : "horizontal"}"
                 @click="${k(this.disabled ? void 0 : this.handleButtonClick)}"
             >
                 <slot></slot>
             </div>
-            ${this.validationMessage && f`
+            ${this.validationMessage && p`
                 <sd-field-validation-message
                     class="validation-message"
                     .message=${this.validationMessage}
@@ -186,6 +188,14 @@ const a = (l = class extends b {
       })
     );
   }
+  focusNext() {
+    const t = this.getNextFocusIndex(this.focusIndex + 1);
+    this.focusIndex = t !== -1 ? t : this.getNextFocusIndex(0), this.uncheckAllowed || this.updateChecked();
+  }
+  focusPrevious() {
+    const t = this.getPreviousFocusIndex(this.focusIndex - 1);
+    this.focusIndex = t !== -1 ? t : this.getPreviousFocusIndex(this.childElementCount - 1), this.uncheckAllowed || this.updateChecked();
+  }
   getNextFocusIndex(t) {
     for (let e = t; e < this.childElementCount; e++) {
       const i = this._buttons[e];
@@ -230,28 +240,28 @@ const a = (l = class extends b {
   get selectedIndex() {
     return this._buttons.indexOf(this._checkedButton);
   }
-}, l.ID = "sd-radio-button-group", l.ensureDefined = () => {
-  w.ensureDefined(), customElements.get(l.ID) || customElements.define(l.ID, l);
-}, l);
-c([
+}, a.ID = "sd-radio-button-group", a.ensureDefined = () => {
+  w.ensureDefined(), customElements.get(a.ID) || customElements.define(a.ID, a);
+}, a);
+d([
   r({ type: String, reflect: !0, attribute: !0 })
-], a.prototype, "layout");
-c([
+], l.prototype, "layout");
+d([
   r({ type: String })
-], a.prototype, "value");
-c([
+], l.prototype, "value");
+d([
   r({ type: Boolean, reflect: !0, attribute: "uncheck-allowed" })
-], a.prototype, "uncheckAllowed");
-c([
+], l.prototype, "uncheckAllowed");
+d([
   r({ type: Boolean, reflect: !0, attribute: !0 })
-], a.prototype, "disabled");
-c([
+], l.prototype, "disabled");
+d([
   r({ type: String })
-], a.prototype, "validationMessage");
-c([
+], l.prototype, "validationMessage");
+d([
   r({ type: String })
-], a.prototype, "validationIconSrc");
-c([
+], l.prototype, "validationIconSrc");
+d([
   r({
     type: {
       fromAttribute(o) {
@@ -263,8 +273,8 @@ c([
     },
     reflect: !0
   })
-], a.prototype, "validationLevel");
-let _ = a;
+], l.prototype, "validationLevel");
+let _ = l;
 _.ensureDefined();
 export {
   w as RadioButton,

package/dist/radio-button-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button-group.mjs","sources":["../radio-button.ts","../radio-button-group.ts"],"sourcesContent":["import { LitElement, TemplateResult, html, unsafeCSS, css, nothing } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [RadioButton.ID]: RadioButton;\n    }\n}\n\nimport style from \"./scss/button.scss?inline\";\nlet idCounter = 0;\n\nexport class RadioButton extends LitElement {\n    public static readonly ID = \"sd-radio-button\";\n    public static ensureDefined = (): void => {\n        if (!customElements.get(RadioButton.ID)) {\n            customElements.define(RadioButton.ID, RadioButton);\n        }\n    };\n    @property({ type: Boolean, reflect: true, attribute: true })\n    public checked = false;\n    @property({ type: String, reflect: true, attribute: true })\n    public value = \"\";\n    @property({ type: Boolean, reflect: true, attribute: true })\n    public disabled = false;\n    @property({ type: String, reflect: true, attribute: true })\n    public label = \"\";\n\n    private a11yID;\n\n    constructor() {\n        super();\n        this.a11yID = RadioButton.ID + \"_\" + idCounter++;\n    }\n\n    static get styles() {\n        return [\n            css`\n                ${unsafeCSS(style)}\n            `,\n        ];\n    }\n\n    public render(): TemplateResult {\n        return html`\n            <div class=\"root\">\n                <div class=\"radio-button-container\">\n                    <input\n                        type=\"radio\"\n                        id=\"${this.a11yID}\"\n                        .checked=\"${this.checked}\"\n                        ?disabled=\"${this.disabled}\"\n                        @click=\"${this.handleClick}\"\n                        class=\"radio-button\"\n                    />\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-14 -14 28 28\">\n                        <circle\n                            class=\"highlight\"\n                            style=\"display:none\"\n                            r=\"11px\"\n                            fill=\"transparent\"\n                            stroke-width=\"6px\"\n                        ></circle>\n                        <circle class=\"inner\" r=\"6px\" style=\"display:none\" stroke=\"none\"></circle>\n                        <circle class=\"outer\" r=\"9px\" fill=\"transparent\" stroke-width=\"2px\"></circle>\n                    </svg>\n                </div>\n                <label class=\"label\" for=\"${this.a11yID}\" @click=\"${this.handleClick}\">${this.label}</label>\n            </div>\n        `;\n    }\n\n    private handleClick = (event: MouseEvent): void => {\n        event.preventDefault();\n    };\n}\n","import { LitElement, TemplateResult, html, PropertyValues, ComplexAttributeConverter, unsafeCSS, css } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { RadioButton } from \"./radio-button\";\nimport { ValidationLevel } from \"@cas-smartdesign/field-validation-message\";\nimport type { LayoutType, IValueChangeEvent } from \"./types\";\n\nexport { RadioButton } from \"./radio-button\";\nexport type * from \"./types\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [RadioButtonGroup.ID]: RadioButtonGroup;\n    }\n}\nimport style from \"./scss/group.scss?inline\";\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n    \"value-change\": CustomEvent<IValueChangeEvent>;\n}\n\nexport interface RadioButtonGroup {\n    addEventListener<K extends keyof CustomEventMap>(\n        event: K,\n        listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n        options?: AddEventListenerOptions | boolean,\n    ): void;\n    addEventListener(\n        type: string,\n        callback: EventListenerOrEventListenerObject | null,\n        options?: AddEventListenerOptions | boolean,\n    ): void;\n    removeEventListener<K extends keyof CustomEventMap>(\n        type: K,\n        listener: (this: this, ev: CustomEventMap[K]) => unknown,\n        options?: boolean | EventListenerOptions,\n    ): void;\n    removeEventListener(\n        type: string,\n        listener: EventListenerOrEventListenerObject,\n        options?: boolean | EventListenerOptions,\n    ): void;\n    dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport class RadioButtonGroup extends LitElement {\n    public static readonly ID = \"sd-radio-button-group\";\n    public static ensureDefined = (): void => {\n        RadioButton.ensureDefined();\n        if (!customElements.get(RadioButtonGroup.ID)) {\n            customElements.define(RadioButtonGroup.ID, RadioButtonGroup);\n        }\n    };\n    @property({ type: String, reflect: true, attribute: true })\n    public layout: LayoutType = \"horizontal\";\n    @property({ type: String })\n    public value = \"\";\n    @property({ type: Boolean, reflect: true, attribute: \"uncheck-allowed\" })\n    public uncheckAllowed = false;\n    @property({ type: Boolean, reflect: true, attribute: true })\n    public disabled = false;\n    @property({ type: String })\n    public validationMessage: string;\n    @property({ type: String })\n    public validationIconSrc: string;\n    @property({\n        type: {\n            fromAttribute(value: string): ValidationLevel {\n                return value && ValidationLevel[value.toLowerCase()];\n            },\n            toAttribute(value: ValidationLevel): string {\n                return value && value.toLowerCase();\n            },\n        } as ComplexAttributeConverter,\n        reflect: true,\n    })\n    public validationLevel: ValidationLevel;\n\n    private _buttonsSlot: HTMLSlotElement;\n    private _buttons: HTMLElement[];\n    private _focusIndex = -1;\n    private _checkedButton: HTMLElement = null;\n\n    public get focusIndex(): number {\n        return this._focusIndex;\n    }\n\n    public set focusIndex(index: number) {\n        if (index >= -1 && index < this.childElementCount) {\n            const oldValue = this._focusIndex;\n            this._focusIndex = index;\n            if (oldValue !== index) {\n                const previousButton = this._buttons[oldValue];\n                const currentButton = this._buttons[this.focusIndex];\n                this.updateFocused(previousButton, currentButton);\n            }\n        }\n    }\n\n    protected firstUpdated(changedProperties: PropertyValues): void {\n        super.firstUpdated(changedProperties);\n        this.buttonsSlot.addEventListener(\"slotchange\", this.handleSlotChange);\n        this.addEventListener(\"focusin\", this.handleFocusIn);\n        this.addEventListener(\"focusout\", this.handleFocusOut);\n        this.addEventListener(\"keydown\", this.handleKeyDown);\n    }\n\n    protected updated(changedProperties: PropertyValues): void {\n        super.updated(changedProperties);\n        if (changedProperties.has(\"disabled\")) {\n            if (this.disabled) {\n                this.disableButtons();\n            } else {\n                this.enableButtons();\n            }\n        }\n    }\n\n    static get styles() {\n        return [\n            css`\n                ${unsafeCSS(style)}\n            `,\n        ];\n    }\n    public render(): TemplateResult {\n        return html`\n            <div\n                class=\"buttons-container ${this.layout === \"vertical\" ? \"vertical\" : \"horizontal\"}\"\n                @click=\"${ifDefined(this.disabled ? undefined : this.handleButtonClick)}\"\n            >\n                <slot></slot>\n            </div>\n            ${this.validationMessage &&\n            html`\n                <sd-field-validation-message\n                    class=\"validation-message\"\n                    .message=${this.validationMessage}\n                    .icon=${this.validationIconSrc}\n                    .level=${this.validationLevel}\n                >\n                </sd-field-validation-message>\n            `}\n        `;\n    }\n\n    private handleSlotChange = (): void => {\n        this._buttons = this.buttonsSlot.assignedElements() as HTMLElement[];\n        this._buttons.forEach((button) => {\n            if (!button.hasAttribute(\"disabled\") && this.disabled) {\n                button.setAttribute(\"disabled\", \"\");\n            }\n            // prevent radio buttons to be able to get focus by tabbing\n            // as focus is handled by this element\n            button.setAttribute(\"tabIndex\", \"-1\");\n            this.updateCheckedButton(button);\n        });\n    };\n\n    private updateCheckedButton(button: HTMLElement): void {\n        if (this._checkedButton && this._checkedButton !== button) {\n            this.uncheckButton(button);\n        } else if (button.hasAttribute(\"checked\")) {\n            this._checkedButton = button;\n            const value = button.getAttribute(\"value\");\n            this.updateValue(value);\n        }\n    }\n\n    private handleFocusIn = (event: FocusEvent): void => {\n        const target = event.target as HTMLElement;\n        const ind = this._buttons.findIndex((button) => button == target);\n        this.focusIndex = this.focusIndex >= 0 ? this.focusIndex : this.getNextFocusIndex(ind !== -1 ? ind : 0);\n        this.updateFocused(null, this._buttons[this.focusIndex]);\n    };\n\n    private handleFocusOut = (): void => {\n        this.updateFocused(this._buttons[this.focusIndex]);\n    };\n\n    private disableButtons(): void {\n        this._buttons?.forEach((button) => {\n            button.setAttribute(\"disabled\", \"\");\n        });\n    }\n\n    private enableButtons(): void {\n        this._buttons?.forEach((button) => {\n            button.removeAttribute(\"disabled\");\n        });\n    }\n\n    private handleButtonClick = (event: MouseEvent): void => {\n        // the individual buttons are not focusable\n        this.focus();\n        const target = this._buttons.find((button) => button.contains(event.target as Node));\n        const targetIndex = this._buttons.findIndex((button) => button == target);\n        if (targetIndex >= 0) {\n            this.focusIndex = targetIndex;\n            this.updateChecked();\n        }\n    };\n\n    private fireValueChangeEvent(): void {\n        this.dispatchEvent(\n            new CustomEvent<IValueChangeEvent>(\"value-change\", {\n                detail: {\n                    value: this.value,\n                    selectedIndex: this.selectedIndex,\n                },\n            }),\n        );\n    }\n\n    private handleKeyDown = (event: KeyboardEvent): void => {\n        let shouldPrevent = true;\n        switch (event.key) {\n            case \"Down\":\n            case \"ArrowDown\": {\n                const newIndex = this.getNextFocusIndex(this.focusIndex + 1);\n                this.focusIndex = newIndex !== -1 ? newIndex : this.getNextFocusIndex(0);\n                if (!this.uncheckAllowed) {\n                    this.updateChecked();\n                }\n                break;\n            }\n            case \"Up\":\n            case \"ArrowUp\": {\n                const newIndex = this.getPreviousFocusIndex(this.focusIndex - 1);\n                this.focusIndex = newIndex !== -1 ? newIndex : this.getPreviousFocusIndex(this.childElementCount - 1);\n                if (!this.uncheckAllowed) {\n                    this.updateChecked();\n                }\n                break;\n            }\n            case \"Enter\": {\n                this.updateChecked();\n                break;\n            }\n            default: {\n                shouldPrevent = false;\n            }\n        }\n        if (shouldPrevent) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    };\n\n    private getNextFocusIndex(index: number): number {\n        for (let i = index; i < this.childElementCount; i++) {\n            const button = this._buttons[i];\n            if (this.isFocusable(button)) {\n                return i;\n            }\n        }\n\n        return -1;\n    }\n\n    private getPreviousFocusIndex(index: number): number {\n        for (let i = index; i >= 0; i--) {\n            const button = this._buttons[i];\n            if (this.isFocusable(button)) {\n                return i;\n            }\n        }\n\n        return -1;\n    }\n\n    private isFocusable(button: HTMLElement): boolean {\n        return !button.hasAttribute(\"disabled\");\n    }\n\n    private updateChecked(): void {\n        const previousChecked = this._checkedButton;\n        const currentChecked = this._buttons[this.focusIndex];\n        this._checkedButton = currentChecked;\n        if (previousChecked && previousChecked !== currentChecked) {\n            this.uncheckButton(previousChecked);\n        }\n        if (currentChecked) {\n            this.toggleButton(currentChecked);\n        }\n    }\n\n    private toggleButton(button: HTMLElement): void {\n        const checked = button.hasAttribute(\"checked\");\n        if (checked) {\n            if (this.uncheckAllowed) {\n                this.uncheckButton(button);\n                this._checkedButton = null;\n                this.updateValue(\"\");\n            }\n        } else {\n            this.checkButton(button);\n            this.updateValue(button.getAttribute(\"value\"));\n        }\n    }\n\n    private updateValue(newValue: string): void {\n        this.value = newValue;\n        this.fireValueChangeEvent();\n    }\n\n    private updateFocused(previousFocused?: HTMLElement, currentFocused?: HTMLElement): void {\n        previousFocused?.removeAttribute?.(\"focused\");\n        currentFocused?.setAttribute?.(\"focused\", \"\");\n    }\n\n    private checkButton(button: HTMLElement): void {\n        button.setAttribute(\"checked\", \"\");\n    }\n\n    private uncheckButton(button: HTMLElement): void {\n        button.removeAttribute(\"checked\");\n    }\n\n    private get buttonsSlot(): HTMLSlotElement {\n        if (this.shadowRoot && !this._buttonsSlot) {\n            this._buttonsSlot = this.shadowRoot.querySelector(\"slot\");\n        }\n        return this._buttonsSlot;\n    }\n\n    private get selectedIndex(): number {\n        return this._buttons.indexOf(this._checkedButton);\n    }\n}\n\nRadioButtonGroup.ensureDefined();\n"],"names":["idCounter","_RadioButton","_a","LitElement","event","css","unsafeCSS","style","html","__decorateClass","property","RadioButton","_RadioButtonGroup","button","target","ind","targetIndex","shouldPrevent","newIndex","index","oldValue","previousButton","currentButton","changedProperties","ifDefined","value","i","previousChecked","currentChecked","newValue","previousFocused","currentFocused","ValidationLevel","RadioButtonGroup"],"mappings":"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"}
+{"version":3,"file":"radio-button-group.mjs","sources":["../radio-button.ts","../radio-button-group.ts"],"sourcesContent":["import { LitElement, TemplateResult, html, unsafeCSS, css, nothing } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [RadioButton.ID]: RadioButton;\n    }\n}\n\nimport style from \"./scss/button.scss?inline\";\nlet idCounter = 0;\n\nexport class RadioButton extends LitElement {\n    public static readonly ID = \"sd-radio-button\";\n    public static ensureDefined = (): void => {\n        if (!customElements.get(RadioButton.ID)) {\n            customElements.define(RadioButton.ID, RadioButton);\n        }\n    };\n    @property({ type: Boolean, reflect: true, attribute: true })\n    public checked = false;\n    @property({ type: String, reflect: true, attribute: true })\n    public value = \"\";\n    @property({ type: Boolean, reflect: true, attribute: true })\n    public disabled = false;\n    @property({ type: String, reflect: true, attribute: true })\n    public label = \"\";\n\n    private a11yID;\n\n    constructor() {\n        super();\n        this.a11yID = RadioButton.ID + \"_\" + idCounter++;\n    }\n\n    static get styles() {\n        return [\n            css`\n                ${unsafeCSS(style)}\n            `,\n        ];\n    }\n\n    public render(): TemplateResult {\n        return html`\n            <div class=\"root\">\n                <div class=\"radio-button-container\">\n                    <input\n                        type=\"radio\"\n                        id=\"${this.a11yID}\"\n                        .checked=\"${this.checked}\"\n                        ?disabled=\"${this.disabled}\"\n                        @click=\"${this.handleClick}\"\n                        class=\"radio-button\"\n                    />\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-14 -14 28 28\">\n                        <circle\n                            class=\"highlight\"\n                            style=\"display:none\"\n                            r=\"11px\"\n                            fill=\"transparent\"\n                            stroke-width=\"6px\"\n                        ></circle>\n                        <circle class=\"inner\" r=\"6px\" style=\"display:none\" stroke=\"none\"></circle>\n                        <circle class=\"outer\" r=\"9px\" fill=\"transparent\" stroke-width=\"2px\"></circle>\n                    </svg>\n                </div>\n                <label class=\"label\" for=\"${this.a11yID}\" @click=\"${this.handleClick}\">${this.label}</label>\n            </div>\n        `;\n    }\n\n    private handleClick = (event: MouseEvent): void => {\n        event.preventDefault();\n    };\n}\n","import { LitElement, TemplateResult, html, PropertyValues, ComplexAttributeConverter, unsafeCSS, css } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { RadioButton } from \"./radio-button\";\nimport { ValidationLevel } from \"@cas-smartdesign/field-validation-message\";\nimport type { LayoutType, IValueChangeEvent } from \"./types\";\n\nexport { RadioButton } from \"./radio-button\";\nexport type * from \"./types\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [RadioButtonGroup.ID]: RadioButtonGroup;\n    }\n}\nimport style from \"./scss/group.scss?inline\";\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n    \"value-change\": CustomEvent<IValueChangeEvent>;\n}\n\nexport interface RadioButtonGroup {\n    addEventListener<K extends keyof CustomEventMap>(\n        event: K,\n        listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n        options?: AddEventListenerOptions | boolean,\n    ): void;\n    addEventListener(\n        type: string,\n        callback: EventListenerOrEventListenerObject | null,\n        options?: AddEventListenerOptions | boolean,\n    ): void;\n    removeEventListener<K extends keyof CustomEventMap>(\n        type: K,\n        listener: (this: this, ev: CustomEventMap[K]) => unknown,\n        options?: boolean | EventListenerOptions,\n    ): void;\n    removeEventListener(\n        type: string,\n        listener: EventListenerOrEventListenerObject,\n        options?: boolean | EventListenerOptions,\n    ): void;\n    dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport class RadioButtonGroup extends LitElement {\n    public static readonly ID = \"sd-radio-button-group\";\n    public static ensureDefined = (): void => {\n        RadioButton.ensureDefined();\n        if (!customElements.get(RadioButtonGroup.ID)) {\n            customElements.define(RadioButtonGroup.ID, RadioButtonGroup);\n        }\n    };\n    @property({ type: String, reflect: true, attribute: true })\n    public layout: LayoutType = \"horizontal\";\n    @property({ type: String })\n    public value = \"\";\n    @property({ type: Boolean, reflect: true, attribute: \"uncheck-allowed\" })\n    public uncheckAllowed = false;\n    @property({ type: Boolean, reflect: true, attribute: true })\n    public disabled = false;\n    @property({ type: String })\n    public validationMessage: string;\n    @property({ type: String })\n    public validationIconSrc: string;\n    @property({\n        type: {\n            fromAttribute(value: string): ValidationLevel {\n                return value && ValidationLevel[value.toLowerCase()];\n            },\n            toAttribute(value: ValidationLevel): string {\n                return value && value.toLowerCase();\n            },\n        } as ComplexAttributeConverter,\n        reflect: true,\n    })\n    public validationLevel: ValidationLevel;\n\n    private _buttonsSlot: HTMLSlotElement;\n    private _buttons: HTMLElement[];\n    private _focusIndex = -1;\n    private _checkedButton: HTMLElement = null;\n\n    public get focusIndex(): number {\n        return this._focusIndex;\n    }\n\n    public set focusIndex(index: number) {\n        if (index >= -1 && index < this.childElementCount) {\n            const oldValue = this._focusIndex;\n            this._focusIndex = index;\n            if (oldValue !== index) {\n                const previousButton = this._buttons[oldValue];\n                const currentButton = this._buttons[this.focusIndex];\n                this.updateFocused(previousButton, currentButton);\n            }\n        }\n    }\n\n    protected firstUpdated(changedProperties: PropertyValues): void {\n        super.firstUpdated(changedProperties);\n        this.buttonsSlot.addEventListener(\"slotchange\", this.handleSlotChange);\n        this.addEventListener(\"focusin\", this.handleFocusIn);\n        this.addEventListener(\"focusout\", this.handleFocusOut);\n        this.addEventListener(\"keydown\", this.handleKeyDown);\n    }\n\n    protected updated(changedProperties: PropertyValues): void {\n        super.updated(changedProperties);\n        if (changedProperties.has(\"disabled\")) {\n            if (this.disabled) {\n                this.disableButtons();\n            } else {\n                this.enableButtons();\n            }\n        }\n    }\n\n    static get styles() {\n        return [\n            css`\n                ${unsafeCSS(style)}\n            `,\n        ];\n    }\n    public render(): TemplateResult {\n        return html`\n            <div\n                class=\"buttons-container ${this.layout === \"vertical\" ? \"vertical\" : \"horizontal\"}\"\n                @click=\"${ifDefined(this.disabled ? undefined : this.handleButtonClick)}\"\n            >\n                <slot></slot>\n            </div>\n            ${this.validationMessage &&\n            html`\n                <sd-field-validation-message\n                    class=\"validation-message\"\n                    .message=${this.validationMessage}\n                    .icon=${this.validationIconSrc}\n                    .level=${this.validationLevel}\n                >\n                </sd-field-validation-message>\n            `}\n        `;\n    }\n\n    private handleSlotChange = (): void => {\n        this._buttons = this.buttonsSlot.assignedElements() as HTMLElement[];\n        this._buttons.forEach((button) => {\n            if (!button.hasAttribute(\"disabled\") && this.disabled) {\n                button.setAttribute(\"disabled\", \"\");\n            }\n            // prevent radio buttons to be able to get focus by tabbing\n            // as focus is handled by this element\n            button.setAttribute(\"tabIndex\", \"-1\");\n            this.updateCheckedButton(button);\n        });\n    };\n\n    private updateCheckedButton(button: HTMLElement): void {\n        if (this._checkedButton && this._checkedButton !== button) {\n            this.uncheckButton(button);\n        } else if (button.hasAttribute(\"checked\")) {\n            this._checkedButton = button;\n            const value = button.getAttribute(\"value\");\n            this.updateValue(value);\n        }\n    }\n\n    private handleFocusIn = (event: FocusEvent): void => {\n        const target = event.target as HTMLElement;\n        const ind = this._buttons.findIndex((button) => button == target);\n        this.focusIndex = this.focusIndex >= 0 ? this.focusIndex : this.getNextFocusIndex(ind !== -1 ? ind : 0);\n        this.updateFocused(null, this._buttons[this.focusIndex]);\n    };\n\n    private handleFocusOut = (): void => {\n        this.updateFocused(this._buttons[this.focusIndex]);\n    };\n\n    private disableButtons(): void {\n        this._buttons?.forEach((button) => {\n            button.setAttribute(\"disabled\", \"\");\n        });\n    }\n\n    private enableButtons(): void {\n        this._buttons?.forEach((button) => {\n            button.removeAttribute(\"disabled\");\n        });\n    }\n\n    private handleButtonClick = (event: MouseEvent): void => {\n        // the individual buttons are not focusable\n        this.focus();\n        const target = this._buttons.find((button) => button.contains(event.target as Node));\n        const targetIndex = this._buttons.findIndex((button) => button == target);\n        if (targetIndex >= 0) {\n            this.focusIndex = targetIndex;\n            this.updateChecked();\n        }\n    };\n\n    private fireValueChangeEvent(): void {\n        this.dispatchEvent(\n            new CustomEvent<IValueChangeEvent>(\"value-change\", {\n                detail: {\n                    value: this.value,\n                    selectedIndex: this.selectedIndex,\n                },\n            }),\n        );\n    }\n\n    private handleKeyDown = (event: KeyboardEvent): void => {\n        let shouldPrevent = true;\n        switch (event.key) {\n            case \"Down\":\n            case \"ArrowDown\":\n            case \"Right\":\n            case \"ArrowRight\": {\n                this.focusNext();\n                break;\n            }\n            case \"Up\":\n            case \"ArrowUp\":\n            case \"Left\":\n            case \"ArrowLeft\": {\n                this.focusPrevious();\n                break;\n            }\n            case \"Enter\": {\n                this.updateChecked();\n                break;\n            }\n            default: {\n                shouldPrevent = false;\n            }\n        }\n        if (shouldPrevent) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    };\n\n    private focusNext() {\n        const newIndex = this.getNextFocusIndex(this.focusIndex + 1);\n        this.focusIndex = newIndex !== -1 ? newIndex : this.getNextFocusIndex(0);\n        if (!this.uncheckAllowed) {\n            this.updateChecked();\n        }\n    }\n\n    private focusPrevious() {\n        const newIndex = this.getPreviousFocusIndex(this.focusIndex - 1);\n        this.focusIndex = newIndex !== -1 ? newIndex : this.getPreviousFocusIndex(this.childElementCount - 1);\n        if (!this.uncheckAllowed) {\n            this.updateChecked();\n        }\n    }\n\n    private getNextFocusIndex(index: number): number {\n        for (let i = index; i < this.childElementCount; i++) {\n            const button = this._buttons[i];\n            if (this.isFocusable(button)) {\n                return i;\n            }\n        }\n\n        return -1;\n    }\n\n    private getPreviousFocusIndex(index: number): number {\n        for (let i = index; i >= 0; i--) {\n            const button = this._buttons[i];\n            if (this.isFocusable(button)) {\n                return i;\n            }\n        }\n\n        return -1;\n    }\n\n    private isFocusable(button: HTMLElement): boolean {\n        return !button.hasAttribute(\"disabled\");\n    }\n\n    private updateChecked(): void {\n        const previousChecked = this._checkedButton;\n        const currentChecked = this._buttons[this.focusIndex];\n        this._checkedButton = currentChecked;\n        if (previousChecked && previousChecked !== currentChecked) {\n            this.uncheckButton(previousChecked);\n        }\n        if (currentChecked) {\n            this.toggleButton(currentChecked);\n        }\n    }\n\n    private toggleButton(button: HTMLElement): void {\n        const checked = button.hasAttribute(\"checked\");\n        if (checked) {\n            if (this.uncheckAllowed) {\n                this.uncheckButton(button);\n                this._checkedButton = null;\n                this.updateValue(\"\");\n            }\n        } else {\n            this.checkButton(button);\n            this.updateValue(button.getAttribute(\"value\"));\n        }\n    }\n\n    private updateValue(newValue: string): void {\n        this.value = newValue;\n        this.fireValueChangeEvent();\n    }\n\n    private updateFocused(previousFocused?: HTMLElement, currentFocused?: HTMLElement): void {\n        previousFocused?.removeAttribute?.(\"focused\");\n        currentFocused?.setAttribute?.(\"focused\", \"\");\n    }\n\n    private checkButton(button: HTMLElement): void {\n        button.setAttribute(\"checked\", \"\");\n    }\n\n    private uncheckButton(button: HTMLElement): void {\n        button.removeAttribute(\"checked\");\n    }\n\n    private get buttonsSlot(): HTMLSlotElement {\n        if (this.shadowRoot && !this._buttonsSlot) {\n            this._buttonsSlot = this.shadowRoot.querySelector(\"slot\");\n        }\n        return this._buttonsSlot;\n    }\n\n    private get selectedIndex(): number {\n        return this._buttons.indexOf(this._checkedButton);\n    }\n}\n\nRadioButtonGroup.ensureDefined();\n"],"names":["idCounter","_RadioButton","_a","LitElement","event","css","unsafeCSS","style","html","__decorateClass","property","RadioButton","_RadioButtonGroup","button","target","ind","targetIndex","shouldPrevent","index","oldValue","previousButton","currentButton","changedProperties","ifDefined","value","newIndex","i","previousChecked","currentChecked","newValue","previousFocused","currentFocused","ValidationLevel","RadioButtonGroup"],"mappings":"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"}

package/npm-third-party-licenses.json

@@ -34,15 +34,15 @@
         "repository": "https://github.com/typescript-eslint/typescript-eslint",
         "licenseUrl": "https://unpkg.com/@typescript-eslint/parser@8.41.0/LICENSE"
     },
-    "@vitest/coverage-v8@3.2.4": {
+    "@vitest/coverage-v8@4.0.18": {
         "licenses": "MIT",
         "repository": "https://github.com/vitest-dev/vitest",
-        "licenseUrl": "https://unpkg.com/@vitest/coverage-v8@3.2.4/LICENSE"
+        "licenseUrl": "https://unpkg.com/@vitest/coverage-v8@4.0.18/LICENSE"
     },
-    "@vitest/ui@3.2.4": {
+    "@vitest/ui@4.0.18": {
         "licenses": "MIT",
         "repository": "https://github.com/vitest-dev/vitest",
-        "licenseUrl": "https://unpkg.com/@vitest/ui@3.2.4/LICENSE"
+        "licenseUrl": "https://unpkg.com/@vitest/ui@4.0.18/LICENSE"
     },
     "axe-core@4.10.3": {
         "licenses": "MPL-2.0",
@@ -59,10 +59,10 @@
         "repository": "https://github.com/cypress-io/cypress",
         "licenseUrl": "https://cypress.io"
     },
-    "esbuild@0.25.9": {
+    "esbuild@0.27.2": {
         "licenses": "MIT",
         "repository": "https://github.com/evanw/esbuild",
-        "licenseUrl": "https://unpkg.com/esbuild@0.25.9/LICENSE.md"
+        "licenseUrl": "https://unpkg.com/esbuild@0.27.2/LICENSE.md"
     },
     "eslint-config-google@0.14.0": {
         "licenses": "Apache-2.0",
@@ -119,10 +119,10 @@
         "repository": "https://github.com/postcss/postcss",
         "licenseUrl": "https://unpkg.com/postcss@8.5.6/LICENSE"
     },
-    "prettier@3.6.2": {
+    "prettier@3.8.1": {
         "licenses": "MIT",
         "repository": "https://github.com/prettier/prettier",
-        "licenseUrl": "https://unpkg.com/prettier@3.6.2/LICENSE"
+        "licenseUrl": "https://unpkg.com/prettier@3.8.1/LICENSE"
     },
     "resolve-pkg@2.0.0": {
         "licenses": "MIT",
@@ -154,10 +154,10 @@
         "repository": "https://github.com/stylelint/stylelint",
         "licenseUrl": "https://unpkg.com/stylelint@16.23.1/LICENSE"
     },
-    "tsup@8.5.0": {
+    "tsup@8.5.1": {
         "licenses": "MIT",
         "repository": "https://github.com/egoist/tsup",
-        "licenseUrl": "https://unpkg.com/tsup@8.5.0/LICENSE"
+        "licenseUrl": "https://unpkg.com/tsup@8.5.1/LICENSE"
     },
     "turbo@2.5.6": {
         "licenses": "MIT",
@@ -169,25 +169,25 @@
         "repository": "https://github.com/typescript-eslint/typescript-eslint",
         "licenseUrl": "https://unpkg.com/typescript-eslint@8.41.0/LICENSE"
     },
-    "typescript@5.9.2": {
+    "typescript@5.9.3": {
         "licenses": "Apache-2.0",
         "repository": "https://github.com/microsoft/TypeScript",
-        "licenseUrl": "https://unpkg.com/typescript@5.9.2/LICENSE.txt"
+        "licenseUrl": "https://unpkg.com/typescript@5.9.3/LICENSE.txt"
     },
     "vite-tsconfig-paths@5.1.4": {
         "licenses": "MIT",
         "repository": "https://github.com/aleclarson/vite-tsconfig-paths",
         "licenseUrl": "https://unpkg.com/vite-tsconfig-paths@5.1.4/LICENSE"
     },
-    "vite@7.1.3": {
+    "vite@7.3.1": {
         "licenses": "MIT",
         "repository": "https://github.com/vitejs/vite",
-        "licenseUrl": "https://unpkg.com/vite@7.1.3/LICENSE.md"
+        "licenseUrl": "https://unpkg.com/vite@7.3.1/LICENSE.md"
     },
-    "vitest@3.2.4": {
+    "vitest@4.0.18": {
         "licenses": "MIT",
         "repository": "https://github.com/vitest-dev/vitest",
-        "licenseUrl": "https://unpkg.com/vitest@3.2.4/LICENSE.md"
+        "licenseUrl": "https://unpkg.com/vitest@4.0.18/LICENSE.md"
     },
     "yargs@18.0.0": {
         "licenses": "MIT",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cas-smartdesign/radio-button-group",
-  "version": "4.1.1",
+  "version": "4.3.0",
   "description": "Radio button and radio button group elements with SmartDesign look & feel",
   "main": "dist/radio-button-group-with-externals.js",
   "module": "dist/radio-button-group.mjs",
@@ -8,8 +8,8 @@
   "types": "dist/radio-button-group.d.ts",
   "dependencies": {
     "lit": "^3.3.1",
-    "@cas-smartdesign/field-validation-message": "^5.1.1",
-    "@cas-smartdesign/styles": "^3.7.1"
+    "@cas-smartdesign/field-validation-message": "^5.3.0",
+    "@cas-smartdesign/styles": "^3.8.0"
   },
   "files": [
     "dist",
@@ -20,9 +20,9 @@
     "access": "public"
   },
   "devDependencies": {
-    "@cas-smartdesign/button": "^5.2.1",
-    "@cas-smartdesign/element-preview": "^0.3.1",
-    "@cas-smartdesign/license-generator": "^1.8.1"
+    "@cas-smartdesign/button": "^5.3.0",
+    "@cas-smartdesign/element-preview": "^0.4.0",
+    "@cas-smartdesign/license-generator": "^1.9.0"
   },
   "scripts": {
     "version": "pnpm version",