@breadstone/mosaik-elements-foundation 0.0.206 → 0.0.209

package/Controls/Components/Overlays/Drawer/DrawerElementTemplate.js

@@ -1,8 +1,7 @@
 // #region Imports
 import { html } from '../../../../Dom/Html';
-import { Icons } from '../../../../Resources/Icons';
+import { RendererServiceLocator } from '../../../../Dom/Renderer';
 import { styleMap, when } from '../../../Directives/Directives';
-import { Appearance } from '../../../Types/Appearance';
 // #endregion
 /**
  * The template of the {@link DrawerElement}.
@@ -10,6 +9,15 @@ import { Appearance } from '../../../Types/Appearance';
  * @public
  */
 export function drawerElementTemplate(e) {
+    const setHost = (host, attribute, hasAttribute) => {
+        if (hasAttribute) {
+            RendererServiceLocator.current.setAttribute(host, attribute);
+        }
+        else {
+            RendererServiceLocator.current.removeAttribute(host, attribute);
+        }
+        return hasAttribute;
+    };
     const getSize = () => {
         const size = {
             height: undefined,
@@ -19,11 +27,11 @@ export function drawerElementTemplate(e) {
             case 'left':
             case 'right':
                 size.height = '100%';
-                size.width = e.width;
+                size.width = typeof e.width === 'number' ? `${e.width}px` : e.width;
                 break;
             case 'top':
             case 'bottom':
-                size.height = e.height;
+                size.height = typeof e.height === 'number' ? `${e.height}px` : e.height;
                 size.width = '100%';
                 break;
         }
@@ -31,15 +39,17 @@ export function drawerElementTemplate(e) {
     };
     const style = {
         'width': getSize().width,
-        'max-width': getSize().width,
+        'max-width': `min(${getSize().width}, 100vw)`,
         'min-height': getSize().height,
         'height': getSize().height
     };
+    const hasCustomHeader = e.hasSlotContent('header');
+    const hasHeaderContent = Boolean(e.header.trim() || e.subHeader.trim() || e.closeable);
     return html `
         ${when(e.hasBackdrop, () => html `
         <mosaik-backdrop part="backdrop"
                          ?hidden="${!e.isOpen}"
-                         @click="${() => e.close()}"></mosaik-backdrop>
+                         @click="${() => e.onBackdrop()}"></mosaik-backdrop>
         `)}
         <div part="root"
              style="${styleMap(style)}">
@@ -47,21 +57,33 @@ export function drawerElementTemplate(e) {
             <mosaik-elevation part="elevation"
                               .weigh="${e.elevation}"></mosaik-elevation>
             `)}
-            <div part="header">
-                ${when(e.closeable || e.header.trim() || e.subHeader.trim(), () => html `
-                <mosaik-toolbar .title="${e.header}"
-                                .subTitle="${e.subHeader}">
-                    <mosaik-button slot="end"
-                                   .icon="${Icons.close}"
-                                   .appearance="${Appearance.Plain}"
-                                   @click="${() => e.close()}"></mosaik-button>
-                </mosaik-toolbar>
-                `)}
+
+            <div part="header"
+                 ?hidden="${!setHost(e, 'has-header', hasCustomHeader || hasHeaderContent)}">
+                ${when(hasCustomHeader, () => html `
+                <slot name="header"></slot>
+                `, () => when(hasHeaderContent, () => html `
+                <mosaik-drawer-header>
+                    <mosaik-drawer-header-text slot="header"
+                                               .text="${e.header.trim()}"
+                                               .dir="${e.dir}"></mosaik-drawer-header-text>
+                    <mosaik-drawer-header-sub-text slot="subHeader"
+                                                   .text="${e.subHeader.trim()}"
+                                                   .dir="${e.dir}"></mosaik-drawer-header-sub-text>
+                    ${when(e.closeable, () => html `
+                    <mosaik-dismiss slot="suffix"
+                                    .appearance="${'plain'}"
+                                    .size="${'small'}"
+                                    @click="${() => e.close()}"></mosaik-dismiss>
+                    `)}
+                </mosaik-drawer-header>
+                `))}
             </div>
+
             <div part="main">
                 <slot></slot>
             </div>
-             <div part="footer">
+            <div part="footer">
                 <slot name="footer"></slot>
             </div>
         </div>

package/Controls/Components/Overlays/Drawer/DrawerElementTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAGvD,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAA0B,CAAI;IAC/D,MAAM,OAAO,GAAG,GAAQ,EAAE;QACtB,MAAM,IAAI,GAAQ;YACd,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;SACnB,CAAC;QACF,QAAQ,CAAC,CAAC,QAAQ,EAAE,CAAC;YACjB,KAAK,MAAM,CAAC;YACZ,KAAK,OAAO;gBACR,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;gBACrB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;gBACrB,MAAM;YACV,KAAK,KAAK,CAAC;YACX,KAAK,QAAQ;gBACT,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;gBACvB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;gBACpB,MAAM;QACd,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG;QACV,OAAO,EAAE,OAAO,EAAE,CAAC,KAAK;QACxB,WAAW,EAAE,OAAO,EAAE,CAAC,KAAK;QAC5B,YAAY,EAAE,OAAO,EAAE,CAAC,MAAM;QAC9B,QAAQ,EAAE,OAAO,EAAE,CAAC,MAAM;KAC7B,CAAC;IAEF,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,KAAK,EAAE;SACzC,CAAC;;sBAEY,QAAQ,CAAC,KAAK,CAAC;cACvB,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;wCAEF,CAAC,CAAC,SAAS;aACtC,CAAC;;kBAEI,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;0CAC7C,CAAC,CAAC,MAAM;6CACL,CAAC,CAAC,SAAS;;4CAEZ,KAAK,CAAC,KAAK;kDACL,UAAU,CAAC,KAAK;6CACrB,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE;;iBAE3C,CAAC;;;;;;;;;KASb,CAAC;AACN,CAAC"}
+{"version":3,"file":"DrawerElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAGhE,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAA0B,CAAI;IAC/D,MAAM,OAAO,GAAG,CAAC,IAAiB,EAAE,SAAiB,EAAE,YAAqB,EAAE,EAAE;QAC5E,IAAI,YAAY,EAAE,CAAC;YACf,sBAAsB,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;QACjE,CAAC;aAAM,CAAC;YACJ,sBAAsB,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;QACpE,CAAC;QAED,OAAO,YAAY,CAAC;IACxB,CAAC,CAAC;IACF,MAAM,OAAO,GAAG,GAA8D,EAAE;QAC5E,MAAM,IAAI,GAA8D;YACpE,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;SACnB,CAAC;QACF,QAAQ,CAAC,CAAC,QAAQ,EAAE,CAAC;YACjB,KAAK,MAAM,CAAC;YACZ,KAAK,OAAO;gBACR,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;gBACrB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;gBACpE,MAAM;YACV,KAAK,KAAK,CAAC;YACX,KAAK,QAAQ;gBACT,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;gBACxE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;gBACpB,MAAM;QACd,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG;QACV,OAAO,EAAE,OAAO,EAAE,CAAC,KAAK;QACxB,WAAW,EAAE,OAAO,OAAO,EAAE,CAAC,KAAK,UAAU;QAC7C,YAAY,EAAE,OAAO,EAAE,CAAC,MAAM;QAC9B,QAAQ,EAAE,OAAO,EAAE,CAAC,MAAM;KAC7B,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;IACnD,MAAM,gBAAgB,GAAG,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC;IAEvF,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;;sBAEY,QAAQ,CAAC,KAAK,CAAC;cACvB,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;wCAEF,CAAC,CAAC,SAAS;aACtC,CAAC;;;4BAGc,CAAC,OAAO,CAAC,CAAC,EAAE,YAAY,EAAE,eAAe,IAAI,gBAAgB,CAAC;kBACxE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;iBAEjC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;wDAGF,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE;uDAChB,CAAC,CAAC,GAAG;;4DAEA,CAAC,CAAC,SAAS,CAAC,IAAI,EAAE;2DACnB,CAAC,CAAC,GAAG;sBAC1C,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;mDAEC,OAAO;6CACb,OAAO;8CACN,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE;qBACxC,CAAC;;iBAEL,CAAC,CAAC;;;;;;;;;;KAUd,CAAC;AACN,CAAC"}

package/Controls/Components/Overlays/Drawer/DrawerFooterElement.d.ts

@@ -0,0 +1,44 @@
+import { ISlottable } from '../../../Behaviors/Slottable';
+import { CustomElement } from '../../Abstracts/CustomElement';
+import type { IDrawerFooterElementProps } from './IDrawerFooterElementProps';
+declare const DrawerFooterElement_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;
+/**
+ * The `{@link DrawerFooterElement}` element.
+ *
+ * @slot - The default content slot.
+ * @slot prefix - The prefix slot.
+ * @slot suffix - The suffix slot.
+ *
+ * @public
+ */
+export declare class DrawerFooterElement extends DrawerFooterElement_base implements IDrawerFooterElementProps, ISlottable {
+    /**
+     * @public
+     */
+    constructor();
+    /**
+     * Returns the `{@link is}` property.
+     * The `{@link is}` property represents natural name of this element.
+     *
+     * @public
+     * @static
+     * @readonly
+     */
+    static get is(): string;
+}
+/**
+* @public
+*/
+export declare namespace DrawerFooterElement {
+    type Props = IDrawerFooterElementProps;
+}
+/**
+ * @public
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'mosaik-drawer-footer': DrawerFooterElement;
+    }
+}
+export {};
+//# sourceMappingURL=DrawerFooterElement.d.ts.map

package/Controls/Components/Overlays/Drawer/DrawerFooterElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerFooterElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerFooterElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAErE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;;AAQ7E;;;;;;;;GAQG;AACH,qBAca,mBACT,SAAQ,wBACR,YAAW,yBAAyB,EAAE,UAAU;IAIhD;;OAEG;;IASH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;CAIJ;AAED;;EAEE;AACF,yBAAiB,mBAAmB,CAAC;IACjC,KAAY,KAAK,GAAG,yBAAyB,CAAC;CACjD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,sBAAsB,EAAE,mBAAmB,CAAC;KAC/C;CACJ"}

package/Controls/Components/Overlays/Drawer/DrawerFooterElement.js

@@ -0,0 +1,68 @@
+// #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 { Slottable } from '../../../Behaviors/Slottable';
+import { Component } from '../../../Decorators/ComponentDecorator';
+import { CustomElement } from '../../Abstracts/CustomElement';
+import { drawerFooterElementTemplate } from './DrawerFooterElementTemplate';
+import { drawerFooterElementJoyStyle } from './Themes/DrawerFooterElement.Joy';
+import { drawerFooterElementMemphisStyle } from './Themes/DrawerFooterElement.Memphis';
+import { drawerFooterElementCosmopolitanStyle } from './Themes/DrawerFooterElement.Cosmopolitan';
+import { Themeable } from '../../../Behaviors/Themeable';
+// #endregion
+/**
+ * The `{@link DrawerFooterElement}` element.
+ *
+ * @slot - The default content slot.
+ * @slot prefix - The prefix slot.
+ * @slot suffix - The suffix slot.
+ *
+ * @public
+ */
+let DrawerFooterElement = class DrawerFooterElement extends Themeable(Slottable(CustomElement)) {
+    // #region Ctor
+    /**
+     * @public
+     */
+    constructor() {
+        super();
+    }
+    // #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-drawer-footer';
+    }
+};
+DrawerFooterElement = __decorate([
+    Component({
+        selector: 'mosaik-drawer-footer',
+        template: drawerFooterElementTemplate,
+        themes: {
+            joy: drawerFooterElementJoyStyle,
+            memphis: drawerFooterElementMemphisStyle,
+            cosmopolitan: drawerFooterElementCosmopolitanStyle
+        },
+        host: {
+            slot: 'footer'
+        },
+        imports: []
+    }),
+    __metadata("design:paramtypes", [])
+], DrawerFooterElement);
+export { DrawerFooterElement };
+//# sourceMappingURL=DrawerFooterElement.js.map

