@fluid-topics/ftds-chip 2.1.0

package/README.md

@@ -0,0 +1,19 @@
+The design system chip component
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-chip
+yarn add @fluid-topics/ftds-chip
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ftds-chip"
+
+function render() {
+    return html` <ftds-chip foo="bar"></ftds-chip> `
+}
+```

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

package/build/definitions.js

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

package/build/ftds-chip.d.ts

@@ -0,0 +1,27 @@
+import { ElementDefinitionsMap, FtdsBase } from "@fluid-topics/ft-wc-utils";
+import { FtdsIcons, FtdsIconVariants } from "@fluid-topics/ftds-icon";
+import { FtdsChipProperties } from "./ftds-chip.properties";
+export declare class RemoveEvent extends CustomEvent<void> {
+    constructor();
+}
+export declare class FtdsChip extends FtdsBase implements FtdsChipProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    withAction: boolean;
+    removable: boolean;
+    multiLine: boolean;
+    removeButtonLabel: string;
+    label: string;
+    icon?: FtdsIcons;
+    iconVariant?: FtdsIconVariants;
+    private slottedContent?;
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderIcon;
+    private renderAction;
+    private resolveButtonSize;
+    private getLabel;
+    getTextContent(): string;
+    private onSlotchange;
+    private dispatchRemoveEvent;
+    private typographyVariant;
+}

package/build/ftds-chip.js

@@ -0,0 +1,136 @@
+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, nothing, } from "lit";
+import { property, query, } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { DesignSystemFamily, FtdsBase, } from "@fluid-topics/ft-wc-utils";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { FtdsIcon, FtdsIcons, FtdsIconVariants, } from "@fluid-topics/ftds-icon";
+import { designSystemStyle } from "./ftds-chip.styles";
+import { DesignSystemSize } from "@fluid-topics/design-system-variables";
+import { FtdsButton } from "@fluid-topics/ftds-button";
+export class RemoveEvent extends CustomEvent {
+    constructor() {
+        super("remove");
+    }
+}
+export class FtdsChip extends FtdsBase {
+    constructor() {
+        super(...arguments);
+        this.withAction = false;
+        this.removable = false;
+        this.multiLine = false;
+        this.removeButtonLabel = "Remove";
+        this.label = "";
+    }
+    render() {
+        const classes = {
+            "ftds-chip": true,
+            "ftds-chip--with-action": this.removable || this.withAction,
+            "ftds-chip--with-icon": !!this.icon,
+            "ftds-chip--multi-line": this.multiLine,
+            ...this.getDesignSystemBaseClasses(),
+        };
+        return html `
+            <div class="${classMap(classes)}"
+                 aria-label="${this.getLabel()}"
+                 part="chip">
+                ${this.renderIcon()}
+                <ftds-typography variant="${this.typographyVariant()}" element="span" class="ftds-chip--label" part="label">
+                    <slot @slotchange=${this.onSlotchange}></slot>
+                </ftds-typography>
+                ${this.renderAction()}
+            </div>
+        `;
+    }
+    renderIcon() {
+        return this.icon
+            ? html `
+                <div class="ftds-chip--icon-container" part="icon-container">
+                    <ftds-icon .variant=${this.iconVariant} .icon=${this.icon} part="icon"></ftds-icon>
+                </div>
+            ` : nothing;
+    }
+    renderAction() {
+        if (this.removable) {
+            return html `
+                <ftds-button round
+                             class="ftds-chip--remove-button"
+                             @click=${this.dispatchRemoveEvent}
+                             icon="${FtdsIcons.XMARK}"
+                             iconVariant="${FtdsIconVariants.regular}"
+                             label="${this.removeButtonLabel}"
+                             family="${DesignSystemFamily.neutral}"
+                             size="${this.resolveButtonSize()}"
+                             part="icon-button"
+                ></ftds-button>
+            `;
+        }
+        return this.withAction ? html `
+            <slot name="action"></slot>
+        ` : nothing;
+    }
+    resolveButtonSize() {
+        switch (this.size) {
+            case DesignSystemSize.large:
+                return DesignSystemSize.medium;
+            default:
+                return DesignSystemSize.small;
+        }
+    }
+    getLabel() {
+        return this.label || this.getTextContent();
+    }
+    getTextContent() {
+        var _a, _b;
+        return (_b = (_a = this.slottedContent) === null || _a === void 0 ? void 0 : _a.assignedNodes().map((n) => n.textContent).join("").trim()) !== null && _b !== void 0 ? _b : "";
+    }
+    onSlotchange() {
+        this.requestUpdate();
+    }
+    dispatchRemoveEvent() {
+        this.dispatchEvent(new RemoveEvent());
+    }
+    typographyVariant() {
+        switch (this.size) {
+            case DesignSystemSize.large:
+                return FtdsTypographyVariants.body2medium;
+            default:
+                return FtdsTypographyVariants.caption1medium;
+        }
+    }
+}
+FtdsChip.elementDefinitions = {
+    "ftds-typography": FtdsTypography,
+    "ftds-icon": FtdsIcon,
+    "ftds-button": FtdsButton,
+};
+FtdsChip.styles = designSystemStyle;
+__decorate([
+    property({ type: Boolean })
+], FtdsChip.prototype, "withAction", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsChip.prototype, "removable", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsChip.prototype, "multiLine", void 0);
+__decorate([
+    property()
+], FtdsChip.prototype, "removeButtonLabel", void 0);
+__decorate([
+    property()
+], FtdsChip.prototype, "label", void 0);
+__decorate([
+    property()
+], FtdsChip.prototype, "icon", void 0);
+__decorate([
+    property()
+], FtdsChip.prototype, "iconVariant", void 0);
+__decorate([
+    query("ftds-typography slot")
+], FtdsChip.prototype, "slottedContent", void 0);