@fluid-topics/ft-chip-choice 1.1.117

package/README.md

@@ -0,0 +1,28 @@
+Chip-choice is a component used to make single-select or multi-select selections.
+The appearance of chip-choice is based on the chip component, but the nature of chip-choice is different.
+In multi-select mode, chip-choice behaves like a group of checkboxes.
+In single-select mode, chip-choice behaves like a radiogroup.
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-chip-choice
+yarn add @fluid-topics/ft-chip-choice
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-chip-choice"
+
+function render() {
+    return html`
+        <ft-chip-choice multiselect>
+            <ft-chip-choice-option value="1">Option 1</ft-chip-choice-option>
+            <ft-chip-choice-option value="2">Option 2</ft-chip-choice-option>
+            <ft-chip-choice-option value="3">Option 3</ft-chip-choice-option>
+        </ft-chip-choice>
+    `
+}
+```

package/build/ft-chip-choice-option.d.ts

@@ -0,0 +1,26 @@
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtChipChoiceOptionProperties } from "./ft-chip-choice-option.properties";
+import { FtChip } from "@fluid-topics/ft-chip";
+export declare class FtChipChoiceOptionChangeEvent extends CustomEvent<{
+    value: string;
+    selected: boolean;
+}> {
+    constructor(value: string, selected: boolean);
+}
+export declare class FtChipChoiceOption extends FtLitElement implements FtChipChoiceOptionProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    name: string;
+    value: string;
+    label: string;
+    selected: boolean;
+    dense: boolean;
+    multiLine: boolean;
+    role: string;
+    chip: FtChip;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit").TemplateResult<1>;
+    private onKeyDown;
+    protected update(changedProperties: PropertyValues): void;
+    private onChange;
+}

package/build/ft-chip-choice-option.js

@@ -0,0 +1,91 @@
+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 { optionStyles } from "./ft-chip-choice-option.styles";
+import { FtChip } from "@fluid-topics/ft-chip";
+export class FtChipChoiceOptionChangeEvent extends CustomEvent {
+    constructor(value, selected) {
+        super("change", { detail: { value: value, selected: selected }, bubbles: true, composed: true });
+    }
+}
+class FtChipChoiceOption extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "";
+        this.value = "";
+        this.label = "";
+        this.selected = false;
+        this.dense = false;
+        this.multiLine = false;
+        this.role = "radio";
+    }
+    render() {
+        return html `
+            <ft-chip clickable
+                     role="radio"
+                     part="chip"
+                     icon=${this.selected ? "CHECK" : ""}
+                     label=${this.label}
+                     ?dense=${this.dense}
+                     ?highlighted=${this.selected}
+                     ?multiLine=${this.multiLine}
+                     @click=${this.onChange}
+                     @keydown=${this.onKeyDown}
+            >
+                <slot></slot>
+            </ft-chip>
+        `;
+    }
+    onKeyDown(e) {
+        // Prevent the page from scrolling on space by default
+        if (e.key == " ") {
+            e.preventDefault();
+        }
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has("selected")) {
+            this.ariaChecked = this.selected ? "true" : "false";
+        }
+    }
+    onChange(event) {
+        event.preventDefault();
+        this.selected = !this.selected;
+        this.dispatchEvent(new FtChipChoiceOptionChangeEvent(this.value, this.selected));
+    }
+}
+FtChipChoiceOption.elementDefinitions = {
+    "ft-chip": FtChip
+};
+FtChipChoiceOption.styles = optionStyles;
+__decorate([
+    property()
+], FtChipChoiceOption.prototype, "name", void 0);
+__decorate([
+    property()
+], FtChipChoiceOption.prototype, "value", void 0);
+__decorate([
+    property()
+], FtChipChoiceOption.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtChipChoiceOption.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtChipChoiceOption.prototype, "dense", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtChipChoiceOption.prototype, "multiLine", void 0);
+__decorate([
+    property({ reflect: true, attribute: "role" })
+], FtChipChoiceOption.prototype, "role", void 0);
+__decorate([
+    query("ft-chip")
+], FtChipChoiceOption.prototype, "chip", void 0);
+export { FtChipChoiceOption };

package/build/ft-chip-choice-option.properties.d.ts

@@ -0,0 +1,7 @@
+export interface FtChipChoiceOptionProperties {
+    value: string;
+    label?: string;
+    dense?: boolean;
+    selected?: boolean;
+    multiline?: boolean;
+}

package/build/ft-chip-choice-option.properties.js

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

package/build/ft-chip-choice-option.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const FtChipChoiceOptionCssVariables: {
+    color: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    selectedColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    selectedBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const optionStyles: import("lit").CSSResult;

package/build/ft-chip-choice-option.styles.js

@@ -0,0 +1,20 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtChipCssVariables, FtChipHighlightedCssVariables } from "@fluid-topics/ft-chip/build/ft-chip.styles";
+export const FtChipChoiceOptionCssVariables = {
+    color: FtCssVariableFactory.create("--ft-chip-choice-option--color", "", "COLOR", designSystemVariables.colorOnSurface),
+    borderColor: FtCssVariableFactory.create("--ft-chip-choice-option--border-color", "", "COLOR", designSystemVariables.colorOutline),
+    backgroundColor: FtCssVariableFactory.create("--ft-chip-choice-option--background-color", "", "COLOR", designSystemVariables.colorSurface),
+    selectedColor: FtCssVariableFactory.create("--ft-chip-choice-option--selected-color", "", "COLOR", designSystemVariables.colorOnPrimary),
+    selectedBackgroundColor: FtCssVariableFactory.create("--ft-chip-choice-option--selected-background-color", "", "COLOR", designSystemVariables.colorPrimary),
+};
+// language=CSS
+export const optionStyles = css `
+    [part="chip"] {
+        ${setVariable(FtChipCssVariables.color, FtChipChoiceOptionCssVariables.color)};
+        ${setVariable(FtChipCssVariables.borderColor, FtChipChoiceOptionCssVariables.borderColor)};
+        ${setVariable(FtChipCssVariables.backgroundColor, FtChipChoiceOptionCssVariables.backgroundColor)};
+        ${setVariable(FtChipHighlightedCssVariables.color, FtChipChoiceOptionCssVariables.selectedColor)};
+        ${setVariable(FtChipHighlightedCssVariables.backgroundColor, FtChipChoiceOptionCssVariables.selectedBackgroundColor)};
+    }
+`;

package/build/ft-chip-choice.d.ts

@@ -0,0 +1,22 @@
+import { PropertyValues } from "lit";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtChipChoiceProperties } from "./ft-chip-choice.properties";
+import { FtChipChoiceOption } from "./ft-chip-choice-option";
+export declare class FtChipChoiceChangeEvent extends CustomEvent<{
+    value: Set<string>;
+}> {
+    constructor(value: Set<string>);
+}
+export declare class FtChipChoice extends FtLitElement implements FtChipChoiceProperties {
+    static styles: import("lit").CSSResult;
+    name: string;
+    multiselect: boolean;
+    role: string;
+    ariaLabelledBy: string;
+    chipChoiceOptions: Array<FtChipChoiceOption>;
+    selectedOptions: Set<string>;
+    protected render(): import("lit").TemplateResult<1>;
+    private onSlotChange;
+    protected update(changedProperties: PropertyValues): void;
+    private onChange;
+}

package/build/ft-chip-choice.js

@@ -0,0 +1,89 @@
+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, queryAssignedElements, state } from "lit/decorators.js";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-chip-choice.styles";
+export class FtChipChoiceChangeEvent extends CustomEvent {
+    constructor(value) {
+        super("change", { detail: { value }, bubbles: true, composed: true });
+    }
+}
+class FtChipChoice extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "";
+        this.multiselect = false;
+        this.role = "radiogroup";
+        this.ariaLabelledBy = "";
+        this.selectedOptions = new Set();
+    }
+    render() {
+        return html `
+            <slot @slotchange=${this.onSlotChange}
+                  @change=${this.onChange}>
+            </slot>
+        `;
+    }
+    onSlotChange() {
+        this.chipChoiceOptions.forEach(option => {
+            option.name = this.name;
+            if (option.selected) {
+                this.selectedOptions.add(option.value);
+                this.requestUpdate();
+            }
+        });
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has("multiselect")) {
+            this.role = this.multiselect ? "group" : "radiogroup";
+            this.chipChoiceOptions.forEach(option => {
+                option.role = this.multiselect ? "checkbox" : "radio";
+            });
+        }
+    }
+    onChange(event) {
+        event.stopPropagation();
+        if (!event.detail.selected) {
+            this.selectedOptions.delete(event.detail.value);
+        }
+        else {
+            if (this.multiselect) {
+                this.selectedOptions.add(event.detail.value);
+            }
+            else {
+                this.selectedOptions = new Set([event.detail.value]);
+                this.chipChoiceOptions.map((chip) => {
+                    chip.selected = chip.value === event.detail.value;
+                });
+            }
+        }
+        this.requestUpdate();
+        this.dispatchEvent(new FtChipChoiceChangeEvent(this.selectedOptions));
+    }
+}
+FtChipChoice.styles = styles;
+__decorate([
+    property()
+], FtChipChoice.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtChipChoice.prototype, "multiselect", void 0);
+__decorate([
+    property({ reflect: true, attribute: "role" })
+], FtChipChoice.prototype, "role", void 0);
+__decorate([
+    property({ reflect: true, attribute: "aria-labelledby" })
+], FtChipChoice.prototype, "ariaLabelledBy", void 0);
+__decorate([
+    queryAssignedElements()
+], FtChipChoice.prototype, "chipChoiceOptions", void 0);
+__decorate([
+    state()
+], FtChipChoice.prototype, "selectedOptions", void 0);
+export { FtChipChoice };