@momentum-design/components 0.104.4 → 0.104.6

package/dist/index.d.ts

@@ -74,6 +74,7 @@ import Toggle from './components/toggle';
 import ToggleTip from './components/toggletip';
 import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
+import Slider from './components/slider';
 import type { BadgeType } from './components/badge/badge.types';
 import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
 import type { PopoverPlacement } from './components/popover/popover.types';
@@ -87,6 +88,6 @@ import type { MenuSectionChangeEvent } from './components/menusection/menusectio
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Slider, };
 export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, TextType, TypewriterType, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/index.js

@@ -76,11 +76,12 @@ import Toggle from './components/toggle';
 import ToggleTip from './components/toggletip';
 import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
+import Slider from './components/slider';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Components Exports
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Slider, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/react/index.d.ts

@@ -18,15 +18,15 @@ export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
-export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
+export { default as Chip } from './chip';
 export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
-export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
+export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
@@ -58,6 +58,7 @@ export { default as Select } from './select';
 export { default as Selectlistbox } from './selectlistbox';
 export { default as SideNavigation } from './sidenavigation';
 export { default as Skeleton } from './skeleton';
+export { default as Slider } from './slider';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';

package/dist/react/index.js

@@ -18,15 +18,15 @@ export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
-export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
+export { default as Chip } from './chip';
 export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
-export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
+export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
@@ -58,6 +58,7 @@ export { default as Select } from './select';
 export { default as Selectlistbox } from './selectlistbox';
 export { default as SideNavigation } from './sidenavigation';
 export { default as Skeleton } from './skeleton';
+export { default as Slider } from './slider';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';

package/dist/react/slider/index.d.ts

@@ -0,0 +1,12 @@
+import Component from '../../components/slider';
+/**
+ * slider component, which ...
+ *
+ * @tagname mdc-slider
+ *
+ * @slot default - This is a default/unnamed slot
+ *
+ * @cssproperty --custom-property-name - Description of the CSS custom property
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/slider/index.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/slider';
+import { TAG_NAME } from '../../components/slider/slider.constants';
+/**
+ * slider component, which ...
+ *
+ * @tagname mdc-slider
+ *
+ * @slot default - This is a default/unnamed slot
+ *
+ * @cssproperty --custom-property-name - Description of the CSS custom property
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Slider',
+});
+export default reactWrapper;

package/dist/utils/mixins/BackdropMixin.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import type { Component } from '../../models';
+import type { Constructor } from './index.types';
+export declare abstract class BackdropMixinInterface {
+    abstract zIndex: number;
+    protected backdropElement: HTMLElement | null;
+    protected isBackdropInvisible?: boolean;
+    protected backdropAppendTo?: string;
+    protected createBackdrop(classNamePrefix: string): void;
+    protected removeBackdrop(): void;
+    protected keepElementAboveBackdrop(element?: HTMLElement | null): void;
+    protected moveElementBackAfterBackdropRemoval(element?: HTMLElement | null): void;
+}
+export declare const BackdropMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<Component & BackdropMixinInterface> & T;

package/dist/utils/mixins/BackdropMixin.js

@@ -0,0 +1,99 @@
+export const BackdropMixin = (superClass) => {
+    class Backdrop extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * Set this property to true to make the backdrop invisible.
+             * This is useful for components that do want a backdrop which stops interaction,
+             * but do not want the backdrop to be visible.
+             * @internal
+             */
+            this.isBackdropInvisible = false;
+            /** @internal */
+            this.backdropElement = null;
+        }
+        /**
+         * Creates a backdrop element with the specified class name prefix.
+         *
+         * @param classNamePrefix - The prefix for the backdrop class name.
+         * @internal
+         */
+        createBackdrop(classNamePrefix) {
+            const backdrop = document.createElement('div');
+            backdrop.classList.add(`${classNamePrefix}-backdrop`);
+            const styleElement = document.createElement('style');
+            styleElement.textContent = `
+        .${classNamePrefix}-backdrop {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: ${this.isBackdropInvisible ? `transparent` : `var(--mds-color-theme-common-overlays-secondary-normal)`};
+          z-index: ${this.zIndex - 1};
+        }
+      `;
+            backdrop.appendChild(styleElement);
+            const backdropAppendToElement = document.getElementById(this.backdropAppendTo);
+            const elementToAppendTo = backdropAppendToElement || this.parentElement;
+            elementToAppendTo === null || elementToAppendTo === void 0 ? void 0 : elementToAppendTo.appendChild(backdrop);
+            this.backdropElement = backdrop;
+        }
+        /**
+         * Removes the backdrop element if it exists.
+         * @internal
+         */
+        removeBackdrop() {
+            if (this.backdropElement) {
+                this.backdropElement.remove();
+                this.backdropElement = null;
+            }
+        }
+        /**
+         * Keeps the specified element above the backdrop by adjusting its z-index and position.
+         *
+         * This method stores the original z-index and position of the element,
+         * and sets the z-index to the component's zIndex value.
+         * If the element's position is not already set to 'fixed' or 'absolute',
+         * it will be set to 'relative'.
+         * @param element - The element to keep above the backdrop.
+         * @internal
+         */
+        keepElementAboveBackdrop(element) {
+            if (!element) {
+                return;
+            }
+            // Store the original z-index and position of the element
+            this.elementOriginalStyle = {
+                zIndex: element.style.zIndex,
+                position: element.style.position,
+            };
+            // Set the z-index and position to ensure the element is above the backdrop
+            element.style.zIndex = `${this.zIndex}`;
+            // Only set the position to relative if it is not already set to fixed or absolute
+            if (!['fixed', 'absolute'].includes(window.getComputedStyle(element).position)) {
+                element.style.position = 'relative';
+            }
+        }
+        /**
+         * Moves the element back to its original z-index and position after the backdrop is removed.
+         *
+         * This method restores the original z-index and position of the element
+         * that was kept above the backdrop (by using `keepElementAboveBackdrop`).
+         *
+         * @param element - The element which styling should be restored.
+         * @internal
+         */
+        moveElementBackAfterBackdropRemoval(element) {
+            if (!element || !this.elementOriginalStyle) {
+                return;
+            }
+            // Restore the original z-index and position of the element
+            element.style.zIndex = this.elementOriginalStyle.zIndex;
+            element.style.position = this.elementOriginalStyle.position;
+            // Clear the stored original style
+            this.elementOriginalStyle = undefined;
+        }
+    }
+    return Backdrop;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.104.4",
+  "version": "0.104.6",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"