@breadstone/mosaik-elements-foundation 0.0.215 → 0.0.217

package/Controls/Components/Layouts/Resize/Events/IResizeResizeEventDetail.d.ts

@@ -0,0 +1,18 @@
+import type { IEventDetail } from '@breadstone/mosaik-elements';
+import type { ResizeElement } from '../ResizeElement';
+/**
+ * Represents the `{@link IResizeResizeEvent}` interface.
+ *
+ * @public
+ */
+export interface IResizeResizeEventDetail extends IEventDetail<ResizeElement> {
+}
+/**
+ * Represents the `{@link IResizeResizeEvent}` interface.
+ *
+ * @public
+ */
+export interface IResizeResizeEvent extends CustomEvent<IResizeResizeEventDetail> {
+    readonly target: ResizeElement;
+}
+//# sourceMappingURL=IResizeResizeEventDetail.d.ts.map

package/Controls/Components/Layouts/Resize/Events/IResizeResizeEventDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IResizeResizeEventDetail.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Resize/Events/IResizeResizeEventDetail.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAItD;;;;GAIG;AACH,MAAM,WAAW,wBAAyB,SAAQ,YAAY,CAAC,aAAa,CAAC;CAM5E;AAED;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW,CAAC,wBAAwB,CAAC;IAG7E,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC;CAIlC"}

package/Controls/Components/Layouts/Resize/Events/IResizeResizeEventDetail.js

@@ -0,0 +1,3 @@
+// #region Imports
+export {};
+//# sourceMappingURL=IResizeResizeEventDetail.js.map

package/Controls/Components/Layouts/Resize/Events/IResizeResizeEventDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IResizeResizeEventDetail.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Resize/Events/IResizeResizeEventDetail.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

package/Controls/Components/Layouts/Resize/Events/IResizeResizeStartEventDetail.d.ts

@@ -0,0 +1,18 @@
+import type { IEventDetail } from '@breadstone/mosaik-elements';
+import type { ResizeElement } from '../ResizeElement';
+/**
+ * Represents the `{@link IResizeResizeStartEvent}` interface.
+ *
+ * @public
+ */
+export interface IResizeResizeStartEventDetail extends IEventDetail<ResizeElement> {
+}
+/**
+ * Represents the `{@link IResizeResizeStartEvent}` interface.
+ *
+ * @public
+ */
+export interface IResizeResizeStartEvent extends CustomEvent<IResizeResizeStartEventDetail> {
+    readonly target: ResizeElement;
+}
+//# sourceMappingURL=IResizeResizeStartEventDetail.d.ts.map

package/Controls/Components/Layouts/Resize/Events/IResizeResizeStartEventDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IResizeResizeStartEventDetail.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Resize/Events/IResizeResizeStartEventDetail.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAItD;;;;GAIG;AACH,MAAM,WAAW,6BAA8B,SAAQ,YAAY,CAAC,aAAa,CAAC;CAMjF;AAED;;;;GAIG;AACH,MAAM,WAAW,uBAAwB,SAAQ,WAAW,CAAC,6BAA6B,CAAC;IAIvF,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC;CAIlC"}

package/Controls/Components/Layouts/Resize/Events/IResizeResizeStartEventDetail.js

@@ -0,0 +1,3 @@
+// #region Imports
+export {};
+//# sourceMappingURL=IResizeResizeStartEventDetail.js.map

package/Controls/Components/Layouts/Resize/Events/IResizeResizeStartEventDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IResizeResizeStartEventDetail.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Resize/Events/IResizeResizeStartEventDetail.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

package/Controls/Components/Layouts/Resize/IResizeElementProps.d.ts

@@ -0,0 +1,13 @@
+import type { ResizeGhostFactory } from '../../../Controllers/ResizeContainerController';
+import type { ContainerResizeMode } from '../../../Types/ContainerResizeMode';
+/**
+ * The properties of the {@link ResizeElement}.
+ *
+ * @public
+ */
+export interface IResizeElementProps {
+    ghostFactory?: ResizeGhostFactory;
+    mode: ContainerResizeMode;
+    active: boolean;
+}
+//# sourceMappingURL=IResizeElementProps.d.ts.map

