@breadstone/mosaik-elements-foundation 0.0.206 → 0.0.209

package/Controls/Components/Overlays/Sheet/ISheetServiceConfig.d.ts

@@ -0,0 +1,30 @@
+import type { IOverlayBehavior } from '../Abstracts/IOverlayBehavior';
+import type { IOverlayServiceConfig } from '../Abstracts/IOverlayServiceConfig';
+import type { ISheetRef, ISheetOptions } from './SheetService';
+/**
+ * Sheet behavior type.
+ *
+ * @public
+ */
+export type ISheetBehavior = IOverlayBehavior<ISheetRef, ISheetOptions>;
+/**
+ * Configuration for the sheet service.
+ * Extends the base overlay service config with sheet-specific options.
+ *
+ * @public
+ */
+export interface ISheetServiceConfig extends IOverlayServiceConfig<ISheetBehavior> {
+    /**
+     * Whether to close sheets when navigating away (popstate event).
+     *
+     * @default true
+     */
+    readonly closeOnNavigation?: boolean;
+}
+/**
+ * Default configuration for the sheet service.
+ *
+ * @public
+ */
+export declare const SHEET_SERVICE_DEFAULT_CONFIG: ISheetServiceConfig;
+//# sourceMappingURL=ISheetServiceConfig.d.ts.map

package/Controls/Components/Overlays/Sheet/ISheetServiceConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ISheetServiceConfig.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Sheet/ISheetServiceConfig.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAI/D;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAExE;;;;;GAKG;AACH,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,CAAC,cAAc,CAAC;IAI9E;;;;OAIG;IACH,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAIxC;AAED;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,EAAE,mBAG1C,CAAC"}

package/Controls/Components/Overlays/Sheet/ISheetServiceConfig.js

@@ -0,0 +1,11 @@
+// #region Imports
+/**
+ * Default configuration for the sheet service.
+ *
+ * @public
+ */
+export const SHEET_SERVICE_DEFAULT_CONFIG = {
+    behaviors: [],
+    closeOnNavigation: true
+};
+//# sourceMappingURL=ISheetServiceConfig.js.map

package/Controls/Components/Overlays/Sheet/ISheetServiceConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ISheetServiceConfig.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Sheet/ISheetServiceConfig.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAoClB;;;;GAIG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAwB;IAC7D,SAAS,EAAE,EAAE;IACb,iBAAiB,EAAE,IAAI;CAC1B,CAAC"}

package/Controls/Components/Overlays/Sheet/SheetElement.d.ts

