@breadstone/mosaik-elements-foundation 0.0.206 → 0.0.209

package/Controls/Components/Grouping/Region/RegionElement.d.ts

@@ -0,0 +1,171 @@
+import { CustomElement } from '../../Abstracts/CustomElement';
+import type { IRegionElementProps } from './IRegionElementProps';
+import { IEventDetail } from '@breadstone/mosaik-elements';
+declare const RegionElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
+/**
+ * Region - A container that hosts multiple view definitions with exclusive activation.
+ *
+ * Manages the lifecycle of views within it, ensuring only one view is instantiated and rendered at a time.
+ * Views are lazily instantiated when activated and cleanly destroyed when deactivated,
+ * providing efficient memory usage and proper lifecycle management for complex multi-view layouts.
+ *
+ * Perfect for wizards, steppers, tabbed interfaces, or any scenario requiring mutually exclusive view states
+ * without manual DOM manipulation or conditional rendering logic in templates.
+ *
+ * @name RegionElement
+ * @element mosaik-region
+ * @category Grouping
+ *
+ * @slot default - Contains mosaik-region-view definitions to be managed by the region
+ *
+ * @csspart host - The container element that renders the active view's content
+ *
+ * @fires activeChanged - Fired when the active view changes, with detail { active: string, previous?: string }
+ *
+ * @dependency RegionViewElement - View definition component
+ *
+ * @example
+ * ```html
+ * <!-- Basic region with navigation -->
+ * <mosaik-region id="wizard" active="step1">
+ *   <mosaik-region-view name="step1" default>
+ *     <div>Welcome to Step 1</div>
+ *   </mosaik-region-view>
+ *   <mosaik-region-view name="step2">
+ *     <div>Proceed to Step 2</div>
+ *   </mosaik-region-view>
+ *   <mosaik-region-view name="step3">
+ *     <div>Final Step</div>
+ *   </mosaik-region-view>
+ * </mosaik-region>
+ *
+ * <script>
+ *   const region = document.getElementById('wizard');
+ *   region.activate('step2'); // Switch to step 2
+ * </script>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Tabbed interface -->
+ * <mosaik-region active="overview">
+ *   <mosaik-region-view name="overview" default>
+ *     <my-overview-component></my-overview-component>
+ *   </mosaik-region-view>
+ *   <mosaik-region-view name="details">
+ *     <my-details-component></my-details-component>
+ *   </mosaik-region-view>
+ *   <mosaik-region-view name="settings">
+ *     <my-settings-component></my-settings-component>
+ *   </mosaik-region-view>
+ * </mosaik-region>
+ *
+ * <mosaik-button-group>
+ *   <mosaik-button onclick="document.querySelector('mosaik-region').activate('overview')">Overview</mosaik-button>
+ *   <mosaik-button onclick="document.querySelector('mosaik-region').activate('details')">Details</mosaik-button>
+ *   <mosaik-button onclick="document.querySelector('mosaik-region').activate('settings')">Settings</mosaik-button>
+ * </mosaik-button-group>
+ * ```
+ *
+ * @public
+ */
+export declare class RegionElement extends RegionElement_base implements IRegionElementProps {
+    private readonly _viewDefinitions;
+    private _active;
+    private _currentActiveName;
+    private _hostContainer;
+    private _isInitialized;
+    /**
+     * @public
+     */
+    constructor();
+    /**
+     * Returns the `{@link is}` property.
+     * The `{@link is}` property represents natural name of this element.
+     *
+     * @public
+     * @static
+     * @readonly
+     */
+    static get is(): string;
+    /**
+     * The name of the currently active view.
+     *
+     * @public
+     */
+    get active(): string;
+    set active(value: string);
+    /**
+     * @public
+     * @override
+     */
+    connectedCallback(): void;
+    /**
+     * @public
+     * @override
+     */
+    firstUpdated(changedProperties: Map<keyof this, unknown>): void;
+    /**
+     * Waits for all child RegionViewElements to complete their firstUpdated
+     * and capture their templates before rendering the active view.
+     *
+     * @private
+     */
+    private waitForViewsAndRender;
+    /**
+     * @public
+     * @override
+     */
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /**
+     * Activates a view by name.
+     *
+     * @param name - The name of the view to activate
+     * @public
+     */
+    activate(name: string): void;
+    /**
+     * Collects all mosaik-region-view children and builds the view definitions map.
+     *
+     * @private
+     */
+    private collectViewDefinitions;
+    /**
+     * Determines the initial active view based on the active attribute, default attribute, or first view.
+     *
+     * @private
+     */
+    private determineInitialActive;
+    /**
+     * Renders the currently active view by cloning its template content.
+     *
+     * @private
+     */
+    private renderActiveView;
+    /**
+     * Dispatches the active-changed event.
+     *
+     * @param previousActive - The previously active view name
+     * @private
+     */
+    private _dispatchActiveChangedEvent;
+}
+/**
+ * @public
+ */
+export declare namespace RegionElement {
+    type Props = IRegionElementProps;
+}
+/**
+ * @public
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'mosaik-region': RegionElement;
+    }
+    interface HTMLElementEventMap {
+        activeChanged: CustomEvent<IEventDetail>;
+    }
+}
+export {};
+//# sourceMappingURL=RegionElement.d.ts.map

package/Controls/Components/Grouping/Region/RegionElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegionElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Region/RegionElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAMjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;;AAI3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,qBAYa,aACT,SAAQ,kBACR,YAAW,mBAAmB;IAI9B,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAiC;IAClE,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,kBAAkB,CAAgB;IAC1C,OAAO,CAAC,cAAc,CAAqB;IAC3C,OAAO,CAAC,cAAc,CAAU;IAMhC;;OAEG;;IAeH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IAIW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAI9B;IAMD;;;OAGG;IACa,iBAAiB,IAAI,IAAI;IAUzC;;;OAGG;IACa,YAAY,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,IAAI,EAAE,OAAO,CAAC,GAAG,IAAI;IAU/E;;;;;OAKG;YACW,qBAAqB;IAcnC;;;OAGG;IACa,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAQxF;;;;;OAKG;IACI,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAInC;;;;OAIG;IACH,OAAO,CAAC,sBAAsB;IA0B9B;;;;OAIG;IACH,OAAO,CAAC,sBAAsB;IAqB9B;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IA4CxB;;;;;OAKG;IACH,OAAO,CAAC,2BAA2B;CAiBtC;AAED;;GAEG;AACH,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,eAAe,EAAE,aAAa,CAAC;KAClC;IAED,UAAU,mBAAmB;QACzB,aAAa,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;KAC5C;CACJ"}

package/Controls/Components/Grouping/Region/RegionElement.js

@@ -0,0 +1,319 @@
+// #region Imports
+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 { Attribute } from '../../../Decorators/AttributeDecorator';
+import { Component } from '../../../Decorators/ComponentDecorator';
+import { CustomElement } from '../../Abstracts/CustomElement';
+import { regionElementTemplate } from './RegionElementTemplate';
+import { RegionViewElement } from './RegionViewElement';
+import { Themeable } from '../../../Behaviors/Themeable';
+import { regionElementCosmopolitanStyle } from './Themes/RegionElement.Cosmopolitan';
+import { regionElementJoyStyle } from './Themes/RegionElement.Joy';
+import { regionElementMemphisStyle } from './Themes/RegionElement.Memphis';
+// #endregion
+/**
+ * Region - A container that hosts multiple view definitions with exclusive activation.
+ *
+ * Manages the lifecycle of views within it, ensuring only one view is instantiated and rendered at a time.
+ * Views are lazily instantiated when activated and cleanly destroyed when deactivated,
+ * providing efficient memory usage and proper lifecycle management for complex multi-view layouts.
+ *
+ * Perfect for wizards, steppers, tabbed interfaces, or any scenario requiring mutually exclusive view states
+ * without manual DOM manipulation or conditional rendering logic in templates.
+ *
+ * @name RegionElement
+ * @element mosaik-region
+ * @category Grouping
+ *
+ * @slot default - Contains mosaik-region-view definitions to be managed by the region
+ *
+ * @csspart host - The container element that renders the active view's content
+ *
+ * @fires activeChanged - Fired when the active view changes, with detail { active: string, previous?: string }
+ *
+ * @dependency RegionViewElement - View definition component
+ *
+ * @example
+ * ```html
+ * <!-- Basic region with navigation -->
+ * <mosaik-region id="wizard" active="step1">
+ *   <mosaik-region-view name="step1" default>
+ *     <div>Welcome to Step 1</div>
+ *   </mosaik-region-view>
+ *   <mosaik-region-view name="step2">
+ *     <div>Proceed to Step 2</div>
+ *   </mosaik-region-view>
+ *   <mosaik-region-view name="step3">
+ *     <div>Final Step</div>
+ *   </mosaik-region-view>
+ * </mosaik-region>
+ *
+ * <script>
+ *   const region = document.getElementById('wizard');
+ *   region.activate('step2'); // Switch to step 2
+ * </script>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Tabbed interface -->
+ * <mosaik-region active="overview">
+ *   <mosaik-region-view name="overview" default>
+ *     <my-overview-component></my-overview-component>
+ *   </mosaik-region-view>
+ *   <mosaik-region-view name="details">
+ *     <my-details-component></my-details-component>
+ *   </mosaik-region-view>
+ *   <mosaik-region-view name="settings">
+ *     <my-settings-component></my-settings-component>
+ *   </mosaik-region-view>
+ * </mosaik-region>
+ *
+ * <mosaik-button-group>
+ *   <mosaik-button onclick="document.querySelector('mosaik-region').activate('overview')">Overview</mosaik-button>
+ *   <mosaik-button onclick="document.querySelector('mosaik-region').activate('details')">Details</mosaik-button>
+ *   <mosaik-button onclick="document.querySelector('mosaik-region').activate('settings')">Settings</mosaik-button>
+ * </mosaik-button-group>
+ * ```
+ *
+ * @public
+ */
+let RegionElement = class RegionElement extends Themeable(CustomElement) {
+    // #region Fields
+    _viewDefinitions;
+    _active;
+    _currentActiveName;
+    _hostContainer;
+    _isInitialized;
+    // #endregion
+    // #region Ctor
+    /**
+     * @public
+     */
+    constructor() {
+        super();
+        this._active = '';
+        this._currentActiveName = null;
+        this._hostContainer = null;
+        this._isInitialized = false;
+        this._viewDefinitions = new Map();
+    }
+    // #endregion
+    // #region Properties
+    /**
+     * Returns the `{@link is}` property.
+     * The `{@link is}` property represents natural name of this element.
+     *
+     * @public
+     * @static
+     * @readonly
+     */
+    static get is() {
+        return 'mosaik-region';
+    }
+    /**
+     * The name of the currently active view.
+     *
+     * @public
+     */
+    get active() {
+        return this._active;
+    }
+    set active(value) {
+        const oldValue = this._active;
+        this._active = value;
+        this.requestUpdate('active', oldValue);
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * @public
+     * @override
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this._isInitialized) {
+            this.collectViewDefinitions();
+            this.determineInitialActive();
+            this._isInitialized = true;
+        }
+    }
+    /**
+     * @public
+     * @override
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        // Get the host container reference
+        this._hostContainer = this.shadowRoot?.querySelector('[part="host"]') ?? null;
+        // Wait for all child views to be ready before rendering
+        void this.waitForViewsAndRender();
+    }
+    /**
+     * Waits for all child RegionViewElements to complete their firstUpdated
+     * and capture their templates before rendering the active view.
+     *
+     * @private
+     */
+    async waitForViewsAndRender() {
+        // Wait for all view elements to complete their update cycle
+        const viewElements = Array.from(this._viewDefinitions.values());
+        await Promise.all(viewElements.map((view) => view.updateComplete));
+        // Now render the active view
+        if (this._active) {
+            this.renderActiveView();
+        }
+    }
+    /**
+     * @public
+     * @override
+     */
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('active')) {
+            this.renderActiveView();
+        }
+    }
+    /**
+     * Activates a view by name.
+     *
+     * @param name - The name of the view to activate
+     * @public
+     */
+    activate(name) {
+        this.active = name;
+    }
+    /**
+     * Collects all mosaik-region-view children and builds the view definitions map.
+     *
+     * @private
+     */
+    collectViewDefinitions() {
+        const viewElements = this.querySelectorAll(':scope > mosaik-region-view');
+        this._viewDefinitions.clear();
+        viewElements.forEach((view) => {
+            const name = view.name;
+            if (!name) {
+                console.warn('mosaik-region-view requires a unique name attribute', view);
+                return;
+            }
+            if (this._viewDefinitions.has(name)) {
+                console.warn(`mosaik-region: duplicate view name "${name}" detected, using first occurrence`, this);
+                return;
+            }
+            this._viewDefinitions.set(name, view);
+        });
+        if (this._viewDefinitions.size === 0) {
+            console.warn('mosaik-region: no valid view definitions found', this);
+        }
+    }
+    /**
+     * Determines the initial active view based on the active attribute, default attribute, or first view.
+     *
+     * @private
+     */
+    determineInitialActive() {
+        // If active is already set and valid, use it
+        if (this._active && this._viewDefinitions.has(this._active)) {
+            return;
+        }
+        // Look for a view with default attribute
+        for (const [name, view] of this._viewDefinitions) {
+            if (view.default) {
+                this._active = name;
+                return;
+            }
+        }
+        // Fall back to the first view
+        const firstView = Array.from(this._viewDefinitions.keys())[0];
+        if (firstView) {
+            this._active = firstView;
+        }
+    }
+    /**
+     * Renders the currently active view by cloning its template content.
+     *
+     * @private
+     */
+    renderActiveView() {
+        if (!this._hostContainer) {
+            return;
+        }
+        const previousActive = this._currentActiveName;
+        // Clear the current view (triggers disconnectedCallback on child components)
+        while (this._hostContainer.firstChild) {
+            this._hostContainer.removeChild(this._hostContainer.firstChild);
+        }
+        // Validate and render the new active view
+        const viewDefinition = this._viewDefinitions.get(this._active);
+        if (!viewDefinition) {
+            const availableViews = Array.from(this._viewDefinitions.keys()).join(', ');
+            console.warn(`mosaik-region: active view "${this._active}" not found. Available views: ${availableViews || 'none'}`, this);
+            // Fallback to first view if current active is invalid
+            const fallbackView = Array.from(this._viewDefinitions.keys())[0];
+            if (fallbackView && fallbackView !== this._active) {
+                this._active = fallbackView;
+                this.renderActiveView();
+            }
+            return;
+        }
+        // Clone the template content and append to host
+        const template = viewDefinition.getTemplate();
+        if (template) {
+            const clone = template.content.cloneNode(true);
+            this._hostContainer.appendChild(clone);
+        }
+        this._currentActiveName = this._active;
+        // Dispatch active-changed event
+        this._dispatchActiveChangedEvent(previousActive);
+    }
+    /**
+     * Dispatches the active-changed event.
+     *
+     * @param previousActive - The previously active view name
+     * @private
+     */
+    _dispatchActiveChangedEvent(previousActive) {
+        const detail = {
+            active: this._active,
+            previous: previousActive
+        };
+        this.dispatchEvent(new CustomEvent('activeChanged', {
+            bubbles: true,
+            composed: true,
+            detail
+        }));
+    }
+};
+__decorate([
+    Attribute({
+        type: String,
+        useDefault: true
+    }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], RegionElement.prototype, "active", null);
+RegionElement = __decorate([
+    Component({
+        selector: 'mosaik-region',
+        template: regionElementTemplate,
+        themes: {
+            joy: regionElementJoyStyle,
+            memphis: regionElementMemphisStyle,
+            cosmopolitan: regionElementCosmopolitanStyle
+        },
+        imports: [
+            RegionViewElement
+        ]
+    }),
+    __metadata("design:paramtypes", [])
+], RegionElement);
+export { RegionElement };
+//# sourceMappingURL=RegionElement.js.map

package/Controls/Components/Grouping/Region/RegionElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegionElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Region/RegionElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Grouping/Region/RegionElementTemplate.d.ts

@@ -0,0 +1,9 @@
+import { type TemplateResult } from '../../../../Dom/Html';
+import type { RegionElement } from './RegionElement';
+/**
+ * The template of the {@link RegionElement}.
+ *
+ * @public
+ */
+export declare function regionElementTemplate<T extends RegionElement>(_e: T): TemplateResult;
+//# sourceMappingURL=RegionElementTemplate.d.ts.map

package/Controls/Components/Grouping/Region/RegionElementTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegionElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Region/RegionElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIrD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,aAAa,EAAE,EAAE,EAAE,CAAC,GAAG,cAAc,CAKpF"}

package/Controls/Components/Grouping/Region/RegionElementTemplate.js

@@ -0,0 +1,15 @@
+// #region Imports
+import { html } from '../../../../Dom/Html';
+// #endregion
+/**
+ * The template of the {@link RegionElement}.
+ *
+ * @public
+ */
+export function regionElementTemplate(_e) {
+    return html `
+        <div part="host"></div>
+        <slot hidden></slot>
+    `;
+}
+//# sourceMappingURL=RegionElementTemplate.js.map

package/Controls/Components/Grouping/Region/RegionElementTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegionElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Region/RegionElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AAGjE,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAA0B,EAAK;IAChE,OAAO,IAAI,CAAA;;;KAGV,CAAC;AACN,CAAC"}

package/Controls/Components/Grouping/Region/RegionViewElement.d.ts

@@ -0,0 +1,97 @@
+import { CustomElement } from '../../Abstracts/CustomElement';
+import type { IRegionViewElementProps } from './IRegionViewElementProps2';
+declare const RegionViewElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
+/**
+ * View - A view definition component for use within a Region.
+ *
+ * Acts as a template container that stores its content for lazy instantiation.
+ * The view's children are not instantiated until the view becomes active within its parent region.
+ * This enables efficient memory usage and clean lifecycle management for complex view hierarchies.
+ *
+ * @name ViewElement
+ * @element mosaik-region-view
+ * @category Grouping
+ *
+ * @slot default - The content to be rendered when this view becomes active
+ *
+ * @example
+ * ```html
+ * <mosaik-region active="home">
+ *   <mosaik-region-view name="home" default>
+ *     <my-home-component></my-home-component>
+ *   </mosaik-region-view>
+ *   <mosaik-region-view name="profile">
+ *     <my-profile-component></my-profile-component>
+ *   </mosaik-region-view>
+ * </mosaik-region>
+ * ```
+ *
+ * @public
+ */
+export declare class RegionViewElement extends RegionViewElement_base implements IRegionViewElementProps {
+    private _name;
+    private _default;
+    private _template;
+    /**
+     * @public
+     */
+    constructor();
+    /**
+     * Returns the `{@link is}` property.
+     * The `{@link is}` property represents natural name of this element.
+     *
+     * @public
+     * @static
+     * @readonly
+     */
+    static get is(): string;
+    /**
+     * The unique name identifier for this view within a region.
+     *
+     * @public
+     */
+    get name(): string;
+    set name(value: string);
+    /**
+     * Whether this view is the default active view in the region.
+     *
+     * @public
+     */
+    get default(): boolean;
+    set default(value: boolean);
+    /**
+     * @public
+     * @override
+     */
+    firstUpdated(changedProperties: Map<keyof this, unknown>): void;
+    /**
+     * Gets the template containing the view's content.
+     *
+     * @returns The template element or null if not yet captured
+     * @public
+     */
+    getTemplate(): HTMLTemplateElement | null;
+    /**
+     * Captures the light DOM children as a template and removes them from the DOM.
+     * This prevents custom elements from being instantiated until the view is activated.
+     *
+     * @private
+     */
+    private captureContentAsTemplate;
+}
+/**
+ * @public
+ */
+export declare namespace RegionViewElement {
+    type Props = IRegionViewElementProps;
+}
+/**
+ * @public
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'mosaik-region-view': RegionViewElement;
+    }
+}
+export {};
+//# sourceMappingURL=RegionViewElement.d.ts.map

package/Controls/Components/Grouping/Region/RegionViewElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegionViewElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Region/RegionViewElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;;AAQ1E;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBASa,iBACT,SAAQ,sBACR,YAAW,uBAAuB;IAIlC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAU;IAC1B,OAAO,CAAC,SAAS,CAA6B;IAM9C;;OAEG;;IAaH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IAIW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAE5B;IAED;;;;OAIG;IACH,IAIW,OAAO,IAAI,OAAO,CAE5B;IAED,IAAW,OAAO,CAAC,KAAK,EAAE,OAAO,EAEhC;IAMD;;;OAGG;IACa,YAAY,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,IAAI,EAAE,OAAO,CAAC,GAAG,IAAI;IAS/E;;;;;OAKG;IACI,WAAW,IAAI,mBAAmB,GAAG,IAAI;IAIhD;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB;CA+BnC;AAED;;GAEG;AACH,yBAAiB,iBAAiB,CAAC;IAC/B,KAAY,KAAK,GAAG,uBAAuB,CAAC;CAC/C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,oBAAoB,EAAE,iBAAiB,CAAC;KAC3C;CACJ"}