@fluid-topics/ft-chip 2.0.38 → 2.1.1

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

@@ -1,23 +1,23 @@
 export declare const FtChipCssVariables: {
-    backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    color: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    iconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    rippleColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    horizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    verticalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    opacityDisabled: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    backgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    color: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontWeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    iconSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    borderRadius: import("@fluid-topics/design-system-variables").FtCssVariable;
+    rippleColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    horizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    verticalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    borderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    opacityDisabled: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const FtChipHighlightedCssVariables: {
-    backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    color: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    rippleColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    backgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    color: import("@fluid-topics/design-system-variables").FtCssVariable;
+    rippleColor: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const FtChipDenseCssVariables: {
-    horizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    verticalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    horizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    verticalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const styles: import("lit").CSSResult[];

package/build/index.d.ts

@@ -1,7 +1,4 @@
 export * from "./ft-chip";
 export * from "./ft-chip.styles";
 export * from "./ft-chip.property";
-export * from "./ftds-chip";
-export * from "./ftds-chip.styles";
-export * from "./ftds-chip.property";
 import "./define";

package/build/index.js

@@ -1,7 +1,4 @@
 export * from "./ft-chip";
 export * from "./ft-chip.styles";
 export * from "./ft-chip.property";
-export * from "./ftds-chip";
-export * from "./ftds-chip.styles";
-export * from "./ftds-chip.property";
 import "./define";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-chip",
-    "version": "2.0.38",
+    "version": "2.1.1",
     "description": "A generic Fluid Topics chip",
     "keywords": [
         "Lit"
@@ -19,12 +19,12 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/design-system-variables": "3.4.1",
-        "@fluid-topics/ft-icon": "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/design-system-variables": "3.5.0",
+        "@fluid-topics/ft-icon": "2.1.1",
+        "@fluid-topics/ft-ripple": "2.1.1",
+        "@fluid-topics/ft-typography": "2.1.1",
+        "@fluid-topics/ft-wc-utils": "2.1.1",
         "lit": "3.1.0"
     },
-    "gitHead": "8a5f1d6fb69ac18ec2e6d05dcf82e036d7423c35"
+    "gitHead": "a9f1e471fb2dba9aeb8c12394a25460f675597dc"
 }

package/build/ftds-chip.d.ts

@@ -1,25 +0,0 @@
-import { ElementDefinitionsMap, FtdsBase } from "@fluid-topics/ft-wc-utils";
-import { FtdsChipProperties } from "./ftds-chip.property";
-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?: string;
-    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

@@ -1,132 +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, 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/ft-typography";
-import { FtIcon, FtIcons, FtIconVariants, } from "@fluid-topics/ft-icon";
-import { designSystemStyle } from "./ftds-chip.styles";
-import { DesignSystemSize } from "@fluid-topics/design-system-variables";
-import { FtdsButton } from "@fluid-topics/ft-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">
-                    <ft-icon .variant=${FtIconVariants.fluid_topics} .value=${this.icon} part="icon"></ft-icon>
-                </div>
-            ` : nothing;
-    }
-    renderAction() {
-        if (this.removable) {
-            return html `
-                <ftds-button round
-                             class="ftds-chip--remove-button"
-                             @click=${this.dispatchRemoveEvent}
-                             icon="${FtIcons.X_MARK}"
-                             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,
-    "ft-icon": FtIcon,
-    "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([
-    query("ftds-typography slot")
-], FtdsChip.prototype, "slottedContent", void 0);

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

@@ -1,6 +0,0 @@
-export interface FtdsChipProperties {
-    removable?: boolean;
-    label?: string;
-    icon?: string;
-    multiLine?: boolean;
-}

package/build/ftds-chip.property.js

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

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

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

package/build/ftds-chip.styles.js

