@momentum-design/components 0.34.0 → 0.35.0

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 {};