package/Controls/Components/Overlays/Drawer/DrawerFooterElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerFooterElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerFooterElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAc,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAE5E,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AACvF,OAAO,EAAE,oCAAoC,EAAE,MAAM,2CAA2C,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,aAAa;AAEb;;;;;;;;GAQG;AAeI,IAAM,mBAAmB,GAAzB,MAAM,mBACT,SAAQ,SAAS,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IAG3C,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;IACZ,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,sBAAsB,CAAC;IAClC,CAAC;CAIJ,CAAA;AA/BY,mBAAmB;IAd/B,SAAS,CAAC;QACP,QAAQ,EAAE,sBAAsB;QAChC,QAAQ,EAAE,2BAA2B;QACrC,MAAM,EAAE;YACJ,GAAG,EAAE,2BAA2B;YAChC,OAAO,EAAE,+BAA+B;YACxC,YAAY,EAAE,oCAAoC;SACrD;QACD,IAAI,EAAE;YACF,IAAI,EAAE,QAAQ;SACjB;QACD,OAAO,EAAE,EACR;KACJ,CAAC;;GACW,mBAAmB,CA+B/B"}

package/Controls/Components/Overlays/Drawer/DrawerFooterElementTemplate.d.ts

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

package/Controls/Components/Overlays/Drawer/DrawerFooterElementTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerFooterElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerFooterElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAIjE;;;;GAIG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,mBAAmB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAI/F"}

