@momentum-design/components 0.4.13 → 0.4.15

package/dist/components/avatar/avatar.component.js

@@ -1,12 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const lit_1 = require("lit");
-const decorators_js_1 = require("lit/decorators.js");
-const if_defined_js_1 = require("lit/directives/if-defined.js");
-const avatar_styles_1 = tslib_1.__importDefault(require("./avatar.styles"));
-const models_1 = require("../../models");
-const avatar_constants_1 = require("./avatar.constants");
+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 } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import styles from './avatar.styles';
+import { Component } from '../../models';
+import { DEFAULTS, LENGTH_UNIT } from './avatar.constants';
 /**
  * @slot - This is a default/unnamed slot
  *
@@ -14,21 +20,21 @@ const avatar_constants_1 = require("./avatar.constants");
  *
  * @tagname mdc-avatar
  */
-class Avatar extends models_1.Component {
+class Avatar extends Component {
     constructor() {
         super(...arguments);
-        this.type = avatar_constants_1.DEFAULTS.TYPE;
+        this.type = DEFAULTS.TYPE;
         /**
          * Scale of the avatar
          */
-        this.size = avatar_constants_1.DEFAULTS.SIZE;
+        this.size = DEFAULTS.SIZE;
     }
     /**
      * Updates the size by setting the width and height
      */
     updateSize() {
         if (this.size) {
-            const value = `${this.size}${avatar_constants_1.LENGTH_UNIT}`;
+            const value = `${this.size}${LENGTH_UNIT}`;
             this.style.width = value;
             this.style.height = value;
         }
@@ -40,10 +46,10 @@ class Avatar extends models_1.Component {
         }
     }
     photoTemplate() {
-        return (0, lit_1.html) `
+        return html `
       <img
-        src="${(0, if_defined_js_1.ifDefined)(this.src)}"
-        alt="${(0, if_defined_js_1.ifDefined)(this.alt)}"
+        src="${ifDefined(this.src)}"
+        alt="${ifDefined(this.alt)}"
       />
     `;
     }
@@ -53,26 +59,26 @@ class Avatar extends models_1.Component {
             content = this.photoTemplate();
         }
         else {
-            content = (0, lit_1.html) ``;
+            content = html ``;
         }
-        return (0, lit_1.html) `${content}`;
+        return html `${content}`;
     }
 }
-Avatar.styles = [...models_1.Component.styles, ...avatar_styles_1.default];
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String, reflect: true }),
-    tslib_1.__metadata("design:type", String)
+Avatar.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
 ], Avatar.prototype, "type", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String }),
-    tslib_1.__metadata("design:type", String)
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
 ], Avatar.prototype, "alt", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String }),
-    tslib_1.__metadata("design:type", String)
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
 ], Avatar.prototype, "src", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: Number }),
-    tslib_1.__metadata("design:type", Number)
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
 ], Avatar.prototype, "size", void 0);
-exports.default = Avatar;
+export default Avatar;

package/dist/components/avatar/avatar.constants.js

@@ -1,14 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LENGTH_UNIT = exports.DEFAULTS = exports.TAG_NAME = void 0;
-const tslib_1 = require("tslib");
-const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
-const TAG_NAME = tag_name_1.default.constructTagName('avatar');
-exports.TAG_NAME = TAG_NAME;
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('avatar');
 const LENGTH_UNIT = 'rem';
-exports.LENGTH_UNIT = LENGTH_UNIT;
 const DEFAULTS = {
     TYPE: 'photo',
     SIZE: 1.5,
 };
-exports.DEFAULTS = DEFAULTS;
+export { TAG_NAME, DEFAULTS, LENGTH_UNIT };

package/dist/components/avatar/avatar.styles.js

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const lit_1 = require("lit");
-const styles = (0, lit_1.css) `
+import { css } from 'lit';
+const styles = css `
   :host {
     display: flex;
     justify-content: center;
@@ -17,4 +15,4 @@ const styles = (0, lit_1.css) `
     object-fit: cover;
   }
 `;
-exports.default = [styles];
+export default [styles];

package/dist/components/avatar/avatar.types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/components/avatar/index.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const avatar_component_1 = tslib_1.__importDefault(require("./avatar.component"));
-const avatar_constants_1 = require("./avatar.constants");
-avatar_component_1.default.register(avatar_constants_1.TAG_NAME);
-exports.default = avatar_component_1.default;
+import Avatar from './avatar.component';
+import { TAG_NAME } from './avatar.constants';
+Avatar.register(TAG_NAME);
+export default Avatar;

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

@@ -1,33 +1,23 @@
-import { CSSResult } from 'lit';
+import { CSSResult, PropertyValues, TemplateResult } from 'lit';
 import { Component } from '../../models';
-import type { BadgeType } from './badge.types';
 /**
- * @slot - This is a default/unnamed slot
- *
- * @summary This is MyElement
+ * A badge is a small, visually distinct element that provides additional information
+ * or highlights the status of an item.
+ * Badges are often used to display notification dot, counts, making them a useful tool for
+ * conveying information quickly without taking up much space.
+ * @dependency mdc-icon
+ * @dependency mdc-text
  *
  * @tagname mdc-badge
  */
 declare class Badge extends Component {
     /**
      * Type of the badge
-     * Can be `regular`, `icon`, `text` or `warning`
-     *
-     * Default: `regular`
-     */
-    type?: BadgeType;
-    /**
-     * Scale of the badge (works in combination with length unit)
-     *
-     * Default: `1`
-     */
-    size?: number;
-    /**
-     * Length unit attribute for scale
+     * Can be `dot` (notification) , `icon` and `counter`
      *
-     * Default: `rem`
+     * Default: `dot`
      */
-    lengthUnit?: string;
+    type: string;
     /**
      * If `type` is set to `icon`, attribute `iconName` can
      * be used to choose which icon should be shown
@@ -36,16 +26,71 @@ declare class Badge extends Component {
      */
     iconName?: string;
     /**
-     * If `type` is set to `text`, attribute `text` can
-     * be used to pass in any text to be displayed in the badge.
+     * badge variant
+     */
+    variant: string;
+    counter?: number;
+    maxCounter: number;
+    overlay: boolean;
+    /**
+     * Aria-label attribute to be set for accessibility
+     */
+    ariaLabel: string | null;
+    /**
+     * If `type` is set to `counter` and if `counter` is greater than `maxCounter`,
+     * then it will return a string the maxCounter value as string.
+     * Otherwise, it will return a string representation of `counter`.
+     * If `counter` is not a number, it will return an empty string.
+     * @param maxCounter - the maximum limit which can be displayed on the badge
+     * @param counter - the number to be displayed on the badge
+     * @returns the string representation of the counter
+     */
+    private getCounterText;
+    /**
+     * Method to generate the badge icon template.
+     * @param iconName - name of the icon to be used.
+     * @param variant - variant of the badge.
+     * @returns the template result of the icon.
+     */
+    private getBadgeIcon;
+    /**
+     * Method to generate the badge dot template.
+     * @param overlay - boolean indicating whether the badge should have an overlay.
+     * @returns the template result of the dot with mdc-badge-dot class.
+     */
+    private getBadgeDot;
+    /**
+     * This method generates the CSS classes for the badge icon.
+     * @param overlay - boolean indicating whether the badge should have an overlay.
+     * @param iconVariant - the variant of the icon badge.
+     * @param type - the type of the badge.
+     * @returns - an object containing the CSS classes for the icon.
+     */
+    private getIconClasses;
+    /**
+     * Method to generate the badge text and counter template.
+     * @param maxCounter - the maximum limit which can be displayed on the badge
+     * @param overlay - whether the badge should have an overlay.
+     * @param counter - the number to be displayed on the badge
+     * @returns the template result of the text.
+     */
+    private getBadgeCounterText;
+    /**
+     * Method to set the role based on the aria-label provided.
+     * If the aria-label is provided, the role of the element will be 'img'.
+     * Otherwise, the role will be null.
+     */
+    private setRoleByAriaLabel;
+    /**
+     * Generates the badge content based on the badge type.
+     * Utilizes various helper methods to create the appropriate badge template based on the
+     * current badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'
+     * types, returning the corresponding template result for each type.
+     * @returns the TemplateResult for the current badge type.
      */
-    text?: string;
-    private updateSize;
-    updated(changedProperties: Map<string, any>): void;
-    iconTemplate(): import("lit-html").TemplateResult<1>;
-    textTemplate(): import("lit-html").TemplateResult<1>;
-    warningTemplate(): import("lit-html").TemplateResult<1>;
-    render(): import("lit-html").TemplateResult<1>;
+    private getBadgeContentBasedOnType;
+    update(changedProperties: PropertyValues): void;
+    render(): TemplateResult<1 | 2 | 3>;
     static styles: Array<CSSResult>;
 }
 export default Badge;

package/dist/components/badge/badge.component.js

@@ -1,114 +1,208 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const lit_1 = require("lit");
-const decorators_js_1 = require("lit/decorators.js");
-const if_defined_js_1 = require("lit/directives/if-defined.js");
-const style_map_js_1 = require("lit/directives/style-map.js");
-const models_1 = require("../../models");
-const badge_constants_1 = require("./badge.constants");
-const badge_styles_1 = tslib_1.__importDefault(require("./badge.styles"));
+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 } from 'lit';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { Component } from '../../models';
+import { BADGE_TYPE, ICON_NAMES_LIST, DEFAULTS, ICON_VARIANT, ICON_STATE } from './badge.constants';
+import styles from './badge.styles';
 /**
- * @slot - This is a default/unnamed slot
- *
- * @summary This is MyElement
+ * A badge is a small, visually distinct element that provides additional information
+ * or highlights the status of an item.
+ * Badges are often used to display notification dot, counts, making them a useful tool for
+ * conveying information quickly without taking up much space.
+ * @dependency mdc-icon
+ * @dependency mdc-text
  *
  * @tagname mdc-badge
  */
-class Badge extends models_1.Component {
+class Badge extends Component {
     constructor() {
         super(...arguments);
         /**
          * Type of the badge
-         * Can be `regular`, `icon`, `text` or `warning`
+         * Can be `dot` (notification) , `icon` and `counter`
          *
-         * Default: `regular`
+         * Default: `dot`
          */
-        this.type = badge_constants_1.DEFAULTS.TYPE;
+        this.type = DEFAULTS.TYPE;
         /**
-         * Scale of the badge (works in combination with length unit)
-         *
-         * Default: `1`
+         * badge variant
          */
-        this.size = badge_constants_1.DEFAULTS.SIZE;
+        this.variant = DEFAULTS.VARIANT;
+        this.maxCounter = DEFAULTS.MAX_COUNTER;
+        this.overlay = false;
         /**
-         * Length unit attribute for scale
-         *
-         * Default: `rem`
+         * Aria-label attribute to be set for accessibility
          */
-        this.lengthUnit = badge_constants_1.DEFAULTS.LENGTH_UNIT;
-    }
-    updateSize() {
-        // if (this.scale && this.lengthUnit) {
-        //   const value = `${this.scale}${this.lengthUnit}`;
-        //   this.style.height = value;
-        //   if (this.type !== 'text') {
-        //     this.style.width = value;
-        //   }
-        // }
+        this.ariaLabel = null;
     }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('size') || changedProperties.has('lengthUnit')) {
-            this.updateSize();
+    /**
+     * If `type` is set to `counter` and if `counter` is greater than `maxCounter`,
+     * then it will return a string the maxCounter value as string.
+     * Otherwise, it will return a string representation of `counter`.
+     * If `counter` is not a number, it will return an empty string.
+     * @param maxCounter - the maximum limit which can be displayed on the badge
+     * @param counter - the number to be displayed on the badge
+     * @returns the string representation of the counter
+     */
+    getCounterText(maxCounter, counter) {
+        if (counter === undefined || typeof counter !== 'number') {
+            return '';
         }
+        // At any given time, the max limit should not cross 999.
+        if (counter > DEFAULTS.MAX_COUNTER_LIMIT) {
+            return `${DEFAULTS.MAX_COUNTER_LIMIT}+`;
+        }
+        if (counter > maxCounter) {
+            return `${maxCounter}+`;
+        }
+        return counter.toString();
     }
-    iconTemplate() {
-        return (0, lit_1.html) `<div class="mdc-badge-icon-container">
-      <mdc-icon name=${(0, if_defined_js_1.ifDefined)(this.iconName)} size="100" length-unit="%"></mdc-icon>
-    </div>`;
+    /**
+     * Method to generate the badge icon template.
+     * @param iconName - name of the icon to be used.
+     * @param variant - variant of the badge.
+     * @returns the template result of the icon.
+     */
+    getBadgeIcon(iconName, overlay, iconVariant, type) {
+        return html `
+      <mdc-icon
+        class="mdc-badge-icon ${classMap(this.getIconClasses(overlay, iconVariant, type))}"
+        name="${ifDefined(iconName)}"
+        length-unit="${DEFAULTS.LENGTH_UNIT}"
+        size="${DEFAULTS.ICON_SIZE}"
+      ></mdc-icon>
+    `;
     }
-    textTemplate() {
-        return (0, lit_1.html) `${this.text}`;
+    /**
+     * Method to generate the badge dot template.
+     * @param overlay - boolean indicating whether the badge should have an overlay.
+     * @returns the template result of the dot with mdc-badge-dot class.
+     */
+    getBadgeDot(overlay) {
+        return html `<div class="mdc-badge-dot ${classMap({ 'mdc-badge-overlay': overlay })}"></div>`;
     }
-    warningTemplate() {
-        return (0, lit_1.html) ` <mdc-icon name="${badge_constants_1.WARNING_ICON_NAME}" class="mdc-badge-warning"></mdc-icon> `;
+    /**
+     * This method generates the CSS classes for the badge icon.
+     * @param overlay - boolean indicating whether the badge should have an overlay.
+     * @param iconVariant - the variant of the icon badge.
+     * @param type - the type of the badge.
+     * @returns - an object containing the CSS classes for the icon.
+     */
+    getIconClasses(overlay, iconVariant, type) {
+        const overLayClass = { 'mdc-badge-overlay': overlay };
+        const variantTypes = type === BADGE_TYPE.ICON ? ICON_VARIANT : ICON_STATE;
+        const iconVariantType = Object.values(variantTypes).includes(iconVariant)
+            ? iconVariant : DEFAULTS.VARIANT;
+        const backgroundClass = { [`mdc-badge-icon__${iconVariantType}`]: true };
+        return {
+            ...overLayClass,
+            ...backgroundClass,
+        };
     }
-    render() {
-        let content;
-        const size = `${this.size}${this.lengthUnit}`;
-        let sizeStyles = { width: size, height: size };
-        switch (this.type) {
-            case 'regular':
-                content = (0, lit_1.html) ``;
-                break;
-            case 'icon':
-                content = this.iconTemplate();
-                break;
-            case 'text':
-                content = this.textTemplate();
-                // make width flexible when text -> only set the height:
-                sizeStyles = { height: sizeStyles.height };
-                break;
-            case 'warning':
-                content = this.warningTemplate();
-                break;
+    /**
+     * Method to generate the badge text and counter template.
+     * @param maxCounter - the maximum limit which can be displayed on the badge
+     * @param overlay - whether the badge should have an overlay.
+     * @param counter - the number to be displayed on the badge
+     * @returns the template result of the text.
+     */
+    getBadgeCounterText(maxCounter, overlay, counter) {
+        return html `
+      <mdc-text
+        type="body-small-medium"
+        tagname="div"
+        class="mdc-badge-text ${classMap({ 'mdc-badge-overlay': overlay })}"
+      >
+        ${this.getCounterText(maxCounter, counter)}
+      </mdc-text>
+    `;
+    }
+    /**
+     * Method to set the role based on the aria-label provided.
+     * If the aria-label is provided, the role of the element will be 'img'.
+     * Otherwise, the role will be null.
+     */
+    setRoleByAriaLabel() {
+        if (this.ariaLabel) {
+            this.role = 'img';
+        }
+        else {
+            this.role = null;
+        }
+    }
+    /**
+     * Generates the badge content based on the badge type.
+     * Utilizes various helper methods to create the appropriate badge template based on the
+     * current badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'
+     * types, returning the corresponding template result for each type.
+     * @returns the TemplateResult for the current badge type.
+     */
+    getBadgeContentBasedOnType() {
+        const { counter, iconName, maxCounter, overlay, type, variant } = this;
+        switch (type) {
+            case BADGE_TYPE.DOT:
+                return this.getBadgeDot(overlay);
+            case BADGE_TYPE.ICON:
+                return this.getBadgeIcon(iconName || '', overlay, variant, type);
+            case BADGE_TYPE.COUNTER:
+                return this.getBadgeCounterText(maxCounter, overlay, counter);
+            case BADGE_TYPE.SUCCESS:
+                return this.getBadgeIcon(ICON_NAMES_LIST.SUCCESS_ICON_NAME, overlay, ICON_STATE.SUCCESS);
+            case BADGE_TYPE.WARNING:
+                return this.getBadgeIcon(ICON_NAMES_LIST.WARNING_ICON_NAME, overlay, ICON_STATE.WARNING);
+            case BADGE_TYPE.ERROR:
+                return this.getBadgeIcon(ICON_NAMES_LIST.ERROR_ICON_NAME, overlay, ICON_STATE.ERROR);
             default:
-                content = (0, lit_1.html) ``;
-                break;
+                return html ``;
         }
-        return (0, lit_1.html) `<div class="mdc-badge-container" style=${(0, style_map_js_1.styleMap)(sizeStyles)}>${content}</div>`;
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('ariaLabel')) {
+            this.setRoleByAriaLabel();
+        }
+    }
+    render() {
+        return this.getBadgeContentBasedOnType();
     }
 }
-Badge.styles = [...models_1.Component.styles, ...badge_styles_1.default];
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String, reflect: true }),
-    tslib_1.__metadata("design:type", String)
+Badge.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
 ], Badge.prototype, "type", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: Number }),
-    tslib_1.__metadata("design:type", Number)
-], Badge.prototype, "size", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String, attribute: 'length-unit' }),
-    tslib_1.__metadata("design:type", String)
-], Badge.prototype, "lengthUnit", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String, attribute: 'icon-name' }),
-    tslib_1.__metadata("design:type", String)
+__decorate([
+    property({ type: String, attribute: 'icon-name' }),
+    __metadata("design:type", String)
 ], Badge.prototype, "iconName", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String }),
-    tslib_1.__metadata("design:type", String)
-], Badge.prototype, "text", void 0);
-exports.default = Badge;
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Badge.prototype, "variant", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], Badge.prototype, "counter", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-counter' }),
+    __metadata("design:type", Number)
+], Badge.prototype, "maxCounter", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Badge.prototype, "overlay", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label' }),
+    __metadata("design:type", Object)
+], Badge.prototype, "ariaLabel", void 0);
+export default Badge;

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

@@ -1,8 +1,32 @@
 declare const TAG_NAME: "mdc-badge";
-declare const WARNING_ICON_NAME = "warning-badge-filled";
+declare const BADGE_TYPE: {
+    DOT: string;
+    ICON: string;
+    COUNTER: string;
+    SUCCESS: string;
+    WARNING: string;
+    ERROR: string;
+};
+declare const ICON_NAMES_LIST: {
+    SUCCESS_ICON_NAME: string;
+    WARNING_ICON_NAME: string;
+    ERROR_ICON_NAME: string;
+};
+declare const ICON_VARIANT: {
+    PRIMARY: string;
+    SECONDARY: string;
+};
+declare const ICON_STATE: {
+    SUCCESS: string;
+    WARNING: string;
+    ERROR: string;
+};
 declare const DEFAULTS: {
-    TYPE: "regular";
-    SIZE: number;
+    TYPE: string;
     LENGTH_UNIT: string;
+    MAX_COUNTER: number;
+    MAX_COUNTER_LIMIT: number;
+    VARIANT: string;
+    ICON_SIZE: number;
 };
-export { TAG_NAME, DEFAULTS, WARNING_ICON_NAME, };
+export { TAG_NAME, DEFAULTS, BADGE_TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST, };