@momentum-ui/web-components 2.14.16 → 2.14.18

package/dist/types/components/coachmark-popover/CoachmarkPopover.d.ts

@@ -0,0 +1,211 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import "@/components/button/Button";
+import "@/components/icon/Icon";
+import "@/components/popover/Popover";
+import { PlacementType } from "@/components/popover/Popover.types";
+import { LitElement, PropertyValues } from "lit-element";
+export declare namespace CoachmarkPopover {
+    /**
+     * @fires coach-create - Fired when the coachmark is created.
+     * @fires primary-button-action - Fired when the primary button is clicked.
+     * @fires secondary-button-action - Fired when the secondary button is clicked.
+     * @fires link-action - Fired when the link is clicked.
+     * @fires coachmark-close - Fired when the coachmark is closed.
+     */
+    class ELEMENT extends LitElement {
+        /**
+         * The placement of the coachmark popover.
+         * This property determines where the popover will be positioned relative to the reference element.
+         * Possible values include "auto", "top", "right", "bottom", "left", etc.
+         *
+         * @type {PlacementType}
+         */
+        placement: PlacementType;
+        /**
+         * The name of the icon to be displayed before the title in the header.
+         * If set, the specified icon will be rendered before the title.
+         * If not set, no icon will be rendered.
+         *
+         * @type {string | undefined}
+         */
+        headerIconName?: string;
+        /**
+         * The title to be displayed in the header
+         * If both neither header nor headerIconName is set, no header will be rendered.
+         *
+         * * @type {string | undefined}
+         */
+        header?: string;
+        /**
+         * The message to be displayed in the body of the coachmark.
+         * This property is used to set the content of the coachmark.
+         * If this is not defined the coachmark content slot will be used for the body
+         *
+         * @type {string | undefined}
+         */
+        message?: string;
+        /**
+         * Indicates whether the coachmark is visible.
+         * If true, the coachmark will be shown. If false, it will be hidden.
+         *
+         * @type {boolean}
+         */
+        show: boolean;
+        /**
+         * Indicates whether the close button should be hidden.
+         * If true, the close button will not be rendered. If false, it will be rendered.
+         *
+         * @type {boolean}
+         */
+        hideCloseButton: boolean;
+        /**
+         * The label for the primary button.
+         * If set, the primary button will be rendered with the specified label.
+         * If not set, no primary button will be rendered.
+         *
+         * @type {string | undefined}
+         */
+        primaryButton?: string;
+        /**
+         * The label for the secondary button.
+         * If set, the secondary button will be rendered with the specified label.
+         * If not set, no secondary button will be rendered.
+         *
+         * @type {string | undefined}
+         */
+        secondaryButton?: string;
+        /**
+         * The text for the link.
+         * If set, the link will be rendered with the specified text.
+         * If not set, no link will be rendered.
+         *
+         * @type {string | undefined}
+         */
+        linkText?: string;
+        /**
+         * The URL for the link.
+         * This property is used to set the href attribute of the link.
+         *
+         * @type {string}
+         */
+        href: string;
+        triggerComponent: HTMLSlotElement;
+        popper: HTMLDivElement;
+        /**
+         * The content of the slot.
+         * This property is used to store the assigned elements of the slot.
+         * This is used for the body if message is not set
+         *
+         * @type {Element[] | null}
+         */
+        private slotContent;
+        /**
+         * Returns the styles for the component.
+         * This method is used to define the CSS styles for the component.
+         *
+         * @returns {CSSResult[]} The styles for the component.
+         */
+        static get styles(): import("lit-element").CSSResult[];
+        connectedCallback(): void;
+        /**
+         * Dispatches a custom event with the specified event name.
+         * The event includes the placement, reference, and popper elements in its detail.
+         * The event bubbles up through the DOM and is composed, meaning it can cross shadow DOM boundaries.
+         *
+         * @param {string} eventName - The name of the custom event to dispatch.
+         */
+        private notifyCustomEvent;
+        /**
+         * Dispatches a custom event to notify that the coachmark has been created.
+         * The event is named "coach-create" and includes the placement, reference, and popper elements in its detail.
+         * The event bubbles up through the DOM and is composed, meaning it can cross shadow DOM boundaries.
+         */
+        notifyCoachCreate(): void;
+        /**
+         * Dispatches a custom event to notify that the primary button has been clicked.
+         * The event is named "primary-button-action" and includes the placement, reference, and popper elements in its detail.
+         * The event bubbles up through the DOM and is composed, meaning it can cross shadow DOM boundaries.
+         */
+        notifyPrimaryButtonAction(): void;
+        /**
+         * Dispatches a custom event to notify that the secondary button has been clicked.
+         * The event is named "secondary-button-action" and includes the placement, reference, and popper elements in its detail.
+         * The event bubbles up through the DOM and is composed, meaning it can cross shadow DOM boundaries.
+         */
+        notifySecondaryButtonAction(): void;
+        /**
+         * Dispatches a custom event to notify that the link has been clicked.
+         * The event is named "link-action" and includes the placement, reference, and popper elements in its detail.
+         * The event bubbles up through the DOM and is composed, meaning it can cross shadow DOM boundaries.
+         */
+        notifyLinkAction(): void;
+        /**
+         * Dispatches a custom event to notify that the coachmark has been closed.
+         * The event is named "coachmark-close" and includes the placement, reference, and popper elements in its detail.
+         * The event bubbles up through the DOM and is composed, meaning it can cross shadow DOM boundaries.
+         */
+        notifyCoachClose(): void;
+        /**
+         * Handles the slot change event.
+         * This method is triggered when the content of a slot changes.
+         * It updates the `slotContent` property with the assigned elements of the slot.
+         *
+         * @param {Event} event - The slot change event.
+         */
+        private handleSlotChange;
+        /**
+         * Called when the element's properties are updated.
+         * This method is triggered whenever one or more properties change.
+         * if the `show` property hss changed it calls `notifyCoachCreate` if `show` property is true, otherwise it calls `notifyCoachClose`.
+         *
+         * @param {PropertyValues} changedProperties - The properties that changed.
+         */
+        protected updated(changedProperties: PropertyValues): void;
+        /**
+         * Returns the template for the coachmark content.
+         * This method is used to define the HTML structure for the coachmark content.
+         *
+         * @returns {TemplateResult} The template for the coachmark content.
+         */
+        private coachmarkContentTemplate;
+        /**
+         * Returns the template for the header.
+         * This method is used to define the HTML structure for the header.
+         *
+         * @returns {TemplateResult} The template for the header.
+         */
+        private renderHeader;
+        /**
+         * Returns the template for the body.
+         * This method is used to define the HTML structure for the body.
+         *
+         * @returns {TemplateResult} The template for the body.
+         */
+        private renderBody;
+        /**
+         * Returns the template for the footer.
+         * This method is used to define the HTML structure for the footer.
+         *
+         * @returns {TemplateResult} The template for the footer.
+         */
+        private renderFooter;
+        /**
+         * Renders the HTML template for the component.
+         * This method defines the structure and content of the component's shadow DOM.
+         *
+         * @returns {TemplateResult} The HTML template for the component.
+         */
+        render(): import("lit-element").TemplateResult;
+    }
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "md-coachmark-popover": CoachmarkPopover.ELEMENT;
+    }
+}

