@momentum-ui/web-components 2.16.8 → 2.16.10

package/dist/types/internal-components/color-table/ColorTable.d.ts

@@ -0,0 +1,9 @@
+import "@/components/table-advanced/TableAdvanced";
+import { LitElement, PropertyValues } from "lit-element";
+export declare class ColorTableSandbox extends LitElement {
+    private colorTokenTableData;
+    firstUpdated(changedProperties: PropertyValues): void;
+    renderColorTable(): {};
+    static get styles(): import("lit-element").CSSResult[];
+    render(): import("lit-element").TemplateResult;
+}

package/dist/types/internal-components/color-table/data.d.ts

@@ -0,0 +1,551 @@
+export declare const colorCellTemplates: {
+    _none_: {
+        templateName: string;
+    };
+    _$mdblue10_: {
+        templateName: string;
+    };
+    _$mdblue20_: {
+        templateName: string;
+    };
+    _$mdblue30_: {
+        templateName: string;
+    };
+    _$mdblue40_: {
+        templateName: string;
+    };
+    _$mdblue50_: {
+        templateName: string;
+    };
+    _$mdblue60_: {
+        templateName: string;
+    };
+    _$mdblue70_: {
+        templateName: string;
+    };
+    _$mdblue80_: {
+        templateName: string;
+    };
+    _$mdblue90_: {
+        templateName: string;
+    };
+    _$mdblue95_: {
+        templateName: string;
+    };
+    _$mdblue05_: {
+        templateName: string;
+    };
+    _$mdred10_: {
+        templateName: string;
+    };
+    _$mdred20_: {
+        templateName: string;
+    };
+    _$mdred30_: {
+        templateName: string;
+    };
+    _$mdred40_: {
+        templateName: string;
+    };
+    _$mdred50_: {
+        templateName: string;
+    };
+    _$mdred60_: {
+        templateName: string;
+    };
+    _$mdred70_: {
+        templateName: string;
+    };
+    _$mdred80_: {
+        templateName: string;
+    };
+    _$mdred90_: {
+        templateName: string;
+    };
+    _$mdred95_: {
+        templateName: string;
+    };
+    _$mdred05_: {
+        templateName: string;
+    };
+    _$mdyellow10_: {
+        templateName: string;
+    };
+    _$mdyellow20_: {
+        templateName: string;
+    };
+    _$mdyellow30_: {
+        templateName: string;
+    };
+    _$mdyellow40_: {
+        templateName: string;
+    };
+    _$mdyellow50_: {
+        templateName: string;
+    };
+    _$mdyellow60_: {
+        templateName: string;
+    };
+    _$mdyellow70_: {
+        templateName: string;
+    };
+    _$mdyellow80_: {
+        templateName: string;
+    };
+    _$mdyellow90_: {
+        templateName: string;
+    };
+    _$mdyellow95_: {
+        templateName: string;
+    };
+    _$mdyellow05_: {
+        templateName: string;
+    };
+    _$mdgreen10_: {
+        templateName: string;
+    };
+    _$mdgreen20_: {
+        templateName: string;
+    };
+    _$mdgreen30_: {
+        templateName: string;
+    };
+    _$mdgreen40_: {
+        templateName: string;
+    };
+    _$mdgreen50_: {
+        templateName: string;
+    };
+    _$mdgreen60_: {
+        templateName: string;
+    };
+    _$mdgreen70_: {
+        templateName: string;
+    };
+    _$mdgreen80_: {
+        templateName: string;
+    };
+    _$mdgreen90_: {
+        templateName: string;
+    };
+    _$mdgreen95_: {
+        templateName: string;
+    };
+    _$mdgreen05_: {
+        templateName: string;
+    };
+    _$mdgray10_: {
+        templateName: string;
+    };
+    _$mdgray20_: {
+        templateName: string;
+    };
+    _$mdgray30_: {
+        templateName: string;
+    };
+    _$mdgray40_: {
+        templateName: string;
+    };
+    _$mdgray50_: {
+        templateName: string;
+    };
+    _$mdgray60_: {
+        templateName: string;
+    };
+    _$mdgray70_: {
+        templateName: string;
+    };
+    _$mdgray80_: {
+        templateName: string;
+    };
+    _$mdgray90_: {
+        templateName: string;
+    };
+    _$mdgray95_: {
+        templateName: string;
+    };
+    _$mdgray100_: {
+        templateName: string;
+    };
+    _$mdgray05_: {
+        templateName: string;
+    };
+    _$mdwhite60_: {
+        templateName: string;
+    };
+    _$mdwhite100_: {
+        templateName: string;
+    };
+    _$mdwhite_: {
+        templateName: string;
+    };
+    _$mdblack100_: {
+        templateName: string;
+    };
+    _$mdblack_: {
+        templateName: string;
+    };
+    _$mdorange10_: {
+        templateName: string;
+    };
+    _$mdorange20_: {
+        templateName: string;
+    };
+    _$mdorange30_: {
+        templateName: string;
+    };
+    _$mdorange40_: {
+        templateName: string;
+    };
+    _$mdorange50_: {
+        templateName: string;
+    };
+    _$mdorange60_: {
+        templateName: string;
+    };
+    _$mdorange70_: {
+        templateName: string;
+    };
+    _$mdorange80_: {
+        templateName: string;
+    };
+    _$mdorange90_: {
+        templateName: string;
+    };
+    _$mdorange100_: {
+        templateName: string;
+    };
+    _$mdgold10_: {
+        templateName: string;
+    };
+    _$mdgold20_: {
+        templateName: string;
+    };
+    _$mdgold30_: {
+        templateName: string;
+    };
+    _$mdgold40_: {
+        templateName: string;
+    };
+    _$mdgold50_: {
+        templateName: string;
+    };
+    _$mdgold60_: {
+        templateName: string;
+    };
+    _$mdgold70_: {
+        templateName: string;
+    };
+    _$mdgold80_: {
+        templateName: string;
+    };
+    _$mdgold90_: {
+        templateName: string;
+    };
+    _$mdgold100_: {
+        templateName: string;
+    };
+    _$mdolive10_: {
+        templateName: string;
+    };
+    _$mdolive20_: {
+        templateName: string;
+    };
+    _$mdolive30_: {
+        templateName: string;
+    };
+    _$mdolive40_: {
+        templateName: string;
+    };
+    _$mdolive50_: {
+        templateName: string;
+    };
+    _$mdolive60_: {
+        templateName: string;
+    };
+    _$mdolive70_: {
+        templateName: string;
+    };
+    _$mdolive80_: {
+        templateName: string;
+    };
+    _$mdolive90_: {
+        templateName: string;
+    };
+    _$mdolive100_: {
+        templateName: string;
+    };
+    _$mdlime10_: {
+        templateName: string;
+    };
+    _$mdlime20_: {
+        templateName: string;
+    };
+    _$mdlime30_: {
+        templateName: string;
+    };
+    _$mdlime40_: {
+        templateName: string;
+    };
+    _$mdlime50_: {
+        templateName: string;
+    };
+    _$mdlime60_: {
+        templateName: string;
+    };
+    _$mdlime70_: {
+        templateName: string;
+    };
+    _$mdlime80_: {
+        templateName: string;
+    };
+    _$mdlime90_: {
+        templateName: string;
+    };
+    _$mdlime100_: {
+        templateName: string;
+    };
+    _$mdmint10_: {
+        templateName: string;
+    };
+    _$mdmint20_: {
+        templateName: string;
+    };
+    _$mdmint30_: {
+        templateName: string;
+    };
+    _$mdmint40_: {
+        templateName: string;
+    };
+    _$mdmint50_: {
+        templateName: string;
+    };
+    _$mdmint60_: {
+        templateName: string;
+    };
+    _$mdmint70_: {
+        templateName: string;
+    };
+    _$mdmint80_: {
+        templateName: string;
+    };
+    _$mdmint90_: {
+        templateName: string;
+    };
+    _$mdmint100_: {
+        templateName: string;
+    };
+    _$mdcyan10_: {
+        templateName: string;
+    };
+    _$mdcyan20_: {
+        templateName: string;
+    };
+    _$mdcyan30_: {
+        templateName: string;
+    };
+    _$mdcyan40_: {
+        templateName: string;
+    };
+    _$mdcyan50_: {
+        templateName: string;
+    };
+    _$mdcyan60_: {
+        templateName: string;
+    };
+    _$mdcyan70_: {
+        templateName: string;
+    };
+    _$mdcyan80_: {
+        templateName: string;
+    };
+    _$mdcyan90_: {
+        templateName: string;
+    };
+    _$mdcyan100_: {
+        templateName: string;
+    };
+    _$mdcobalt10_: {
+        templateName: string;
+    };
+    _$mdcobalt20_: {
+        templateName: string;
+    };
+    _$mdcobalt30_: {
+        templateName: string;
+    };
+    _$mdcobalt40_: {
+        templateName: string;
+    };
+    _$mdcobalt50_: {
+        templateName: string;
+    };
+    _$mdcobalt60_: {
+        templateName: string;
+    };
+    _$mdcobalt70_: {
+        templateName: string;
+    };
+    _$mdcobalt80_: {
+        templateName: string;
+    };
+    _$mdcobalt90_: {
+        templateName: string;
+    };
+    _$mdcobalt100_: {
+        templateName: string;
+    };
+    _$mdslate10_: {
+        templateName: string;
+    };
+    _$mdslate20_: {
+        templateName: string;
+    };
+    _$mdslate30_: {
+        templateName: string;
+    };
+    _$mdslate40_: {
+        templateName: string;
+    };
+    _$mdslate50_: {
+        templateName: string;
+    };
+    _$mdslate60_: {
+        templateName: string;
+    };
+    _$mdslate70_: {
+        templateName: string;
+    };
+    _$mdslate80_: {
+        templateName: string;
+    };
+    _$mdslate90_: {
+        templateName: string;
+    };
+    _$mdslate100_: {
+        templateName: string;
+    };
+    _$mdviolet10_: {
+        templateName: string;
+    };
+    _$mdviolet20_: {
+        templateName: string;
+    };
+    _$mdviolet30_: {
+        templateName: string;
+    };
+    _$mdviolet40_: {
+        templateName: string;
+    };
+    _$mdviolet50_: {
+        templateName: string;
+    };
+    _$mdviolet60_: {
+        templateName: string;
+    };
+    _$mdviolet70_: {
+        templateName: string;
+    };
+    _$mdviolet80_: {
+        templateName: string;
+    };
+    _$mdviolet90_: {
+        templateName: string;
+    };
+    _$mdviolet100_: {
+        templateName: string;
+    };
+    _$mdpurple10_: {
+        templateName: string;
+    };
+    _$mdpurple20_: {
+        templateName: string;
+    };
+    _$mdpurple30_: {
+        templateName: string;
+    };
+    _$mdpurple40_: {
+        templateName: string;
+    };
+    _$mdpurple50_: {
+        templateName: string;
+    };
+    _$mdpurple60_: {
+        templateName: string;
+    };
+    _$mdpurple70_: {
+        templateName: string;
+    };
+    _$mdpurple80_: {
+        templateName: string;
+    };
+    _$mdpurple90_: {
+        templateName: string;
+    };
+    _$mdpurple100_: {
+        templateName: string;
+    };
+    _$mdpink10_: {
+        templateName: string;
+    };
+    _$mdpink20_: {
+        templateName: string;
+    };
+    _$mdpink30_: {
+        templateName: string;
+    };
+    _$mdpink40_: {
+        templateName: string;
+    };
+    _$mdpink50_: {
+        templateName: string;
+    };
+    _$mdpink60_: {
+        templateName: string;
+    };
+    _$mdpink70_: {
+        templateName: string;
+    };
+    _$mdpink80_: {
+        templateName: string;
+    };
+    _$mdpink90_: {
+        templateName: string;
+    };
+    _$mdpink100_: {
+        templateName: string;
+    };
+    _$mdtheme10_: {
+        templateName: string;
+    };
+    _$mdtheme20_: {
+        templateName: string;
+    };
+    _$mdtheme30_: {
+        templateName: string;
+    };
+    _$mdtheme40_: {
+        templateName: string;
+    };
+    _$mdtheme50_: {
+        templateName: string;
+    };
+    _$mdtheme60_: {
+        templateName: string;
+    };
+    _$mdtheme70_: {
+        templateName: string;
+    };
+    _$mdtheme80_: {
+        templateName: string;
+    };
+    _$mdtheme90_: {
+        templateName: string;
+    };
+    _$mdtheme95_: {
+        templateName: string;
+    };
+    _$mdtheme05_: {
+        templateName: string;
+    };
+};