package/Controls/Components/Overlays/Drawer/DrawerFooterElementTemplate.js

@@ -0,0 +1,14 @@
+// #region Imports
+import { html } from '../../../../Dom/Html';
+// #endregion
+/**
+ * The template of the {@link DrawerFooterElement}.
+ *
+ * @public
+ */
+export function drawerFooterElementTemplate(e) {
+    return html `
+        <slot></slot>
+    `;
+}
+//# sourceMappingURL=DrawerFooterElementTemplate.js.map

package/Controls/Components/Overlays/Drawer/DrawerFooterElementTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerFooterElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerFooterElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AAGjE,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,2BAA2B,CAAgC,CAAI;IAC3E,OAAO,IAAI,CAAA;;KAEV,CAAC;AACN,CAAC"}

package/Controls/Components/Overlays/Drawer/DrawerHeaderElement.d.ts

@@ -0,0 +1,63 @@
+import { ISlottable } from '../../../Behaviors/Slottable';
+import { CustomElement } from '../../Abstracts/CustomElement';
+import type { IDrawerHeaderElementProps } from './IDrawerHeaderElementProps';
+declare const DrawerHeaderElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/TextFormattable").ITextFormattableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
+/**
+ * The `{@link DrawerHeaderElement}` element.
+ *
+ * @slot - The default slot.
+ * @slot prefix - The prefix slot.
+ * @slot header - The header slot.
+ * @slot subHeader - The subHeader slot.
+ * @slot suffix - The suffix slot.
+ *
+ * @public
+ */
+export declare class DrawerHeaderElement extends DrawerHeaderElement_base implements IDrawerHeaderElementProps, ISlottable {
+    private _text;
+    private _subText;
+    /**
+     * @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 `text` property.
+     *
+     * @public
+     */
+    get text(): string;
+    set text(value: string);
+    /**
+     * Gets or sets the `subText` property.
+     *
+     * @public
+     */
+    get subText(): string;
+    set subText(value: string);
+    onApplyTemplate(): void;
+}
+/**
+* @public
+*/
+export declare namespace DrawerHeaderElement {
+    type Props = IDrawerHeaderElementProps;
+}
+/**
+ * @public
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'mosaik-drawer-header': DrawerHeaderElement;
+    }
+}
+export {};
+//# sourceMappingURL=DrawerHeaderElement.d.ts.map

package/Controls/Components/Overlays/Drawer/DrawerHeaderElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerHeaderElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerHeaderElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAIrE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;;AAQ7E;;;;;;;;;;GAUG;AACH,qBAgBa,mBACT,SAAQ,wBACR,YAAW,yBAAyB,EAAE,UAAU;IAIhD,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAS;IAMzB;;OAEG;;IAYH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAK5B;IAED;;;;OAIG;IACH,IACW,OAAO,IAAI,MAAM,CAE3B;IACD,IAAW,OAAO,CAAC,KAAK,EAAE,MAAM,EAK/B;IAMe,eAAe,IAAI,IAAI;CAM1C;AAED;;EAEE;AACF,yBAAiB,mBAAmB,CAAC;IACjC,KAAY,KAAK,GAAG,yBAAyB,CAAC;CACjD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,sBAAsB,EAAE,mBAAmB,CAAC;KAC/C;CACJ"}

package/Controls/Components/Overlays/Drawer/DrawerHeaderElement.js

@@ -0,0 +1,126 @@
+// #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 { Slottable } from '../../../Behaviors/Slottable';
+import { TextFormattable } from '../../../Behaviors/TextFormattable';
+import { Component } from '../../../Decorators/ComponentDecorator';
+import { Property } from '../../../Decorators/PropertyDecorator';
+import { CustomElement } from '../../Abstracts/CustomElement';
+import { drawerHeaderElementTemplate } from './DrawerHeaderElementTemplate';
+import { DrawerHeaderSubTextElement } from './DrawerHeaderSubTextElement';
+import { DrawerHeaderTextElement } from './DrawerHeaderTextElement';
+import { drawerHeaderElementJoyStyle } from './Themes/DrawerHeaderElement.Joy';
+import { drawerHeaderElementMemphisStyle } from './Themes/DrawerHeaderElement.Memphis';
+import { drawerHeaderElementCosmopolitanStyle } from './Themes/DrawerHeaderElement.Cosmopolitan';
+import { Themeable } from '../../../Behaviors/Themeable';
+// #endregion
+/**
+ * The `{@link DrawerHeaderElement}` element.
+ *
+ * @slot - The default slot.
+ * @slot prefix - The prefix slot.
+ * @slot header - The header slot.
+ * @slot subHeader - The subHeader slot.
+ * @slot suffix - The suffix slot.
+ *
+ * @public
+ */
+let DrawerHeaderElement = class DrawerHeaderElement extends Themeable(TextFormattable(Slottable(CustomElement))) {
+    // #region Fields
+    _text;
+    _subText;
+    // #endregion
+    // #region Ctor
+    /**
+     * @public
+     */
+    constructor() {
+        super();
+        this._text = '';
+        this._subText = '';
+    }
+    // #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-drawer-header';
+    }
+    /**
+     * Gets or sets the `text` property.
+     *
+     * @public
+     */
+    get text() {
+        return this._text;
+    }
+    set text(value) {
+        if (this._text !== value) {
+            this._text = value;
+            this.requestUpdate('text');
+        }
+    }
+    /**
+     * Gets or sets the `subText` property.
+     *
+     * @public
+     */
+    get subText() {
+        return this._subText;
+    }
+    set subText(value) {
+        if (this._subText !== value) {
+            this._subText = value;
+            this.requestUpdate('subText');
+        }
+    }
+    // #endregion
+    // #region Methods
+    onApplyTemplate() {
+        super.onApplyTemplate();
+    }
+};
+__decorate([
+    Property({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], DrawerHeaderElement.prototype, "text", null);
+__decorate([
+    Property({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], DrawerHeaderElement.prototype, "subText", null);
+DrawerHeaderElement = __decorate([
+    Component({
+        selector: 'mosaik-drawer-header',
+        template: drawerHeaderElementTemplate,
+        themes: {
+            joy: drawerHeaderElementJoyStyle,
+            memphis: drawerHeaderElementMemphisStyle,
+            cosmopolitan: drawerHeaderElementCosmopolitanStyle
+        },
+        host: {
+            slot: 'header'
+        },
+        imports: [
+            DrawerHeaderTextElement,
+            DrawerHeaderSubTextElement
+        ]
+    }),
+    __metadata("design:paramtypes", [])
+], DrawerHeaderElement);
+export { DrawerHeaderElement };
+//# sourceMappingURL=DrawerHeaderElement.js.map

package/Controls/Components/Overlays/Drawer/DrawerHeaderElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerHeaderElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerHeaderElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAc,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AACvF,OAAO,EAAE,oCAAoC,EAAE,MAAM,2CAA2C,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,aAAa;AAEb;;;;;;;;;;GAUG;AAiBI,IAAM,mBAAmB,GAAzB,MAAM,mBACT,SAAQ,SAAS,CAAC,eAAe,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;IAG5D,iBAAiB;IAET,KAAK,CAAS;IACd,QAAQ,CAAS;IAEzB,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;IACvB,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,sBAAsB,CAAC;IAClC,CAAC;IAED;;;;OAIG;IACH,IACW,IAAI;QACX,OAAO,IAAI,CAAC,KAAK,CAAC;IACtB,CAAC;IACD,IAAW,IAAI,CAAC,KAAa;QACzB,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC/B,CAAC;IACL,CAAC;IAED;;;;OAIG;IACH,IACW,OAAO;QACd,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IACD,IAAW,OAAO,CAAC,KAAa;QAC5B,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAClC,CAAC;IACL,CAAC;IAED,aAAa;IAEb,kBAAkB;IAEF,eAAe;QAC3B,KAAK,CAAC,eAAe,EAAE,CAAC;IAC5B,CAAC;CAIJ,CAAA;AArCG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;+CAG1B;AAaD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;kDAG1B;AA/DQ,mBAAmB;IAhB/B,SAAS,CAAC;QACP,QAAQ,EAAE,sBAAsB;QAChC,QAAQ,EAAE,2BAA2B;QACrC,MAAM,EAAE;YACJ,GAAG,EAAE,2BAA2B;YAChC,OAAO,EAAE,+BAA+B;YACxC,YAAY,EAAE,oCAAoC;SACrD;QACD,IAAI,EAAE;YACF,IAAI,EAAE,QAAQ;SACjB;QACD,OAAO,EAAE;YACL,uBAAuB;YACvB,0BAA0B;SAC7B;KACJ,CAAC;;GACW,mBAAmB,CAiF/B"}

package/Controls/Components/Overlays/Drawer/DrawerHeaderElementTemplate.d.ts

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

package/Controls/Components/Overlays/Drawer/DrawerHeaderElementTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerHeaderElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerHeaderElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAKjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAIjE;;;;GAIG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,mBAAmB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAqC/F"}

package/Controls/Components/Overlays/Drawer/DrawerHeaderElementTemplate.js

@@ -0,0 +1,48 @@
+// #region Imports
+import { html } from '../../../../Dom/Html';
+import { RendererServiceLocator } from '../../../../Dom/Renderer';
+import { queryShadow } from '../../../Directives/QueryShadow';
+import { setEmpty } from '../../../Directives/SetEmpty';
+// #endregion
+/**
+ * The template of the {@link DrawerHeaderElement}.
+ *
+ * @public
+ */
+export function drawerHeaderElementTemplate(e) {
+    const setHost = (host, attribute, hasAttribute) => {
+        if (hasAttribute) {
+            RendererServiceLocator.current.setAttribute(host, attribute);
+        }
+        else {
+            RendererServiceLocator.current.removeAttribute(host, attribute);
+        }
+        return hasAttribute;
+    };
+    const handleChanged = (x, prop, slot) => {
+        if (x.detail.propertyName === prop) {
+            const el = queryShadow(e, '[part="heading"]', true);
+            setEmpty(el.parentElement, e.hasSlotContent(slot));
+            setHost(e, `has-${slot}`, e.hasSlotContent(slot));
+        }
+    };
+    return html `
+        <slot name="prefix"></slot>
+        <div part="heading">
+            <slot name="header"
+                  @changed="${(x) => handleChanged(x, 'text', 'header')}">
+                <mosaik-drawer-header-text .text="${e.text.trim()}"
+                                           .formatter="${e.formatter}"
+                                           .dir="${e.dir}"></mosaik-drawer-header-text>
+            </slot>
+            <slot name="subHeader"
+                  @changed="${(x) => handleChanged(x, 'text', 'subHeader')}">
+                <mosaik-drawer-header-sub-text .text="${e.subText.trim()}"
+                                               .formatter="${e.formatter}"
+                                               .dir="${e.dir}"></mosaik-drawer-header-sub-text>
+            </slot>
+        </div>
+        <slot name="suffix"></slot>
+    `;
+}
+//# sourceMappingURL=DrawerHeaderElementTemplate.js.map

package/Controls/Components/Overlays/Drawer/DrawerHeaderElementTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerHeaderElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerHeaderElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAIxD,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,2BAA2B,CAAgC,CAAI;IAC3E,MAAM,OAAO,GAAG,CAAC,IAAiB,EAAE,SAAiB,EAAE,YAAqB,EAAE,EAAE;QAC5E,IAAI,YAAY,EAAE,CAAC;YACf,sBAAsB,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;QACjE,CAAC;aAAM,CAAC;YACJ,sBAAsB,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;QACpE,CAAC;QAED,OAAO,YAAY,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAwB,EAAE,IAAY,EAAE,IAAY,EAAE,EAAE;QAC3E,IAAI,CAAC,CAAC,MAAM,CAAC,YAAY,KAAK,IAAI,EAAE,CAAC;YACjC,MAAM,EAAE,GAAG,WAAW,CAAc,CAAC,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAC;YACjE,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;YACnD,OAAO,CAAC,CAAC,EAAE,OAAO,IAAI,EAAE,EAAE,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;QACtD,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;;;;8BAIe,CAAC,CAAwB,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC;oDAC1C,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE;yDACR,CAAC,CAAC,SAAS;mDACjB,CAAC,CAAC,GAAG;;;8BAG1B,CAAC,CAAwB,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC;wDACzC,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE;6DACX,CAAC,CAAC,SAAS;uDACjB,CAAC,CAAC,GAAG;;;;KAIvD,CAAC;AACN,CAAC"}

package/Controls/Components/Overlays/Drawer/DrawerHeaderSubTextElement.d.ts

@@ -0,0 +1,53 @@
+import { CustomElement } from '../../Abstracts/CustomElement';
+import type { IDrawerHeaderSubTextElementProps } from './IDrawerHeaderSubTextElementProps';
+declare const DrawerHeaderSubTextElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/TextFormattable").ITextFormattableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
+/**
+ * Drawer Header Sub Text - The sub heading or label within a drawer component.
+ *
+ * @element mosaik-drawer-header-sub-text
+ *
+ * @public
+ */
+export declare class DrawerHeaderSubTextElement extends DrawerHeaderSubTextElement_base implements IDrawerHeaderSubTextElementProps {
+    private _text;
+    /**
+     * @public
+     */
+    constructor();
+    /**
+     * Returns the `is` property.
+     *
+     * @public
+     * @static
+     * @readonly
+    */
+    static get is(): string;
+    /**
+     * Gets or sets the `text` property.
+     *
+     * @public
+     */
+    get text(): string;
+    set text(value: string);
+    /**
+     * @protected
+     * @override
+     */
+    protected onApplyTemplate(): void;
+}
+/**
+ * @public
+ */
+export declare namespace DrawerHeaderSubTextElement {
+    type Props = IDrawerHeaderSubTextElementProps;
+}
+/**
+ * @public
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'mosaik-drawer-header-sub-text': DrawerHeaderSubTextElement;
+    }
+}
+export {};
+//# sourceMappingURL=DrawerHeaderSubTextElement.d.ts.map

package/Controls/Components/Overlays/Drawer/DrawerHeaderSubTextElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerHeaderSubTextElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerHeaderSubTextElement.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9D,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,oCAAoC,CAAC;;AAQ3F;;;;;;GAMG;AACH,qBAea,0BACT,SAAQ,+BACR,YAAW,gCAAgC;IAI3C,OAAO,CAAC,KAAK,CAAS;IAMtB;;OAEG;;IAWH;;;;;;MAME;IACF,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAK5B;IAMD;;;OAGG;cACgB,eAAe,IAAI,IAAI;CAkB7C;AAED;;GAEG;AACH,yBAAiB,0BAA0B,CAAC;IACxC,KAAY,KAAK,GAAG,gCAAgC,CAAC;CACxD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,+BAA+B,EAAE,0BAA0B,CAAC;KAC/D;CACJ"}