@fluid-topics/ft-radio 2.0.38 → 2.1.1

package/build/definitions.d.ts

@@ -1,11 +1,7 @@
 import { FtRadio } from "./ft-radio";
-import { FtdsRadio } from "./ftds-radio";
 import { FtRadioGroup } from "./ft-radio-group";
-import { FtdsRadioGroup } from "./ftds-radio-group";
 declare const _default: {
     "ft-radio": typeof FtRadio;
-    "ftds-radio": typeof FtdsRadio;
     "ft-radio-group": typeof FtRadioGroup;
-    "ftds-radio-group": typeof FtdsRadioGroup;
 };
 export default _default;

package/build/definitions.js

@@ -1,10 +1,6 @@
 import { FtRadio } from "./ft-radio";
-import { FtdsRadio } from "./ftds-radio";
 import { FtRadioGroup } from "./ft-radio-group";
-import { FtdsRadioGroup } from "./ftds-radio-group";
 export default {
     "ft-radio": FtRadio,
-    "ftds-radio": FtdsRadio,
     "ft-radio-group": FtRadioGroup,
-    "ftds-radio-group": FtdsRadioGroup,
 };

package/build/ft-radio-group.d.ts

@@ -1,5 +1,24 @@
-import { FtBaseRadioGroup, FtBaseRadioGroupProperties } from "./ft-base-radio-group";
-export * from "./ft-base-radio-group";
-export declare class FtRadioGroup extends FtBaseRadioGroup implements FtBaseRadioGroupProperties {
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { PropertyValues } from "lit";
+import { FtRadio } from "./ft-radio";
+import { FtRadioGroupProperties } from "./ft-radio-group.properties";
+export declare class FtRadioGroup extends FtLitElement implements FtRadioGroupProperties {
+    static elementDefinitions: {};
     static styles: import("lit").CSSResult;
+    name: string;
+    role: string;
+    ariaLabelledBy: string;
+    assignedElements?: Array<Element>;
+    get radioButtons(): Array<FtRadio>;
+    currentSelectedIndex: number;
+    protected render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onSlotChange;
+    protected contentAvailableCallback(props: PropertyValues): void;
+    private onFocus;
+    private onChange;
+    private onKeyDown;
+    private resolveCurrentSelectedIndex;
+    private focusCurrentChecked;
 }

package/build/ft-radio-group.js

@@ -1,6 +1,117 @@
-import { FtBaseRadioGroup } from "./ft-base-radio-group";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { property, queryAssignedElements, state, } from "lit/decorators.js";
+import { html, } from "lit";
 import { groupStyles } from "./ft-radio-group.styles";
-export * from "./ft-base-radio-group";
-export class FtRadioGroup extends FtBaseRadioGroup {
+export class FtRadioGroup extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "";
+        this.role = "radiogroup";
+        this.ariaLabelledBy = "";
+        this.currentSelectedIndex = 0;
+        this.onFocus = () => {
+            setTimeout(() => this.focusCurrentChecked(), 100);
+        };
+    }
+    get radioButtons() {
+        var _a, _b;
+        return (_b = (_a = this.assignedElements) === null || _a === void 0 ? void 0 : _a.flatMap((e) => e.matches("ft-radio,ftds-radio")
+            ? [e]
+            : [...e.querySelectorAll("ft-radio,ftds-radio")])) !== null && _b !== void 0 ? _b : [];
+    }
+    render() {
+        return html `
+            <slot @slotchange=${this.onSlotChange}
+                  @change=${this.onChange}
+                  @keydown=${this.onKeyDown}
+            ></slot>
+        `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("focus", this.onFocus);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("focus", this.onFocus);
+    }
+    onSlotChange() {
+        this.radioButtons.forEach((rb) => rb.name = this.name);
+    }
+    contentAvailableCallback(props) {
+        super.contentAvailableCallback(props);
+        this.radioButtons.forEach((rb) => rb.setInputTabIndex(-1)); // RadioButton is no more selectable alone
+        this.resolveCurrentSelectedIndex();
+    }
+    onChange(event) {
+        event.stopPropagation();
+        this.radioButtons.forEach((rb) => rb.checked = event.detail.value === rb.value);
+        this.dispatchEvent(new CustomEvent("change", { detail: event.detail.value }));
+        this.resolveCurrentSelectedIndex();
+    }
+    onKeyDown(event) {
+        let blockUnwhishedReaction = false;
+        switch (event.key) {
+            case "ArrowUp":
+            case "ArrowLeft": {
+                blockUnwhishedReaction = true;
+                const indexToFocus = this.currentSelectedIndex - 1;
+                this.radioButtons[indexToFocus < 0 ? this.radioButtons.length - 1 : indexToFocus].select();
+                this.radioButtons[indexToFocus < 0 ? this.radioButtons.length - 1 : indexToFocus].focus();
+                break;
+            }
+            case "ArrowDown":
+            case "ArrowRight": {
+                blockUnwhishedReaction = true;
+                const indexToFocus = this.currentSelectedIndex + 1;
+                this.radioButtons[indexToFocus > this.radioButtons.length - 1 ? 0 : indexToFocus].select();
+                this.radioButtons[indexToFocus > this.radioButtons.length - 1 ? 0 : indexToFocus].focus();
+                break;
+            }
+            case "Enter": {
+                this.radioButtons[this.currentSelectedIndex].select();
+            }
+        }
+        if (blockUnwhishedReaction) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    resolveCurrentSelectedIndex() {
+        const checkedButtonIndex = this.radioButtons.findIndex((rb) => rb.checked);
+        if (checkedButtonIndex == -1) {
+            this.currentSelectedIndex = 0;
+            this.radioButtons[0].select();
+        }
+        else {
+            this.currentSelectedIndex = checkedButtonIndex;
+        }
+        this.radioButtons[this.currentSelectedIndex].setInputTabIndex(0);
+    }
+    focusCurrentChecked() {
+        this.radioButtons[this.currentSelectedIndex].focus();
+    }
 }
+FtRadioGroup.elementDefinitions = {};
 FtRadioGroup.styles = groupStyles;
+__decorate([
+    property()
+], FtRadioGroup.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true, attribute: "role" })
+], FtRadioGroup.prototype, "role", void 0);
+__decorate([
+    property({ reflect: true, attribute: "aria-labelledby" })
+], FtRadioGroup.prototype, "ariaLabelledBy", void 0);
+__decorate([
+    queryAssignedElements()
+], FtRadioGroup.prototype, "assignedElements", void 0);
+__decorate([
+    state()
+], FtRadioGroup.prototype, "currentSelectedIndex", void 0);

