@momentum-design/components 0.106.8 → 0.107.0

package/dist/components/chip/chip.component.js

@@ -10,8 +10,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
-import { Component } from '../../models';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import StaticChip from '../staticchip/staticchip.component';
 import { DEFAULTS } from './chip.constants';
 import styles from './chip.styles';
 /**
@@ -95,7 +95,7 @@ class Chip extends IconNameMixin(Buttonsimple) {
     `;
     }
 }
-Chip.styles = [...Component.styles, ...styles];
+Chip.styles = [...StaticChip.styles, ...styles];
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)

package/dist/components/chip/chip.constants.d.ts

@@ -1,16 +1,5 @@
+import { COLOR } from '../staticchip/staticchip.constants';
 declare const TAG_NAME: "mdc-chip";
-declare const COLOR: {
-    readonly DEFAULT: "default";
-    readonly COBALT: "cobalt";
-    readonly GOLD: "gold";
-    readonly LIME: "lime";
-    readonly MINT: "mint";
-    readonly ORANGE: "orange";
-    readonly PINK: "pink";
-    readonly PURPLE: "purple";
-    readonly SLATE: "slate";
-    readonly VIOLET: "violet";
-};
 declare const DEFAULTS: {
     readonly COLOR: "default";
     readonly TEXT_TYPE: "body-midsize-regular";

package/dist/components/chip/chip.constants.js

@@ -1,20 +1,9 @@
 import { ROLE } from '../../utils/roles';
 import utils from '../../utils/tag-name';
 import { BUTTON_SIZES } from '../buttonsimple/buttonsimple.constants';
+import { COLOR } from '../staticchip/staticchip.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 const TAG_NAME = utils.constructTagName('chip');
-const COLOR = {
-    DEFAULT: 'default',
-    COBALT: 'cobalt',
-    GOLD: 'gold',
-    LIME: 'lime',
-    MINT: 'mint',
-    ORANGE: 'orange',
-    PINK: 'pink',
-    PURPLE: 'purple',
-    SLATE: 'slate',
-    VIOLET: 'violet',
-};
 const DEFAULTS = {
     COLOR: COLOR.DEFAULT,
     TEXT_TYPE: TYPE.BODY_MIDSIZE_REGULAR,

package/dist/components/chip/chip.styles.js

@@ -2,21 +2,8 @@ import { css } from 'lit';
 import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
 const styles = css `
   :host {
-    height: 1.5rem;
-    gap: 0.25rem;
-    padding: 0 0.5rem;
-    border-radius: 0.25rem;
-    border: 1px solid;
     cursor: pointer;
-    white-space: nowrap;
-
-    --mdc-chip-color: var(--mds-color-theme-text-primary-normal);
-    --mdc-chip-border-color: var(--mds-color-theme-outline-button-normal);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-default-normal);
-
-    color: var(--mdc-chip-color);
-    border-color: var(--mdc-chip-border-color);
-    background-color: var(--mdc-chip-background-color);
+    height: 1.5rem;
   }
 
   :host([color='default']:hover) {
@@ -27,11 +14,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-default-active);
   }
 
-  :host([color='cobalt']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-theme-normal);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-cobalt-normal);
-  }
-
   :host([color='cobalt']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-cobalt-hover);
   }
@@ -40,11 +22,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-cobalt-active);
   }
 
-  :host([color='gold']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-label-gold);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-gold-normal);
-  }
-
   :host([color='gold']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-gold-hover);
   }
@@ -53,11 +30,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-gold-active);
   }
 
-  :host([color='lime']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-label-lime);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-lime-normal);
-  }
-
   :host([color='lime']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-lime-hover);
   }
@@ -66,11 +38,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-lime-active);
   }
 
-  :host([color='mint']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-label-mint);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-mint-normal);
-  }
-
   :host([color='mint']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-mint-hover);
   }
@@ -79,11 +46,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-mint-active);
   }
 
-  :host([color='pink']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-label-pink);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-pink-normal);
-  }
-
   :host([color='pink']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-pink-hover);
   }
@@ -92,11 +54,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-pink-active);
   }
 
-  :host([color='purple']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-label-purple);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-purple-normal);
-  }
-
   :host([color='purple']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-purple-hover);
   }
@@ -105,11 +62,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-purple-active);
   }
 
-  :host([color='orange']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-label-orange);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-orange-normal);
-  }
-
   :host([color='orange']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-orange-hover);
   }
@@ -118,11 +70,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-orange-active);
   }
 
-  :host([color='slate']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-label-slate);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-slate-normal);
-  }
-
   :host([color='slate']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-slate-hover);
   }
@@ -131,11 +78,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-slate-active);
   }
 
-  :host([color='violet']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-label-violet);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-violet-normal);
-  }
-
   :host([color='violet']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-violet-hover);
   }

package/dist/components/staticchip/index.d.ts

@@ -0,0 +1,9 @@
+import StaticChip from './staticchip.component';
+import '../text';
+import '../icon';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-staticchip']: StaticChip;
+    }
+}
+export default StaticChip;

package/dist/components/staticchip/index.js

@@ -0,0 +1,6 @@
+import StaticChip from './staticchip.component';
+import { TAG_NAME } from './staticchip.constants';
+import '../text';
+import '../icon';
+StaticChip.register(TAG_NAME);
+export default StaticChip;

package/dist/components/staticchip/staticchip.component.d.ts

@@ -0,0 +1,54 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+import type { ColorType } from './staticchip.types';
+declare const StaticChip_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Component;
+/**
+ * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.
+ *
+ * It is recommended to keep the label text for the chip component concise and compact.
+ * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.
+ *
+ *
+ * @tagname mdc-staticchip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the static chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the static chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the static chip.
+ *
+ */
+declare class StaticChip extends StaticChip_base {
+    /**
+     * The color of the chip. It supports the following colors
+     * - default
+     * - cobalt
+     * - gold
+     * - lime
+     * - mint
+     * - orange
+     * - pink
+     * - purple
+     * - slate
+     * - violet
+     *
+     * @default default
+     */
+    color: ColorType;
+    /**
+     * The visible label text of the chip.
+     *
+     * We recommend limiting the <b>maximum length of the label text to 20 characters</b>,
+     * including empty spaces to split words.
+     */
+    label: string;
+    /**
+     * Renders the icon element if available.
+     * @returns The icon element if available, otherwise nothing.
+     */
+    private renderIcon;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default StaticChip;

package/dist/components/staticchip/staticchip.component.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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
+import { Component } from '../../models';
+import { DEFAULTS } from './staticchip.constants';
+import styles from './staticchip.styles';
+/**
+ * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.
+ *
+ * It is recommended to keep the label text for the chip component concise and compact.
+ * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.
+ *
+ *
+ * @tagname mdc-staticchip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the static chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the static chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the static chip.
+ *
+ */
+class StaticChip extends IconNameMixin(Component) {
+    constructor() {
+        super(...arguments);
+        /**
+         * The color of the chip. It supports the following colors
+         * - default
+         * - cobalt
+         * - gold
+         * - lime
+         * - mint
+         * - orange
+         * - pink
+         * - purple
+         * - slate
+         * - violet
+         *
+         * @default default
+         */
+        this.color = DEFAULTS.COLOR;
+        /**
+         * The visible label text of the chip.
+         *
+         * We recommend limiting the <b>maximum length of the label text to 20 characters</b>,
+         * including empty spaces to split words.
+         */
+        this.label = '';
+    }
+    /**
+     * Renders the icon element if available.
+     * @returns The icon element if available, otherwise nothing.
+     */
+    renderIcon() {
+        if (!this.iconName)
+            return nothing;
+        return html ` <mdc-icon name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
+    }
+    render() {
+        return html `
+      ${this.renderIcon()}
+      ${this.label
+            ? html `<mdc-text part="label" type="${DEFAULTS.TEXT_TYPE}" tagname="${DEFAULTS.TAG_NAME}"
+            >${this.label}</mdc-text
+          >`
+            : nothing}
+    `;
+    }
+}
+StaticChip.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], StaticChip.prototype, "color", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], StaticChip.prototype, "label", void 0);
+export default StaticChip;

package/dist/components/staticchip/staticchip.constants.d.ts

@@ -0,0 +1,19 @@
+declare const TAG_NAME: "mdc-staticchip";
+declare const COLOR: {
+    readonly DEFAULT: "default";
+    readonly COBALT: "cobalt";
+    readonly GOLD: "gold";
+    readonly LIME: "lime";
+    readonly MINT: "mint";
+    readonly ORANGE: "orange";
+    readonly PINK: "pink";
+    readonly PURPLE: "purple";
+    readonly SLATE: "slate";
+    readonly VIOLET: "violet";
+};
+declare const DEFAULTS: {
+    readonly COLOR: "default";
+    readonly TEXT_TYPE: "body-midsize-regular";
+    readonly TAG_NAME: "span";
+};
+export { TAG_NAME, COLOR, DEFAULTS };

package/dist/components/staticchip/staticchip.constants.js

@@ -0,0 +1,21 @@
+import utils from '../../utils/tag-name';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+const TAG_NAME = utils.constructTagName('staticchip');
+const COLOR = {
+    DEFAULT: 'default',
+    COBALT: 'cobalt',
+    GOLD: 'gold',
+    LIME: 'lime',
+    MINT: 'mint',
+    ORANGE: 'orange',
+    PINK: 'pink',
+    PURPLE: 'purple',
+    SLATE: 'slate',
+    VIOLET: 'violet',
+};
+const DEFAULTS = {
+    COLOR: COLOR.DEFAULT,
+    TEXT_TYPE: TYPE.BODY_MIDSIZE_REGULAR,
+    TAG_NAME: VALID_TEXT_TAGS.SPAN,
+};
+export { TAG_NAME, COLOR, DEFAULTS };

package/dist/components/staticchip/staticchip.styles.d.ts

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

package/dist/components/staticchip/staticchip.styles.js

@@ -0,0 +1,66 @@
+import { css } from 'lit';
+import { hostFitContentStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    height: 1.5rem;
+    gap: 0.25rem;
+    padding: 0 0.5rem;
+    border-radius: 0.25rem;
+    border: 1px solid;
+    white-space: nowrap;
+
+    --mdc-chip-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-chip-border-color: var(--mds-color-theme-outline-button-normal);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-default-normal);
+
+    color: var(--mdc-chip-color);
+    border-color: var(--mdc-chip-border-color);
+    background-color: var(--mdc-chip-background-color);
+  }
+
+  :host([color='cobalt']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-theme-normal);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-cobalt-normal);
+  }
+
+  :host([color='gold']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-label-gold);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-gold-normal);
+  }
+
+  :host([color='lime']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-label-lime);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-lime-normal);
+  }
+
+  :host([color='mint']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-label-mint);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-mint-normal);
+  }
+
+  :host([color='pink']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-label-pink);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-pink-normal);
+  }
+
+  :host([color='purple']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-label-purple);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-purple-normal);
+  }
+
+  :host([color='orange']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-label-orange);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-orange-normal);
+  }
+
+  :host([color='slate']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-label-slate);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-slate-normal);
+  }
+
+  :host([color='violet']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-label-violet);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-violet-normal);
+  }
+`;
+export default [hostFitContentStyles, styles];

package/dist/components/staticchip/staticchip.types.d.ts

@@ -0,0 +1,4 @@
+import type { ValueOf } from '../../utils/types';
+import { COLOR } from './staticchip.constants';
+type ColorType = ValueOf<typeof COLOR>;
+export type { ColorType };

package/dist/components/staticchip/staticchip.types.js

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