@momentum-design/components 0.34.0 → 0.36.0

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

@@ -0,0 +1,52 @@
+import Popover from '../popover/popover.component';
+import type { PopoverTrigger } from '../popover/popover.types';
+/**
+ * Coachmark component based on top of the popover component,
+ * with the default value of certain properties changed.
+ *
+ * @dependency mdc-popover
+ *
+ * @tagname mdc-coachmark
+ *
+ * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
+ * @cssproperty --mdc-popover-arrow-border - border of the arrow
+ * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover
+ * @cssproperty --mdc-popover-border-color - border color of the popover
+ * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover
+ * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
+ * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
+ * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
+ *
+ * @slot - Default slot for modal container
+ *
+ */
+declare class Coachmark extends Popover {
+    /**
+     * Determines the events that cause the Coachmark to show.
+     * Multiple event names should be separated by spaces.
+     * For example to allow both click and hover, use 'click mouseenter' as the trigger.
+     * - **click**
+     * - **mouseenter**
+     * - **focusin**
+     * - **manual**
+     * @default manual
+     */
+    trigger: PopoverTrigger;
+    /**
+     * The arrow visibility of the Coachmark.
+     * @default true
+     */
+    showArrow: boolean;
+    /**
+     * The close button visibility of the Coachmark.
+     * @default true
+     */
+    closeButton: boolean;
+    /**
+     * Disable aria-expanded attribute on trigger element.
+     * @default true
+     */
+    disableAriaExpanded: boolean;
+    constructor();
+}
+export default Coachmark;

package/dist/components/coachmark/coachmark.component.js

@@ -0,0 +1,82 @@
+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 { property } from 'lit/decorators.js';
+import Popover from '../popover/popover.component';
+import { DEFAULTS } from './coachmark.constants';
+/**
+ * Coachmark component based on top of the popover component,
+ * with the default value of certain properties changed.
+ *
+ * @dependency mdc-popover
+ *
+ * @tagname mdc-coachmark
+ *
+ * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
+ * @cssproperty --mdc-popover-arrow-border - border of the arrow
+ * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover
+ * @cssproperty --mdc-popover-border-color - border color of the popover
+ * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover
+ * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
+ * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
+ * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
+ *
+ * @slot - Default slot for modal container
+ *
+ */
+class Coachmark extends Popover {
+    constructor() {
+        super();
+        /**
+         * Determines the events that cause the Coachmark to show.
+         * Multiple event names should be separated by spaces.
+         * For example to allow both click and hover, use 'click mouseenter' as the trigger.
+         * - **click**
+         * - **mouseenter**
+         * - **focusin**
+         * - **manual**
+         * @default manual
+         */
+        this.trigger = DEFAULTS.TRIGGER;
+        /**
+         * The arrow visibility of the Coachmark.
+         * @default true
+         */
+        this.showArrow = DEFAULTS.ARROW;
+        /**
+         * The close button visibility of the Coachmark.
+         * @default true
+         */
+        this.closeButton = DEFAULTS.CLOSE_BUTTON;
+        /**
+         * Disable aria-expanded attribute on trigger element.
+         * @default true
+         */
+        this.disableAriaExpanded = DEFAULTS.DISABLE_ARIA_EXPANDED;
+        this.color = DEFAULTS.COLOR;
+        this.showArrow = DEFAULTS.ARROW;
+    }
+}
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Coachmark.prototype, "trigger", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-arrow' }),
+    __metadata("design:type", Boolean)
+], Coachmark.prototype, "showArrow", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'close-button' }),
+    __metadata("design:type", Boolean)
+], Coachmark.prototype, "closeButton", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'disable-aria-expanded' }),
+    __metadata("design:type", Boolean)
+], Coachmark.prototype, "disableAriaExpanded", void 0);
+export default Coachmark;

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

@@ -0,0 +1,9 @@
+declare const TAG_NAME: "mdc-coachmark";
+declare const DEFAULTS: {
+    COLOR: "contrast";
+    TRIGGER: "manual";
+    ARROW: boolean;
+    CLOSE_BUTTON: boolean;
+    DISABLE_ARIA_EXPANDED: boolean;
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/coachmark/coachmark.constants.js

@@ -0,0 +1,11 @@
+import utils from '../../utils/tag-name';
+import { COLOR, TRIGGER } from '../popover/popover.constants';
+const TAG_NAME = utils.constructTagName('coachmark');
+const DEFAULTS = {
+    COLOR: COLOR.CONTRAST,
+    TRIGGER: TRIGGER.MANUAL,
+    ARROW: true,
+    CLOSE_BUTTON: true,
+    DISABLE_ARIA_EXPANDED: true,
+};
+export { TAG_NAME, DEFAULTS };

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

@@ -0,0 +1,8 @@
+import Coachmark from './coachmark.component';
+import '../button';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-coachmark']: Coachmark;
+    }
+}
+export default Coachmark;

