@fluid-topics/ft-checkbox 2.0.38 → 2.1.0

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

@@ -0,0 +1,7 @@
+export interface FtCheckboxProperties {
+    name: string;
+    value: string;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+}

package/build/ft-checkbox.properties.js

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

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

@@ -1,10 +1,10 @@
 export declare const FtCheckboxCssVariables: {
-    textColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    activeColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    checkColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    disabledColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    errorColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    textColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    activeColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    checkColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    borderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    disabledColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    errorColor: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const styles: import("lit").CSSResult;

package/build/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./ft-checkbox";
 export * from "./ft-checkbox.styles";
-export * from "./ftds-checkbox";
-export * from "./ftds-checkbox.styles";
+export * from "./ft-checkbox.properties";
 import "./define";

package/build/index.js

@@ -1,5 +1,4 @@
 export * from "./ft-checkbox";
 export * from "./ft-checkbox.styles";
-export * from "./ftds-checkbox";
-export * from "./ftds-checkbox.styles";
+export * from "./ft-checkbox.properties";
 import "./define";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-checkbox",
-    "version": "2.0.38",
+    "version": "2.1.0",
     "description": "A checkbox component",
     "keywords": [
         "Lit"
@@ -19,13 +19,10 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/ft-icon": "2.0.38",
-        "@fluid-topics/ft-link": "2.0.38",
-        "@fluid-topics/ft-popover": "2.0.38",
-        "@fluid-topics/ft-ripple": "2.0.38",
-        "@fluid-topics/ft-typography": "2.0.38",
-        "@fluid-topics/ft-wc-utils": "2.0.38",
+        "@fluid-topics/ft-ripple": "2.1.0",
+        "@fluid-topics/ft-typography": "2.1.0",
+        "@fluid-topics/ft-wc-utils": "2.1.0",
         "lit": "3.1.0"
     },
-    "gitHead": "8a5f1d6fb69ac18ec2e6d05dcf82e036d7423c35"
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
 }

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

@@ -1,45 +0,0 @@
-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

@@ -1,173 +0,0 @@
-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 });
-    }
-}
-export 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);

package/build/ftds-checkbox.d.ts

@@ -1,29 +0,0 @@
-import { FtBaseCheckbox, FtBaseCheckboxProperties } from "./ft-base-checkbox";
-import { ClassInfo } from "lit/directives/class-map.js";
-import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
-import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
-import { nothing } from "lit";
-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 FtBaseCheckbox>;
-export declare class FtdsCheckbox extends FtdsCheckbox_base implements FtBaseCheckboxProperties {
-    static elementDefinitions: ElementDefinitionsMap;
-    rippleUnbounded: boolean;
-    family: DesignSystemFamily;
-    static styles: import("lit").CSSResult[];
-    get checkboxClasses(): ClassInfo;
-    protected render(): import("lit-html").TemplateResult<1>;
-    protected renderBoxIcon(): unknown;
-    private notNullOrBlank;
-    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>;
-    get typographyVariant(): string;
-    protected onChange(event: Event): void;
-}
-export {};

package/build/ftds-checkbox.js

