@fluid-topics/ft-checkbox 2.0.38 → 2.1.0

package/build/definitions.d.ts

@@ -1,7 +1,5 @@
 import { FtCheckbox } from "./ft-checkbox";
-import { FtdsCheckbox } from "./ftds-checkbox";
 declare const _default: {
     "ft-checkbox": typeof FtCheckbox;
-    "ftds-checkbox": typeof FtdsCheckbox;
 };
 export default _default;

package/build/definitions.js

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

package/build/ft-checkbox.d.ts

@@ -1,5 +1,30 @@
-import { FtBaseCheckbox, FtBaseCheckboxProperties } from "./ft-base-checkbox";
-export declare class FtCheckbox extends FtBaseCheckbox implements FtBaseCheckboxProperties {
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { ClassInfo } from "lit/directives/class-map.js";
+import { FtCheckboxProperties } from "./ft-checkbox.properties";
+export declare class FtCheckboxChangeEvent extends CustomEvent<boolean> {
+    constructor(checked: boolean);
+}
+export declare class FtCheckbox extends FtLitElement implements FtCheckboxProperties {
+    static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
-    get typographyVariant(): string;
+    name: string;
+    value: string;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    error: boolean;
+    private container?;
+    private ripple?;
+    private input;
+    get checkboxClasses(): ClassInfo;
+    private renderBoxContainer;
+    render(): import("lit-html").TemplateResult<1>;
+    private renderBoxIcon;
+    private onSlotchange;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private onChange;
+    protected contentAvailableCallback(props: PropertyValues): void;
+    click(): void;
+    focus(): void;
 }

package/build/ft-checkbox.js

@@ -1,9 +1,145 @@
-import { FtBaseCheckbox, } from "./ft-base-checkbox";
-import { FtTypographyVariants } from "@fluid-topics/ft-typography";
+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, FtTypographyVariants, } from "@fluid-topics/ft-typography";
 import { styles } from "./ft-checkbox.styles";
-export class FtCheckbox extends FtBaseCheckbox {
-    get typographyVariant() {
-        return FtTypographyVariants.body2;
+export class FtCheckboxChangeEvent extends CustomEvent {
+    constructor(checked) {
+        super("change", { detail: checked });
     }
 }
+export class FtCheckbox extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "";
+        this.value = "";
+        this.checked = false;
+        this.indeterminate = false;
+        this.disabled = false;
+        this.error = false;
+    }
+    get checkboxClasses() {
+        return {
+            "ft-checkbox": true,
+            "ft-checkbox--error": this.error,
+            "ft-checkbox--checked": this.indeterminate ? false : this.checked,
+            "ft-checkbox--indeterminate": this.indeterminate,
+            "ft-checkbox--disabled": this.disabled,
+        };
+    }
+    renderBoxContainer() {
+        return html `
+            <div class="ft-checkbox--box-container" part="checkbox-box-container">
+                <ft-ripple part="checkbox-ripple"
+                           ?disabled=${this.disabled}
+                           ?primary=${this.checked || this.indeterminate}
+                           unbounded>
+                </ft-ripple>
+                <div class="ft-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 `
+            <label class="${classMap(this.checkboxClasses)}" for="checkbox-input" part="checkbox-label">
+                ${this.renderBoxContainer()}
+                <ft-typography variant="${(FtTypographyVariants.body2)}" part="checkbox-body">
+                    <slot @slotchange=${this.onSlotchange}></slot>
+                </ft-typography>
+            </label>
+        `;
+    }
+    renderBoxIcon() {
+        return html `
+            <svg class="ft-checkbox--checkmark" viewBox="0 0 24 24" part="checkbox-check" aria-hidden="true">
+                <path class="ft-checkbox--checkmark-path" fill="none"
+                      d="${(this.indeterminate && !this.checked)
+            ? "M2,12 22,12"
+            : "M1.73,12.91 8.1,19.28 22.79,4.59"}"></path>
+            </svg>
+        `;
+    }
+    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 FtCheckboxChangeEvent(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);
+    }
+}
+FtCheckbox.elementDefinitions = {
+    "ft-ripple": FtRipple,
+    "ft-typography": FtTypography,
+};
 FtCheckbox.styles = styles;
+__decorate([
+    property()
+], FtCheckbox.prototype, "name", void 0);
+__decorate([
+    property()
+], FtCheckbox.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FtCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtCheckbox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtCheckbox.prototype, "error", void 0);
+__decorate([
+    query(".ft-checkbox")
+], FtCheckbox.prototype, "container", void 0);
+__decorate([
+    query("ft-ripple")
+], FtCheckbox.prototype, "ripple", void 0);
+__decorate([
+    query("input")
+], FtCheckbox.prototype, "input", void 0);