@fluid-topics/ftds-radio 2.1.0

package/README.md

@@ -0,0 +1,19 @@
+The design system radio component
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-radio
+yarn add @fluid-topics/ftds-radio
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ftds-radio"
+
+function render() {
+    return html` <ftds-radio foo="bar"></ftds-radio> `
+}
+```

package/build/define.d.ts

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

package/build/define.js

@@ -0,0 +1,3 @@
+import { customElements } from "@fluid-topics/ft-wc-utils";
+import definitions from "./definitions";
+customElements(definitions);

package/build/definitions.d.ts

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

package/build/definitions.js

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

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

@@ -0,0 +1,29 @@
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
+import { PropertyValues } from "lit";
+import { FtdsRadio } from "./ftds-radio";
+import { FtdsRadioGroupProperties } from "./ftds-radio-group.properties";
+declare const FtdsRadioGroup_base: import("@fluid-topics/ft-wc-utils").FtdsBaseType<typeof FtLitElement>;
+export declare class FtdsRadioGroup extends FtdsRadioGroup_base implements FtdsRadioGroupProperties {
+    static elementDefinitions: {};
+    static styles: import("lit").CSSResult[];
+    family: DesignSystemFamily;
+    name: string;
+    role: string;
+    ariaLabelledBy: string;
+    assignedElements?: Array<Element>;
+    get radioButtons(): Array<FtdsRadio>;
+    currentSelectedIndex: number;
+    protected render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onSlotChange;
+    protected contentAvailableCallback(props: PropertyValues): void;
+    private onFocus;
+    private onFocusOut;
+    private onChange;
+    private onKeyDown;
+    private resolveCurrentSelectedIndex;
+    private focusCurrentChecked;
+}
+export {};

package/build/ftds-radio-group.js

@@ -0,0 +1,126 @@
+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, safariEllipsisFix, toFtdsBase, } from "@fluid-topics/ft-wc-utils";
+import { groupStyles } from "./ftds-radio-group.styles";
+import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
+import { property, queryAssignedElements, state, } from "lit/decorators.js";
+import { html, } from "lit";
+export class FtdsRadioGroup extends toFtdsBase(FtLitElement) {
+    constructor() {
+        super(...arguments);
+        this.family = DesignSystemFamily.brand;
+        this.name = "";
+        this.role = "radiogroup";
+        this.ariaLabelledBy = "";
+        this.currentSelectedIndex = 0;
+        this.onFocus = () => {
+            setTimeout(() => this.focusCurrentChecked(), 100);
+        };
+        this.onFocusOut = (e) => {
+        };
+    }
+    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("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);
+        this.addEventListener("focusout", this.onFocusOut);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("focus", this.onFocus);
+        this.removeEventListener("focusout", this.onFocusOut);
+    }
+    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();
+    }
+}
+FtdsRadioGroup.elementDefinitions = {};
+FtdsRadioGroup.styles = [
+    safariEllipsisFix,
+    groupStyles,
+];
+__decorate([
+    property()
+], FtdsRadioGroup.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true, attribute: "role" })
+], FtdsRadioGroup.prototype, "role", void 0);
+__decorate([
+    property({ reflect: true, attribute: "aria-labelledby" })
+], FtdsRadioGroup.prototype, "ariaLabelledBy", void 0);
+__decorate([
+    queryAssignedElements()
+], FtdsRadioGroup.prototype, "assignedElements", void 0);
+__decorate([
+    state()
+], FtdsRadioGroup.prototype, "currentSelectedIndex", void 0);

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

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

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

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

package/build/ftds-radio-group.styles.d.ts

@@ -0,0 +1 @@
+export declare const groupStyles: import("lit").CSSResult;

package/build/ftds-radio-group.styles.js

@@ -0,0 +1,13 @@
+import { css } from "lit";
+import { radio } from "@fluid-topics/ft-wc-utils";
+export const groupStyles = css `
+    :host {
+        display: flex;
+        flex-direction: column;
+        gap: ${radio.verticalGap}
+    }
+
+    :host(:focus-visible) {
+        outline: none;
+    }
+`;

package/build/ftds-radio.d.ts

@@ -0,0 +1,35 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
+import { FtdsRadioProperties } from "./ftds-radio.properties";
+import { PropertyValues } from "lit";
+import { ClassInfo } from "lit/directives/class-map.js";
+export declare class FtdsRadioChangeEvent extends CustomEvent<{
+    value: string;
+    checked: boolean;
+}> {
+    constructor(value: string, checked: boolean);
+}
+declare const FtdsRadio_base: import("@fluid-topics/ft-wc-utils").FtdsBaseType<typeof FtLitElement>;
+export declare class FtdsRadio extends FtdsRadio_base implements FtdsRadioProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    family: DesignSystemFamily;
+    value: string;
+    name: string;
+    checked: boolean;
+    ariaChecked: string;
+    disabled: boolean;
+    private container?;
+    private ripple?;
+    private input?;
+    static styles: import("lit").CSSResult[];
+    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;
+}
+export {};

package/build/ftds-radio.js

@@ -0,0 +1,139 @@
+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, safariEllipsisFix, toFtdsBase, } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ftds-radio.styles";
+import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { html, } from "lit";
+import { classMap, } from "lit/directives/class-map.js";
+import { property, query, } from "lit/decorators.js";
+export class FtdsRadioChangeEvent extends CustomEvent {
+    constructor(value, checked) {
+        super("change", { detail: { value: value, checked: checked }, bubbles: true, composed: true });
+    }
+}
+export class FtdsRadio extends toFtdsBase(FtLitElement) {
+    constructor() {
+        super(...arguments);
+        this.family = DesignSystemFamily.brand;
+        this.value = "";
+        this.name = "";
+        this.checked = false;
+        this.ariaChecked = "false";
+        this.disabled = false;
+    }
+    get radioClasses() {
+        return {
+            "ftds-radio": true,
+            "ftds-radio--checked": this.checked,
+            "ftds-radio--disabled": this.disabled,
+            ...this.getDesignSystemBaseClasses(),
+        };
+    }
+    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="ftds-radio--box-container">
+                    <ft-ripple
+                        ?disabled=${this.disabled}
+                        ?primary=${this.checked}
+                        unbounded>
+                    </ft-ripple>
+                    <div class="ftds-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>
+                    <ftds-typography variant="${FtdsTypographyVariants.body2medium}">
+                        <slot></slot>
+                    </ftds-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 FtdsRadioChangeEvent(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 FtdsRadioChangeEvent(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();
+    }
+}
+FtdsRadio.elementDefinitions = {
+    "ft-ripple": FtRipple,
+    "ftds-typography": FtdsTypography,
+};
+FtdsRadio.styles = [
+    safariEllipsisFix,
+    styles,
+];
+__decorate([
+    property()
+], FtdsRadio.prototype, "value", void 0);
+__decorate([
+    property()
+], FtdsRadio.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FtdsRadio.prototype, "checked", void 0);
+__decorate([
+    property({ attribute: "aria-checked", reflect: true })
+], FtdsRadio.prototype, "ariaChecked", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsRadio.prototype, "disabled", void 0);
+__decorate([
+    query(".ftds-radio")
+], FtdsRadio.prototype, "container", void 0);
+__decorate([
+    query("ft-ripple")
+], FtdsRadio.prototype, "ripple", void 0);
+__decorate([
+    query("input")
+], FtdsRadio.prototype, "input", void 0);