package/build/ft-radio-group.properties.d.ts

@@ -0,0 +1,5 @@
+export interface FtRadioGroupProperties {
+    name?: string;
+    role?: string;
+    ariaLabelledBy?: string;
+}

package/build/ft-radio-group.properties.js

@@ -0,0 +1 @@
+export {};

package/build/ft-radio.d.ts

@@ -1,8 +1,31 @@
-import { FtBaseRadio, FtBaseRadioProperties } from "./ft-base-radio";
-import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
-export * from "./ft-base-radio";
-export declare class FtRadio extends FtBaseRadio implements FtBaseRadioProperties {
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { ClassInfo } from "lit/directives/class-map.js";
+import { FtRadioProperties } from "./ft-radio.properties";
+export declare class FtRadioChangeEvent extends CustomEvent<{
+    value: string;
+    checked: boolean;
+}> {
+    constructor(value: string, checked: boolean);
+}
+export declare class FtRadio extends FtLitElement implements FtRadioProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
-    get typographyVariant(): string;
+    name: string;
+    value: string;
+    checked: boolean;
+    ariaChecked: string;
+    disabled: boolean;
+    private container?;
+    private ripple?;
+    private input?;
+    get radioClasses(): ClassInfo;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private onChange;
+    protected contentAvailableCallback(props: PropertyValues): void;
+    select(): void;
+    setInputTabIndex(index: number): void;
+    focus(): void;
+    onClick(e: Event): void;
 }

package/build/ft-radio.js

