@fluid-topics/ftds-checkbox 2.1.0

package/README.md

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

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,5 @@
+import { FtdsCheckbox } from "./ftds-checkbox";
+declare const _default: {
+    "ftds-checkbox": typeof FtdsCheckbox;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,4 @@
+import { FtdsCheckbox } from "./ftds-checkbox";
+export default {
+    "ftds-checkbox": FtdsCheckbox,
+};

package/build/ftds-checkbox.d.ts

@@ -0,0 +1,46 @@
+import { nothing, PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { ClassInfo } from "lit/directives/class-map.js";
+import { FtdsCheckboxProperties } from "./ftds-checkbox.properties";
+import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
+export declare class FtdsCheckboxChangeEvent extends CustomEvent<{
+    value: string;
+    checked: boolean;
+}> {
+    constructor(value: string, checked: boolean);
+}
+declare const FtdsCheckbox_base: import("@fluid-topics/ft-wc-utils").FtdsBaseType<typeof FtLitElement>;
+export declare class FtdsCheckbox extends FtdsCheckbox_base implements FtdsCheckboxProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult[];
+    name: string;
+    value: string;
+    label: string;
+    helper: string;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    error: boolean;
+    legendColor: string;
+    private container?;
+    private ripple?;
+    private input;
+    family: DesignSystemFamily;
+    get checkboxClasses(): ClassInfo;
+    get checkboxHelperClasses(): ClassInfo;
+    protected renderBoxContainer(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected renderBoxIcon(): any;
+    protected renderSlotBody(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected renderLegendColor(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected renderHelper(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected renderPopover(): import("lit-html").TemplateResult<1>;
+    protected onSlotchange(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    protected onChange(event: Event): void;
+    protected contentAvailableCallback(props: PropertyValues): void;
+    click(): void;
+    focus(): void;
+    private notNullOrBlank;
+}
+export {};

package/build/ftds-checkbox.js

@@ -0,0 +1,220 @@
+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, nothing, } from "lit";
+import { property, query, } from "lit/decorators.js";
+import { FtLitElement, safariEllipsisFix, toFtdsBase, } from "@fluid-topics/ft-wc-utils";
+import { classMap, } from "lit/directives/class-map.js";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { FtdsPopover } from "@fluid-topics/ftds-popover";
+import { FtdsLink } from "@fluid-topics/ftds-link";
+import { FtdsIcon, FtdsIcons, FtdsIconVariants, } from "@fluid-topics/ftds-icon";
+import { styles } from "./ftds-checkbox.styles";
+import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
+export class FtdsCheckboxChangeEvent extends CustomEvent {
+    constructor(value, checked) {
+        super("change", { detail: { value: value, checked: checked }, bubbles: true, composed: true });
+    }
+}
+export class FtdsCheckbox extends toFtdsBase(FtLitElement) {
+    constructor() {
+        super(...arguments);
+        this.name = "";
+        this.value = "";
+        this.label = "";
+        this.helper = "";
+        this.checked = false;
+        this.indeterminate = false;
+        this.disabled = false;
+        this.error = false;
+        this.legendColor = "";
+        this.family = DesignSystemFamily.brand;
+    }
+    get checkboxClasses() {
+        return {
+            "ftds-checkbox": true,
+            "ftds-checkbox--error": this.error,
+            "ftds-checkbox--checked": this.indeterminate ? false : this.checked,
+            "ftds-checkbox--indeterminate": this.indeterminate,
+            "ftds-checkbox--disabled": this.disabled,
+            ...this.getDesignSystemBaseClasses(),
+        };
+    }
+    get checkboxHelperClasses() {
+        return {
+            "ftds-checkbox-helper--disabled": this.disabled,
+            "ftds-checkbox-helper--error": this.error,
+            "ftds-checkbox-helper--checked": this.indeterminate ? false : this.checked,
+            "ftds-checkbox-helper--indeterminate": this.indeterminate,
+            "ftds-checkbox-helper--legend-color-displayed": this.legendColor && this.legendColor.trim().length > 0,
+        };
+    }
+    renderBoxContainer() {
+        return html `
+            <div class="ftds-checkbox--box-container" part="checkbox-box-container">
+                <ft-ripple part="checkbox-ripple"
+                           ?disabled=${this.disabled}
+                           ?primary=${this.checked || this.indeterminate}
+                           ?unbounded=${false}>
+                </ft-ripple>
+                <div class="ftds-checkbox--box" part="checkbox-box">
+                    ${this.renderBoxIcon()}
+                </div>
+                <input type="checkbox"
+                       id="checkbox-input"
+                       part="checkbox-input"
+                       name="${this.name}"
+                       aria-checked="${this.indeterminate ? "mixed" : (this.checked ? "true" : "false")}"
+                       role="checkbox"
+                       .checked=${this.indeterminate ? false : this.checked}
+                       .indeterminate=${this.indeterminate}
+                       .disabled=${this.disabled}
+                       @change=${this.onChange}
+                >
+            </div>
+        `;
+    }
+    render() {
+        return html `
+            <div part="checkbox-and-popover">
+                <div part="checkbox-label-and-helper">
+                    <label class="${classMap(this.checkboxClasses)}" for="checkbox-input" part="checkbox-label">
+                        ${this.renderBoxContainer()}
+                        ${this.renderLegendColor()}
+                        ${this.renderSlotBody()}
+                    </label>
+                    ${this.renderHelper()}
+                </div>
+                ${this.renderPopover()}
+            </div>
+        `;
+    }
+    renderBoxIcon() {
+        if (this.indeterminate) {
+            return html `
+                <ftds-icon part="checkbox-icon" icon="${FtdsIcons.HYPHEN}" variant="${FtdsIconVariants.regular}"></ftds-icon>`;
+        }
+        if (this.checked) {
+            return html `
+                <ftds-icon part="checkbox-icon" icon="${FtdsIcons.CHECK}"></ftds-icon>`;
+        }
+        return nothing;
+    }
+    renderSlotBody() {
+        return this.notNullOrBlank(this.label)
+            ? html `
+                <ftds-typography variant="${FtdsTypographyVariants.body2medium}"
+                                 part="checkbox-body">${this.label}
+                </ftds-typography>`
+            : nothing;
+    }
+    renderLegendColor() {
+        return this.notNullOrBlank(this.legendColor)
+            ? html `
+                <div part="checkbox-legend-color"
+                     style="background-color: ${this.legendColor}">
+                </div>`
+            : nothing;
+    }
+    renderHelper() {
+        return this.notNullOrBlank(this.helper)
+            ? html `
+                <ftds-typography class="${classMap(this.checkboxHelperClasses)}"
+                                 variant="${FtdsTypographyVariants.caption1medium}"
+                                 part="checkbox-helper">${this.helper}
+                </ftds-typography>`
+            : nothing;
+    }
+    renderPopover() {
+        return html `
+            <div part="checkbox-popover">
+                <div part="checkbox-popover-wrapper">
+                    <slot @slotchange=${this.onSlotchange}></slot>
+                </div>
+            </div>`;
+    }
+    onSlotchange() {
+        this.requestUpdate();
+    }
+    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.indeterminate = false;
+        this.dispatchEvent(new FtdsCheckboxChangeEvent(this.value, this.checked));
+    }
+    contentAvailableCallback(props) {
+        var _a;
+        super.contentAvailableCallback(props);
+        (_a = this.ripple) === null || _a === void 0 ? void 0 : _a.setupFor(this.container);
+    }
+    click() {
+        this.input.click();
+    }
+    focus() {
+        this.input.focus();
+        setTimeout(() => {
+            var _a;
+            (_a = this.ripple) === null || _a === void 0 ? void 0 : _a.forceFocusUpdate();
+        }, 0);
+    }
+    notNullOrBlank(field) {
+        return field && field.trim().length > 0;
+    }
+}
+FtdsCheckbox.elementDefinitions = {
+    "ft-ripple": FtRipple,
+    "ftds-popover": FtdsPopover,
+    "ftds-link": FtdsLink,
+    "ftds-typography": FtdsTypography,
+    "ftds-icon": FtdsIcon,
+};
+FtdsCheckbox.styles = [
+    safariEllipsisFix,
+    styles,
+];
+__decorate([
+    property()
+], FtdsCheckbox.prototype, "name", void 0);
+__decorate([
+    property()
+], FtdsCheckbox.prototype, "value", void 0);
+__decorate([
+    property()
+], FtdsCheckbox.prototype, "label", void 0);
+__decorate([
+    property()
+], FtdsCheckbox.prototype, "helper", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FtdsCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsCheckbox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsCheckbox.prototype, "error", void 0);
+__decorate([
+    property()
+], FtdsCheckbox.prototype, "legendColor", void 0);
+__decorate([
+    query(".ftds-checkbox")
+], FtdsCheckbox.prototype, "container", void 0);
+__decorate([
+    query("ft-ripple")
+], FtdsCheckbox.prototype, "ripple", void 0);
+__decorate([
+    query("input")
+], FtdsCheckbox.prototype, "input", void 0);