@momentum-ui/web-components 2.23.49 → 2.24.0

package/dist/index.js

@@ -1 +1 @@
-require("./5757"),require("./7103"),require("./1890"),require("./6272"),require("./6325"),require("./6283"),require("./9217"),require("./5830"),require("./8889"),require("./8210"),require("./4977"),require("./3135"),require("./1598"),require("./1572"),require("./6366"),require("./7251"),require("./4974"),require("./2243"),require("./7919"),require("./3553"),require("./6877"),require("./6700"),require("./8004"),require("./6795"),require("./8923"),require("./4548"),require("./76"),require("./1392"),require("./9164"),require("./1214"),require("./1625"),require("./6067"),require("./3625"),require("./8841"),require("./3112"),require("./3866"),require("./1107"),require("./7330"),require("./7092"),require("./9719"),require("./6979"),require("./9130"),require("./6273"),require("./9618"),require("./8612"),require("./8521"),require("./2019"),require("./779"),require("./573"),require("./5801"),require("./2043"),require("./8171"),require("./2798"),require("./5467"),require("./2984"),require("./1869"),require("./2215"),require("./7997"),require("./4392"),require("./630"),require("./3604"),require("./8728"),require("./8227"),require("./1250"),require("./1705"),require("./6953"),require("./7875"),require("./7833"),require("./6400"),require("./587"),require("./6441"),require("./6015"),require("./3663"),module.exports=require("./index-entry");
+require("./5757"),require("./7103"),require("./1890"),require("./6272"),require("./6325"),require("./6283"),require("./9217"),require("./5830"),require("./8889"),require("./8210"),require("./4977"),require("./3135"),require("./1598"),require("./1572"),require("./6366"),require("./7251"),require("./4974"),require("./2243"),require("./7919"),require("./3553"),require("./6877"),require("./6700"),require("./8004"),require("./6795"),require("./8923"),require("./4548"),require("./76"),require("./1392"),require("./9164"),require("./2019"),require("./1625"),require("./6067"),require("./3625"),require("./8841"),require("./3112"),require("./3866"),require("./1107"),require("./7330"),require("./7092"),require("./9719"),require("./6979"),require("./9130"),require("./6273"),require("./9618"),require("./8612"),require("./8521"),require("./4400"),require("./779"),require("./573"),require("./5801"),require("./2043"),require("./8171"),require("./2798"),require("./5467"),require("./2984"),require("./1869"),require("./2215"),require("./7997"),require("./4392"),require("./630"),require("./3604"),require("./8728"),require("./8227"),require("./1250"),require("./1705"),require("./6953"),require("./7875"),require("./7833"),require("./6400"),require("./587"),require("./6441"),require("./6015"),require("./3663"),module.exports=require("./index-entry");