@@ -1,110 +0,0 @@
-import { FtBaseCheckbox, } from "./ft-base-checkbox";
-import { classMap, } from "lit/directives/class-map.js";
-import { safariEllipsisFix, toFtdsBase, } from "@fluid-topics/ft-wc-utils";
-import { dsStyles } from "./ftds-checkbox.styles";
-import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
-import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ft-typography";
-import { html, nothing, } from "lit";
-import { FtIcon, FtIcons, } from "@fluid-topics/ft-icon";
-import { FtdsPopover } from "@fluid-topics/ft-popover";
-import { FtdsLink } from "@fluid-topics/ft-link";
-export class FtdsCheckboxChangeEvent extends CustomEvent {
-    constructor(value, checked) {
-        super("change", { detail: { value: value, checked: checked }, bubbles: true, composed: true });
-    }
-}
-export class FtdsCheckbox extends toFtdsBase(FtBaseCheckbox) {
-    constructor() {
-        super(...arguments);
-        this.rippleUnbounded = false;
-        this.family = DesignSystemFamily.brand;
-    }
-    get checkboxClasses() {
-        return {
-            ...super.checkboxClasses,
-            ...this.getDesignSystemBaseClasses(),
-        };
-    }
-    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 `
-                <ft-icon part="checkbox-icon" value="${FtIcons.HYPHEN_SOLID}"></ft-icon>`;
-        }
-        if (this.checked) {
-            return html `
-                <ft-icon part="checkbox-icon" value="${FtIcons.CHECK}"></ft-icon>`;
-        }
-        return nothing;
-    }
-    notNullOrBlank(field) {
-        return field && field.trim().length > 0;
-    }
-    renderSlotBody() {
-        return this.notNullOrBlank(this.label)
-            ? html `
-                <ftds-typography variant="${this.typographyVariant}"
-                                 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>`;
-    }
-    get typographyVariant() {
-        return FtdsTypographyVariants.body2medium;
-    }
-    onChange(event) {
-        event.stopPropagation();
-        this.checked = event.target.checked;
-        this.indeterminate = false;
-        this.dispatchEvent(new FtdsCheckboxChangeEvent(this.value, this.checked));
-    }
-}
-FtdsCheckbox.elementDefinitions = {
-    ...FtBaseCheckbox.elementDefinitions,
-    "ftds-popover": FtdsPopover,
-    "ftds-link": FtdsLink,
-    "ftds-typography": FtdsTypography,
-    "ft-icon": FtIcon,
-};
-FtdsCheckbox.styles = [
-    safariEllipsisFix,
-    dsStyles,
-];

package/build/ftds-checkbox.styles.d.ts

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

package/build/ftds-checkbox.styles.js

