@momentum-design/components 0.125.1 → 0.126.0

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

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

package/dist/components/responsivesettingsprovider/index.js

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

package/dist/components/responsivesettingsprovider/responsiveSettingsContext.d.ts

@@ -0,0 +1,11 @@
+import type { ResponsiveMediaType, ResponsivePopoverPositions, ResponsiveSettings } from './responsivesettingsprovider.types';
+declare class ResponsiveSettingsContext {
+    media: ResponsiveMediaType;
+    forceFullscreenDialog: boolean;
+    popoverPositioning: ResponsivePopoverPositions;
+    static context: {
+        __context__: ResponsiveSettings;
+    };
+    constructor(options?: Partial<ResponsiveSettings>);
+}
+export default ResponsiveSettingsContext;

package/dist/components/responsivesettingsprovider/responsiveSettingsContext.js

@@ -0,0 +1,14 @@
+import { createContext } from '@lit/context';
+import { DEFAULTS, TAG_NAME } from './responsivesettingsprovider.constants';
+class ResponsiveSettingsContext {
+    // constructor to allow setting the defaultThemeClass
+    constructor(options = {}) {
+        this.media = DEFAULTS.MEDIA;
+        this.forceFullscreenDialog = DEFAULTS.FORCE_FULLSCREEN_DIALOG;
+        this.popoverPositioning = DEFAULTS.POPOVER_POSITIONING;
+        Object.assign(this, options); // assign provided options to
+    }
+}
+// create typed lit context as part of the ThemeProviderContext
+ResponsiveSettingsContext.context = createContext(TAG_NAME);
+export default ResponsiveSettingsContext;

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

@@ -0,0 +1,65 @@
+import { Provider } from '../../models';
+import type { ResponsiveMediaType, ResponsivePopoverPositions, ResponsiveSettings } from './responsivesettingsprovider.types';
+/**
+ * `mdc-responsivesettingsprovider` is a provider component that supplies responsive settings
+ * context to its child components.
+ *
+ * This component does not make any assumptions about how the values are determined. Values can be set
+ * based on media queries or other device detection mechanisms.This way consumer can mix and match
+ * different settings depending on their target devices and use cases.
+ *
+ * For example, when the device has table screen size/resolution, but because it is fixed dialog like
+ * popovers provide better user experience.
+ *
+ * ## Responsive settings
+ *
+ * ### Media
+ *
+ * Generic media type to enforce responsive behavior in child components.
+ * Consumer component can use the media type from the context or
+ * just use CSS selector like [media="mobile"] to apply responsive styles.
+ *
+ * It is "unknown" by default so components can fall back to there default behavior.
+ *
+ * ### Popover Positioning
+ *
+ * By default, popovers are positioned close to the trigger element. But on small screens (e.g.: mobile devices),
+ * it is often better to show popovers/menus at the center of the screen like dialogs.
+ *
+ * ### Force Fullscreen Dialog
+ *
+ * Some components like dialogs can be shown in fullscreen mode on small screens for better user experience.
+ *
+ * @tagname mdc-responsivesettingsprovider
+ */
+declare class ResponsiveSettingsProvider extends Provider<ResponsiveSettings> {
+    constructor();
+    /**
+     * Context object of the ResponsiveSettingsProvider, to be consumed by child components
+     */
+    static get Context(): {
+        __context__: ResponsiveSettings;
+    };
+    /**
+     * Determines whether dialogs should be forced to fullscreen mode.
+     */
+    forceFullscreenDialog: boolean;
+    /** @internal */
+    private privatePopoverPositioning;
+    /**
+     * The popover positioning for responsive settings.
+     * @default 'float'
+     */
+    set popoverPositioning(value: ResponsivePopoverPositions);
+    get popoverPositioning(): ResponsivePopoverPositions;
+    /** @internal */
+    private privateMedia;
+    /**
+     * The media type for responsive settings.
+     * @default 'unknown'
+     */
+    set media(value: ResponsiveMediaType);
+    get media(): ResponsiveMediaType;
+    protected updateContext(): void;
+}
+export default ResponsiveSettingsProvider;

package/dist/components/responsivesettingsprovider/responsivesettingsprovider.component.js