package/dist/components/coachmark/index.js

@@ -0,0 +1,5 @@
+import Coachmark from './coachmark.component';
+import { TAG_NAME } from './coachmark.constants';
+import '../button';
+Coachmark.register(TAG_NAME);
+export default Coachmark;

package/dist/components/popover/popover.component.js

@@ -614,7 +614,7 @@ __decorate([
     __metadata("design:type", Boolean)
 ], Popover.prototype, "preventScroll", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'show-arrow' }),
+    property({ type: Boolean, reflect: true, attribute: 'show-arrow' }),
     __metadata("design:type", Boolean)
 ], Popover.prototype, "showArrow", void 0);
 __decorate([

package/dist/components/popover/popover.styles.js

@@ -27,7 +27,7 @@ const styles = css `
   :host([color='contrast']) {
     background-color: var(--mdc-popover-inverted-background-color);
     border-color: var(--mdc-popover-inverted-border-color);
-    color: var(--mds-color-theme-inverted-text-primary-normal);
+    color: var(--mdc-popover-inverted-text-color);
   }
 
   :host([color='contrast']) {

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

@@ -0,0 +1,7 @@
+import Tooltip from './tooltip.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-tooltip']: Tooltip;
+    }
+}
+export default Tooltip;

package/dist/components/tooltip/index.js

@@ -0,0 +1,4 @@
+import Tooltip from './tooltip.component';
+import { TAG_NAME } from './tooltip.constants';
+Tooltip.register(TAG_NAME);
+export default Tooltip;

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

@@ -0,0 +1,59 @@
+import type { CSSResult } from 'lit';
+import type { PropertyValues } from '@lit/reactive-element';
+import Popover from '../popover/popover.component';
+import type { TooltipType } from './tooltip.types';
+/**
+ * A tooltip is triggered by mouse hover or by keyboard focus
+ * and will disappear upon mouse exit or focus change.
+ *
+ * Note: Tooltips cannot contain content that can be focused or interacted with.
+ *
+ * @tagname mdc-tooltip
+ *
+ * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.
+ * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.
+ * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.
+ * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.
+ *
+ */
+declare class Tooltip extends Popover {
+    /**
+     * The type of tooltip.
+     * - **description** sets aria-describedby on the trigger component which refers to the tooltip id.
+     * - **label** sets aria-labelledby on the trigger component which refers to the tooltip id.
+     * - **none** no aria props set on trigger component referring to the tooltip id.
+     * @default 'description'
+     */
+    tooltipType: TooltipType;
+    private defaultSlotNodes;
+    constructor();
+    /**
+     * @returns The tooltip text.
+     */
+    private getTooltipText;
+    /**
+     * Sets the type attribute for the tooltip component.
+     * If the provided type is not included in the TOOLTIP_TYPES,
+     * it defaults to the value specified in DEFAULTS.TOOLTIP_TYPE.
+     *
+     * @param type - The type to set.
+     */
+    private setTooltipType;
+    /**
+     * Updates the tooltip id if it is empty.
+     */
+    private onIdUpdated;
+    /**
+     * Updates the placement attribute if it is not a valid placement.
+     * Overriding the default from Popover
+     */
+    private onPlacementUpdated;
+    /**
+     * Updates the tooltip type attribute and sets the appropriate aria props on the trigger component.
+     * @param changedProperties - The changed properties.
+     */
+    private onTooltipTypeUpdated;
+    update(changedProperties: PropertyValues): void;
+    static styles: Array<CSSResult>;
+}
+export default Tooltip;

package/dist/components/tooltip/tooltip.component.js

@@ -0,0 +1,175 @@
+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 { property, queryAssignedNodes } from 'lit/decorators.js';
+import { v4 as uuidv4 } from 'uuid';
+import { DEFAULTS, TOOLTIP_TYPES } from './tooltip.constants';
+import Popover from '../popover/popover.component';
+import styles from './tooltip.styles';
+import { POPOVER_PLACEMENT } from '../popover/popover.constants';
+/**
+ * A tooltip is triggered by mouse hover or by keyboard focus
+ * and will disappear upon mouse exit or focus change.
+ *
+ * Note: Tooltips cannot contain content that can be focused or interacted with.
+ *
+ * @tagname mdc-tooltip
+ *
+ * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.
+ * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.
+ * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.
+ * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.
+ *
+ */
+class Tooltip extends Popover {
+    constructor() {
+        super();
+        /**
+         * The type of tooltip.
+         * - **description** sets aria-describedby on the trigger component which refers to the tooltip id.
+         * - **label** sets aria-labelledby on the trigger component which refers to the tooltip id.
+         * - **none** no aria props set on trigger component referring to the tooltip id.
+         * @default 'description'
+         */
+        this.tooltipType = DEFAULTS.TOOLTIP_TYPE;
+        this.backdrop = false;
+        this.color = DEFAULTS.COLOR;
+        this.delay = DEFAULTS.DELAY;
+        this.focusTrap = false;
+        this.hideOnBlur = true;
+        this.hideOnEscape = true;
+        this.interactive = false;
+        this.offset = DEFAULTS.OFFSET;
+        this.placement = DEFAULTS.PLACEMENT;
+        this.role = 'tooltip';
+        this.showArrow = true;
+        this.trigger = 'mouseenter focusin';
+        this.visible = false;
+        this.enabledFocusTrap = false;
+        this.enabledPreventScroll = false;
+        this.flip = true;
+        this.focusTrap = false;
+        this.preventScroll = false;
+        this.closeButton = false;
+        this.hideOnOutsideClick = false;
+        this.focusBackToTrigger = false;
+        this.size = false;
+        this.disableAriaExpanded = true;
+    }
+    /**
+     * @returns The tooltip text.
+     */
+    getTooltipText() {
+        var _a, _b;
+        return (((_b = (_a = this.defaultSlotNodes) === null || _a === void 0 ? void 0 : _a.map((node) => node.textContent).join(' ')) === null || _b === void 0 ? void 0 : _b.trim()) || '');
+    }
+    /**
+     * Sets the type attribute for the tooltip component.
+     * If the provided type is not included in the TOOLTIP_TYPES,
+     * it defaults to the value specified in DEFAULTS.TOOLTIP_TYPE.
+     *
+     * @param type - The type to set.
+     */
+    setTooltipType(type) {
+        this.setAttribute('tooltip-type', Object.values(TOOLTIP_TYPES).includes(type) ? type : DEFAULTS.TOOLTIP_TYPE);
+    }
+    /**
+     * Updates the tooltip id if it is empty.
+     */
+    onIdUpdated() {
+        // Set tooltip ID if not set.
+        if (this.id.length === 0) {
+            this.id = `mdc-tooltip-${uuidv4()}`;
+        }
+        // Update the aria props on the trigger component to updated tooltip id.
+        const triggerElement = document.getElementById(this.triggerID);
+        if (triggerElement) {
+            switch (this.tooltipType) {
+                case TOOLTIP_TYPES.DESCRIPTION:
+                    triggerElement.setAttribute('aria-describedby', this.id);
+                    break;
+                case TOOLTIP_TYPES.LABEL:
+                    triggerElement.setAttribute('aria-labelledby', this.id);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Updates the placement attribute if it is not a valid placement.
+     * Overriding the default from Popover
+     */
+    onPlacementUpdated() {
+        if (!Object.values(POPOVER_PLACEMENT).includes(this.placement)) {
+            this.placement = DEFAULTS.PLACEMENT;
+        }
+    }
+    /**
+     * Updates the tooltip type attribute and sets the appropriate aria props on the trigger component.
+     * @param changedProperties - The changed properties.
+     */
+    onTooltipTypeUpdated(changedProperties) {
+        const previousTooltipType = changedProperties.get('tooltipType');
+        if (!Object.values(TOOLTIP_TYPES).includes(this.tooltipType)) {
+            this.setTooltipType(DEFAULTS.TOOLTIP_TYPE);
+        }
+        const triggerElement = document.getElementById(this.triggerID);
+        if (triggerElement) {
+            const tooltipText = this.getTooltipText();
+            switch (this.tooltipType) {
+                case TOOLTIP_TYPES.DESCRIPTION:
+                    if (previousTooltipType === TOOLTIP_TYPES.LABEL) {
+                        triggerElement.removeAttribute('aria-labelledby');
+                    }
+                    triggerElement.setAttribute('aria-describedby', this.id);
+                    break;
+                case TOOLTIP_TYPES.LABEL:
+                    if (previousTooltipType === TOOLTIP_TYPES.DESCRIPTION) {
+                        triggerElement.removeAttribute('aria-describedby');
+                    }
+                    triggerElement.setAttribute('aria-labelledby', this.id);
+                    break;
+                default:
+                    if (previousTooltipType === TOOLTIP_TYPES.DESCRIPTION) {
+                        triggerElement.removeAttribute('aria-describedby');
+                    }
+                    else if (previousTooltipType === TOOLTIP_TYPES.LABEL) {
+                        triggerElement.removeAttribute('aria-labelledby');
+                    }
+                    break;
+            }
+            if (tooltipText.length > 0 && this.tooltipType !== TOOLTIP_TYPES.NONE && !this.ariaLabel) {
+                this.ariaLabel = tooltipText;
+            }
+        }
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('id')) {
+            this.onIdUpdated();
+        }
+        if (changedProperties.has('placement')) {
+            this.onPlacementUpdated();
+        }
+        if (changedProperties.has('tooltipType')) {
+            this.onTooltipTypeUpdated(changedProperties);
+        }
+    }
+}
+Tooltip.styles = [...Popover.styles, ...styles];
+__decorate([
+    property({ type: String, attribute: 'tooltip-type', reflect: true }),
+    __metadata("design:type", String)
+], Tooltip.prototype, "tooltipType", void 0);
+__decorate([
+    queryAssignedNodes(),
+    __metadata("design:type", Array)
+], Tooltip.prototype, "defaultSlotNodes", void 0);
+export default Tooltip;

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

@@ -0,0 +1,16 @@
+declare const TAG_NAME: "mdc-tooltip";
+declare const TOOLTIP_TYPES: {
+    DESCRIPTION: string;
+    LABEL: string;
+    NONE: string;
+};
+declare const DEFAULTS: {
+    BACKDROP: boolean;
+    COLOR: "tonal";
+    DELAY: string;
+    OFFSET: number;
+    PLACEMENT: "top";
+    SHOW_ARROW: boolean;
+    TOOLTIP_TYPE: string;
+};
+export { DEFAULTS, TAG_NAME, TOOLTIP_TYPES };

package/dist/components/tooltip/tooltip.constants.js

@@ -0,0 +1,18 @@
+import utils from '../../utils/tag-name';
+import { COLOR, POPOVER_PLACEMENT } from '../popover/popover.constants';
+const TAG_NAME = utils.constructTagName('tooltip');
+const TOOLTIP_TYPES = {
+    DESCRIPTION: 'description',
+    LABEL: 'label',
+    NONE: 'none',
+};
+const DEFAULTS = {
+    BACKDROP: false,
+    COLOR: COLOR.TONAL,
+    DELAY: '0,0',
+    OFFSET: 4,
+    PLACEMENT: POPOVER_PLACEMENT.TOP,
+    SHOW_ARROW: true,
+    TOOLTIP_TYPE: TOOLTIP_TYPES.DESCRIPTION,
+};
+export { DEFAULTS, TAG_NAME, TOOLTIP_TYPES };

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

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

package/dist/components/tooltip/tooltip.styles.js

@@ -0,0 +1,28 @@
+import { css } from 'lit';
+const styles = css `
+
+  :host {
+    --mdc-tooltip-max-width: 400px;
+    --mdc-tooltip-padding: 0.75rem;
+    --mdc-tooltip-text-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-tooltip-text-color-contrast: var(--mds-color-theme-inverted-text-primary-normal);
+  }
+
+  :host::part(popover-content) {
+    padding: var(--mdc-tooltip-padding);
+    color: var(--mdc-tooltip-text-color);
+    min-width: fit-content;
+    max-width: var(--mdc-tooltip-max-width);
+
+    font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+    font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
+    line-height: var(--mds-font-apps-body-midsize-regular-line-height);
+    text-decoration: var(--mds-font-apps-body-midsize-regular-text-decoration);
+    text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
+  }
+
+  :host([color='contrast'])::part(popover-content) {
+    color: var(--mdc-tooltip-text-color-contrast);
+  }
+`;
+export default [styles];

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

@@ -0,0 +1,3 @@
+import { ValueOf } from '../../utils/types';
+import { TOOLTIP_TYPES } from './tooltip.constants';
+export type TooltipType = ValueOf<typeof TOOLTIP_TYPES>;

package/dist/components/tooltip/tooltip.types.js

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