package/dist/types/components/badge/Badge.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import { LitElement } from "lit-element";
-import { BadgeCircleSize, BadgeSize } from "./badge.constant";
+import { BadgeCircleSize, BadgeSize } from "./badge.constants";
 export declare namespace Badge {
     type BadgeCircleSize = (typeof BadgeCircleSize)[keyof typeof BadgeCircleSize];
     type BadgeSize = (typeof BadgeSize)[keyof typeof BadgeSize];

package/dist/types/components/badge/NotificationBadge.d.ts

@@ -0,0 +1,116 @@
+import type { CSSResult, CSSResultArray, PropertyValues, TemplateResult } from "lit-element";
+import { LitElement } from "lit-element";
+import "../icon/Icon";
+import type { BadgeType, IconVariant } from "./badge.types";
+/**
+ * The `md-notification-badge` component is a versatile UI element used to
+ * display dot, icons, counters, success, warning and error type badge.
+ *
+ * Supported badge types:
+ * - `dot`: Displays a dot notification badge with a blue color.
+ * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.
+ * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,
+ * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.
+ * - `success`: Displays a success badge with a check circle icon and green color.
+ * - `warning`: Displays a warning badge with a warning icon and yellow color.
+ * - `error`: Displays a error badge with a error legacy icon and red color.
+ *
+ * For `icon`, `success`, `warning` and `error` types, the `md-notification-icon` component is used to render the icon.
+ *
+ * For the `counter` type, a div is used to render the counter value.
+ *
+ * @dependency md-icon
+ *
+ * @tagname md-notification-badge
+ *
+ */
+export declare class NotificationBadge extends LitElement {
+    static get styles(): CSSResult | CSSResultArray;
+    /**
+     * Type of the badge
+     * Can be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.
+     */
+    type?: BadgeType;
+    /**
+     * Type of the variant can be `primary` or `secondary`.
+     * It defines the background and foreground color of the icon.
+     * @default primary
+     */
+    variant: IconVariant;
+    /**
+     * Counter is the number which can be provided in the badge.
+     */
+    counter?: number;
+    /**
+     * The maximum number can be set up to 999, anything above that will be rendered as _999+_.
+     * The max counter can be `9`, `99` or `999`.
+     * @default 99
+     */
+    maxCounter: number;
+    /**
+     * Overlay is to add a thin outline to the badge.
+     * This will help distinguish between the badge and the button,
+     * where the badge will be layered on top of a button.
+     * @default false
+     */
+    overlay: boolean;
+    /**
+     * Name of the icon (= filename).
+     *
+     * If no `icon-name` is provided, no icon will be rendered.
+     */
+    iconName?: string;
+    /**
+     * Aria-label attribute to be set for accessibility
+     * @default null
+     */
+    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.
+     * @param iconName - the name of the icon from the icon set
+     * @param backgroundClassPostfix - postfix for the class to style the badge icon.
+     * @returns the template result of the icon.
+     */
+    private getBadgeIcon;
+    /**
+     * Method to generate the badge dot template.
+     * @returns the template result of the dot with md-notification-badge-dot class.
+     */
+    private getBadgeDot;
+    /**
+     * Method to generate the badge text and counter template.
+     * @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.
+     */
+    private getBadgeContentBasedOnType;
+    update(changedProperties: PropertyValues): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "md-notification-badge": NotificationBadge;
+    }
+}

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

@@ -0,0 +1,53 @@
+declare const BadgeCircleSize: {
+    readonly 24: 24;
+    readonly 32: 32;
+    readonly 36: 36;
+    readonly 40: 40;
+    readonly 48: 48;
+    readonly 64: 64;
+    readonly 72: 72;
+    readonly 88: 88;
+    readonly 124: 124;
+};
+declare const BadgeSize: {
+    readonly 24: 24;
+    readonly 32: 32;
+    readonly 36: 36;
+};
+declare const TYPE: {
+    readonly DOT: "dot";
+    readonly ICON: "icon";
+    readonly COUNTER: "counter";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly ERROR: "error";
+};
+declare const ICON_NAMES_LIST: {
+    readonly SUCCESS_ICON_NAME: "check-circle-badge-filled";
+    readonly WARNING_ICON_NAME: "warning-badge-filled";
+    readonly ERROR_ICON_NAME: "error-legacy-badge-filled";
+};
+declare const ICON_VARIANT: {
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+};
+declare const ICON_STATE: {
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly ERROR: "error";
+};
+declare const BACKGROUND_STYLES: {
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly ERROR: "error";
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+};
+declare const DEFAULTS: {
+    readonly TYPE: "dot";
+    readonly MAX_COUNTER: 99;
+    readonly MAX_COUNTER_LIMIT: 999;
+    readonly VARIANT: "primary";
+    readonly ICON_SIZE: 12;
+};
+export { BACKGROUND_STYLES, BadgeCircleSize, BadgeSize, DEFAULTS, ICON_NAMES_LIST, ICON_STATE, ICON_VARIANT, TYPE };

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

@@ -0,0 +1,5 @@
+import { ICON_VARIANT, TYPE } from "./badge.constants";
+type ValueOf<T> = T[keyof T];
+type IconVariant = ValueOf<typeof ICON_VARIANT>;
+type BadgeType = ValueOf<typeof TYPE>;
+export type { BadgeType, IconVariant };

package/dist/types/index.d.ts

@@ -16,6 +16,7 @@ export { Avatar } from "./components/avatar/Avatar";
 export { AvatarType } from "./components/avatar/Avatar.constants";
 export { CompositeAvatar } from "./components/avatar/CompositeAvatar";
 export { Badge } from "./components/badge/Badge";