@@ -0,0 +1,139 @@
+import { CssLength } from '@breadstone/mosaik-themes';
+import { OverlayElement } from '../Abstracts/OverlayElement';
+import { ISheetElementProps } from './ISheetElementProps';
+declare const SheetElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof OverlayElement & import("../../../Behaviors/Themeable").IThemeableCtor;
+/**
+ * The `{@link SheetElement}` element.
+ *
+ * @public
+ */
+export declare class SheetElement extends SheetElement_base implements ISheetElementProps {
+    private readonly _bounceOffset;
+    private _header;
+    private _content;
+    private _icon;
+    private _height;
+    private _dragOffset;
+    private _positionY;
+    private _isPartial;
+    private _mouseDownSubscription;
+    private _touchStartSubscription;
+    private _mouseUpSubscription;
+    private _touchEndSubscription;
+    private _mouseMoveSubscription;
+    private _touchMoveSubscription;
+    private _clickSubscription;
+    /**
+     * @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 `header` property.
+     *
+     * @public
+     */
+    get header(): string;
+    set header(value: string);
+    /**
+     * Gets or sets the `content` property.
+     *
+     * @public
+     */
+    get content(): string;
+    set content(value: string);
+    /**
+     * Gets or sets the `icon` property.
+     *
+     * @public
+     */
+    get icon(): string;
+    set icon(value: string);
+    /**
+     * Gets or sets the `height` property.
+     *
+     * @public
+     * @attr
+     */
+    get height(): CssLength;
+    set height(value: CssLength);
+    /**
+     * Opens the `SheetElement`.
+     *
+     * @public
+     * @override
+     */
+    open(): Promise<void>;
+    /**
+     * Closes the `SheetElement`.
+     *
+     * @public
+     * @override
+     */
+    close(): Promise<boolean>;
+    /**
+     * @public
+     */
+    partial(): void;
+    /**
+     * @public
+     */
+    toggle(): Promise<void>;
+    /**
+     * @protected
+     * @override
+     */
+    protected onApplyTemplate(): void;
+    /**
+     * Handles the backdrop click event.
+     * Only closes the sheet if `clickOutsideToClose` is enabled.
+     *
+     * @private
+     * @template
+     */
+    onBackdrop(): void;
+    /**
+     * @private
+     */
+    private dragMouseDown;
+    /**
+     * @private
+     */
+    private dragMouseUp;
+    /**
+     * @private
+     */
+    private dragMouseMove;
+    /**
+     * @private
+     */
+    private moveDragElement;
+    /**
+     * @private
+     */
+    private getYCoord;
+}
+/**
+* @public
+*/
+export declare namespace SheetElement {
+    type Props = ISheetElementProps;
+}
+/**
+ * @public
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'mosaik-sheet': SheetElement;
+    }
+}
+export {};
+//# sourceMappingURL=SheetElement.d.ts.map

package/Controls/Components/Overlays/Sheet/SheetElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Sheet/SheetElement.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAOtD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;;AAa1D;;;;GAIG;AACH,qBAca,YACT,SAAQ,iBACR,YAAW,kBAAkB;IAI7B,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAS;IACvC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,OAAO,CAAY;IAC3B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,sBAAsB,CAAoC;IAClE,OAAO,CAAC,uBAAuB,CAAoC;IACnE,OAAO,CAAC,oBAAoB,CAAoC;IAChE,OAAO,CAAC,qBAAqB,CAAoC;IACjE,OAAO,CAAC,sBAAsB,CAAoC;IAClE,OAAO,CAAC,sBAAsB,CAAoC;IAClE,OAAO,CAAC,kBAAkB,CAAoC;IAM9D;;OAEG;;IAyBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,MAAM,IAAI,MAAM,CAAyB;IAEpD,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IAED;;;;OAIG;IACH,IACW,OAAO,IAAI,MAAM,CAA0B;IAEtD,IAAW,OAAO,CAAC,KAAK,EAAE,MAAM,EAK/B;IAED;;;;OAIG;IACH,IACW,IAAI,IAAI,MAAM,CAAuB;IAEhD,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAK5B;IAED;;;;;OAKG;IACH,IACW,MAAM,IAAI,SAAS,CAE7B;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,SAAS,EAKjC;IAMD;;;;;OAKG;IACmB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAQ3C;;;;;OAKG;IACmB,KAAK,IAAI,OAAO,CAAC,OAAO,CAAC;IAa/C;;OAEG;IACI,OAAO,IAAI,IAAI;IAOtB;;OAEG;IACU,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IASpC;;;OAGG;cACgB,eAAe,IAAI,IAAI;IAU1C;;;;;;OAMG;IACI,UAAU,IAAI,IAAI;IAMzB;;OAEG;IACH,OAAO,CAAC,aAAa;IAcrB;;OAEG;IACH,OAAO,CAAC,WAAW;IA6BnB;;OAEG;IACH,OAAO,CAAC,aAAa;IAarB;;OAEG;IACH,OAAO,CAAC,eAAe;IAyBvB;;OAEG;IACH,OAAO,CAAC,SAAS;CAiBpB;AAED;;EAEE;AACF,yBAAiB,YAAY,CAAC;IAC1B,KAAY,KAAK,GAAG,kBAAkB,CAAC;CAC1C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,cAAc,EAAE,YAAY,CAAC;KAChC;CACJ"}

package/Controls/Components/Overlays/Sheet/SheetElement.js

@@ -0,0 +1,344 @@
+// #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 { RendererServiceLocator } from '../../../../Dom/Renderer';
+import { on } from '@breadstone/mosaik-elements';
+import { CssLength } from '@breadstone/mosaik-themes';
+import { Attribute } from '../../../Decorators/AttributeDecorator';
+import { Component } from '../../../Decorators/ComponentDecorator';
+import { Property } from '../../../Decorators/PropertyDecorator';
+import { IconElement } from '../../Media/Icon/IconElement';
+import { BackdropElement } from '../../Primitives/Backdrop/BackdropElement';
+import { TextElement } from '../../Primitives/Text/TextElement';
+import { OverlayElement } from '../Abstracts/OverlayElement';
+import { sheetElementTemplate } from './SheetElementTemplate';
+import { sheetElementJoyStyle } from './Themes/SheetElement.Joy';
+import { sheetElementMemphisStyle } from './Themes/SheetElement.Memphis';
+import { sheetElementCosmopolitanStyle } from './Themes/SheetElement.Cosmopolitan';
+import { Themeable } from '../../../Behaviors/Themeable';
+/**
+ * The `{@link SheetElement}` element.
+ *
+ * @public
+ */
+let SheetElement = class SheetElement extends Themeable(OverlayElement) {
+    // #region Fields
+    _bounceOffset;
+    _header;
+    _content;
+    _icon;
+    _height;
+    _dragOffset;
+    _positionY;
+    _isPartial;
+    _mouseDownSubscription;
+    _touchStartSubscription;
+    _mouseUpSubscription;
+    _touchEndSubscription;
+    _mouseMoveSubscription;
+    _touchMoveSubscription;
+    _clickSubscription;
+    // #endregion
+    // #region Ctor
+    /**
+     * @public
+     */
+    constructor() {
+        super();
+        this._header = '';
+        this._content = '';
+        this._icon = '';
+        this._height = '60vh';
+        this._dragOffset = 0;
+        this._bounceOffset = 35;
+        this._positionY = 0;
+        this._isPartial = false;
+        this._mouseDownSubscription = null;
+        this._touchStartSubscription = null;
+        this._mouseUpSubscription = null;
+        this._touchEndSubscription = null;
+        this._mouseMoveSubscription = null;
+        this._touchMoveSubscription = null;
+        this._clickSubscription = null;
+    }
+    // #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-sheet';
+    }
+    /**
+     * Gets or sets the `header` property.
+     *
+     * @public
+     */
+    get header() { return this._header; }
+    set header(value) {
+        if (this._header !== value) {
+            this._header = value;
+            this.requestUpdate('header');
+        }
+    }
+    /**
+     * Gets or sets the `content` property.
+     *
+     * @public
+     */
+    get content() { return this._content; }
+    set content(value) {
+        if (this._content !== value) {
+            this._content = value;
+            this.requestUpdate('content');
+        }
+    }
+    /**
+     * Gets or sets the `icon` property.
+     *
+     * @public
+     */
+    get icon() { return this._icon; }
+    set icon(value) {
+        if (this._icon !== value) {
+            this._icon = value;
+            this.requestUpdate('icon');
+        }
+    }
+    /**
+     * Gets or sets the `height` property.
+     *
+     * @public
+     * @attr
+     */
+    get height() {
+        return this._height;
+    }
+    set height(value) {
+        if (this._height !== value) {
+            this._height = value;
+            this.requestUpdate('height');
+        }
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * Opens the `SheetElement`.
+     *
+     * @public
+     * @override
+     */
+    async open() {
+        return super.open().then(() => {
+            const root = this.getTemplatePart('root');
+            this.moveDragElement(window.innerHeight - root.clientHeight, 'open');
+            RendererServiceLocator.current.setAttribute(this, 'state', 'open');
+        });
+    }
+    /**
+     * Closes the `SheetElement`.
+     *
+     * @public
+     * @override
+     */
+    async close() {
+        return super.close().then((x) => {
+            if (x) {
+                if (this.closeable) {
+                    this.moveDragElement(window.innerHeight + 50, 'close');
+                    RendererServiceLocator.current.setAttribute(this, 'state', 'close');
+                }
+            }
+            return x;
+        });
+    }
+    /**
+     * @public
+     */
+    partial() {
+        const heading = this.getTemplatePart('heading');
+        this.moveDragElement(window.innerHeight - heading.clientHeight - this._bounceOffset, 'partial');
+        RendererServiceLocator.current.setAttribute(this, 'state', 'partial');
+    }
+    /**
+     * @public
+     */
+    async toggle() {
+        if (this._isPartial) {
+            return this.open();
+        }
+        this.partial();
+        return Promise.resolve();
+    }
+    /**
+     * @protected
+     * @override
+     */
+    onApplyTemplate() {
+        super.onApplyTemplate();
+        const heading = this.getTemplatePart('heading');
+        this._clickSubscription = on(heading, 'click', () => void this.toggle());
+        this._mouseDownSubscription = on(heading, 'mousedown', (e) => this.dragMouseDown(e));
+        this._touchStartSubscription = on(heading, 'touchstart', (e) => this.dragMouseDown(e), { passive: true });
+    }
+    /**
+     * Handles the backdrop click event.
+     * Only closes the sheet if `clickOutsideToClose` is enabled.
+     *
+     * @private
+     * @template
+     */
+    onBackdrop() {
+        if (this.clickOutsideToClose) {
+            void this.close();
+        }
+    }
+    /**
+     * @private
+     */
+    dragMouseDown(e) {
+        const target = e.target;
+        this._mouseUpSubscription = on(window, 'mouseup', (x) => this.dragMouseUp(x));
+        this._mouseMoveSubscription = on(window, 'mousemove', (x) => this.dragMouseMove(x));
+        this._touchEndSubscription = on(window, 'touchend', (x) => this.dragMouseUp(x));
+        this._touchMoveSubscription = on(window, 'touchmove', (x) => this.dragMouseMove(x));
+        this._positionY = this.getYCoord(e);
+        this._dragOffset = this._positionY - target.getBoundingClientRect().top;
+        document.body.style.overscrollBehaviorY = 'none';
+    }
+    /**
+     * @private
+     */
+    dragMouseUp(e) {
+        const root = this.getTemplatePart('root');
+        const heading = this.getTemplatePart('heading');
+        //  document.body.style.overscrollBehaviorY = this._saveBodyStyle;
+        this._positionY = this.getYCoord(e);
+        if (this.closeable && this._positionY >= window.innerHeight - 25) {
+            // snap to close position.
+            this.moveDragElement(window.innerHeight + 50, 'close');
+            RendererServiceLocator.current.setAttribute(this, 'state', 'close');
+            this._isPartial = false;
+            return;
+        }
+        if (window.innerHeight - this._positionY > root.clientHeight / 2.5) {
+            // snap to open position.
+            this.moveDragElement(window.innerHeight - root.clientHeight, 'open');
+            RendererServiceLocator.current.setAttribute(this, 'state', 'open');
+            this._isPartial = false;
+        }
+        else {
+            // snap to initial position.
+            // only when the header is visible.
+            this.moveDragElement(window.innerHeight - heading.clientHeight - this._bounceOffset, 'partial');
+            RendererServiceLocator.current.setAttribute(this, 'state', 'partial');
+            this._isPartial = true;
+        }
+    }
+    /**
+     * @private
+     */
+    dragMouseMove(e) {
+        const root = this.getTemplatePart('root');
+        this._positionY = this.getYCoord(e);
+        if (this._positionY <= (window.innerHeight - root.clientHeight + this._dragOffset)) {
+            return;
+        }
+        root.style.setProperty('transition', 'none');
+        root.style.setProperty('--translateY', `translateY(${this._positionY - this._dragOffset}px)`);
+    }
+    /**
+     * @private
+     */
+    moveDragElement(toPoint, state) {
+        const root = this.getTemplatePart('root');
+        const heading = this.getTemplatePart('heading');
+        this._mouseUpSubscription?.dispose();
+        this._touchEndSubscription?.dispose();
+        this._mouseMoveSubscription?.dispose();
+        this._touchMoveSubscription?.dispose();
+        if (!toPoint && this._positionY >= window.innerHeight - heading.clientHeight) {
+            root.style.setProperty('--translateY', `translateY(calc(100vh - ${heading.clientHeight}px))`);
+        }
+        else {
+            root.style.setProperty('--translateY', `translateY(${(toPoint || this._positionY) + this._bounceOffset}px)`);
+        }
+        root.style.setProperty('transition', 'transform 500ms cubic-bezier(0.4, 0, 0, 1) 0s');
+        if (state === 'close') {
+            this._mouseDownSubscription?.dispose();
+            this._touchStartSubscription?.dispose();
+            this._clickSubscription?.dispose();
+            setTimeout(() => {
+                this._mouseDownSubscription?.dispose();
+                this._touchStartSubscription?.dispose();
+            }, 250);
+        }
+    }
+    /**
+     * @private
+     */
+    getYCoord(e) {
+        let y = 0;
+        let x = 0;
+        if (e instanceof MouseEvent) {
+            y = e.clientY;
+            x = e.clientX;
+        }
+        else if (e instanceof PointerEvent) {
+            y = e.changedTouches[0].clientY;
+            x = e.changedTouches[0].clientX;
+        }
+        return y;
+    }
+};
+__decorate([
+    Property({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SheetElement.prototype, "header", null);
+__decorate([
+    Property({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SheetElement.prototype, "content", null);
+__decorate([
+    Property({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SheetElement.prototype, "icon", null);
+__decorate([
+    Attribute({ type: CssLength }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], SheetElement.prototype, "height", null);
+SheetElement = __decorate([
+    Component({
+        selector: 'mosaik-sheet',
+        template: sheetElementTemplate,
+        themes: {
+            joy: sheetElementJoyStyle,
+            memphis: sheetElementMemphisStyle,
+            cosmopolitan: sheetElementCosmopolitanStyle
+        },
+        imports: [
+            TextElement,
+            IconElement,
+            BackdropElement
+        ]
+    }),
+    __metadata("design:paramtypes", [])
+], SheetElement);
+export { SheetElement };
+//# sourceMappingURL=SheetElement.js.map

package/Controls/Components/Overlays/Sheet/SheetElement.js.map

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

package/Controls/Components/Overlays/Sheet/SheetElementTemplate.d.ts

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

package/Controls/Components/Overlays/Sheet/SheetElementTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Sheet/SheetElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,sBAAsB,CAAC;AAKjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,YAAY,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAuCjF"}

package/Controls/Components/Overlays/Sheet/SheetElementTemplate.js

@@ -0,0 +1,53 @@
+// #region Imports
+import { html } from '../../../../Dom/Html';
+import { styleMap, when } from '../../../Directives/Directives';
+import { Orientation } from '../../../Types/Orientation';
+import { Size } from '../../../Types/Size';
+import { VerticalAlignment } from '../../../Types/VerticalAlignment';
+// #endregion
+/**
+ * The template of the {@link SheetElement}.
+ *
+ * @public
+ */
+export function sheetElementTemplate(e) {
+    return html `
+        ${when(e.hasBackdrop, () => html `
+        <mosaik-backdrop part="backdrop"
+                         ?hidden="${!e.isOpen}"
+                         @click="${() => e.onBackdrop()}"></mosaik-backdrop>
+        `)}
+
+        <div part="root"
+             class="available"
+             style="${styleMap({ maxHeight: e.height })}">
+            <div  class="dialog-body">
+                <div part="heading"
+                     @mousedown="${() => { }}"
+                     @touchstart="${() => { }}">
+                    <div part="thumb"></div>
+                    <div part="header">
+                        ${when(e.icon.trim(), () => html `
+                        <mosaik-icon .data="${e.icon}"
+                                     .size="${Size.Large}"></mosaik-icon>
+                        `)}
+                        <mosaik-stack .orientation="${Orientation.Vertical}"
+                                      .verticalAlignment="${VerticalAlignment.Center}">
+                            <mosaik-text part="headerText"
+                                         .text="${e.header}"></mosaik-text>
+                        </mosaik-stack>
+                    </div>
+                </div>
+                <div part="content">
+                    ${when(e.content.trim(), () => html `
+                    <mosaik-text part="contentText"
+                                 .text="${e.content}"
+                                 .wrap="${true}"></mosaik-text>
+                    `)}
+                    <slot></slot>
+                </div>
+            </div>
+        </div>
+    `;
+}
+//# sourceMappingURL=SheetElementTemplate.js.map

package/Controls/Components/Overlays/Sheet/SheetElementTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Sheet/SheetElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAuB,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAGrE,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAAyB,CAAI;IAC7D,OAAO,IAAI,CAAA;UACL,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;oCAEJ,CAAC,CAAC,CAAC,MAAM;mCACV,GAAG,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE;SAC9C,CAAC;;;;sBAIY,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC;;;mCAGpB,GAAG,EAAE,GAAG,CAAC;oCACR,GAAG,EAAE,GAAG,CAAC;;;0BAGnB,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;8CACV,CAAC,CAAC,IAAI;8CACN,IAAI,CAAC,KAAK;yBAC/B,CAAC;sDAC4B,WAAW,CAAC,QAAQ;4DACd,iBAAiB,CAAC,MAAM;;kDAElC,CAAC,CAAC,MAAM;;;;;sBAKpC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;0CAEb,CAAC,CAAC,OAAO;0CACT,IAAI;qBACzB,CAAC;;;;;KAKjB,CAAC;AACN,CAAC"}