package/dist/types/internal-components/color-table/utils.d.ts

@@ -0,0 +1 @@
+export declare const allColorTemplates: () => import("lit-html").TemplateResult;

package/dist/types/managers/ThemeManager.d.ts

@@ -0,0 +1,41 @@
+import { ThemeName } from "@/components/theme/Theme";
+/**
+ * ThemeManager is a class that manages the global theme state.
+ * It provides observable properties that can be observed by other classes
+ * to set properties on their components, such as whether dark mode is enabled.
+ */
+declare class ThemeManager {
+    /**
+     * Observable property to indicate if dark mode is enabled
+     * Is needed by components styled outside of the web components
+     */
+    isDarkMode: boolean;
+    /**
+     * Observable property to store the current theme name
+     */
+    themeName: ThemeName;
+    /**
+     * Observable property to indicate if visual rebrand is enabled
+     * Will be used to allow users to toggle to updated visuals
+     */
+    isVisualRebrandEnabled: boolean;
+    /**
+     * Observable property to indicate if Momentum Avatar is enabled
+     * Should be used to set the new momentum style on avatars and sue
+     * correct momentum presence states
+     */
+    isMomentumAvatarEnabled: boolean;
+    constructor(other?: Partial<ThemeManager>);
+    update(other: Partial<ThemeManager>): void;
+    setDarkMode(value: boolean): void;
+    setThemeName(value: ThemeName): void;
+    setVisualRebrandEnabled(value: boolean): void;
+    setMomentumAvatar(value: boolean): void;
+    /**
+     * Computed property to check if the current theme is Momentum V2.
+     * @returns {boolean} True if the current theme is Momentum V2, otherwise false
+     */
+    get isMomentumV2Enabled(): boolean;
+}
+declare const themeManager: ThemeManager;
+export { themeManager, ThemeManager };