+export { NotificationBadge } from "./components/badge/NotificationBadge";
 export { Breadcrumb } from "./components/breadcrumb/Breadcrumb";
 export { ButtonGroup } from "./components/button-group/ButtonGroup";
 export { Button } from "./components/button/Button";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.23.49",
+  "version": "2.24.0",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",

package/dist/1214.js

@@ -1 +0,0 @@
-"use strict";(self["momentum-web-components-[id]"]=self["momentum-web-components-[id]"]||[]).push([[1214],{42532:(o,r,e)=>{e.d(r,{z:()=>a});const a={24:24,32:32,36:36,40:40,48:48,64:64,72:72,88:88,124:124}},92019:(o,r,e)=>{e.d(r,{A:()=>a});const a=e(41488).css`.md-badge{align-items:center;display:inline-flex;font-family:var(--brand-font-regular, "CiscoSansTT Regular", "Helvetica Neue", Helvetica, Arial, sans-serif);font-weight:400;height:2rem;justify-content:flex-start;line-height:1rem;margin-bottom:auto;overflow:hidden;position:relative;text-align:center;text-decoration:none;white-space:nowrap;padding:.25rem 1rem;font-size:var(--font-size-body-midsize,.75rem);background-color:var(--badge-default-bg-color);color:var(--badge-default-text-color);gap:.5rem}.md-badge{border-radius:6.25rem}.md-badge:focus{outline:2px solid var(--button-focus-ring-color);outline-offset:2px}.md-badge--small{padding:.1875rem .75rem;font-size:var(--font-size-body-midsize,.75rem);height:1.5rem;min-width:auto}.md-badge--size-36{height:2.25rem;padding:.5rem .75rem .5rem .75rem}.md-badge--compact,.md-badge--split{padding:.25rem 1rem .25rem .25rem;font-size:var(--body-secondary,.75rem)}.md-badge--circle{padding:.75rem .75rem;font-size:.75rem;height:2.5rem;justify-content:center;min-width:auto;width:2.5rem}.md-badge--circle ::slotted(md-icon){margin:0!important}.md-badge--circle-24{height:1.5rem;width:1.5rem}.md-badge--circle-32{height:2rem;width:2rem}.md-badge--circle-48{height:3rem;width:3rem}.md-badge--circle-64{height:4rem;width:4rem}.md-badge--circle-72{height:4.5rem;width:4.5rem}.md-badge--circle-88{height:5.5rem;width:5.5rem}.md-badge--circle-124{height:7.75rem;width:7.75rem}.md-badge--outline{color:var(--badge-outline-color);border:2px solid var(--badge-outline-color);background-color:rgba(0,0,0,0);border:1px solid;min-width:auto}.md-badge--gray{background-color:var(--badge-gray-bg-color);color:var(--badge-gray-text-color)}.md-badge--gold{background-color:var(--badge-gold-bg-color);color:var(--badge-gold-text-color)}.md-badge--lime{background-color:var(--badge-lime-bg-color);color:var(--badge-lime-text-color)}.md-badge--blue,.md-badge--cobalt{background-color:var(--badge-blue-bg-color);color:var(--badge-blue-text-color)}.md-badge--mint{background-color:var(--badge-mint-bg-color);color:var(--badge-mint-text-color)}.md-badge--darkmint{background-color:var(--badge-darkmint-bg-color);color:var(--badge-darkmint-text-color)}.md-badge--green{background-color:var(--badge-green-bg-color);color:var(--badge-green-text-color)}.md-badge--yellow{background-color:var(--badge-yellow-bg-color);color:var(--badge-yellow-text-color)}.md-badge--red{background-color:var(--badge-red-bg-color);color:var(--badge-red-text-color)}.md-badge--darkred{background-color:var(--badge-darkred-bg-color);color:var(--badge-darkred-text-color)}.md-badge--unreadcount{background-color:var(--badge-unreadcount-bg-color,var(--badge-darkred-bg-color));color:var(--badge-unreadcount-text-color,var(--button-primary-text-color));font-family:var(--brand-font-medium);font-size:.75rem;font-weight:500;padding:0 .25rem;min-width:1rem;height:1rem;justify-content:center}.md-badge--unreadcount.md-badge--outline{border:1px solid;min-width:1.125rem;height:1.125rem;border-color:var(--md-primary-bg-color)}.md-badge--orange{background-color:var(--badge-orange-bg-color);color:var(--badge-orange-text-color)}.md-badge--purple{background-color:var(--badge-purple-bg-color);color:var(--badge-purple-text-color)}.md-badge--violet{background-color:var(--badge-violet-bg-color);color:var(--badge-violet-text-color)}.md-badge--cyan{background-color:var(--badge-cyan-bg-color);color:var(--badge-cyan-text-color)}.md-badge--pink{background-color:var(--badge-pink-bg-color);color:var(--badge-pink-text-color)}.md-badge--hold{background-color:var(--badge-hold-bg-color);color:var(--badge-hold-text-color)}.md-badge--status-negative{padding:0 4px;padding-right:6px;font-weight:400;font-family:var(--brand-font-regular);background-color:var(--badge-status-negative-bg-color);color:var(--badge-status-negative-text-color);gap:.25rem}.md-badge--status-negative:hover{background-color:var(--badge-status-negative-bg-color)}.md-badge--status-negative:active{background-color:var(--badge-status-negative-bg-color)}.md-badge--status-positive{padding:0 4px;padding-right:6px;font-weight:400;font-family:var(--brand-font-regular);background-color:var(--badge-status-positive-bg-color);color:var(--badge-status-positive-text-color);gap:.25rem}.md-badge--status-positive:hover{background-color:var(--badge-status-positive-bg-color)}.md-badge--status-positive:active{background-color:var(--badge-status-positive-bg-color)}.md-badge--status-warning{padding:0 4px;padding-right:6px;font-weight:400;font-family:var(--brand-font-regular);background-color:var(--badge-status-warning-bg-color);color:var(--badge-status-warning-text-color);gap:.25rem}.md-badge--status-warning:hover{background-color:var(--badge-status-warning-bg-color)}.md-badge--status-warning:active{background-color:var(--badge-status-warning-bg-color)}.md-badge--status-accent{padding:0 4px;padding-right:6px;font-weight:400;font-family:var(--brand-font-regular);background-color:var(--badge-status-accent-bg-color);color:var(--badge-status-accent-text-color);gap:.25rem}.md-badge--status-accent:hover{background-color:var(--badge-status-accent-bg-color)}.md-badge--status-accent:active{background-color:var(--badge-status-accent-bg-color)}.md-badge--status-orange{padding:0 4px;padding-right:6px;font-weight:400;font-family:var(--brand-font-regular);background-color:var(--badge-status-orange-bg-color);color:var(--badge-status-orange-text-color);gap:.25rem}.md-badge--status-orange:hover{background-color:var(--badge-status-orange-bg-color)}.md-badge--status-orange:active{background-color:var(--badge-status-orange-bg-color)}.md-badge--disabled{background-color:var(--badge-disabled-bg-color);color:var(--badge-disabled-text-color);border:1px solid var(--badge-disabled-border-color)}.md-badge--disabled ::slotted(md-icon){color:var(--badge-disabled-text-color)}.md-badge--small.md-badge--circle{height:1.5rem;width:1.5rem}.badge-counter{font-weight:700;margin-left:.5rem}::slotted(md-icon){height:1rem;width:1rem}::slotted(md-badge){height:1rem;width:1rem}::slotted(span){align-items:center;display:inline-flex;height:1rem;justify-content:center}.split-separator{margin:0 0;opacity:.4}@media(forced-colors:active){.md-badge{forced-color-adjust:none;background-color:Canvas!important;color:CanvasText!important;outline:1px solid CanvasText!important}}`}}]);

package/dist/types/components/badge/badge.constant.d.ts

@@ -1,17 +0,0 @@
-declare const BadgeCircleSize: {
-    readonly 24: 24;
-    readonly 32: 32;
-    readonly 36: 36;
-    readonly 40: 40;
-    readonly 48: 48;
-    readonly 64: 64;
-    readonly 72: 72;
-    readonly 88: 88;
-    readonly 124: 124;
-};
-declare const BadgeSize: {
-    readonly 24: 24;
-    readonly 32: 32;
-    readonly 36: 36;
-};
-export { BadgeCircleSize, BadgeSize };