package/dist/types/components/combobox/ComboBox.d.ts

@@ -8,6 +8,7 @@
 import "@/components/help-text/HelpText";
 import "@/components/icon/Icon";
 import { LitElement, PropertyValues } from "lit-element";
+import { TemplateResult } from "lit-html";
 export declare namespace ComboBox {
     type OptionMember = {
         [key: string]: string;
@@ -72,6 +73,13 @@ export declare namespace ComboBox {
         showSelectedCount: boolean;
         popupChevronAriaHidden: string;
         newMomentum: boolean;
+        showFilterIcon: boolean;
+        /**
+         * When using the new momentum style sets whether to use the new combobox style arrow
+         * or the arrow not in a div what a border to the right. This will be used for filter dropdowns
+         * that were implemented using a combobox
+         */
+        isDropdownArrow: boolean;
         comboboxId: string;
         helpText: string;
         messageArr: ComboBox.Message[];
@@ -169,35 +177,41 @@ export declare namespace ComboBox {
         static get styles(): import("lit-element").CSSResult[];
         get listItemOptionMap(): {
             "md-combobox-multiselect": boolean;
+            compact: boolean;
         };
         get filteredOptions(): (string | OptionMember)[];
         get filteredGroupOptions(): (string | OptionMember)[];
         get comboBoxTemplateClassMap(): {
             [x: string]: boolean;
             "md-combobox-searchable": boolean;
+            "md-combobox-has-leading-icon": boolean;
             "md-new-combobox": boolean;
             "md-combobox-readonly": boolean;
+            "md-combobox-compact": boolean;
         };
-        searchIconTemplate(): import("lit-element").TemplateResult;
-        selectedOptionTemplate(selectedOption: string | OptionMember): import("lit-element").TemplateResult;
-        clearButtonTemplate(): import("lit-element").TemplateResult;
-        arrowButtonTemplate(): import("lit-element").TemplateResult;
-        groupArrowButtonTemplate(data: string): import("lit-element").TemplateResult;
-        getSelectAllOption(): import("lit-element").TemplateResult;
+        searchIconTemplate(): TemplateResult;
+        filterIconTemplate(): TemplateResult;
+        leadingIconTemplate(iconName: string, iconClass: string): TemplateResult;
+        selectedOptionTemplate(selectedOption: string | OptionMember): TemplateResult;
+        clearButtonTemplate(): TemplateResult;
+        arrowButtonTemplate(): TemplateResult;
+        groupArrowButtonTemplate(data: string): TemplateResult;
+        getSelectAllOption(): TemplateResult;
         getSelctedCount(): {};
         checkForVirtualScroll(): boolean;
         rangeChanged(): void;
         getCustomErrorContent(): DocumentFragment;
-        getCustomContent(option: string | OptionMember): DocumentFragment | import("lit-element").TemplateResult;
-        renderGroupLabelHeader(option: OptionMember, optionIndex: number): import("lit-element").TemplateResult;
+        getCustomContent(option: string | OptionMember): DocumentFragment | TemplateResult;
+        renderGroupLabelHeader(option: OptionMember, optionIndex: number): TemplateResult;
         renderWithoutVirtualScroll(): import("lit-html").DirectiveFn;
-        highlightingSearchedText(option: OptionMember | string): import("lit-element").TemplateResult[];
+        highlightingSearchedText(option: OptionMember | string): TemplateResult[];
         addStyle(): (part: import("lit-html").Part) => void;
-        renderItem(option: OptionMember | string, index: number): import("lit-element").TemplateResult;
+        renderItem(option: OptionMember | string, index: number): TemplateResult;
         inputTitle(): string;
         helpTextTemplate(): {};
         messagesTemplate(): {};
-        render(): import("lit-element").TemplateResult;
+        get renderNewMomentumArrow(): TemplateResult;
+        render(): TemplateResult;
     }
     export {};
 }

package/dist/types/components/input/Input.d.ts

@@ -110,6 +110,7 @@ export declare namespace Input {
             [x: string]: boolean;
             "md-input--multiline": boolean;
             "md-input--multi": boolean;
+            "md-input--compact": boolean;
             "md-input--before": boolean;
             "md-input--after": boolean;
             "md-active": boolean;

package/dist/types/components/menu-overlay/MenuOverlay.d.ts

@@ -11,7 +11,7 @@ export declare enum OverlaySizes {
     large = "370px"
 }
 export declare const menuOverlaySize: readonly ["small", "large"];
-export declare const menuOverlayPlacement: readonly ["left-start", "left", "left-end", "right-start", "right", "right-end", "top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"];
+export declare const menuOverlayPlacement: readonly ["auto", "auto-start", "auto-end", "left-start", "left", "left-end", "right-start", "right", "right-end", "top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"];
 export declare const menuOverlayRole: readonly ["menu", "dialog"];
 export declare namespace MenuOverlay {
     export type Size = (typeof menuOverlaySize)[number];

package/dist/types/components/popover/Popover.d.ts

@@ -0,0 +1,184 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import "@/components/button/Button";
+import "@/components/icon/Icon";
+import { LitElement, PropertyValues } from "lit-element";
+import { PlacementType, PopoverRoleType } from "./Popover.types";
+export declare namespace Popover {
+    const ELEMENT_base: typeof LitElement & import("@/mixins/FocusTrapMixin").AnyConstructor<import("@/mixins/FocusTrapMixin").FocusTrapClass & import("@/mixins/FocusTrapMixin").FocusTrapInterface & import("../../mixins/FocusMixin").FocusClass>;
+    /**
+     * @fires popover-open-changed - Fired when the popover is opened or closed.
+     */
+    export class ELEMENT extends ELEMENT_base {
+        /**
+         * The placement of the popover relative to the trigger element.
+         *
+         * This property specifies where the popover should appear in relation to the trigger element.
+         * The default placement is "bottom", but it can be customized to other positions such as "top", "left", or "right".
+         *
+         * @type {PlacementType}
+         */
+        placement: PlacementType;
+        /**
+         * Indicates whether the popover is open.
+         *
+         * This property controls the visibility of the popover. When set to true, the popover is displayed.
+         * When set to false, the popover is hidden.
+         *
+         * @type {boolean}
+         */
+        isOpen: boolean;
+        /**
+         * Indicates whether the arrow should be shown on the popover.
+         *
+         * This property controls the visibility of the arrow on the popover. When set to true, the arrow is displayed.
+         * When set to false, the arrow is hidden.
+         *
+         * @type {boolean}
+         */
+        showArrow: boolean;
+        /**
+         * Indicates whether the close button should be shown on the popover.
+         *
+         * This property controls the visibility of the close button on the popover. When set to true, the close button is displayed.
+         * When set to false, the close button is hidden.
+         *
+         * @type {boolean}
+         */
+        showClose?: boolean | undefined;
+        /**
+         * Indicates whether the popover is interactive.
+         *
+         * When set to true, the popover will allow user interactions within it.
+         * This property is used to determine if the popover should trap focus.
+         *
+         * @type {boolean}
+         */
+        interactive: boolean;
+        shouldWrapFocus: () => boolean;
+        /**
+         * The role attribute for the popover.
+         *
+         * This property specifies the `role` attribute for the popover, which defines its role in the accessibility tree.
+         * The default role is "dialog", but it can be customized to "dialog", "menu" or "tooltip.
+         *
+         * @type {PopoverRoleType}
+         */
+        role: PopoverRoleType;
+        /**
+         * The accessible label for the popover.
+         *
+         * This property specifies the `aria-label` attribute for the popover, which provides an accessible name for the popover element.
+         * It is used by screen readers to announce the purpose of the popover to users with visual impairments.
+         *
+         * @type {string | null}
+         */
+        ariaLabel: string | null;
+        /**
+         * The offset distance (in pixels) from the trigger element.
+         *
+         * This property specifies the distance between the trigger element and the popover.
+         * It is used to control the spacing between the trigger element and the popover when the popover is displayed.
+         *
+         * @type {number}
+         */
+        offsetDistance: number;
+        /**
+         * The slot element that contains the trigger element for the popover.
+         *
+         * This property is used to query the slot with the name "triggerElement" and store a reference to it.
+         * The trigger element is the element that, when interacted with, will open or close the popover.
+         *
+         * @type {HTMLSlotElement}
+         */
+        triggerSlot: HTMLSlotElement;
+        /**
+         * The popover container element.
+         *
+         * This property is used to query the popover container element in the DOM.
+         * The popover container is the main element that contains the popover content.
+         *
+         * @type {HTMLDivElement}
+         */
+        popoverContainer: HTMLDivElement;
+        /**
+         * The popover arrow element.
+         *
+         * This property is used to query the popover arrow element in the DOM.
+         * The popover arrow is the element that visually connects the popover to the trigger element.
+         *
+         * @type {HTMLDivElement}
+         */
+        popoverArrow: HTMLDivElement;
+        /**
+         * The event that triggers the popover.
+         *
+         * This property specifies the event that will trigger the popover to open or close.
+         * The default event is "click", but it can be customized to other events such as "mouseenter" or "focus".
+         *
+         * @type {string}
+         */
+        trigger?: string;
+        /**
+         * The trigger element for the popover.
+         *
+         * This property holds a reference to the trigger element that, when interacted with, will open or close the popover.
+         *
+         * @type {HTMLElement | null}
+         */
+        private triggerElement;
+        /**
+         * The Popper.js instance used to manage the positioning of the popover.
+         *
+         * This instance is created when the popover is opened and destroyed when the popover is closed.
+         * It is used to handle the positioning and alignment of the popover relative to the trigger element.
+         */
+        private popperInstance;
+        /**
+         * If mouse is over the trigger element or popover container.
+         *
+         * This property is used when both focus and mouse triggers are present
+         * When focus leaves the trigger element if mouse is hovering we should not close the popover
+         */
+        private isMouseOver;
+        static get styles(): import("lit-element").CSSResult[];
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        private setupTriggerEvents;
+        onOutsideOverlayClick: (event: MouseEvent) => void;
+        onWindowBlurEvent: () => void;
+        onOutsideOverlayKeydown: (event: KeyboardEvent) => Promise<void>;
+        private handleTriggerElementSlotChange;
+        private onContentSlotChanged;
+        onTriggerElementClicked: () => void;
+        onTriggerElementKeydown: (event: KeyboardEvent) => Promise<void>;
+        onFocusInTrigger: () => void;
+        onFocusOutTrigger: () => void;
+        onMouseEnteredTriggerOrPopup: (_event: MouseEvent) => void;
+        onMouseLeaveTriggerOrPopup: (_event: MouseEvent) => void;
+        private shouldStayOpenOnTriggerFocus;
+        private setIsOpenDebounced;
+        protected firstUpdated(changedProperties: PropertyValues): void;
+        private focusInsideOverlay;
+        private focusOnTrigger;
+        private toggleOverlay;
+        private handleCreatePopperFirstUpdate;
+        private createInstance;
+        private destroyInstance;
+        protected updated(changedProperties: PropertyValues): void;
+        private isOpenUpdated;
+        private dispatchPopoverIsOpenChanged;
+        render(): import("lit-element").TemplateResult;
+    }
+    export {};
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "md-popover": Popover.ELEMENT;
+    }
+}

package/dist/types/components/popover/Popover.types.d.ts

@@ -0,0 +1,8 @@
+export declare const Placement: readonly ["auto", "auto-start", "auto-end", "left-start", "left", "left-end", "right-start", "right", "right-end", "top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"];
+export declare const ARROW_HEIGHT = 16;
+export declare const Strategy: readonly ["fixed", "absolute"];
+export declare const PopoverRole: readonly ["dialog", "menu", "tooltip"];
+export declare const Triggers: readonly ["click", "mouseenter", "manual"];
+export type PlacementType = (typeof Placement)[number];
+export type StrategyType = (typeof Strategy)[number];
+export type PopoverRoleType = (typeof PopoverRole)[number];

package/dist/types/components/timepicker/TimePicker.d.ts

@@ -37,7 +37,7 @@ export declare namespace TimePicker {
         handleTimeBlur(event: CustomEvent, unit: TimePicker.TimeUnit): void;
         static get styles(): import("lit-element").CSSResult[];
         formatTimeUnit: (unit: TimePicker.TimeUnit) => void;
-        messageType: (isValid: boolean) => "" | "error";
+        messageType: (isValid: boolean) => "error" | "";
         generateTimeBox: (unit: TimePicker.TimeUnit) => import("lit-element").TemplateResult;
         generateAmPmComboBox: () => import("lit-element").TemplateResult;
         render(): import("lit-element").TemplateResult;

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

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+import { PlacementType, StrategyType } from "@/components/popover/Popover.types";
 import { LitElement, PropertyValues } from "lit-element";
 export declare const tooltipPlacement: readonly ["auto", "auto-start", "auto-end", "left-start", "left", "left-end", "right-start", "right", "right-end", "top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"];
 export declare const tooltipStrategy: readonly ["fixed", "absolute"];
@@ -15,8 +16,8 @@ export type TooltipEvent = {
     slotContent?: Element[] | undefined | null;
 };
 export declare namespace Tooltip {
-    export type Placement = (typeof tooltipPlacement)[number];
-    export type Strategy = (typeof tooltipStrategy)[number];
+    export type Placement = PlacementType;
+    export type Strategy = StrategyType;
     const ELEMENT_base: typeof LitElement & import("../../mixins/FocusMixin").AnyConstructor<import("../../mixins/FocusMixin").FocusClass>;
     export class ELEMENT extends ELEMENT_base {
         message: string;

package/dist/types/index.d.ts

@@ -18,12 +18,13 @@ export { Badge } from "./components/badge/Badge";
 export { Breadcrumb } from "./components/breadcrumb/Breadcrumb";
 export { ButtonGroup } from "./components/button-group/ButtonGroup";
 export { Button } from "./components/button/Button";
-export { Card } from "./components/card/Card";
 export { CardAi } from "./components/card-ai/CardAi";
+export { Card } from "./components/card/Card";
 export { ChatMessage } from "./components/chat-message/ChatMessage";
 export { Checkbox } from "./components/checkbox/Checkbox";
 export { CheckboxGroup } from "./components/checkbox/CheckboxGroup";
 export { Chip } from "./components/chip/Chip";
+export { CoachmarkPopover } from "./components/coachmark-popover/CoachmarkPopover";
 export { Coachmark } from "./components/coachmark/Coachmark";
 export { CodeEditor } from "./components/code-editor/CodeEditor";
 export { ComboBox } from "./components/combobox/ComboBox";
@@ -59,6 +60,7 @@ export { MenuItem } from "./components/menu/MenuItem";
 export { Modal } from "./components/modal/Modal";
 export { Pagination } from "./components/pagination/Pagination";
 export { PhoneInput } from "./components/phone-input/PhoneInput";
+export { Popover } from "./components/popover/Popover";
 export { ProgressBar } from "./components/progress-bar/ProgressBar";
 export { Radio } from "./components/radio/Radio";
 export { RadioGroup } from "./components/radio/RadioGroup";

package/package.json

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