@@ -0,0 +1,122 @@
+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 { Provider } from '../../models';
+import ResponsiveSettingsContext from './responsiveSettingsContext';
+import { DEFAULTS, VALID_MEDIA_VALUES, VALID_POPOVER_POSITIONING_VALUES } from './responsivesettingsprovider.constants';
+/**
+ * `mdc-responsivesettingsprovider` is a provider component that supplies responsive settings
+ * context to its child components.
+ *
+ * This component does not make any assumptions about how the values are determined. Values can be set
+ * based on media queries or other device detection mechanisms.This way consumer can mix and match
+ * different settings depending on their target devices and use cases.
+ *
+ * For example, when the device has table screen size/resolution, but because it is fixed dialog like
+ * popovers provide better user experience.
+ *
+ * ## Responsive settings
+ *
+ * ### Media
+ *
+ * Generic media type to enforce responsive behavior in child components.
+ * Consumer component can use the media type from the context or
+ * just use CSS selector like [media="mobile"] to apply responsive styles.
+ *
+ * It is "unknown" by default so components can fall back to there default behavior.
+ *
+ * ### Popover Positioning
+ *
+ * By default, popovers are positioned close to the trigger element. But on small screens (e.g.: mobile devices),
+ * it is often better to show popovers/menus at the center of the screen like dialogs.
+ *
+ * ### Force Fullscreen Dialog
+ *
+ * Some components like dialogs can be shown in fullscreen mode on small screens for better user experience.
+ *
+ * @tagname mdc-responsivesettingsprovider
+ */
+class ResponsiveSettingsProvider extends Provider {
+    constructor() {
+        // initialise the context by running the Provider constructor:
+        super({
+            context: ResponsiveSettingsContext.context,
+            initialValue: new ResponsiveSettingsContext({
+                media: DEFAULTS.MEDIA,
+                popoverPositioning: DEFAULTS.POPOVER_POSITIONING,
+                forceFullscreenDialog: DEFAULTS.FORCE_FULLSCREEN_DIALOG,
+            }),
+        });
+        /**
+         * Determines whether dialogs should be forced to fullscreen mode.
+         */
+        this.forceFullscreenDialog = DEFAULTS.FORCE_FULLSCREEN_DIALOG;
+        /** @internal */
+        this.privatePopoverPositioning = DEFAULTS.POPOVER_POSITIONING;
+        /** @internal */
+        this.privateMedia = DEFAULTS.MEDIA;
+    }
+    /**
+     * Context object of the ResponsiveSettingsProvider, to be consumed by child components
+     */
+    static get Context() {
+        return ResponsiveSettingsContext.context;
+    }
+    /**
+     * The popover positioning for responsive settings.
+     * @default 'float'
+     */
+    set popoverPositioning(value) {
+        if (VALID_POPOVER_POSITIONING_VALUES.includes(value)) {
+            this.privatePopoverPositioning = value;
+        }
+    }
+    get popoverPositioning() {
+        return this.privatePopoverPositioning;
+    }
+    /**
+     * The media type for responsive settings.
+     * @default 'unknown'
+     */
+    set media(value) {
+        if (VALID_MEDIA_VALUES.includes(value)) {
+            this.privateMedia = value;
+        }
+    }
+    get media() {
+        return this.privateMedia;
+    }
+    updateContext() {
+        var _a, _b, _c;
+        if (((_a = this.context.value) === null || _a === void 0 ? void 0 : _a.media) !== this.privateMedia ||
+            ((_b = this.context.value) === null || _b === void 0 ? void 0 : _b.popoverPositioning) !== this.privatePopoverPositioning ||
+            ((_c = this.context.value) === null || _c === void 0 ? void 0 : _c.forceFullscreenDialog) !== this.forceFullscreenDialog) {
+            this.context.value.media = this.media;
+            this.context.value.popoverPositioning = this.popoverPositioning;
+            this.context.value.forceFullscreenDialog = this.forceFullscreenDialog;
+            this.context.updateObservers();
+        }
+    }
+}
+__decorate([
+    property({ type: Boolean, attribute: 'force-fullscreen-dialog', reflect: true }),
+    __metadata("design:type", Boolean)
+], ResponsiveSettingsProvider.prototype, "forceFullscreenDialog", void 0);
+__decorate([
+    property({ type: String, attribute: 'popover-positioning', reflect: true }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], ResponsiveSettingsProvider.prototype, "popoverPositioning", null);
+__decorate([
+    property({ type: String, attribute: 'media', reflect: true }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], ResponsiveSettingsProvider.prototype, "media", null);
+export default ResponsiveSettingsProvider;

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

@@ -0,0 +1,9 @@
+import type { ResponsiveMediaType, ResponsivePopoverPositions } from './responsivesettingsprovider.types';
+export declare const TAG_NAME: "mdc-responsivesettingsprovider";
+export declare const DEFAULTS: {
+    readonly FORCE_FULLSCREEN_DIALOG: false;
+    readonly POPOVER_POSITIONING: "float";
+    readonly MEDIA: "unknown";
+};
+export declare const VALID_POPOVER_POSITIONING_VALUES: ResponsivePopoverPositions[];
+export declare const VALID_MEDIA_VALUES: ResponsiveMediaType[];

package/dist/components/responsivesettingsprovider/responsivesettingsprovider.constants.js

@@ -0,0 +1,9 @@
+import utils from '../../utils/tag-name';
+export const TAG_NAME = utils.constructTagName('responsivesettingsprovider');
+export const DEFAULTS = {
+    FORCE_FULLSCREEN_DIALOG: false,
+    POPOVER_POSITIONING: 'float',
+    MEDIA: 'unknown',
+};
+export const VALID_POPOVER_POSITIONING_VALUES = ['float', 'dialog'];
+export const VALID_MEDIA_VALUES = ['unknown', 'mobile', 'desktop', 'tablet'];

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

@@ -0,0 +1,25 @@
+/**
+ * Defines the type of media device.
+ * - 'unknown' - Represents an unknown device type.
+ * - 'desktop' - Represents desktop devices.
+ * - 'tablet' - Represents tablet devices.
+ * - 'mobile' - Represents mobile devices.
+ */
+export type ResponsiveMediaType = 'unknown' | 'mobile' | 'desktop' | 'tablet';
+/**
+ * Defines how popovers are positioned within the dialog.
+ * - 'float': Popovers are positioned next to the triggering element.
+ * - 'dialog': Popovers are positioned at the center of the scree like dialogs.
+ */
+export type ResponsivePopoverPositions = 'float' | 'dialog';
+/**
+ * Context type for ResponsiveSettingsProvider, combining responsive settings options with the current media type.
+ */
+export type ResponsiveSettings = {
+    /** Enforced media device type. */
+    media: ResponsiveMediaType;
+    /** If true, dialogs will be forced to fullscreen mode on small screens. */
+    forceFullscreenDialog: boolean;
+    /** Defines how popovers are positioned. */
+    popoverPositioning: ResponsivePopoverPositions;
+};

package/dist/components/responsivesettingsprovider/responsivesettingsprovider.types.js

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