@fluid-topics/ftds-chip 2.1.0

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

@@ -0,0 +1,8 @@
+import { FtdsIcons, FtdsIconVariants } from "@fluid-topics/ftds-icon";
+export interface FtdsChipProperties {
+    removable?: boolean;
+    label?: string;
+    icon?: FtdsIcons;
+    iconVariant?: FtdsIconVariants;
+    multiLine?: boolean;
+}

package/build/ftds-chip.properties.js

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

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

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

package/build/ftds-chip.styles.js

@@ -0,0 +1,176 @@
+import { css } from "lit";
+import { chip } from "@fluid-topics/design-system-variables";
+import { setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtdsIconCssVariables } from "@fluid-topics/ftds-icon";
+import { FtdsButtonCssVariables } from "@fluid-topics/ftds-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 {
+            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(FtdsIconCssVariables.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: -4px;
+            height: ${chip.smallIconSize};
+            transform: scale(.75); /* Little trick to have a (even) bigger icon inside of the button */
+            ${FtdsButtonCssVariables.smallIconOnlyWidth.set("15px")};
+        }
+
+        /* 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(FtdsIconCssVariables.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(FtdsIconCssVariables.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};
+        }
+    `,
+];

package/build/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ftds-chip.styles";
+export * from "./ftds-chip.properties";
+export * from "./ftds-chip";
+import "./define";

package/build/index.js

@@ -0,0 +1,4 @@
+export * from "./ftds-chip.styles";
+export * from "./ftds-chip.properties";
+export * from "./ftds-chip";
+import "./define";

package/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "@fluid-topics/ftds-chip",
+    "version": "2.1.0",
+    "description": "The design system chip component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ftds-chip.min.js",
+    "typings": "build/index",
+    "files": [
+        "build/**/*.js",
+        "build/**/*.ts"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+    },
+    "dependencies": {
+        "@fluid-topics/design-system-variables": "3.5.0",
+        "@fluid-topics/ft-wc-utils": "2.1.0",
+        "@fluid-topics/ftds-button": "2.1.0",
+        "@fluid-topics/ftds-icon": "2.1.0",
+        "@fluid-topics/ftds-typography": "2.1.0",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "2.1.0"
+    },
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
+}