@@ -1,184 +0,0 @@
-import { css } from "lit";
-import { chip } from "@fluid-topics/design-system-variables";
-import { setVariable } from "@fluid-topics/ft-wc-utils";
-import { FtIconCssVariables } from "@fluid-topics/ft-icon";
-import { FtdsButtonCssVariables } from "@fluid-topics/ft-button";
-// language=CSS
-export const designSystemStyle = [
-    css `
-        :host {
-            display: inline-block;
-            max-width: 100%;
-            pointer-events: none;
-        }
-
-        .ftds-chip {
-            display: flex;
-            align-items: center;
-            box-sizing: border-box;
-        }
-
-        .ftds-chip--icon-container {
-            display: inline-flex;
-            align-items: center;
-            flex: none;
-        }
-
-        .ftds-chip ftds-typography {
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-            min-width: 0;
-        }
-
-        .ftds-chip:not(.ftds-chip--multi-line) ftds-typography::part(text) {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-
-        .ftds-chip--remove-button::part(icon) {
-            transform: scale(1.35); /* Little trick to have a bigger icon inside of the button */
-        }
-
-        .ftds-chip--remove-button {
-            position: relative;
-        }
-
-        /* SMALL VARIANT */
-        .ftds--size-small {
-            min-height: ${chip.smallMinHeight};
-            padding: 0 ${chip.smallHorizontalPadding};
-            border-radius: ${chip.smallBorderRadius};
-            border-width: ${chip.smallBorderWidth};
-            border-style: solid;
-            ${setVariable(FtIconCssVariables.size, chip.smallIconSize)}
-        }
-
-        .ftds--size-small.ftds-chip--with-action {
-            padding-right: ${chip.smallButtonRightPadding};
-        }
-
-        .ftds--size-small ftds-typography {
-            padding: 0 2px;
-        }
-
-        .ftds--size-small .ftds-chip--icon-container {
-            overflow: visible;
-            height: ${chip.smallIconSize};
-            margin-right: ${chip.smallButtonRightPadding};
-        }
-
-        /* Dirty non-variabilized tweaks to properly center the icon */
-        .ftds--size-small .ftds-chip--remove-button {
-            overflow: visible;
-            top: -3px;
-            height: ${chip.smallIconSize};
-            transform: scale(.75); /* Little trick to have a (even) bigger icon inside of the button */
-            ${FtdsButtonCssVariables.smallIconOnlyWidth.set("15px")};
-        }
-
-        .ftds--size-small .ftds-chip--remove-button::part(icon) {
-            transform: scale(2); /* Same as above */
-        }
-
-        /* MEDIUM VARIANT */
-        .ftds--size-medium {
-            min-height: ${chip.mediumMinHeight};
-            padding: 0 ${chip.mediumHorizontalPadding};
-            border-radius: ${chip.mediumBorderRadius};
-            border-width: ${chip.mediumBorderWidth};
-            border-style: solid;
-            gap: ${chip.mediumGap};
-            ${setVariable(FtIconCssVariables.size, chip.mediumIconSize)}
-        }
-
-        .ftds--size-medium.ftds-chip--with-action {
-            padding-right: ${chip.mediumButtonRightPadding};
-        }
-
-        .ftds--size-medium .ftds-chip--remove-button {
-            right: -1px; /* Fixing manually the alignement of the button with the border of the chip */
-        }
-
-        /* LARGE VARIANT */
-        .ftds--size-large {
-            min-height: ${chip.largeMinHeight};
-            padding: 0 ${chip.largeHorizontalPadding};
-            border-radius: ${chip.largeBorderRadius};
-            border-width: ${chip.largeBorderWidth};
-            border-style: solid;
-            gap: ${chip.largeGap};
-            ${setVariable(FtIconCssVariables.size, chip.largeIconSize)}
-        }
-
-        .ftds--size-large.ftds-chip--with-action {
-            padding-right: ${chip.largeButtonRightPadding};
-        }
-
-        .ftds--size-large .ftds-chip--remove-button {
-            right: -2px; /* Fixing manually the alignement of the button with the border of the chip */
-        }
-
-
-        /* NEUTRAL COLORS */
-        .ftds--family-neutral {
-            background-color: ${chip.neutralBackgroundColor};
-            border-color: ${chip.neutralBorderColor};
-            color: ${chip.neutralColor};
-        }
-
-        .ftds--family-neutral .ftds-chip--icon-container {
-            color: ${chip.neutralIconColor};
-        }
-
-
-        /* INFO COLORS */
-        .ftds--family-info {
-            background-color: ${chip.infoBackgroundColor};
-            border-color: ${chip.infoBorderColor};
-            color: ${chip.infoColor};
-        }
-
-        .ftds--family-info .ftds-chip--icon-container {
-            color: ${chip.infoIconColor};
-        }
-
-
-        /* SUCCESS COLORS */
-        .ftds--family-success {
-            background-color: ${chip.successBackgroundColor};
-            border-color: ${chip.successBorderColor};
-            color: ${chip.successColor};
-        }
-
-        .ftds--family-success .ftds-chip--icon-container {
-            color: ${chip.successIconColor};
-        }
-
-
-        /* WARNING COLORS */
-        .ftds--family-warning {
-            background-color: ${chip.warningBackgroundColor};
-            border-color: ${chip.warningBorderColor};
-            color: ${chip.warningColor};
-        }
-
-        .ftds--family-warning .ftds-chip--icon-container {
-            color: ${chip.warningIconColor};
-        }
-
-
-        /* ERROR COLORS */
-        .ftds--family-error {
-            background-color: ${chip.errorBackgroundColor};
-            border-color: ${chip.errorBorderColor};
-            color: ${chip.errorColor};
-        }
-
-        .ftds--family-error .ftds-chip--icon-container {
-            color: ${chip.errorIconColor};
-        }
-    `,
-];