@fluid-topics/ftds-chip-group 2.1.0

package/README.md

@@ -0,0 +1,19 @@
+A chip component.
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-chip-group
+yarn add @fluid-topics/ft-chip-group
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-chip-group"
+
+function render() {
+    return html` <ftds-chip-group></ftds-chip-group> `
+}
+```

package/build/FtdsChipGroupMessages.d.ts

@@ -0,0 +1,8 @@
+import { DefaultI18nMessages, I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface FtdsChipGroupMessages extends I18nMessages {
+    defaultRemoveLabel(): string;
+    showMoreChipAriaLabel(count: number): string;
+    showMorePopoverTitle(count: number): string;
+}
+export declare const chipGroupContext: I18nMessageContext<FtdsChipGroupMessages>;
+export declare const defaultChipGroupMessages: DefaultI18nMessages<FtdsChipGroupMessages>;

package/build/FtdsChipGroupMessages.js

@@ -0,0 +1,9 @@
+import { I18nMessageContext, } from "@fluid-topics/ft-i18n";
+export const chipGroupContext = I18nMessageContext.build("ftdsChipGroup");
+export const defaultChipGroupMessages = {
+    "defaultRemoveLabel": "Remove",
+    "showMoreChipAriaLabel": "{0} more",
+    "showMoreChipAriaLabel[\\=1]": "1 more",
+    "showMorePopoverTitle[\\=1]": "1 more value",
+    "showMorePopoverTitle": "{0} more values",
+};

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 { FtdsChipGroup } from "./ftds-chip-group";
+declare const _default: {
+    "ftds-chip-group": typeof FtdsChipGroup;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,4 @@
+import { FtdsChipGroup } from "./ftds-chip-group";
+export default {
+    "ftds-chip-group": FtdsChipGroup,
+};

package/build/ftds-chip-group.d.ts

@@ -0,0 +1,27 @@
+import { PropertyValues, TemplateResult } from "lit";
+import { ElementDefinitionsMap, FtdsBase } from "@fluid-topics/ft-wc-utils";
+import { ChipElement, FtdsChipGroupProperties } from "./ftds-chip-group.properties";
+import { FtdsChip } from "@fluid-topics/ftds-chip";
+declare const FtdsChipGroup_base: typeof FtdsBase & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtdsChipGroup extends FtdsChipGroup_base implements FtdsChipGroupProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult[];
+    removable: boolean;
+    maxNumberOfChips?: number;
+    popoverTitle: string;
+    chips: ChipElement[];
+    isPopoverOpened: boolean;
+    allChips?: NodeListOf<FtdsChip>;
+    private lastRemovedChipIndex?;
+    constructor();
+    protected updated(changedProperties: PropertyValues): void;
+    protected render(): TemplateResult<1>;
+    private renderExtraChipsPopover;
+    protected renderChip(chip: ChipElement): TemplateResult;
+    private onChipRemoved;
+    private handleFocusOnChipDeleted;
+    private focusChip;
+    private toggleExtraChips;
+    private getFamilyIcon;
+}
+export {};

package/build/ftds-chip-group.js

@@ -0,0 +1,163 @@
+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 { repeat } from "lit/directives/repeat.js";
+import { property, queryAll, state, } from "lit/decorators.js";
+import { DesignSystemFamily, FtdsBase, jsonProperty, numberProperty, } from "@fluid-topics/ft-wc-utils";
+import { designSystemStyle } from "./ftds-chip-group.styles";
+import { RemoveChipEvent, } from "./ftds-chip-group.properties";
+import { FtdsChip } from "@fluid-topics/ftds-chip";
+import { FtdsPopover } from "@fluid-topics/ftds-popover";
+import { classMap } from "lit/directives/class-map.js";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { chipGroupContext, defaultChipGroupMessages, } from "./FtdsChipGroupMessages";
+import { FtdsIcons, FtdsIconVariants } from "@fluid-topics/ftds-icon";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+export class FtdsChipGroup extends withI18n(FtdsBase) {
+    constructor() {
+        super();
+        this.removable = false;
+        this.popoverTitle = "";
+        this.chips = [];
+        this.isPopoverOpened = false;
+        this.addI18nContext(chipGroupContext, defaultChipGroupMessages);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has("chips") && this.lastRemovedChipIndex !== undefined) {
+            this.handleFocusOnChipDeleted(this.lastRemovedChipIndex);
+            this.lastRemovedChipIndex = undefined;
+        }
+    }
+    render() {
+        const visibleChips = this.maxNumberOfChips !== undefined
+            ? this.chips.slice(0, this.maxNumberOfChips)
+            : this.chips;
+        const hiddenCount = this.chips.length - visibleChips.length;
+        return html `
+            <ul>
+                ${repeat(visibleChips, (chip) => chip.value, (chip) => this.renderChip(chip))}
+                ${hiddenCount > 0 ? this.renderExtraChipsPopover(hiddenCount) : ""}
+            </ul>
+        `;
+    }
+    renderExtraChipsPopover(hiddenCount) {
+        const extraChips = this.chips.slice(this.maxNumberOfChips);
+        const classes = {
+            "show-more-chip": true,
+            "show-more-chip--active": this.isPopoverOpened,
+        };
+        return html `
+            <li>
+                <ftds-popover margins="dense"
+                              @opened-changed=${(e) => this.toggleExtraChips(e)}>
+                    <ftds-chip slot="trigger"
+                               class="${classMap(classes)}"
+                               role="button"
+                               tabindex="0"
+                               aria-haspopup="true"
+                               aria-expanded="${this.isPopoverOpened}"
+                               aria-controls="ftds-popover-wrapper">
+                        ${chipGroupContext.messages.showMoreChipAriaLabel(hiddenCount)}
+                    </ftds-chip>
+                    <div>
+                        <ftds-typography part="label"
+                                         element="span"
+                                         variant="${FtdsTypographyVariants.caption2semibold}">
+                            ${chipGroupContext.messages.showMorePopoverTitle(hiddenCount)}
+                        </ftds-typography>
+                        <ul>
+                            ${repeat(extraChips, (chip) => chip.value, (chip) => this.renderChip(chip))}
+                        </ul>
+                    </div>
+                </ftds-popover>
+            </li>
+        `;
+    }
+    renderChip(chip) {
+        var _a, _b, _c, _d;
+        return html `
+            <li>
+                <ft-tooltip
+                    text="${(_a = chip.label) !== null && _a !== void 0 ? _a : chip.value}"
+                    position="top">
+                    <ftds-chip class="chip-group-chip"
+                               exportparts="chip"
+                               ?removable=${this.removable}
+                               .family=${(_b = chip.family) !== null && _b !== void 0 ? _b : DesignSystemFamily.neutral}
+                               .icon=${this.getFamilyIcon(chip.family)}
+                               .iconVariant=${FtdsIconVariants.solid}
+                               .removeButtonLabel=${(_c = chip.removeLabel) !== null && _c !== void 0 ? _c : chipGroupContext.messages.defaultRemoveLabel()}
+                               @remove=${() => this.onChipRemoved(chip)}>
+                        ${(_d = chip.label) !== null && _d !== void 0 ? _d : chip.value}
+                    </ftds-chip>
+                </ft-tooltip>
+            </li>
+        `;
+    }
+    onChipRemoved(chip) {
+        this.lastRemovedChipIndex = this.chips.findIndex((c) => c.value === chip.value);
+        this.dispatchEvent(new RemoveChipEvent(chip));
+    }
+    handleFocusOnChipDeleted(deletedIndex) {
+        var _a;
+        const chipElements = Array.from((_a = this.allChips) !== null && _a !== void 0 ? _a : []);
+        if (chipElements.length === 0) {
+            return;
+        }
+        if (chipElements[deletedIndex]) {
+            void this.focusChip(chipElements[deletedIndex]);
+        }
+        else {
+            void this.focusChip(chipElements[deletedIndex - 1]);
+        }
+    }
+    async focusChip(chip) {
+        var _a;
+        await chip.updateComplete;
+        const deleteButton = (_a = chip.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".ftds-chip--remove-button");
+        await (deleteButton === null || deleteButton === void 0 ? void 0 : deleteButton.updateComplete);
+        deleteButton === null || deleteButton === void 0 ? void 0 : deleteButton.focus();
+    }
+    toggleExtraChips(e) {
+        this.isPopoverOpened = e.detail.opened;
+    }
+    getFamilyIcon(family) {
+        switch (family) {
+            case DesignSystemFamily.warning:
+                return FtdsIcons.TRIANGLE_EXCLAMATION;
+            default:
+                return undefined;
+        }
+    }
+}
+FtdsChipGroup.elementDefinitions = {
+    "ftds-chip": FtdsChip,
+    "ftds-popover": FtdsPopover,
+    "ftds-typography": FtdsTypography,
+    "ft-tooltip": FtTooltip,
+};
+FtdsChipGroup.styles = designSystemStyle;
+__decorate([
+    property({ type: Boolean })
+], FtdsChipGroup.prototype, "removable", void 0);
+__decorate([
+    numberProperty()
+], FtdsChipGroup.prototype, "maxNumberOfChips", void 0);
+__decorate([
+    property()
+], FtdsChipGroup.prototype, "popoverTitle", void 0);
+__decorate([
+    jsonProperty([])
+], FtdsChipGroup.prototype, "chips", void 0);
+__decorate([
+    state()
+], FtdsChipGroup.prototype, "isPopoverOpened", void 0);
+__decorate([
+    queryAll(".chip-group-chip")
+], FtdsChipGroup.prototype, "allChips", void 0);