@@ -1,15 +1,134 @@
-import { FtBaseRadio } from "./ft-base-radio";
-import { classicStyles } from "./ft-radio.styles";
-import { FtTypographyVariants } from "@fluid-topics/ft-typography/build/ft-typography.properties";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, } from "lit";
+import { property, query, } from "lit/decorators.js";
+import { FtLitElement, } from "@fluid-topics/ft-wc-utils";
+import { classMap, } from "lit/directives/class-map.js";
+import { FtRipple } from "@fluid-topics/ft-ripple";
 import { FtTypography } from "@fluid-topics/ft-typography";
-export * from "./ft-base-radio";
-export class FtRadio extends FtBaseRadio {
-    get typographyVariant() {
-        return FtTypographyVariants.body2;
+import { FtTypographyVariants } from "@fluid-topics/ft-typography/build/ft-typography.properties";
+import { classicStyles } from "./ft-radio.styles";
+export class FtRadioChangeEvent extends CustomEvent {
+    constructor(value, checked) {
+        super("change", { detail: { value: value, checked: checked }, bubbles: true, composed: true });
+    }
+}
+export class FtRadio extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "";
+        this.value = "";
+        this.checked = false;
+        this.ariaChecked = "false";
+        this.disabled = false;
+    }
+    get radioClasses() {
+        return {
+            "ft-radio": true,
+            "ft-radio--checked": this.checked,
+            "ft-radio--disabled": this.disabled,
+        };
+    }
+    render() {
+        // We use inert on the input to prevent the "radio" role to be present twice in the aria tree
+        return html `
+            <div class="${classMap(this.radioClasses)}"
+                 @click=${this.onClick}>
+                <div class="ft-radio--box-container">
+                    <ft-ripple
+                        ?disabled=${this.disabled}
+                        ?primary=${this.checked}
+                        unbounded>
+                    </ft-ripple>
+                    <div class="ft-radio--box">
+                    </div>
+                    <input id="radio-button"
+                           type="radio"
+                           name="${this.name}"
+                           value="${this.value}"
+                           .checked=${this.checked}
+                           .disabled=${this.disabled}
+                           @change=${this.onChange}
+                    >
+                </div>
+                <label for="radio-button" inert>
+                    <ft-typography variant="${FtTypographyVariants.body2}">
+                        <slot></slot>
+                    </ft-typography>
+                </label>
+            </div>
+        `;
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has("checked")) {
+            this.ariaChecked = this.checked ? "true" : "false";
+        }
+    }
+    onChange(event) {
+        event.stopPropagation();
+        this.checked = event.target.checked;
+        this.dispatchEvent(new FtRadioChangeEvent(this.value, this.checked));
+    }
+    contentAvailableCallback(props) {
+        var _a;
+        super.contentAvailableCallback(props);
+        (_a = this.ripple) === null || _a === void 0 ? void 0 : _a.setupFor(this.container);
+    }
+    select() {
+        this.checked = true;
+        this.dispatchEvent(new FtRadioChangeEvent(this.value, this.checked));
+    }
+    setInputTabIndex(index) {
+        if (this.input) {
+            this.input.tabIndex = index;
+        }
+    }
+    focus() {
+        var _a;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+        setTimeout(() => { var _a; return (_a = this.ripple) === null || _a === void 0 ? void 0 : _a.forceFocusUpdate(); }, 0);
+    }
+    onClick(e) {
+        var _a;
+        if (e.target === this.input) {
+            return;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.click();
     }
 }
 FtRadio.elementDefinitions = {
-    ...FtBaseRadio.elementDefinitions,
-    "ft-or-ftds-typography": FtTypography,
+    "ft-ripple": FtRipple,
+    "ft-typography": FtTypography,
 };
 FtRadio.styles = classicStyles;
+__decorate([
+    property()
+], FtRadio.prototype, "name", void 0);
+__decorate([
+    property()
+], FtRadio.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FtRadio.prototype, "checked", void 0);
+__decorate([
+    property({ attribute: "aria-checked", reflect: true })
+], FtRadio.prototype, "ariaChecked", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtRadio.prototype, "disabled", void 0);
+__decorate([
+    query(".ft-radio")
+], FtRadio.prototype, "container", void 0);
+__decorate([
+    query("ft-ripple")
+], FtRadio.prototype, "ripple", void 0);
+__decorate([
+    query("input")
+], FtRadio.prototype, "input", void 0);