package/dist/types/mixins/CustomElementCheck.d.ts

@@ -0,0 +1 @@
+export declare const customElementWithCheck: (tagName: string) => (classOrDescriptor: any) => any;

package/dist/types/mixins/DedupeMixin.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ *
+ */
+/**  This mixin check thay each other mixins in the prototype chain are not applied more than once to the final component class.
+ * Example:
+ * import { DedupeMixin, wasApplied } from "./DedupeMixin";
+ *
+ * const Mixin = (superclass) => {
+ *  if (wasApplied(Mixin, superclass)) { <---- Check that mixin already applied to superclass.
+      return superclass;
+    }
+    class MixinClass extends superclass {
+      // MixinClass implementation
+    }
+
+    DedupeMixin(Mixin, MixinClass); <---- If mixin not applied to superclass, save it in WeakMap to check prototype chain next time.
+
+    return MixinClass;
+ * }
+ */
+export type AnyFunction<A = any> = (...input: any[]) => A;
+export type AnyConstructor<A = HTMLElement> = new (...input: any[]) => A;
+export declare const wasApplied: (mixin: AnyFunction, superClass: AnyConstructor) => boolean;
+export declare const DedupeMixin: (mixin: AnyFunction, superClass: AnyConstructor) => void;

package/dist/types/mixins/FocusMixin.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ *
+ */
+/** This mixin provide a different way to show what element is focused.
+ * (https://html.spec.whatwg.org/multipage/interaction.html#focus-management-apis)
+ * By hiding the native browser outline from component style, we can manage alternative focusing style.
+ * Using keyboard this mixin toggle `focus-visible` attribute on compoenent root to show focus ring.
+ * This mixin handle `focusin` and `focusout` events because due to this specification
+ * (https://w3c.github.io/uievents/#event-type-focusin) this events are composable
+ * and they can be handled by one of the target’s ancestors, which can help us in Shadow DOM event propagation case.
+ *
+ * Example:
+ *
+ * @customElements("custom-element")
+ * class CustomElement extends FocusMixin(LitElement) {
+ *    protected handleFocusIn(event: Event) { <---- You override this with corresponding name in component directly.
+        // super.handleFocusIn && super.handleFocusIn(event); <---- Check to see whether the superclass defines a method of the same name, and if so, invoke that method.
+        // Do your method work here.
+      }
+ *    protected handleFocusOut(event: Event) { <---- You override this with corresponding name in component directly.
+        // super.handleFocusIn && super.handleFocusIn(event); <---- Check to see whether the superclass defines a method of the same name, and if so, invoke that method.
+        // Do your method work here.
+      }
+ * }
+ * */
+import { LitElement } from "lit-element";
+export type AnyConstructor<A = LitElement> = new (...input: any[]) => A;
+export type FocusEventDetail = {
+    sourceEvent: Event;
+};
+export declare abstract class FocusClass extends LitElement {
+    protected setFocus?(force: boolean): void;
+    protected handleFocusIn?(event: Event): void;
+    protected handleFocusOut?(event: Event): void;
+    protected getDeepActiveElement?(): Element;
+    protected isElementFocused?(element: HTMLElement): boolean;
+    protected manageAutoFocus?(element?: Element): void;
+    protected getActiveElement?(): Element | null;
+}
+export declare const FocusMixin: <T extends AnyConstructor<FocusClass>>(base: T) => T & AnyConstructor<FocusClass>;

package/dist/types/mixins/FocusTrapMixin.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from "lit-element";
+import { FocusClass } from "./FocusMixin";
+export type AnyConstructor<A = LitElement> = new (...args: any[]) => A;
+export declare abstract class FocusTrapClass extends LitElement {
+    protected deactivateFocusTrap?(): void;
+    protected activateFocusTrap?(): void;
+    protected focusableElements?: HTMLElement[];
+    protected initialFocusComplete?: boolean;
+    protected setFocusableElements?(): void;
+    protected setInitialFocus?(prefferableElement?: HTMLElement | number, ignoreAutoFocus?: boolean): void;
+    protected setFocusOnTrigger?(triggerEleement?: HTMLElement): void;
+}
+export interface FocusTrapInterface {
+    activeFocusTrap: boolean;
+    preventClickOutside: boolean;
+    preventScroll: boolean;
+    focusTrapIndex: number;
+}
+export declare const FocusTrapMixin: <T extends AnyConstructor<FocusClass & FocusTrapClass>>(base: T) => T & AnyConstructor<FocusTrapClass & FocusTrapInterface & FocusClass>;