@@ -1,159 +0,0 @@
-import { checkbox, } from "@fluid-topics/ft-wc-utils";
-import { css } from "lit";
-import { FtRippleCssVariables } from "@fluid-topics/ft-ripple";
-import { FtIconCssVariables } from "@fluid-topics/ft-icon";
-// language=CSS
-export const dsStyles = css `
-    * {
-        box-sizing: border-box;
-        --input-size: calc(${checkbox.boxSize} + 2 * (${checkbox.focusOutlineOffset} + ${checkbox.focusOutlineWidth}));
-        --input-margin: calc(-1 * ${checkbox.focusOutlineOffset} - ${checkbox.focusOutlineWidth});
-    }
-
-    [part="checkbox-label-and-helper"] {
-        display: flex;
-        flex-direction: column;
-        align-items: self-start;
-        gap: ${checkbox.helperPaddingTop};
-    }
-
-    [part="checkbox-and-popover"] {
-        display: flex;
-        align-items: flex-start;
-        gap: ${checkbox.labelHorizontalGap};
-    }
-
-    [part="checkbox-popover"] {
-        flex: 0 0 auto;
-        height: ${checkbox.boxSize};
-
-    }
-
-    [part="checkbox-popover-wrapper"] {
-        margin-top: -5px;
-    }
-
-    [part="checkbox-helper"] {
-        display: block;
-        color: ${checkbox.helperTextColor};
-        margin-left: calc(${checkbox.boxSize} + ${checkbox.horizontalGap});
-
-        &.ft-checkbox-helper--disabled {
-            background-color: transparent;
-            opacity: ${checkbox.uncheckedDisabledComponentOpacity};
-        }
-
-        &.ft-checkbox-helper--disabled.ft-checkbox-helper--checked, &.ft-checkbox-helper--disabled.ft-checkbox-helper--indeterminate {
-            background-color: transparent;
-            opacity: ${checkbox.checkedDisabledComponentOpacity};
-        }
-
-        &.ft-checkbox-helper--legend-color-displayed {
-            margin-left: calc(${checkbox.boxSize} + (${checkbox.horizontalGap} * 2 + ${checkbox.colorLegendSize}));
-        }
-    }
-
-    .ft-checkbox {
-        display: inline-flex;
-        align-items: flex-start;
-        gap: ${checkbox.horizontalGap};
-        color: ${checkbox.color};
-
-        input {
-            opacity: 0;
-            position: absolute;
-            flex: 0 0 auto;
-            width: var(--input-size);
-            height: var(--input-size);
-            border-radius: ${checkbox.borderRadius};
-        }
-
-        .ft-checkbox--box-container {
-            position: relative;
-            display: flex;
-            flex: 0 0 auto;
-            justify-content: center;
-            align-items: center;
-            width: var(--input-size);
-            height: var(--input-size);
-            margin: var(--input-margin);
-            border-radius: ${checkbox.borderRadius};
-        }
-
-        .ft-checkbox--box-container:has(:focus-visible) {
-            outline: ${checkbox.focusOutlineWidth} solid ${checkbox.focusFocusRingColor};
-            outline-offset: calc(${checkbox.focusOutlineWidth} * -1);
-        }
-
-        .ft-checkbox--box {
-            display: flex;
-            flex: 0 0 auto;
-            align-items: center;
-            justify-content: center;
-            box-shadow: inset 0 0 0 ${checkbox.borderWidth} ${checkbox.uncheckedBorderColor};
-            border-radius: ${checkbox.borderRadius};
-            width: ${checkbox.boxSize};
-            height: ${checkbox.boxSize};
-            color: ${checkbox.checkedIconColor};
-
-            ft-icon {
-                ${FtIconCssVariables.size.set(checkbox.iconSize)};
-            }
-        }
-
-        &.ft-checkbox--disabled {
-            background-color: transparent;
-            opacity: ${checkbox.uncheckedDisabledComponentOpacity};
-        }
-
-        ft-ripple {
-            flex: 0 0 auto;
-            z-index: 0;
-            ${FtRippleCssVariables.color.set(checkbox.uncheckedStateLayerColor)};
-            ${FtRippleCssVariables.backgroundColor.set(checkbox.uncheckedStateLayerColor)};
-            ${FtRippleCssVariables.opacityContentOnSurfaceHover.set(checkbox.uncheckedHoverStateLayerOpacity)};
-            ${FtRippleCssVariables.opacityContentOnSurfaceFocused.set(checkbox.uncheckedFocusStateLayerOpacity)};
-            ${FtRippleCssVariables.opacityContentOnSurfacePressed.set(checkbox.uncheckedActiveStateLayerOpacity)};
-            ${FtRippleCssVariables.borderRadius.set(checkbox.focusOutlineBorderRadius)};
-        }
-
-        [part="checkbox-legend-color"] {
-            flex: 0 0 auto;
-            margin-top: calc((${checkbox.boxSize} - ${checkbox.colorLegendSize}) / 2);
-            width: ${checkbox.colorLegendSize};
-            height: ${checkbox.colorLegendSize};
-            border-radius: 50%;
-        }
-    }
-
-    .ft-checkbox--checked, .ft-checkbox--indeterminate {
-        color: ${checkbox.color};
-
-        .ft-checkbox--box {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: ${checkbox.checkedBackgroundColor};
-            box-shadow: inset 0 0 0 ${checkbox.borderWidth} ${checkbox.checkedBackgroundColor};
-            color: ${checkbox.checkedIconColor};
-        }
-
-        &.ft-checkbox--disabled {
-            opacity: ${checkbox.checkedDisabledComponentOpacity};
-        }
-
-        .ft-checkbox--checkmark {
-            opacity: 1;
-        }
-
-        ft-ripple {
-            z-index: 0;
-            ${FtRippleCssVariables.color.set(checkbox.checkedStateLayerColor)};
-            ${FtRippleCssVariables.backgroundColor.set(checkbox.checkedStateLayerColor)};
-            ${FtRippleCssVariables.opacityContentOnSurfaceHover.set(checkbox.checkedHoverStateLayerOpacity)};
-            ${FtRippleCssVariables.opacityContentOnSurfaceFocused.set(checkbox.checkedFocusStateLayerOpacity)};
-            ${FtRippleCssVariables.opacityContentOnSurfacePressed.set(checkbox.checkedActiveStateLayerOpacity)};
-            ${FtRippleCssVariables.borderRadius.set(checkbox.focusOutlineBorderRadius)};
-        }
-    }
-`;