@breadstone/mosaik-elements-angular 0.0.252 → 0.0.254

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 0.0.254 (2026-05-03)
+
+### 🩹 Fixes
+
+- **MessageBoxPortal:** update definition links and add missing styles ([66b0c53414](https://github.com/RueDeRennes/mosaik/commit/66b0c53414))
+
+## 0.0.253 (2026-05-03)
+
+### 🚀 Features
+
+- **MessageBox:** update MessageBoxResult values to strings and add alignment property ([22df7be730](https://github.com/RueDeRennes/mosaik/commit/22df7be730))
+
 ## 0.0.252 (2026-05-03)
 
 This was a version bump only for mosaik-elements-angular to align it with other projects, there were no code changes.

package/fesm2022/mosaik-elements-angular.mjs

@@ -15112,25 +15112,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
-// #region Imports
-// #endregion
-/**
- * @public
- */
-const MESSAGE_BOX_CONFIG = new InjectionToken('MOSAIK_MESSAGE_BOX_CONFIG');
-/**
- * @public
- */
-const MESSAGE_BOX_REF = new InjectionToken('MOSAIK_MESSAGE_BOX_REF');
-/**
- * @public
- */
-const MESSAGE_BOX_REF_DATA = new InjectionToken('MOSAIK_MESSAGE_BOX_REF_DATA');
-/**
- * @public
- */
-const MESSAGE_BOX_BEHAVIORS = new InjectionToken('MOSAIK_MESSAGE_BOX_BEHAVIORS');
-
 var __decorate$4d = (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);
@@ -15233,6 +15214,12 @@ let MessageBoxComponent = class MessageBoxComponent {
      * @public
      */
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    /**
+     * Signal input for the `alignment` property.
+     *
+     * @public
+     */
+    alignment = input(...(ngDevMode ? [undefined, { debugName: "alignment" }] : /* istanbul ignore next */ []));
     /**
      * Signal input for the `formatter` property.
      *
@@ -15394,6 +15381,10 @@ let MessageBoxComponent = class MessageBoxComponent {
             if (iconValue !== undefined) {
                 this._element.icon = iconValue;
             }
+            const alignmentValue = this.alignment();
+            if (alignmentValue !== undefined) {
+                this._element.alignment = alignmentValue;
+            }
             const formatterValue = this.formatter();
             if (formatterValue !== undefined) {
                 this._element.formatter = formatterValue;
@@ -15544,12 +15535,12 @@ let MessageBoxComponent = class MessageBoxComponent {
         this._element[property] = value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: MessageBoxComponent, isStandalone: true, selector: "mosaik-message-box", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, subHeader: { classPropertyName: "subHeader", publicName: "subHeader", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dragging: { classPropertyName: "dragging", publicName: "dragging", isSignal: true, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, offsetY: { classPropertyName: "offsetY", publicName: "offsetY", isSignal: true, isRequired: false, transformFunction: null }, isFullScreen: { classPropertyName: "isFullScreen", publicName: "isFullScreen", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, themeName: { classPropertyName: "themeName", publicName: "themeName", isSignal: true, isRequired: false, transformFunction: null }, animationTarget: { classPropertyName: "animationTarget", publicName: "animationTarget", isSignal: true, isRequired: false, transformFunction: null }, enter: { classPropertyName: "enter", publicName: "enter", isSignal: true, isRequired: false, transformFunction: null }, exit: { classPropertyName: "exit", publicName: "exit", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, pressEscapeToClose: { classPropertyName: "pressEscapeToClose", publicName: "pressEscapeToClose", isSignal: true, isRequired: false, transformFunction: null }, clickOutsideToClose: { classPropertyName: "clickOutsideToClose", publicName: "clickOutsideToClose", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dialogResult: "dialogResult", opened: "opened", closed: "closed", connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: MessageBoxComponent, isStandalone: true, selector: "mosaik-message-box", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, subHeader: { classPropertyName: "subHeader", publicName: "subHeader", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dragging: { classPropertyName: "dragging", publicName: "dragging", isSignal: true, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, offsetY: { classPropertyName: "offsetY", publicName: "offsetY", isSignal: true, isRequired: false, transformFunction: null }, isFullScreen: { classPropertyName: "isFullScreen", publicName: "isFullScreen", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, themeName: { classPropertyName: "themeName", publicName: "themeName", isSignal: true, isRequired: false, transformFunction: null }, animationTarget: { classPropertyName: "animationTarget", publicName: "animationTarget", isSignal: true, isRequired: false, transformFunction: null }, enter: { classPropertyName: "enter", publicName: "enter", isSignal: true, isRequired: false, transformFunction: null }, exit: { classPropertyName: "exit", publicName: "exit", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, pressEscapeToClose: { classPropertyName: "pressEscapeToClose", publicName: "pressEscapeToClose", isSignal: true, isRequired: false, transformFunction: null }, clickOutsideToClose: { classPropertyName: "clickOutsideToClose", publicName: "clickOutsideToClose", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dialogResult: "dialogResult", opened: "opened", closed: "closed", connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 MessageBoxComponent = __decorate$4d([
     ProxyCmp({
         defineCustomElementFn: () => customElements.define('mosaik-message-box', MessageBoxElement),
-        inputs: ['intl', 'header', 'subHeader', 'message', 'buttons', 'icon', 'formatter', 'variant', 'dragging', 'offsetX', 'offsetY', 'isFullScreen', 'isDraggable', 'themeName', 'animationTarget', 'enter', 'exit', 'width', 'height', 'elevation', 'appearance', 'isOpen', 'hasBackdrop', 'pressEscapeToClose', 'clickOutsideToClose', 'closeable', 'dir', 'lang'],
+        inputs: ['intl', 'header', 'subHeader', 'message', 'buttons', 'icon', 'alignment', 'formatter', 'variant', 'dragging', 'offsetX', 'offsetY', 'isFullScreen', 'isDraggable', 'themeName', 'animationTarget', 'enter', 'exit', 'width', 'height', 'elevation', 'appearance', 'isOpen', 'hasBackdrop', 'pressEscapeToClose', 'clickOutsideToClose', 'closeable', 'dir', 'lang'],
         methods: ['open', 'close', 'play', 'onEnterAnimation', 'onExitAnimation', 'assignToSlot', 'getSlotAssignments', 'getSlotAssignmentsOf', 'getSlotContent', 'hasSlotContent', 'hasSlot', 'onSlotChanges', 'adoptStyle', 'on', 'off', 'emit', 'requestUpdate']
     }),
     __metadata$4d("design:paramtypes", [])
@@ -15562,7 +15553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>'
                 }]
-        }], ctorParameters: () => [], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], subHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "subHeader", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dragging: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragging", required: false }] }], offsetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetX", required: false }] }], offsetY: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetY", required: false }] }], isFullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFullScreen", required: false }] }], isDraggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDraggable", required: false }] }], themeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeName", required: false }] }], animationTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationTarget", required: false }] }], enter: [{ type: i0.Input, args: [{ isSignal: true, alias: "enter", required: false }] }], exit: [{ type: i0.Input, args: [{ isSignal: true, alias: "exit", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], pressEscapeToClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressEscapeToClose", required: false }] }], clickOutsideToClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickOutsideToClose", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], dialogResult: [{ type: i0.Output, args: ["dialogResult"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], connected: [{ type: i0.Output, args: ["connected"] }], disconnected: [{ type: i0.Output, args: ["disconnected"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+        }], ctorParameters: () => [], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], subHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "subHeader", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dragging: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragging", required: false }] }], offsetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetX", required: false }] }], offsetY: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetY", required: false }] }], isFullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFullScreen", required: false }] }], isDraggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDraggable", required: false }] }], themeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeName", required: false }] }], animationTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationTarget", required: false }] }], enter: [{ type: i0.Input, args: [{ isSignal: true, alias: "enter", required: false }] }], exit: [{ type: i0.Input, args: [{ isSignal: true, alias: "exit", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], pressEscapeToClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressEscapeToClose", required: false }] }], clickOutsideToClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickOutsideToClose", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], dialogResult: [{ type: i0.Output, args: ["dialogResult"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], connected: [{ type: i0.Output, args: ["connected"] }], disconnected: [{ type: i0.Output, args: ["disconnected"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 /**
  * @public
  */
@@ -15585,6 +15576,25 @@ function provideMessageBoxComponent(config, intl) {
     return makeEnvironmentProviders(providers);
 }
 
+// #region Imports
+// #endregion
+/**
+ * @public
+ */
+const MESSAGE_BOX_CONFIG = new InjectionToken('MOSAIK_MESSAGE_BOX_CONFIG');
+/**
+ * @public
+ */
+const MESSAGE_BOX_REF = new InjectionToken('MOSAIK_MESSAGE_BOX_REF');
+/**
+ * @public
+ */
+const MESSAGE_BOX_REF_DATA = new InjectionToken('MOSAIK_MESSAGE_BOX_REF_DATA');
+/**
+ * @public
+ */
+const MESSAGE_BOX_BEHAVIORS = new InjectionToken('MOSAIK_MESSAGE_BOX_BEHAVIORS');
+
 // #region Imports
 // #endregion
 /**
@@ -15637,7 +15647,7 @@ class MessageBoxPortalComponent extends PortalComponent$1 {
         return this._config;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MessageBoxPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: MessageBoxPortalComponent, isStandalone: true, selector: "mosaik-message-box-portal", host: { classAttribute: "message-box-portal" }, viewQueries: [{ propertyName: "_portal", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "_component", first: true, predicate: MessageBoxComponent, descendants: true, static: true }], exportAs: ["mosaikMessageBoxPortal"], usesInheritance: true, ngImport: i0, template: "<mosaik-message-box>\n    <ng-template cdkPortalOutlet></ng-template>\n</mosaik-message-box>", dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MessageBoxComponent, selector: "mosaik-message-box", inputs: ["intl", "header", "subHeader", "message", "buttons", "icon", "formatter", "variant", "dragging", "offsetX", "offsetY", "isFullScreen", "isDraggable", "themeName", "animationTarget", "enter", "exit", "width", "height", "elevation", "appearance", "isOpen", "hasBackdrop", "pressEscapeToClose", "clickOutsideToClose", "closeable", "dir", "lang"], outputs: ["dialogResult", "opened", "closed", "connected", "disconnected", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: MessageBoxPortalComponent, isStandalone: true, selector: "mosaik-message-box-portal", host: { classAttribute: "message-box-portal" }, viewQueries: [{ propertyName: "_portal", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "_component", first: true, predicate: MessageBoxComponent, descendants: true, static: true }], exportAs: ["mosaikMessageBoxPortal"], usesInheritance: true, ngImport: i0, template: "<mosaik-message-box>\n    <ng-template cdkPortalOutlet></ng-template>\n</mosaik-message-box>", styles: [":host{width:100vw;height:100vh;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition-property:backdrop-filter}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MessageBoxComponent, selector: "mosaik-message-box", inputs: ["intl", "header", "subHeader", "message", "buttons", "icon", "alignment", "formatter", "variant", "dragging", "offsetX", "offsetY", "isFullScreen", "isDraggable", "themeName", "animationTarget", "enter", "exit", "width", "height", "elevation", "appearance", "isOpen", "hasBackdrop", "pressEscapeToClose", "clickOutsideToClose", "closeable", "dir", "lang"], outputs: ["dialogResult", "opened", "closed", "connected", "disconnected", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MessageBoxPortalComponent, decorators: [{
             type: Component,
@@ -15646,7 +15656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                     }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         CdkPortalOutlet,
                         MessageBoxComponent
-                    ], template: "<mosaik-message-box>\n    <ng-template cdkPortalOutlet></ng-template>\n</mosaik-message-box>" }]
+                    ], template: "<mosaik-message-box>\n    <ng-template cdkPortalOutlet></ng-template>\n</mosaik-message-box>", styles: [":host{width:100vw;height:100vh;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition-property:backdrop-filter}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _portal: [{
                 type: ViewChild,
                 args: [CdkPortalOutlet, { static: true }]