package/Controls/Components/Layouts/Resize/IResizeElementProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IResizeElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Resize/IResizeElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AACzF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAI9E;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAEhC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAElC,IAAI,EAAE,mBAAmB,CAAC;IAE1B,MAAM,EAAE,OAAO,CAAC;CAEnB"}

package/Controls/Components/Layouts/Resize/IResizeElementProps.js

@@ -0,0 +1,3 @@
+// #region Imports
+export {};
+//# sourceMappingURL=IResizeElementProps.js.map

package/Controls/Components/Layouts/Resize/IResizeElementProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IResizeElementProps.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Resize/IResizeElementProps.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

package/Controls/Components/Layouts/Resize/ResizeElement.d.ts

@@ -0,0 +1,148 @@
+import { ResizeGhostFactory } from '../../../Controllers/ResizeContainerController';
+import { ISlottable } from '../../../Behaviors/Slottable';
+import { CustomElement } from '../../Abstracts/CustomElement';
+import { ContainerResizeMode } from '../../../Types/ContainerResizeMode';
+import { IResizeResizeStartEvent } from './Events/IResizeResizeStartEventDetail';
+import { IResizeResizeEvent } from './Events/IResizeResizeEventDetail';
+import { IResizeResizeEndEvent } from './Events/IResizeResizeEndEventDetail';
+import { IResizeResizeCancelEvent } from './Events/IResizeResizeCancelEventDetail';
+import { IResizeElementProps } from './IResizeElementProps';
+declare const ResizeElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
+/**
+ * Resize - a container that allows its content to be resized via drag handles.
+ *
+ * @name ResizeElement
+ * @element mosaik-resize
+ * @category Layouts
+ *
+ * @fires resizeResizeStarted - Fired when a resize operation is started.
+ * @fires resizeResized - Fired when a resize operation is in progress.
+ * @fires resizeResizeEnded - Fired when a resize operation is ended.
+ * @fires resizeResizeCanceled - Fired when a resize operation is canceled.
+ *
+ * @slot - The default slot for the content to be resized.
+ *
+ * @example
+ * ```html
+ * <mosaik-resize mode="immediate">
+ *   <div style="width: 200px; height: 150px; background-color: lightgray;">
+ *     Resizable Content
+ *   </div>
+ * </mosaik-resize>
+ * ```
+ */
+export declare class ResizeElement extends ResizeElement_base implements ISlottable, IResizeElementProps {
+    private readonly _resizeContainerController;
+    private _ghostFactory?;
+    private _mode;
+    private _active;
+    private _hasPointer;
+    private _pointerenterSubscription;
+    private _pointerleaveSubscription;
+    private _containerElement?;
+    private readonly _sideThumbElement?;
+    private readonly _cornerThumbElement?;
+    private readonly _bottomThumbElement?;
+    /**
+     * Constructs a new instance of the `{@link ResizeElement}` class.
+     *
+     * @public
+     */
+    constructor();
+    /**
+     * Returns the `{@link is}` property.
+     * The `{@link is}` property represents natural name of this element.
+     *
+     * @public
+     * @static
+     * @readonly
+     */
+    static get is(): string;
+    /**
+     * Gets or sets the `mode` property.
+     *
+     * @public
+     * @attr
+     */
+    get mode(): ContainerResizeMode;
+    set mode(value: ContainerResizeMode);
+    /**
+     * Gets or sets the `active` property.
+     *
+     * @public
+     * @attr
+     */
+    get active(): boolean;
+    set active(value: boolean);
+    /**
+     * Gets or sets the `ghostFactory` property.
+     *
+     * @public
+     */
+    get ghostFactory(): ResizeGhostFactory | undefined;
+    set ghostFactory(value: ResizeGhostFactory | undefined);
+    /**
+     * Gets the `hasPointer` property.
+     *
+     * @private
+     * @readonly
+     */
+    get hasPointer(): boolean;
+    /**
+     * @public
+     * @override
+     */
+    disconnectedCallback(): void;
+    /**
+     * @protected
+     * @override
+     */
+    protected onApplyTemplate(): void;
+    /**
+     * @protected
+     * @override
+     */
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * @private
+     */
+    private updateResizingState;
+    /**
+     * @private
+     */
+    private handleResizeStart;
+    /**
+     * @private
+     */
+    private handleResize;
+    /**
+     * @private
+     */
+    private handleResizeEnd;
+    /**
+     * @private
+     */
+    private handleResizeCancel;
+}
+/**
+ * @public
+ */
+export declare namespace ResizeElement {
+    type Props = IResizeElementProps;
+}
+/**
+ * @public
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'mosaik-resize': ResizeElement;
+    }
+    interface HTMLElementEventMap {
+        resizeResizeStarted: IResizeResizeStartEvent;
+        resizeResized: IResizeResizeEvent;
+        resizeResizeEnded: IResizeResizeEndEvent;
+        resizeResizeCanceled: IResizeResizeCancelEvent;
+    }
+}
+export {};
+//# sourceMappingURL=ResizeElement.d.ts.map

package/Controls/Components/Layouts/Resize/ResizeElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Resize/ResizeElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAkE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AAEpJ,OAAO,EAAa,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAErE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAG9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAEzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAQ5D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAWa,aACT,SAAQ,kBACR,YAAW,UAAU,EAAE,mBAAmB;IAI1C,OAAO,CAAC,QAAQ,CAAC,0BAA0B,CAA4B;IACvE,OAAO,CAAC,aAAa,CAAC,CAAqB;IAC3C,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,yBAAyB,CAAyC;IAC1E,OAAO,CAAC,yBAAyB,CAAyC;IAC1E,OAAO,CAAC,iBAAiB,CAAC,CAAiB;IAC3C,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAiB;IACpD,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAiB;IACtD,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAiB;IAMtD;;;;OAIG;;IA2BH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,mBAAmB,CAErC;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,mBAAmB,EAMzC;IAED;;;;;OAKG;IACH,IAIW,MAAM,IAAI,OAAO,CAE3B;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,OAAO,EAK/B;IAED;;;;OAIG;IACH,IACW,YAAY,IAAI,kBAAkB,GAAG,SAAS,CAExD;IACD,IAAW,YAAY,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,EAM5D;IAED;;;;;OAKG;IACH,IACW,UAAU,IAAI,OAAO,CAE/B;IAMD;;;OAGG;IACa,oBAAoB,IAAI,IAAI;IAO5C;;;OAGG;cACgB,eAAe,IAAI,IAAI;IA2B1C;;;OAGG;cACgB,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAMrE;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAQ3B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB;;OAEG;IACH,OAAO,CAAC,YAAY;IAQpB;;OAEG;IACH,OAAO,CAAC,eAAe;IAOvB;;OAEG;IACH,OAAO,CAAC,kBAAkB;CAkB7B;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,mBAAmB,EAAE,uBAAuB,CAAC;QAC7C,aAAa,EAAE,kBAAkB,CAAC;QAClC,iBAAiB,EAAE,qBAAqB,CAAC;QACzC,oBAAoB,EAAE,wBAAwB,CAAC;KAClD;CACJ"}

package/Controls/Components/Layouts/Resize/ResizeElement.js

@@ -0,0 +1,299 @@
+// #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 { ResizeContainerController } from '../../../Controllers/ResizeContainerController';
+import { Component } from '../../../Decorators/ComponentDecorator';
+import { Slottable } from '../../../Behaviors/Slottable';
+import { Themeable } from '../../../Behaviors/Themeable';
+import { CustomElement } from '../../Abstracts/CustomElement';
+import { resizeElementTemplate } from './ResizeElementTemplate';
+import { Attribute } from '../../../Decorators/AttributeDecorator';
+import { ContainerResizeMode } from '../../../Types/ContainerResizeMode';
+import { Property } from '../../../Decorators/PropertyDecorator';
+import { resizeElementJoyStyle } from './Themes/ResizeElement.Joy';
+import { on } from '@breadstone/mosaik-elements';
+import { RendererServiceLocator } from '../../../../Dom/Renderer';
+import { ResizeDirection } from '../../../Types/ResizeDirection';
+// #endregion
+/**
+ * Resize - a container that allows its content to be resized via drag handles.
+ *
+ * @name ResizeElement
+ * @element mosaik-resize
+ * @category Layouts
+ *
+ * @fires resizeResizeStarted - Fired when a resize operation is started.
+ * @fires resizeResized - Fired when a resize operation is in progress.
+ * @fires resizeResizeEnded - Fired when a resize operation is ended.
+ * @fires resizeResizeCanceled - Fired when a resize operation is canceled.
+ *
+ * @slot - The default slot for the content to be resized.
+ *
+ * @example
+ * ```html
+ * <mosaik-resize mode="immediate">
+ *   <div style="width: 200px; height: 150px; background-color: lightgray;">
+ *     Resizable Content
+ *   </div>
+ * </mosaik-resize>
+ * ```
+ */
+let ResizeElement = class ResizeElement extends Themeable(Slottable(CustomElement)) {
+    // #region Fields
+    _resizeContainerController;
+    _ghostFactory;
+    _mode;
+    _active;
+    _hasPointer;
+    _pointerenterSubscription;
+    _pointerleaveSubscription;
+    _containerElement;
+    _sideThumbElement;
+    _cornerThumbElement;
+    _bottomThumbElement;
+    // #endregion
+    // #region Ctor
+    /**
+     * Constructs a new instance of the `{@link ResizeElement}` class.
+     *
+     * @public
+     */
+    constructor() {
+        super();
+        this._ghostFactory = undefined;
+        this._mode = 'immediate';
+        this._active = false;
+        this._hasPointer = false;
+        this._containerElement = undefined;
+        this._sideThumbElement = undefined;
+        this._cornerThumbElement = undefined;
+        this._bottomThumbElement = undefined;
+        this._resizeContainerController = new ResizeContainerController(this, {
+            mode: this._mode,
+            deferredFactory: this._ghostFactory,
+            start: (x) => this.handleResizeStart(x),
+            resize: (x) => this.handleResize(x),
+            end: (x) => this.handleResizeEnd(x),
+            cancel: (x) => this.handleResizeCancel(x),
+            resizeTarget: () => this._containerElement
+        });
+    }
+    // #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-resize';
+    }
+    /**
+     * Gets or sets the `mode` property.
+     *
+     * @public
+     * @attr
+     */
+    get mode() {
+        return this._mode;
+    }
+    set mode(value) {
+        if (this._mode !== value) {
+            this._mode = value;
+            this._resizeContainerController.set({ mode: this._mode });
+            this.requestUpdate('mode');
+        }
+    }
+    /**
+     * Gets or sets the `active` property.
+     *
+     * @public
+     * @attr
+     */
+    get active() {
+        return this._active;
+    }
+    set active(value) {
+        if (this._active !== value) {
+            this._active = value;
+            this.requestUpdate('active');
+        }
+    }
+    /**
+     * Gets or sets the `ghostFactory` property.
+     *
+     * @public
+     */
+    get ghostFactory() {
+        return this._ghostFactory;
+    }
+    set ghostFactory(value) {
+        if (this._ghostFactory !== value) {
+            this._ghostFactory = value;
+            this._resizeContainerController.set({ deferredFactory: this._ghostFactory });
+            this.requestUpdate('ghostFactory');
+        }
+    }
+    /**
+     * Gets the `hasPointer` property.
+     *
+     * @private
+     * @readonly
+     */
+    get hasPointer() {
+        return this._hasPointer;
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * @public
+     * @override
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._pointerenterSubscription?.dispose();
+        this._pointerleaveSubscription?.dispose();
+    }
+    /**
+     * @protected
+     * @override
+     */
+    onApplyTemplate() {
+        super.onApplyTemplate();
+        this._containerElement = this.getTemplatePart('root', 'token');
+        this._pointerenterSubscription = on(this._containerElement, 'pointerenter', () => {
+            this._hasPointer = true;
+            this.requestUpdate('hasPointer');
+        });
+        this._pointerleaveSubscription = on(this._containerElement, 'pointerleave', () => {
+            this._hasPointer = false;
+            this.requestUpdate('hasPointer');
+        });
+        this._resizeContainerController.set({
+            thumbs: {
+                [ResizeDirection.North]: this.getTemplatePart(`thumb ${ResizeDirection.North}`),
+                [ResizeDirection.East]: this.getTemplatePart(`thumb ${ResizeDirection.East}`),
+                [ResizeDirection.South]: this.getTemplatePart(`thumb ${ResizeDirection.South}`),
+                [ResizeDirection.West]: this.getTemplatePart(`thumb ${ResizeDirection.West}`),
+                [ResizeDirection.NorthEast]: this.getTemplatePart(`thumb ${ResizeDirection.NorthEast}`),
+                [ResizeDirection.SouthEast]: this.getTemplatePart(`thumb ${ResizeDirection.SouthEast}`),
+                [ResizeDirection.SouthWest]: this.getTemplatePart(`thumb ${ResizeDirection.SouthWest}`),
+                [ResizeDirection.NorthWest]: this.getTemplatePart(`thumb ${ResizeDirection.NorthWest}`)
+            }
+        });
+    }
+    /**
+     * @protected
+     * @override
+     */
+    createRenderRoot() {
+        const root = super.createRenderRoot();
+        root.addEventListener('slotchange', () => this.requestUpdate());
+        return root;
+    }
+    /**
+     * @private
+     */
+    updateResizingState(params) {
+        if (params.state.trigger === this._sideThumbElement) {
+            params.state.current.height = params.state.initial.height;
+        }
+        else if (params.state.trigger === this._bottomThumbElement) {
+            params.state.current.width = params.state.initial.width;
+        }
+    }
+    /**
+     * @private
+     */
+    handleResizeStart(params) {
+        params.event.preventDefault();
+        return this.emit('resizeResizeStarted', {
+            bubbles: false,
+            cancelable: true,
+            detail: params
+        });
+    }
+    /**
+     * @private
+     */
+    handleResize(params) {
+        this.updateResizingState(params);
+        this.emit('resizeResized', {
+            bubbles: false,
+            detail: params
+        });
+    }
+    /**
+     * @private
+     */
+    handleResizeEnd(params) {
+        this.emit('resizeResizeEnded', {
+            bubbles: false,
+            detail: params
+        });
+    }
+    /**
+     * @private
+     */
+    handleResizeCancel({ initial }) {
+        this._resizeContainerController.dispose();
+        if (this.mode !== 'deferred') {
+            if (this._containerElement) {
+                RendererServiceLocator.current.setStyle(this._containerElement, 'width', `${initial.width}px`);
+                RendererServiceLocator.current.setStyle(this._containerElement, 'height', `${initial.height}px`);
+            }
+        }
+        this.emit('resizeResizeCanceled', {
+            bubbles: false,
+            cancelable: false
+        });
+    }
+};
+__decorate([
+    Attribute({ type: ContainerResizeMode }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], ResizeElement.prototype, "mode", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], ResizeElement.prototype, "active", null);
+__decorate([
+    Property({ type: Function }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], ResizeElement.prototype, "ghostFactory", null);
+__decorate([
+    Property({ type: Boolean }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], ResizeElement.prototype, "hasPointer", null);
+ResizeElement = __decorate([
+    Component({
+        selector: 'mosaik-resize',
+        template: resizeElementTemplate,
+        themes: {
+            joy: resizeElementJoyStyle
+            //     memphis: splitElementMemphisStyle,
+            //     cosmopolitan: splitElementCosmopolitanStyle
+        },
+        imports: []
+    }),
+    __metadata("design:paramtypes", [])
+], ResizeElement);
+export { ResizeElement };
+//# sourceMappingURL=ResizeElement.js.map

package/Controls/Components/Layouts/Resize/ResizeElement.js.map

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

package/Controls/Components/Layouts/Resize/ResizeElementTemplate.d.ts

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

package/Controls/Components/Layouts/Resize/ResizeElementTemplate.d.ts.map

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

package/Controls/Components/Layouts/Resize/ResizeElementTemplate.js

@@ -0,0 +1,56 @@
+// #region Imports
+import { html } from '../../../../Dom/Html';
+import { when } from '../../../Directives/Directives';
+import { partMap } from '../../../Directives/part-map/PartMapDirective';
+import { ResizeDirection } from '../../../Types/ResizeDirection';
+// #endregion
+/**
+ * The template of the {@link ResizeElement}.
+ *
+ * @public
+ */
+export function resizeElementTemplate(e) {
+    return html `
+        <div part=${partMap({
+        root: true,
+        active: e.hasPointer || e.active
+    })}>
+            <slot></slot>
+            ${when(e.active, () => html `
+            <mosaik-thumb part="thumb ${ResizeDirection.North}"
+                          .lang="${e.lang}"
+                          .dir="${e.dir}"
+                          .edge="${'horizontal'}"></mosaik-thumb>
+            <mosaik-thumb part="thumb ${ResizeDirection.NorthEast}"
+                          .lang="${e.lang}"
+                          .dir="${e.dir}"
+                          .edge="${'corner'}"></mosaik-thumb>
+            <mosaik-thumb part="thumb ${ResizeDirection.East}"
+                          .lang="${e.lang}"
+                          .dir="${e.dir}"
+                          .edge="${'vertical'}"></mosaik-thumb>
+            <mosaik-thumb part="thumb ${ResizeDirection.SouthEast}"
+                          .lang="${e.lang}"
+                          .dir="${e.dir}"
+                          .edge="${'corner'}"></mosaik-thumb>
+            <mosaik-thumb part="thumb ${ResizeDirection.South}"
+                          .lang="${e.lang}"
+                          .dir="${e.dir}"
+                          .edge="${'horizontal'}"></mosaik-thumb>
+            <mosaik-thumb part="thumb ${ResizeDirection.SouthWest}"
+                          .lang="${e.lang}"
+                          .dir="${e.dir}"
+                          .edge="${'corner'}"></mosaik-thumb>
+            <mosaik-thumb part="thumb ${ResizeDirection.West}"
+                          .lang="${e.lang}"
+                          .dir="${e.dir}"
+                          .edge="${'vertical'}"></mosaik-thumb>
+            <mosaik-thumb part="thumb ${ResizeDirection.NorthWest}"
+                          .lang="${e.lang}"
+                          .dir="${e.dir}"
+                          .edge="${'corner'}"></mosaik-thumb>
+            `)}
+        </div>
+    `;
+}
+//# sourceMappingURL=ResizeElementTemplate.js.map

package/Controls/Components/Layouts/Resize/ResizeElementTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Resize/ResizeElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAuB,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,+CAA+C,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAGjE,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAA0B,CAAI;IAC/D,OAAO,IAAI,CAAA;oBACK,OAAO,CAAC;QACpB,IAAI,EAAE,IAAI;QACV,MAAM,EAAE,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,MAAM;KACnC,CAAC;;cAEQ,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;wCACC,eAAe,CAAC,KAAK;mCAC1B,CAAC,CAAC,IAAI;kCACP,CAAC,CAAC,GAAG;mCACJ,YAAY;wCACP,eAAe,CAAC,SAAS;mCAC9B,CAAC,CAAC,IAAI;kCACP,CAAC,CAAC,GAAG;mCACJ,QAAQ;wCACH,eAAe,CAAC,IAAI;mCACzB,CAAC,CAAC,IAAI;kCACP,CAAC,CAAC,GAAG;mCACJ,UAAU;wCACL,eAAe,CAAC,SAAS;mCAC9B,CAAC,CAAC,IAAI;kCACP,CAAC,CAAC,GAAG;mCACJ,QAAQ;wCACH,eAAe,CAAC,KAAK;mCAC1B,CAAC,CAAC,IAAI;kCACP,CAAC,CAAC,GAAG;mCACJ,YAAY;wCACP,eAAe,CAAC,SAAS;mCAC9B,CAAC,CAAC,IAAI;kCACP,CAAC,CAAC,GAAG;mCACJ,QAAQ;wCACH,eAAe,CAAC,IAAI;mCACzB,CAAC,CAAC,IAAI;kCACP,CAAC,CAAC,GAAG;mCACJ,UAAU;wCACL,eAAe,CAAC,SAAS;mCAC9B,CAAC,CAAC,IAAI;kCACP,CAAC,CAAC,GAAG;mCACJ,QAAQ;aAC9B,CAAC;;KAET,CAAC;AACN,CAAC"}

package/Controls/Components/Layouts/Resize/Themes/ResizeElement.Joy.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function resizeElementJoyStyle(): CSSResult;
+//# sourceMappingURL=ResizeElement.Joy.d.ts.map

package/Controls/Components/Layouts/Resize/Themes/ResizeElement.Joy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Resize/Themes/ResizeElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,SAAS,CAwGjD"}