@fluid-topics/ft-checkbox 1.3.63 → 1.4.3

package/build/ft-base-checkbox.d.ts

@@ -0,0 +1,45 @@
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { ClassInfo } from "lit/directives/class-map.js";
+export interface FtBaseCheckboxProperties {
+    name: string;
+    value: string;
+    label: string;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    legendColor: string;
+    helper: string;
+}
+export declare class FtCheckboxChangeEvent extends CustomEvent<boolean> {
+    constructor(checked: boolean);
+}
+export declare class FtBaseCheckbox extends FtLitElement implements FtBaseCheckboxProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    name: string;
+    value: string;
+    label: string;
+    helper: string;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    rippleUnbounded: boolean;
+    error: boolean;
+    legendColor: string;
+    private container?;
+    private ripple?;
+    private input;
+    get checkboxClasses(): ClassInfo;
+    get checkboxHelperClasses(): ClassInfo;
+    get typographyVariant(): string;
+    protected renderBoxContainer(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected renderBoxIcon(): any;
+    protected renderSlotBody(): unknown;
+    protected onSlotchange(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    protected onChange(event: Event): void;
+    protected contentAvailableCallback(props: PropertyValues): void;
+    click(): void;
+    focus(): void;
+}

package/build/ft-base-checkbox.js

@@ -0,0 +1,174 @@
+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";
+export class FtCheckboxChangeEvent extends CustomEvent {
+    constructor(checked) {
+        super("change", { detail: checked });
+    }
+}
+class FtBaseCheckbox extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "";
+        this.value = "";
+        this.label = "";
+        this.helper = "";
+        this.checked = false;
+        this.indeterminate = false;
+        this.disabled = false;
+        this.rippleUnbounded = true;
+        this.error = false;
+        this.legendColor = "";
+    }
+    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,
+        };
+    }
+    get checkboxHelperClasses() {
+        return {
+            "ft-checkbox-helper--disabled": this.disabled,
+            "ft-checkbox-helper--error": this.error,
+            "ft-checkbox-helper--checked": this.indeterminate ? false : this.checked,
+            "ft-checkbox-helper--indeterminate": this.indeterminate,
+            "ft-checkbox-helper--legend-color-displayed": this.legendColor && this.legendColor.trim().length > 0,
+        };
+    }
+    get typographyVariant() {
+        return FtTypographyVariants.body2;
+    }
+    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=${this.rippleUnbounded}>
+                </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()}
+                ${this.renderSlotBody()}
+            </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>
+        `;
+    }
+    renderSlotBody() {
+        return html `
+            <ft-typography variant="${this.typographyVariant}" part="checkbox-body">
+                <slot @slotchange=${this.onSlotchange}></slot>
+            </ft-typography>
+        `;
+    }
+    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);
+    }
+}
+FtBaseCheckbox.elementDefinitions = {
+    "ft-ripple": FtRipple,
+    "ft-typography": FtTypography,
+};
+__decorate([
+    property()
+], FtBaseCheckbox.prototype, "name", void 0);
+__decorate([
+    property()
+], FtBaseCheckbox.prototype, "value", void 0);
+__decorate([
+    property()
+], FtBaseCheckbox.prototype, "label", void 0);
+__decorate([
+    property()
+], FtBaseCheckbox.prototype, "helper", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FtBaseCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtBaseCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtBaseCheckbox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtBaseCheckbox.prototype, "error", void 0);
+__decorate([
+    property()
+], FtBaseCheckbox.prototype, "legendColor", void 0);
+__decorate([
+    query(".ft-checkbox")
+], FtBaseCheckbox.prototype, "container", void 0);
+__decorate([
+    query("ft-ripple")
+], FtBaseCheckbox.prototype, "ripple", void 0);
+__decorate([
+    query("input")
+], FtBaseCheckbox.prototype, "input", void 0);
+export { FtBaseCheckbox };

package/build/ft-checkbox.d.ts

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

package/build/ft-checkbox.js

@@ -1,113 +1,10 @@
-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";
+import { FtBaseCheckbox, } from "./ft-base-checkbox";
+import { FtTypographyVariants } from "@fluid-topics/ft-typography";
 import { styles } from "./ft-checkbox.styles";
-class FtCheckbox extends FtLitElement {
-    constructor() {
-        super(...arguments);
-        this.name = "";
-        this.checked = false;
-        this.indeterminate = false;
-        this.disabled = false;
-        this.error = false;
-    }
-    render() {
-        const classes = {
-            "ft-checkbox": true,
-            "ft-checkbox--error": this.error,
-            "ft-checkbox--checked": this.checked,
-            "ft-checkbox--indeterminate": this.indeterminate,
-            "ft-checkbox--disabled": this.disabled,
-        };
-        return html `
-            <label class="${classMap(classes)}" for="checkbox-input" part="checkbox-label">
-                <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">
-                        <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>
-                    </div>
-                    <input type="checkbox"
-                           id="checkbox-input"
-                           name="${this.name}"
-                           .checked=${this.checked}
-                           .disabled=${this.disabled}
-                           @change=${this.onChange}
-                           aria-checked=${this.indeterminate ? "mixed" : (this.checked ? "true" : "false")}
-                    >
-                </div>
-                <ft-typography variant="body2" part="checkbox-body">
-                    <slot></slot>
-                </ft-typography>
-            </label>
-        `;
-    }
-    onChange(event) {
-        event.stopPropagation();
-        this.checked = event.target.checked;
-        this.indeterminate = false;
-        this.dispatchEvent(new CustomEvent("change", { detail: 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);
+class FtCheckbox extends FtBaseCheckbox {
+    get typographyVariant() {
+        return FtTypographyVariants.body2;
     }
 }
-FtCheckbox.elementDefinitions = {
-    "ft-ripple": FtRipple,
-    "ft-typography": FtTypography
-};
 FtCheckbox.styles = styles;
-__decorate([
-    property()
-], FtCheckbox.prototype, "name", 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);
 export { FtCheckbox };